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

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

export default class Ticket extends BasePage {
	state = {
		ticket_data: []
	};
	renderItem = (item, index) => {
		return this.choseItem(item);
	};
	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)' }}>
					{this.state.ticket_data.length > 0 ? (
						<FlatList
							data={this.state.ticket_data}
							horizontal={false}
							renderItem={({ item, index }) => this.renderItem(item, index)}
							keyExtractor={(item, index) => index.toString()}
						/>
					) : (
						<Text
							style={{ height: '100%', width: '100%', textAlign: 'center', textAlignVertical: 'center' }}
						>
							还没有获取到抵用券
						</Text>
					)}
				</View>
			</View>
		);
	}

	choseItem(item) {
		switch (item.type) {
			case 1:
			default:
				// 抵用券
				return (
					<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: 0.5 }} />
								<View style={styles.left2}>
									<Text style={styles.price}>￥{item.amount}</Text>
									<Text style={styles.type}>抵用券</Text>
								</View>
								<View style={{ flex: 0.2 }} />
								<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'
											}}
											onPress={() => this.useTicket(item)}
										>
											立即使用
										</Text>
									</ImageBackground>
								</View>
								<View style={{ flex: 1 }} />
							</View>
							<View style={{ flex: 0.2 }} />
							<View style={styles.bottomInfo}>
								<Text style={styles.greyText}>注:开通会员时方可使用</Text>
								{/* <Text style={styles.blueText}>查看订单</Text> */}
							</View>
						</ImageBackground>
					</TouchableOpacity>
				);
			case 2:
				return (
					<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>
				);
		}
	}

	componentWillMount() {
		//获取用户优惠券信息
		this.getVoucher();
		BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
	}
	componentWillUnmount() {
		BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
	}
	onBackAndroid = () => {
		this.goBack();
		return true;
	};
	async getVoucher() {
		await PayServer.getVoucher().then((result) => {
			if (result.data.length == 0) {
			} else {
				this.setState({
					ticket_data: result.data
				});
			}
		});
	}
	userdiscount = (item) => {
		this.useTicket(item);
	};
	useTicket = (ticket_item) => {
		this.toNextPage('Buy', { to_ticket: ticket_item });
	};
}

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