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

/* 
 * 
*/
import React, { Component } from 'react';
import {
	Platform,
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity,
	FlatList,
	TouchableHighlight,
	DeviceEventEmitter,
	ScrollView,
	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 aliPay from '../utils/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
	};
	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: 300
					}).start();
				}
			);
		} else {
			Animated.timing(this.state.slideAnim, {
				toValue: -150,
				duration: 200
			}).start();
			setTimeout(() => {
				this.setState({
					ifDialogShow: false
				});
			}, 210);
		}
	};
	setPayMethod = (type) => {
		this.setState(
			{
				payType: type
			},
			() => {
				setTimeout(() => {
					this.dialogComeout(false);
				}, 100);
			}
		);
	};
	choseTicket = () => {
		this.toNextPage('Ticket', { choseTicketCallBack: this.choseTicketCallBack.bind(this) });
	};
	choseTicketCallBack(item) {
		/**
         * 	type: 1,
			price: 12,
			num: 6,
			time: '2019-12-12'
         * 
         */
		this.setState({
			ticketPrice: item.price
		});
	}
	pay = () => {
		switch (this.state.payType) {
			case 1:
				//微信支付
				wechat.pay();
				break;
			case 2:
				//阿里支付
				let params = {
					partner: 'asdfasdf', //app_id
					seller_id: '115681592@qq.com', //下单账号，用的芮总QQ邮箱，人家说没有可不填，但为了代表下单身份才用芮总QQ邮箱的
					out_trade_no: 'ALIPAY15307684880120000000001', //第三方订单号
					subject: '描述',
					body: '',
					total_fee: '0.01', //价格
					notify_url: 'http://xx.xx.xx.xx/api/0/alipay/alipayCallback', //回调地址
					service: 'm.pay',
					payment_type: '1',
					_input_charset: 'utf-8',
					it_b_pay: '30m',
					sign: 'sdfasdf', //签名
					sign_type: 'RSA'
				};
				aliPay.pay(params);
				break;
		}
	};
	render() {
		return (
			<View style={{ flex: 1 }}>
				<View
					style={{
						height: 30,
						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.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>
				<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>
				<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}>
								￥{parseInt(this.state.shopData[this.state.currentTapindex].price) -
									parseInt(this.state.ticketPrice)}元
							</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={() => {
								alert(12311);
							}}
						>
							<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} /> */}
						</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
	}
});