扫码支付

2024-05-23 16:39:56 +08:00
parent fde8599a15
commit dd5adf82b8
9 changed files with 761 additions and 54 deletions
--- a/pages/order_detail/components/payPassword.vue
+++ b/pages/order_detail/components/payPassword.vue
@@ -0,0 +1,192 @@
+<template>
+	<view class="page">
+		<view>
+			<view class="pay-title">
+				<text>请输入6位支付密码</text>
+			</view>
+			<view class="pay-password" @click="onPayUp">
+				<view class="list">
+					<text v-show="passwordArr.length >= 1">●</text>
+				</view>
+				<view class="list">
+					<text v-show="passwordArr.length >= 2">●</text>
+				</view>
+				<view class="list">
+					<text v-show="passwordArr.length >= 3">●</text>
+				</view>
+				<view class="list">
+					<text v-show="passwordArr.length >= 4">●</text>
+				</view>
+				<view class="list">
+					<text v-show="passwordArr.length >= 5">●</text>
+				</view>
+				<view class="list">
+					<text v-show="passwordArr.length >= 6">●</text>
+				</view>
+			</view>
+			<view class="hint" @click="gopaypassword">
+				<text>忘记支付密码？</text>
+			</view>
+		</view>
+		<!-- ref:唯一ref  passwrdType：密码样式pay keyInfo：密码输入返回事件 -->
+		<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {
+
+		},
+		data() {
+			return {
+				// AffirmStatus: 1,
+				passwordArr: [],
+				oldPasswordArr: [],
+				newPasswordArr: [],
+				afPasswordArr: [],
+			};
+		},
+		onLoad() {
+
+		},
+		methods: {
+			// 忘记支付密码
+			gopaypassword() {
+				uni.pro.navigateTo('/pages/user/repairpassword', {
+					// shopId_id: uni.cache.get('shopUser')
+				})
+			},
+			/**
+			 * 唤起键盘
+			 */
+			onPayUp() {
+				this.$refs.CodeKeyboard.show();
+			},
+			/**
+			 * 支付键盘回调
+			 * @param {Object} val
+			 */
+			KeyInfo(val) {
+
+				if (val.index >= 6) {
+					return;
+				}
+				// 判断是否输入的是删除键
+				if (val.keyCode === 8) {
+					// 删除最后一位
+					this.passwordArr.splice(val.index + 1, 1)
+				}
+				// 判断是否输入的是.
+				else if (val.keyCode == 190) {
+					// 输入.无效
+				} else {
+					this.passwordArr.push(val.key);
+				}
+
+				// uni.showModal({
+				//     title: '温馨提示',
+				//     content: '输入密码是 = ' + JSON.stringify(this.passwordArr)
+				// })
+
+				// 判断是否等于6
+				if (this.passwordArr.length === 6) {
+					// this.AffirmStatus = this.AffirmStatus + 1;
+					let str = ''
+					this.passwordArr.forEach(res => {
+						str += res
+					})
+					this.$emit('accountPayevent', str)
+					this.passwordArr = [];
+				}
+				// 判断到哪一步了
+				// if (this.AffirmStatus === 1) {
+				//     this.oldPasswordArr = this.passwordArr;
+				// } else if (this.AffirmStatus === 2) {
+				//     this.newPasswordArr = this.passwordArr;
+				// } else if (this.AffirmStatus === 3) {
+				//     this.afPasswordArr = this.passwordArr;
+				// } else if (this.AffirmStatus === 4) {
+				//     console.log(this.oldPasswordArr.join(''));
+				//     console.log(this.newPasswordArr.join(''));
+				//     console.log(this.afPasswordArr.join(''));
+				//     uni.showToast({
+				//         title: '修改成功',
+				//         icon: 'none'
+				//     })
+				//     setTimeout(() => {
+				//         uni.navigateBack();
+				//     }, 2000)
+				// }
+				this.$forceUpdate();
+			}
+
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	$base: #555; // 基础颜色
+
+	.page {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #FFFFFF;
+	}
+
+	.pay-title {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 200rpx;
+
+		text {
+			font-size: 28rpx;
+			color: #555555;
+		}
+	}
+
+	.pay-password {
+		display: flex;
+		align-items: center;
+		width: 90%;
+		height: 80rpx;
+		margin: 20rpx auto;
+		border: 2rpx solid $base;
+
+		.list {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 16.666%;
+			height: 100%;
+			border-right: 2rpx solid #EEEEEE;
+
+			text {
+				font-size: 32rpx;
+			}
+		}
+
+		.list:nth-child(6) {
+			border-right: none;
+		}
+	}
+
+	.hint {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100rpx;
+
+		text {
+			font-size: 28rpx;
+			color: $base;
+		}
+	}
+</style>
--- a/pages/order_detail/order_detail.vue
+++ b/pages/order_detail/order_detail.vue
@@ -176,12 +176,18 @@
 				</view>
 			</view>
 		</view>
+		<!-- 支付密码 -->
+		<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-show="ispws"></payPassword>
 	</view>
 </template>

 <script>
 	import webSocketUtils from '@/common/js/websocket.js'
+	import payPassword from './components/payPassword.vue'
 	export default {
+		components: {
+			payPassword
+		},
 		data() {
 			return {
 				height: '',
@@ -200,7 +206,10 @@
 				vipId: null,
 				orderInfo: '',
 				// 可用优惠券数据
-				couponAmount: 0
+				couponAmount: 0,
+				// 输入支付密码
+				passwordArr: [],
+				ispws: false
 			};
 		},

@@ -208,6 +217,8 @@
 			uni.$off('getMessage')
 		},
 		onLoad(e) {
+			// 获取用户信息
+			this.loginwxuserInfo()
 			// console.log(e, 140)
 			let res = JSON.parse(e.tableId)
 			this.listinfo.detailList = res
@@ -239,6 +250,14 @@
 			})
 		},
 		methods: {
+async loginwxuserInfo() {
+				let res = await this.api.loginwxuserInfo({
+					userId: uni.cache.get('userInfo').id
+				})
+				if (res.code == 0) {
+					uni.cache.set('userInfo', res.data);
+				}
+			},
 			async getcoupon() {
 				let res = await this.api.userCoupon({
 					"orderNum": this.listinfo.amount,
@@ -344,45 +363,19 @@
 					shopId_id: uni.cache.get('shopUser')
 				})
 			},
-			// 余额支付
-			async accountPayevent(id) {
-				console.log(this.amountVIP, '会员信息')
-
-				let res = await this.api.accountPay({
-					orderId: id,
-					memberId: this.vipId
-				})
-				console.log(res, '调试12')
-				if (res) {
-					this.ispayPws()
-				} else {
-					setTimeout(() => {
-						this.goRecharge()
-					}, 1000)
-				}
-			},
-			// 是否有支付密码
-			ispayPws() {
-				// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
-				if (this.amountVIP.isPwd == 0) {
-					uni.pro.navigateTo('/pages/user/repairpassword', {
-						shopId_id: uni.cache.get('shopUser')
-					})
-				} else {
-
-				}
-			},
+		
 			async showpopupclickdd(i) {
-				let res = await this.api.payorderPay({
-					orderId: this.listinfoid
-				}) //判断是否支付成功
-				if (res.code == 0) {
-					uni.showLoading({
-						title: '加载中',
-						mask: true
-					})
-					// #ifdef MP-WEIXIN
-					if (this.radiovalue1 == 1) {
+				if (this.radiovalue1 == 1) {
+					let res = await this.api.payorderPay({
+						orderId: this.listinfoid
+					}) //判断是否支付成功
+					if (res.code == 0) {
+						// uni.showLoading({
+						// 	title: '加载中',
+						// 	mask: true
+						// })
+						// #ifdef MP-WEIXIN
+						// 微信支付还是余额支付
 						uni.requestPayment({
 							provider: 'wxpay', //支付类型-固定值
 							partnerid: res.data.appId, // 微信支付商户号
@@ -395,7 +388,7 @@
 								uni.showToast({
 									title: "支付成功"
 								})
-								uni.cache.set('shopUser','')//删除shopUser
+								uni.cache.set('shopUser', '') //删除shopUser
 								this.paymodfiyOrderInfo()
 								setTimeout(res => {
 									uni.redirectTo({
@@ -425,25 +418,61 @@
 								console.log(data, '成功与否')
 							}
 						});
-					} else {
-						// 判断是否有绑定支付密码
-						let isVip =  uni.cache.get('userInfo').isPwd
-						console.log(isVip,'调试 123')
-						if (isVip == 0) {
-							uni.pro.navigateTo('/pages/user/repairpassword', {
-								shopId_id: uni.cache.get('shopUser')
-							})
-						} else {
-							this.accountPayevent(this.listinfoid)
-						}
+						// #endif	
+					}
+				} else {
+					// 判断是否有绑定支付密码
+					// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
+					let isVip = uni.cache.get('userInfo').isPwd
+					if (isVip == 0) {
+						uni.pro.navigateTo('/pages/user/repairpassword', {
+							// shopId_id: uni.cache.get('shopUser')
+						})
+					} else {
+						this.ispws = true
+						this.$nextTick(() => {
+							this.$refs.payPwd.onPayUp();
+						})
 					}
-
-					// #endif	
 				}
 			},
+			// 余额支付
+			async accountPayevent(pwd) {
+				this.ispws = false
+				let res = await this.api.accountPay({
+					orderId: this.listinfoid,
+					memberId: this.amountVIP.id,
+					pwd: pwd
+				})
+				console.log(res, '是否支付成功')
+				if(res.code ==0){
+					uni.showToast({
+						icon: 'none',
+						title: '支付成功',
+						success:()=>{
+							setTimeout(()=>{
+							uni.redirectTo({
+								url: '/pages/order/order_detail?orderId=' + this.listinfoid
+							});	
+							},2000)
+						
+						}
+					})
+				}
+				if(res.data==1){
+				 setTimeout(() => {
+				 	// 去充值
+				 	this.goRecharge()
+				 }, 2000)
+				}
+				
+				
+			},
+
 			clickselect(b) {
 				this.pay_type = b
 			},
+
 		},
 		mounted() {
 			//#ifdef MP-WEIXIN || H5