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

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

export default class Buy extends BasePage {
    state = {
        shopData: [
            { title: '1个月', originPrice: '199', price: '49', },
            { title: '12个月', originPrice: '499', price: '199' }
        ],
        currentTapindex: 0
    };
    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>
        )
    }
    render() {
        return (
            <View style={{ flex: 1 }}>
                <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={() => alert(123)}>
                    <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>
            </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,
    }
})