efunbox-mobile-8/pages/buy/buy.js

/* 
 * 
*/
import React, { Component } from "react";
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    FlatList,
    TouchableHighlight,
    DeviceEventEmitter,
    ScrollView,
    Modal,
    Animated,
} from "react-native";
import BasePage from "../BasePage";
import Dimensions from '../utils/dimensions';
import TopicTitle from '../components/TopicTitle';
import CourseTitle from "../components/CourseTitle";

export default class Buy extends BasePage {
    state = {
        shopData: [
            { title: '1个月', originPrice: '199', price: '49', },
            { title: '12个月', originPrice: '499', price: '199' }
        ],
        currentTapindex: 0,
        slideAnim: new Animated.Value(-150),
        ifDialogShow: false,
        payType: 1
    };
    itemTap = (index) => {
        this.setState({
            currentTapindex: index
        })
    }
    renderItem = (item, index) => {
        return (
            <TouchableOpacity style={this.state.currentTapindex === index ? styles.itemWrapperTap : styles.itemWrapperNormal} onPress={() => { this.itemTap(index) }} key={index}>
                <Text style={this.state.currentTapindex === index ? styles.timeLengthTap : styles.timeLength}>{item.title}</Text>
                <Text style={this.state.currentTapindex === index ? styles.priceTap : styles.price}>￥{item.price}元</Text>
                <Text style={this.state.currentTapindex === index ? styles.originPriceTap : styles.originPrice}>原价:￥{item.originPrice}</Text>
            </TouchableOpacity>
        )
    }
    dialogComeout = (index) => {
        if (index) {
            this.setState({
                ifDialogShow: true
            }, () => {
                Animated.timing(
                    this.state.slideAnim,
                    {
                        toValue: 0,
                        duration: 300,
                    }
                ).start();
            })
        } else {
            Animated.timing(
                this.state.slideAnim,
                {
                    toValue: -150,
                    duration: 200,
                }
            ).start();
            setTimeout(() => {
                this.setState({
                    ifDialogShow: false
                })
            }, 210)
        }

    }
    setPayMethod = (type) => {
        this.setState({
            payType: type
        },()=>{
            setTimeout(() => {
                this.dialogComeout(false)
            }, 100)
            
        })
    }
    render() {
        return (
            <View style={{ flex: 1 }}>
                <View
                    style={{
                        height: 30,
                        marginTop: 30
                    }}
                >
                    <CourseTitle
                        width={this.getWindowWidth()}
                        title="VIP购买"
                        lefttype={1}
                        textcolor={"#231F20"}
                        backPress={() => this.goBack()}
                    // backPress={() => alert("左侧按钮")}
                    />
                </View>
                <View style={styles.top}>
                    <Text style={styles.title}>套餐选择</Text>
                    <View>
                        {this.state.shopData.map((item, index) => this.renderItem(item, index))}
                    </View>
                </View>
                <TouchableOpacity style={styles.payment} onPress={() => this.dialogComeout(true)}>
                    <Text style={styles.left}>支付方式</Text>
                    <View style={styles.right}>
                        <Text style={styles.method}>微信支付</Text>
                        <Image source={require('../images/common/arrowRight.png')} />
                    </View>
                </TouchableOpacity>
                <View style={styles.bottom}>
                    <Text style={styles.bottomLeft}>￥{this.state.shopData[this.state.currentTapindex].price}元</Text>
                    <TouchableOpacity style={styles.bottomRight}>
                        <Text style={styles.bottomRightText}>支付</Text>
                    </TouchableOpacity>
                </View>
                {
                    this.state.ifDialogShow
                        ?
                        <TouchableHighlight
                            onPress={() => { this.dialogComeout(false) }}
                            style={{ ...styles.dialog }}
                            underlayColor={0.1}
                        >
                            <Animated.View
                                style={{ ...styles.payMethod, bottom: this.state.slideAnim }}
                                onPress={() => { alert(12311) }}
                            >
                                <Text style={styles.payText}>选择支付方式</Text>
                                <TouchableOpacity activeOpacity={0.9} style={styles.payDialog} onPress={() => this.setPayMethod(1)}>
                                    <View style={styles.dialogRow}>
                                        <Image style={styles.payIcon} source={require('../images/common/wxPay.png')} />
                                        <Text>微信支付</Text>
                                    </View>
                                    {
                                        this.state.payType === 1
                                            ?
                                            <Image source={require('../images/common/check.png')} />
                                            :
                                            null
                                    }

                                </TouchableOpacity>
                                <TouchableOpacity activeOpacity={0.9} style={styles.payDialog} onPress={() => this.setPayMethod(2)}>
                                    <View style={styles.dialogRow}>
                                        <Image style={styles.payIcon} source={require('../images/common/aliPay.png')} />
                                        <Text>支付宝支付</Text>
                                    </View>
                                    {
                                        this.state.payType === 2
                                            ?
                                            <Image source={require('../images/common/check.png')} />
                                            :
                                            null
                                    }
                                </TouchableOpacity>
                            </Animated.View>
                        </TouchableHighlight>
                        :
                        null
                }

                {/* <Modal
                    animationType="none "
                    transparent={true}
                    visible={true}
                    onRequestClose={() => {
                        alert("Modal has been closed.");
                    }}
                    
                ></Modal> */}
            </View>

        )
    }
}

const styles = StyleSheet.create({
    top: {
        width: Dimensions.width,
        flexDirection: 'column',
        alignItems: 'center',
        paddingBottom: 20
    },
    title: {
        fontSize: 20,
        color: '#a8674d',
        marginTop: 22,
    },
    itemWrapperNormal: {
        borderWidth: 1,
        borderColor: '#a8674d',
        borderRadius: 27,
        backgroundColor: '#fff',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
        width: '86%',
        height: Dimensions.getHeight(53),
        marginTop: 20,
    },
    itemWrapperTap: {
        // borderWidth: 1,
        // borderColor: '#a8674d',
        borderRadius: 27,
        backgroundColor: '#ff7525',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
        width: '86%',
        height: Dimensions.getHeight(53),
        marginTop: 20,
    },
    originPriceTap: {
        fontSize: 14,
        color: '#fff',
        textDecorationLine: 'line-through'
    },
    originPrice: {
        fontSize: 14,
        color: '#a8674d',
        textDecorationLine: 'line-through'
    },
    priceTap: {
        fontSize: 20,
        color: '#fff',
    },
    price: {
        fontSize: 20,
        color: '#a8674d',
    },
    timeLengthTap: {
        fontSize: 18,
        color: '#fff',
    },
    timeLength: {
        fontSize: 18,
        color: '#a8674d',
    },
    payment: {
        flexDirection: 'row',
        alignItems: 'center',
        width: Dimensions.width,
        height: 60,
        justifyContent: 'space-between',
        alignItems: 'center',
        borderColor: '#f3f2f7',
        borderTopWidth: 6,
        borderBottomWidth: 6,
        paddingHorizontal: 33
    },
    left: {
        fontSize: 16
    },
    right: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    method: {
        color: '#a8674d',
        fontSize: 16,
        marginRight: 7
    },
    bottom: {
        width: Dimensions.width,
        height: 60,
        flexDirection: 'row',
        position: 'absolute',
        bottom: 0,
    },
    bottomLeft: {
        width: '58%',
        textAlign: 'center',
        lineHeight: 60,
        color: '#a8674d',
        fontSize: 20
    },
    bottomRight: {
        width: '42%',
        fontSize: 16,
        color: '#fff',
        backgroundColor: '#f5880d',
        alignItems: 'center'
    },
    bottomRightText: {
        fontSize: 20,
        color: '#fff',
        textAlign: 'center',
        lineHeight: 60,
    },
    dialog: {
        width: Dimensions.width,
        height: Dimensions.height,
        position: 'absolute',
        backgroundColor: 'rgba(0,0,0,0.4)',

    },
    payMethod: {
        width: Dimensions.width,
        height: 150,
        position: 'absolute',
        // bottom: 0,
        backgroundColor: '#fff',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-start'
    },
    payDialog: {
        width: '90%',
        borderTopWidth: 1,
        borderColor: '#e4e4e4',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        flex: 1
    },
    dialogRow: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    payIcon: {
        marginRight: 17
    },
    payText: {
        fontSize: 16,
        color: '#191919',
        alignContent: 'center',
        flex: 1,
        lineHeight: 50
    }
})