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: 1,
				price: 33,
				num: 9,
				time: '2019-12-12'
			},
			{
				type: 2,
				price: 50,
				limit: '199',
				time: '2019-12-12'
			}
		]
	};
	renderItem = (item, index) => {
		return (
			<View>
				{item.type === 1 ? (
					// 抵用券
					<TouchableOpacity onPress={() => this.userdiscount(item)} activeOpacity={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>
					</TouchableOpacity>
				) : (
					// 优惠券
					<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()}
			/>
		);
	}

	userdiscount = (item) => {
		if (this.props.navigation.state.params != undefined) {
			this.props.navigation.state.params.choseTicketCallBack(item);
			this.props.navigation.goBack();
		}
	};
}

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
	}
});