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

/* 
 * 
*/
import React, { Component } from 'react';
import {
	Platform,
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity,
	FlatList,
	TouchableHighlight,
	DeviceEventEmitter,
	ScrollView,
	BackHandler,
	StatusBar,
	Modal,
	Animated,
	TextInput
} from 'react-native';
import BasePage from '../BasePage';
import Dimensions from '../utils/dimensions';
import TopicTitle from '../components/TopicTitle';
import CourseTitle from '../components/CourseTitle';
import wechat from '../utils/wechat';
import PayUtil from '../services/PayUtil';
import Alipay from 'react-native-yunpeng-alipay';

export default class Buy extends BasePage {
	state = {
		shopData: [
			{ title: '1个月', originPrice: '199', price: '49' },
			{ title: '12个月', originPrice: '499', price: '199' }
		],
		currentTapindex: 0,
		slideAnim: new Animated.Value(-150),
		ifDialogShow: false,
		payType: 1,
		ticketPrice: 0,
		useTicket: false
	};
	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>
		);
	};

	dialogComeout = (index) => {
		if (index) {
			this.setState(
				{
					ifDialogShow: true
				},
				() => {
					Animated.timing(this.state.slideAnim, {
						toValue: 0,
						duration: 100
					}).start();
				}
			);
		} else {
			Animated.timing(this.state.slideAnim, {
				toValue: -150,
				duration: 100
			}).start();
			setTimeout(() => {
				this.setState({
					ifDialogShow: false
				});
			}, 210);
		}
	};
	setPayMethod = (type) => {
		this.setState(
			{
				payType: type
			},
			() => {
				setTimeout(() => {
					this.dialogComeout(false);
				}, 100);
			}
		);
	};
	componentWillMount() {
		BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
	}
	componentWillUnmount() {
		BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
	}
	onBackAndroid = () => {
		if (this.state.ifDialogShow) {
			this.dialogComeout(false);
		} else {
			this.goBack();
		}
		return true;
	};
	choseTicket = () => {
		this.toNextPage('Ticket', { choseTicketCallBack: this.choseTicketCallBack.bind(this) });
	};
	choseTicketCallBack(item) {
		/**item参数
         * 	type: 1,
			price: 12,
			num: 6,
			time: '2019-12-12'
         * 
         */
		this.setState({
			ticketPrice: item.price,
			useTicket: true
		});
	}

	getPrice(old_price) {
		return parseInt(old_price) - parseInt(this.state.ticketPrice) < 0
			? 0
			: parseInt(old_price) - parseInt(this.state.ticketPrice);
	}
	pay = () => {
		switch (this.state.payType) {
			case 1:
				let option = {
					method: 'POST',
					body: {
						productCode: '',
						type: '0',
						preferentialIds: '',
						useVoucher: this.state.useTicket
					}
				};
				PayUtil.payByWechat(option).then((result) => {
					//微信支付
					wechat.pay(
						result.partnerId,
						result.prepayId,
						result.nonceStr,
						result.timeStamp,
						result.package,
						result.sign
					);
				});

				break;
			case 2:
				//阿里支付
				let option_ali = {
					method: 'POST',
					body: {
						productCode: '',
						type: '0',
						preferentialIds: '',
						useVoucher: this.state.useTicket
					}
				};
				//先请求后台给支付数据
				PayUtil.payByAli(option_ali).then((result) => {
					let data = 'partner=' + result.partner + '&';
					'seller_id=' + result.seller_id + '&';
					'out_trade_no=' + result.out_trade_no + '&';
					'subject=' + result.subject + '&';
					'body=' + result.body + '&';
					'total_fee=' + result.total_fee + '&';
					'notify_url=' + result.notify_url + '&';
					'service=' + result.service + '&';
					'payment_type=' + result.payment_type + '&';
					'_input_charset=' + result._input_charset + '&';
					'it_b_pay=' + result.it_b_pay + '&';
					'sign=' + result.sign + '&';
					'sign_type=' + result.sign_type;
					//调用阿里支付
					Alipay.pay(data).then(
						function(data) {
							//成功
							console.log(data);
						},
						function(err) {
							//失败
							console.log(err);
						}
					);
				});
				break;
		}
	};
	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="VIP购买"
						lefttype={1}
						textcolor={'#231F20'}
						backPress={() => this.goBack()}
						// backPress={() => alert("左侧按钮")}
					/>
				</View>
				<View style={{ flex: 0.02, backgroundColor: 'rgba(242, 242, 242, 1)' }} />
				<View style={styles.top}>
					<Text style={styles.title}>套餐选择</Text>
					<View>{this.state.shopData.map((item, index) => this.renderItem(item, index))}</View>
				</View>
				<View style={{ flex: 0.01, backgroundColor: 'rgba(242, 242, 242, 1)' }} />
				<TouchableOpacity style={styles.payment} activeOpacity={1} onPress={this.choseTicket.bind(this)}>
					<Text style={styles.left}>使用抵用券</Text>
					<View style={styles.right}>
						<Text style={styles.method}>-￥{this.state.ticketPrice}元</Text>
						<Image source={require('../images/common/arrowRight.png')} />
					</View>
				</TouchableOpacity>
				<TouchableOpacity style={styles.payment} activeOpacity={1} onPress={() => this.dialogComeout(true)}>
					<Text style={styles.left}>支付方式</Text>
					<View style={styles.right}>
						{this.state.payType === 1 ? (
							<Text style={styles.method}>微信支付</Text>
						) : (
							<Text style={styles.method}>支付宝支付</Text>
						)}

						<Image source={require('../images/common/arrowRight.png')} />
					</View>
				</TouchableOpacity>
				<View style={{ flex: 0.01, backgroundColor: 'rgba(242, 242, 242, 1)' }} />
				<View>
					<Text style={{ fontSize: 14, width: '100%', textAlignVertical: 'center', textAlign: 'center' }}>
						开通会员即时生效，有任何问题请联系我们。
					</Text>
				</View>
				<View style={styles.bottom}>
					{this.state.ticketPrice > 0 ? (
						(price = (
							<Text style={styles.bottomLeft}>
								￥{this.getPrice(this.state.shopData[this.state.currentTapindex].price)}元
							</Text>
						))
					) : (
						<Text style={styles.bottomLeft}>￥{this.state.shopData[this.state.currentTapindex].price}元</Text>
					)}

					<TouchableOpacity style={styles.bottomRight} onPress={this.pay.bind(this)}>
						<Text style={styles.bottomRightText}>支付</Text>
					</TouchableOpacity>
				</View>
				{this.state.ifDialogShow ? (
					<TouchableHighlight
						onPress={() => {
							this.dialogComeout(false);
						}}
						style={{ ...styles.dialog }}
						underlayColor={0.1}
					>
						<Animated.View style={{ ...styles.payMethod, bottom: this.state.slideAnim }} onPress={() => {}}>
							<Text style={styles.payText}>选择支付方式</Text>
							<TouchableOpacity
								activeOpacity={0.9}
								style={styles.payDialog}
								onPress={() => this.setPayMethod(1)}
							>
								<View style={styles.dialogRow}>
									<Image style={styles.payIcon} source={require('../images/common/wxPay.png')} />
									<Text>微信支付</Text>
								</View>
								{this.state.payType === 1 ? (
									<Image source={require('../images/common/check.png')} />
								) : null}
							</TouchableOpacity>
							<TouchableOpacity
								activeOpacity={0.9}
								style={styles.payDialog}
								onPress={() => this.setPayMethod(2)}
							>
								<View style={styles.dialogRow}>
									<Image style={styles.payIcon} source={require('../images/common/aliPay.png')} />
									<Text>支付宝支付</Text>
								</View>
								{this.state.payType === 2 ? (
									<Image source={require('../images/common/check.png')} />
								) : null}
							</TouchableOpacity>
							{/* <TextInput style={styles.payDialog} /> */}
							<View style={{ flex: 0.2 }} />
						</Animated.View>
					</TouchableHighlight>
				) : null}

				{/* <Modal
                    animationType="none "
                    transparent={true}
                    visible={true}
                    onRequestClose={() => {
                        alert("Modal has been closed.");
                    }}
                    
                ></Modal> */}
			</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
	},
	dialog: {
		width: Dimensions.width,
		height: Dimensions.height,
		position: 'absolute',
		backgroundColor: 'rgba(0,0,0,0.4)'
	},
	payMethod: {
		width: Dimensions.width,
		height: 150,
		position: 'absolute',
		// bottom: 0,
		backgroundColor: '#fff',
		flexDirection: 'column',
		alignItems: 'center',
		justifyContent: 'flex-start'
	},
	payDialog: {
		width: '90%',
		borderTopWidth: 1,
		borderColor: '#e4e4e4',
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		flex: 1
	},
	dialogRow: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center'
	},
	payIcon: {
		marginRight: 17
	},
	payText: {
		fontSize: 16,
		color: '#191919',
		alignContent: 'center',
		flex: 1,
		lineHeight: 50
	}
});