支付组件优化

components/pay/pay.vue

@@ -41,9 +41,6 @@
 						</view>
 					</view>
 				</view>
-
-
-
 				<view class="commitBtn" @click="payment">
 					<text>确定</text>
 				</view>
@@ -70,6 +67,18 @@
 </template>
 
 <script>
+	/**
+	 *   props参数
+	 *1，needPassword：Boolean类型 是否需要输入密码。true,使用余额支付时开启密码输入框，false，使用余额支付时不弹出密码输入框直接支付。默认false。
+	 *2，wxPay：Boolean类型，是否显示微信支付选项。true--显示，false--不显示。默认true。
+	 *3，blPay：Boolean类型，是否显示余额支付选项。true--显示，false--不显示。默认true。
+	 *4，selectBlPay：Boolean类型，余额支付选项是否能够选中。使用时请根据用户的余额进行判断。true--能，false--不能。默认true。
+	 *5，orderNo：String类型，支付的订单号。
+	 *6，openType：Number类型，1--支付预约费用，2---支付子订单费用。
+	 *
+	 *   function 回调函数
+	 * 1，payResult(e),支付结果回调。
+	 */
 	export default {
 		name: "myPay",
 		props: {
@@ -91,11 +100,23 @@
 					return true
 				}
 			},
+			selectBlPay: {
+				type: Boolean,
+				default () {
+					return true
+				}
+			},
 			orderNo: {
 				type: String,
 				default () {
 					return ''
 				}
+			},
+			openType: {
+				type: Number,
+				default () {
+					return 1
+				}
 			}
 		},
 		data() {
@@ -110,11 +131,11 @@
 				this.$refs.popup.close()
 			},
 			openPopup() {
-				this.userInfo = uni.getStorageSync('userInfo')
+				this.password = ''
 				this.$refs.popup.open()
 			},
 			payItem(num) {
-				if (this.userInfo.balance * 1 < this.price * 1) {
+				if (!this.selectBlPay) {
 					return
 				}
 				this.curServiceTab = num
@@ -126,62 +147,73 @@
 					if (this.needPassword) {
 						this.$refs.passwordPopup.open()
 					} else {
+						//余额支付
 						this.balancePay()
 					}
 				} else {
-
-					this.wechatPay()
-
+						//微信支付
+					if (this.openType == 1){
+						this.wechatPay()     //支付预约费用
+					}else {
+						this.wechatPayTradeNo()   //支付子订单费用
+					}
 				}
+			},
 
 
+
+			//支付子订单的统一下单接口
+			wechatPayTradeNo(){
+				this.$api.wechatPayTradeNo({
+					tradeNo: this.orderNo
+				}).then((res) => {
+					this.requestPayment(res.data.data)
+				}).catch((err) => {
+					this.$emit('payResult',{
+						payResult:false,
+						res:err
+					})
+				});
 			},
 
-			//微信支付
+			//支付预约费用的统一下单接口
 			wechatPay() {
-				// 发起微信支付
 				this.$api.wechatPay({
 					orderNo: this.orderNo
 				}).then((res) => {
-					var param = res.data.data;
-					uni.requestPayment({
-						appId: param.appid,
-						timeStamp: param.timestamp + "",
-						nonceStr: param.noncestr,
-						package: "prepay_id=" + param.prepayid,
-						signType: "RSA",
-						paySign: param.sign,
-						success: res => {
-							uni.showToast({
-								title: '支付成功!'
-							});
-							setTimeout(res => {
-								uni.switchTab({
-									url: '/pages/order/index'
-								})
-							}, 1000)
-						},
-						fail: res => {
-							console.log(res)
-							uni.showModal({
-								content: '支付失败',
-								showCancel: false
-							});
-
-							setTimeout(res => {
-								uni.switchTab({
-									url: '/pages/order/index'
-								})
-							}, 1000)
-
-						}
-					});
-				}).catch(() => {
-					uni.showToast({
-						title: "操作失败"
+					this.requestPayment(res.data.data)
+				}).catch((err) => {
+					this.$emit('payResult',{
+						payResult:false,
+						res:err
 					})
 				});
 			},
+
+			//调起微信支付
+			requestPayment(param){
+				uni.requestPayment({
+					appId: param.appid,
+					timeStamp: param.timestamp + "",
+					nonceStr: param.noncestr,
+					package: "prepay_id=" + param.prepayid,
+					signType: "RSA",
+					paySign: param.sign,
+					success: res => {
+						this.$emit('payResult',{
+							payResult:true,
+							res:res
+						})
+					},
+					fail: res => {
+						this.$emit('payResult',{
+							payResult:false,
+							res:res
+						})
+					}
+				});
+			},
+
 			//余额支付
 			balancePay() {
 				if (this.password.length < 6 && this.needPassword) {
@@ -192,42 +224,39 @@
 				}
 				this.$refs.passwordPopup.close()
 
-				this.$api.balancePay({
-					orderNo: this.subOrderNo,
-					password: this.password
-				}).then((res) => {
-					uni.showToast({
-						title: '支付成功!'
+				if (this.openType == 1){    // 支付预约费用
+					this.$api.balancePay({
+						orderNo: this.orderNo,
+						password: this.password
+					}).then((res) => {
+						this.$emit('payResult',{
+							payResult:true,
+							res:res
+						})
+					}).catch((res) => {
+						this.$emit('payResult',{
+							payResult:false,
+							res:res
+						})
 					});
-
-					setTimeout(res => {
-						uni.switchTab({
-							url: '/pages/order/index'
+				}else {  //支付子订单费用
+					this.$api.trade({
+						tradeNo: this.orderNo,
+						password: this.password
+					}).then((res) => {
+						this.$emit('payResult',{
+							payResult:true,
+							res:res
 						})
-					}, 1000)
-
-
-					this.getUserInfo()
-				}).catch((res) => {
-					console.log(res)
-					let msg = res.data.msg || '操作失败';
-					uni.showToast({
-						title: msg,
-						icon: 'error'
-					})
-				});
-
-			},
-
-			getUserInfo() {
-				this.$api.getUserInfo().then(res => {
-					console.log('++++++++++++获取用户信息++++++++++++++++++', res)
-					uni.setStorageSync('userInfo', res.data.data)
-					this.userInfo = res.data.data
-				})
+					}).catch((res) => {
+						this.$emit('payResult',{
+							payResult:false,
+							res:res
+						})
+					});
+				}
 
 			},
-
 		}
 	}
 </script>

orderPages/bookService/index.vue

@@ -104,7 +104,7 @@
 		</view>
 		<chooseServiceTeacher ref="chooseServiceTeacher" :storeId="store.storeId" :date="date" @getWorkPerson="getWorkPerson"></chooseServiceTeacher>
 		<chooseServiceTime ref="chooseServiceTime"  @getPeriodDate="getPeriodDate"></chooseServiceTime>
-		<myPay ref="myPay" :blPay="false" :orderNo="subOrderNo"></myPay>
+		<myPay ref="myPay" :blPay="false" :orderNo="subOrderNo" @payResult="payResult"></myPay>
 	</view>
 </template>
 
@@ -400,14 +400,31 @@
 				})
 			},
 
-
+			//支付组件回调
+			payResult(e){
+				console.log(e)
+				if(e.payResult){
+					uni.showToast({
+						title: '支付成功!'
+					});
+				}else {
+					uni.showToast({
+						title: '支付失败',
+						icon: 'error'
+					});
+				}
+				setTimeout(()=>{
+					uni.switchTab({
+						url: '/pages/order/index'
+					})
+				},1000)
+			},
 
 
 			//提交订单
 			commitOrder() {
 				if (this.subOrderNo){
 					this.$refs.myPay.openPopup()
-
 				}else {
 					if (!this.selectIcon) {
 						uni.$u.toast('请阅读并同意《预约需知》')