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

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

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: 1,
				price: 50,
				limit: '199',
				time: '2019-12-12'
			}
		]
	};
	renderItem = (item, index) => {
		return (
			<View style={{ justifyContent: 'center', alignItems: 'center' }}>
				{item.type === 1 ? (
					// 抵用券
					<TouchableOpacity
						onPress={() => this.userdiscount(item)}
						activeOpacity={1}
						style={{ width: '100%', justifyContent: 'center', alignItems: 'center' }}
					>
						<ImageBackground
							source={require('../images/ticket/discount-bg.png')}
							style={styles.type1}
							imageStyle={{ resizeMode: 'contain' }}
						>
							<View style={{ flex: 0.3 }} />
							<View style={styles.topInfo}>
								<View style={{ flex: 1.3 }} />
								<View style={styles.left2}>
									<Text style={styles.price}>￥{item.price}</Text>
									<Text style={styles.type}>抵用券</Text>
								</View>
								<View style={{ flex: 0.05 }} />
								<View style={styles.right2}>
									<Text style={{ fontSize: 16, color: 'rgba(22, 22, 22, 1)' }}>
										购买{item.num}个单课程的奖励
									</Text>
									<Text style={styles.greyText}>有效期：{item.time}</Text>
								</View>
								<View
									style={{
										flex: 0.4,
										marginRight: 50,
										marginTop: 20
									}}
								>
									<ImageBackground
										source={require('../images/ticket/button-bg.png')}
										style={{
											width: 85,
											height: 27,
											justifyContent: 'center'
										}}
									>
										<Text
											style={{
												fontSize: 16,
												color: 'white',
												textAlign: 'center',
												textAlignVertical: 'center'
											}}
										>
											立即使用
										</Text>
									</ImageBackground>
								</View>
								<View style={{ flex: 1.5 }} />
							</View>
							<View style={{ flex: 0.2 }} />
							<View style={styles.bottomInfo}>
								<View style={{ flex: 1 }} />
								<Text style={styles.greyText}>注:开通会员时方可使用</Text>
								<View style={{ flex: 1 }} />
								<Text style={styles.blueText}>查看订单</Text>
								<View style={{ flex: 1 }} />
							</View>
						</ImageBackground>
					</TouchableOpacity>
				) : (
					// 优惠券
					<ImageBackground
						source={require('../images/ticket/coupon-bg.png')}
						style={styles.type2}
						imageStyle={{ resizeMode: 'center' }}
					>
						<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 (
			<View style={{ flex: 1 }}>
				<StatusBar barStyle={'dark-content'} backgroundColor={'white'} translucent={true} />
				<View
					style={{
						height: 50,
						backgroundColor: 'white',
						marginTop: 30
					}}
				>
					<CourseTitle
						width={this.getWindowWidth()}
						title="抵用券"
						lefttype={1}
						textcolor={'#231F20'}
						backPress={() => this.goBack()}
						// backPress={() => alert("左侧按钮")}
					/>
				</View>
				<View style={{ flex: 0.1, backgroundColor: 'rgba(242, 242, 242, 1)' }} />
				<View style={{ flex: 5, backgroundColor: 'rgba(242, 242, 242, 1)' }}>
					<FlatList
						data={this.state.data}
						horizontal={false}
						renderItem={({ item, index }) => this.renderItem(item, index)}
						keyExtractor={(item, index) => index.toString()}
					/>
				</View>
			</View>
		);
	}

	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: '100%',
		height: 154,
		flexDirection: 'column',
		justifyContent: 'center',
		// paddingHorizontal: 70,
		alignItems: 'center'
	},
	type2: {
		width: '100%',
		height: 100,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center'
	},
	left2: {
		flex: 1,
		flexDirection: 'column'
	},
	price: {
		color: '#ff6d2f',
		fontSize: 19,
		fontWeight: '500'
	},
	type: {
		color: '#ff6d2f',
		fontSize: 18,
		fontWeight: '500'
	},
	right2: {
		flex: 2.8,
		flexDirection: 'column',
		marginTop: 10
	},
	topInfo: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center'
	},
	bottomInfo: {
		width: '100%',
		flex: 1,
		paddingHorizontal: 12,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	greyText: {
		fontSize: 14,
		color: '#888'
	},
	blueText: {
		color: '#4a90e2',
		fontSize: 14
	}
});