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

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

export default class Ticket extends BasePage {
    state = {
        data: [
            {
                type: 1,
                price: 12,
                num: 6,
                time: '2019-12-12'
            },
            {
                type: 2,
                price: 50,
                limit: '199',
                time: '2019-12-12'
            }
        ]
    };
    renderItem = (item, index) => {

        return (
            <View>
                {
                    item.type === 1
                        ? // 抵用券
                        <ImageBackground
                            source={require('../images/ticket/discount-bg.png')}
                            style={styles.type1}
                        >
                            <View style={styles.topInfo}>
                                <View style={styles.left2}>
                                    <Text style={styles.price}>
                                        ￥{item.price}
                                    </Text>
                                    <Text style={styles.type}>抵用券</Text>
                                </View>

                                <View style={styles.right2}>
                                    <Text style={styles.greyText}>购买{item.num}个单课程的奖励</Text>
                                    <Text style={styles.greyText}>有效期：{item.time}</Text>
                                </View>

                            </View>
                            <View style={styles.bottomInfo}>
                                <Text style={styles.greyText}>注:开通会员时方可使用</Text>
                                <Text style={styles.blueText}>查看订单</Text>
                            </View>
                        </ImageBackground>
                        : // 优惠券
                        <ImageBackground
                            source={require('../images/ticket/coupon-bg.png')}
                            style={styles.type2}
                        >
                            <View style={styles.left2}>
                                <Text style={styles.price}>
                                    ￥{item.price}
                                </Text>
                                <Text style={styles.type}>优惠券</Text>
                            </View>

                            <View style={styles.right2}>
                                <Text style={styles.greyText}>满{item.limit}可用</Text>
                                <Text style={styles.greyText}>有效期：{item.time}</Text>
                            </View>
                        </ImageBackground>
                }
            </View>

        )
    }
    render() {
        return (
            <FlatList

                data={this.state.data}
                horizontal={false}
                renderItem={({ item, index }) => this.renderItem(item, index)}
                keyExtractor={(item, index) => index.toString()}
            />
        )
    }
}

const styles = StyleSheet.create({
    type1: {
        width: 343,
        height: 144,
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingTop: 12,
        paddingBottom: 14
    },
    type2: {
        width: 343,
        height: 100,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        paddingLeft: 27
    },
    left2: {
        flexDirection: 'column',

    },
    price: {
        color: '#ff6d2f',
        fontSize: 19,
        fontWeight: '500'
    },
    type: {
        color: '#ff6d2f',
        fontSize: 18,
        fontWeight: '500'
    },
    right2: {
        flexDirection: 'column'

    },
    topInfo: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    bottomInfo: {
        width: '100%',
        paddingHorizontal: 12,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    greyText: {
        fontSize: 14,
        color: '#888'
    },
    blueText: {
        color: '#4a90e2',
        fontSize: 14
    }
})