1.修改阿里支付

2.修改优惠券界面

pages/buy/buy.js

@@ -13,6 +13,8 @@ import {
 	TouchableHighlight,
 	DeviceEventEmitter,
 	ScrollView,
+	BackHandler,
+	StatusBar,
 	Modal,
 	Animated,
 	TextInput
@@ -22,7 +24,8 @@ 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';
+import PayUtil from '../services/PayUtil';
+import Alipay from 'react-native-yunpeng-alipay';
 
 export default class Buy extends BasePage {
 	state = {
@@ -34,7 +37,8 @@ export default class Buy extends BasePage {
 		slideAnim: new Animated.Value(-150),
 		ifDialogShow: false,
 		payType: 1,
-		ticketPrice: 0
+		ticketPrice: 0,
+		useTicket: false
 	};
 	itemTap = (index) => {
 		this.setState({
@@ -62,6 +66,7 @@ export default class Buy extends BasePage {
 			</TouchableOpacity>
 		);
 	};
+
 	dialogComeout = (index) => {
 		if (index) {
 			this.setState(
@@ -71,14 +76,14 @@ export default class Buy extends BasePage {
 				() => {
 					Animated.timing(this.state.slideAnim, {
 						toValue: 0,
-						duration: 300
+						duration: 100
 					}).start();
 				}
 			);
 		} else {
 			Animated.timing(this.state.slideAnim, {
 				toValue: -150,
-				duration: 200
+				duration: 100
 			}).start();
 			setTimeout(() => {
 				this.setState({
@@ -99,11 +104,25 @@ export default class Buy extends BasePage {
 			}
 		);
 	};
+	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,
@@ -111,42 +130,90 @@ export default class Buy extends BasePage {
          * 
          */
 		this.setState({
-			ticketPrice: item.price
+			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:
-				//微信支付
-				wechat.pay();
+				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 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'
+				let option_ali = {
+					method: 'POST',
+					body: {
+						productCode: '',
+						type: '0',
+						preferentialIds: '',
+						useVoucher: this.state.useTicket
+					}
 				};
-				aliPay.pay(params);
+				//先请求后台给支付数据
+				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: 30,
+						height: 50,
+						backgroundColor: 'white',
 						marginTop: 30
 					}}
 				>
@@ -165,6 +232,13 @@ export default class Buy extends BasePage {
 					<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}>
@@ -177,13 +251,6 @@ export default class Buy extends BasePage {
 						<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' }}>
@@ -194,8 +261,7 @@ export default class Buy extends BasePage {
 					{this.state.ticketPrice > 0 ? (
 						(price = (
 							<Text style={styles.bottomLeft}>
-								￥{parseInt(this.state.shopData[this.state.currentTapindex].price) -
-									parseInt(this.state.ticketPrice)}元
+								￥{this.getPrice(this.state.shopData[this.state.currentTapindex].price)}元
 							</Text>
 						))
 					) : (
@@ -214,12 +280,7 @@ export default class Buy extends BasePage {
 						style={{ ...styles.dialog }}
 						underlayColor={0.1}
 					>
-						<Animated.View
-							style={{ ...styles.payMethod, bottom: this.state.slideAnim }}
-							onPress={() => {
-								alert(12311);
-							}}
-						>
+						<Animated.View style={{ ...styles.payMethod, bottom: this.state.slideAnim }} onPress={() => {}}>
 							<Text style={styles.payText}>选择支付方式</Text>
 							<TouchableOpacity
 								activeOpacity={0.9}
@@ -248,6 +309,7 @@ export default class Buy extends BasePage {
 								) : null}
 							</TouchableOpacity>
 							{/* <TextInput style={styles.payDialog} /> */}
+							<View style={{ flex: 0.2 }} />
 						</Animated.View>
 					</TouchableHighlight>
 				) : null}

pages/buy/ticket.js

@@ -12,11 +12,13 @@ import {
 	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 = {
@@ -34,7 +36,7 @@ export default class Ticket extends BasePage {
 				time: '2019-12-12'
 			},
 			{
-				type: 2,
+				type: 1,
 				price: 50,
 				limit: '199',
 				time: '2019-12-12'
@@ -43,31 +45,79 @@ export default class Ticket extends BasePage {
 	};
 	renderItem = (item, index) => {
 		return (
-			<View>
+			<View style={{ justifyContent: 'center', alignItems: 'center' }}>
 				{item.type === 1 ? (
 					// 抵用券
-					<TouchableOpacity onPress={() => this.userdiscount(item)} activeOpacity={1}>
-						<ImageBackground source={require('../images/ticket/discount-bg.png')} style={styles.type1}>
+					<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={styles.greyText}>购买{item.num}个单课程的奖励</Text>
+									<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}>
+					<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>
@@ -84,12 +134,34 @@ export default class Ticket extends BasePage {
 	};
 	render() {
 		return (
-			<FlatList
-				data={this.state.data}
-				horizontal={false}
-				renderItem={({ item, index }) => this.renderItem(item, index)}
-				keyExtractor={(item, index) => index.toString()}
-			/>
+			<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>
 		);
 	}
 
@@ -103,23 +175,22 @@ export default class Ticket extends BasePage {
 
 const styles = StyleSheet.create({
 	type1: {
-		width: 343,
-		height: 144,
+		width: '100%',
+		height: 154,
 		flexDirection: 'column',
-		justifyContent: 'space-between',
-		alignItems: 'center',
-		paddingTop: 12,
-		paddingBottom: 14
+		justifyContent: 'center',
+		// paddingHorizontal: 70,
+		alignItems: 'center'
 	},
 	type2: {
-		width: 343,
+		width: '100%',
 		height: 100,
 		flexDirection: 'row',
-		justifyContent: 'flex-start',
-		alignItems: 'center',
-		paddingLeft: 27
+		justifyContent: 'center',
+		alignItems: 'center'
 	},
 	left2: {
+		flex: 1,
 		flexDirection: 'column'
 	},
 	price: {
@@ -133,14 +204,18 @@ const styles = StyleSheet.create({
 		fontWeight: '500'
 	},
 	right2: {
-		flexDirection: 'column'
+		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',

pages/services/PayUtil.js

@@ -0,0 +1,12 @@
+import APIConfig from './api.js';
+import efunRequest from '../utils/efunRequest';
+import request from '../utils/request';
+
+export default class PayUtil {
+	static async payByAli(opts) {
+		return request(APIConfig.getPayUrl() + '/aliPay/pay', opts);
+	}
+	static async payByWechat(opts) {
+		return request(APIConfig.getPayUrl() + '/wxPay/prePay', opts);
+	}
+}

pages/services/api.js

@@ -2,7 +2,8 @@ const url = {
 	library_url: 'http://ott80testlibrary.yifangjiaoyu.cn/mobile/page',
 	schedule_url: 'http://ott80test-schedule.yifangjiaoyu.cn/mobile/schedule/',
 	user_url: 'http://ott80test-base.yifangjiaoyu.cn/mobile/user',
-	upload_img: 'http://ott80test-base.yifangjiaoyu.cn/file/upload'
+	upload_img: 'http://ott80test-base.yifangjiaoyu.cn/file/upload',
+	pay_url: 'http://ott80test-trade.yifangjiaoyu.cn/mobile/'
 };
 
 export default class APIConfig {
@@ -20,4 +21,7 @@ export default class APIConfig {
 	static getUploadImg() {
 		return url.upload_img;
 	}
+	static getPayUrl() {
+		return url.pay_url;
+	}
 }

pages/utils/aliPay.js

@@ -1,33 +0,0 @@
-import Alipay from 'react-native-yunpeng-alipay';
-
-export default class aliPay {
-	/**
-   * 支付宝支付
-   * @param  {Object} params_body 参数Object  {partner:"",seller_id:"",out_trade_no:"",subject:"",body:"",total_fee:"",notify_url:"",service:"",payment_type:"",_input_charset:"",it_b_pay:"",sign:"",sign_type:""}
-  
-   */
-
-	static pay(params_body) {
-		let data = 'partner=' + params_body.partner + '&';
-		'seller_id=' + params_body.seller_id + '&';
-		'out_trade_no=' + params_body.out_trade_no + '&';
-		'subject=' + params_body.subject + '&';
-		'body=' + params_body.body + '&';
-		'total_fee=' + params_body.total_fee + '&';
-		'notify_url=' + params_body.notify_url + '&';
-		'service=' + params_body.service + '&';
-		'payment_type=' + params_body.payment_type + '&';
-		'_input_charset=' + params_body._input_charset + '&';
-		'it_b_pay=' + params_body.it_b_pay + '&';
-		'sign=' + params_body.sign + '&';
-		'sign_type=' + params_body.sign_type;
-		Alipay.pay(data).then(
-			function(data) {
-				console.log(data);
-			},
-			function(err) {
-				console.log(err);
-			}
-		);
-	}
-}

pages/utils/wechat.js

@@ -153,10 +153,11 @@ export default class wechat {
 					sign: sign // 商家根据微信开放平台文档对数据做的签名
 				})
 					.then((requestJson) => {
-						//支付成功回调
-						if (requestJson.errCode == '0') {
-							//回调成功处理
-						}
+						// //支付成功回调
+						// if (requestJson.errCode == '0') {
+						// 	//回调成功处理
+						// }
+						return requestJson;
 					})
 					.catch((err) => {
 						alert('支付失败');