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
    };
    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>
        )
    }
    changeMethod = () => {
        this.setState({
            ifDialogShow: !this.state.ifDialogShow
        }, () => {
            Animated.timing(
                this.state.slideAnim,
                {
                    toValue: 0,
                    duration: 300,
                }
            ).start();
        })
    }
    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.changeMethod()}>
                    <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
                        ?
                        <View style={{ ...styles.dialog }}>
                            <Animated.View style={{ ...styles.payMethod, bottom: this.state.slideAnim }}>
                                <Text>选择支付方式</Text>
                                {/* <View> */}

                                {/* </View> */}
                            </Animated.View>
                        </View>
                        :
                        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: '#000',
        opacity: 0.4

    },
    payMethod: {
        width: Dimensions.width,
        height: 150,
        position: 'absolute',
        // bottom: 0,
        backgroundColor: '#fff'
    }
})