From c31fade69c6ba5b8435b911d2a8eba50b6286ee1 Mon Sep 17 00:00:00 2001 From: congzc Date: Mon, 25 Sep 2023 17:21:51 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E4=BB=98=E5=80=92=E8=AE=A1=E6=97=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/createing/index.vue | 92 ++++++++++++++++++++++++++++------- 1 file changed, 75 insertions(+), 17 deletions(-) diff --git a/src/pages/createing/index.vue b/src/pages/createing/index.vue index 2e5684b..b7cf484 100644 --- a/src/pages/createing/index.vue +++ b/src/pages/createing/index.vue @@ -20,7 +20,10 @@ opacity="0.9" > - + + + + 打开微信扫码登录小程序 取 消 @@ -160,22 +163,49 @@ async function getQRCode() { //#endregion --------------------- //#region 获取用户信息 -const timer = ref(null); +const timer = ref(null); //轮询用户信息 +const payMask = ref(false); //支付状态遮罩层 +const payCount = ref(90); //支付倒计时数 +const payCountTimer = ref(null); //支付倒计时 async function getUser() { try { const res = await getUserApi(uni.getStorageSync("UserId")); - if (res.code == 200) { - clearInterval(timer.value); - timer.value = null; - uni.setStorageSync("token", res.data.token); - uni.setStorageSync("phone", res.data.phone); - showQrCode.value = false; - uni.showToast({ - title: "登录成功!", - icon: "success", - mask: true, - }); - createing(); + // 如果接口200就说明已登录 + if (res.code == 200 && res.data) { + // 查询支付状态 0:待支付,2:支付中,3:已支付 + if (res.data.payStatus == 3) { + uni.hideLoading(); + payMask.value = false; + clearInterval(timer.value); + timer.value = null; + uni.setStorageSync("token", res.data.token); + uni.setStorageSync("phone", res.data.phone); + showQrCode.value = false; + uni.showToast({ + title: "登录成功!", + icon: "success", + mask: true, + }); + createing(); + } else if (res.data.payStatus == 0) { + payMask.value = true; + payCount.value--; + // clearInterval(payCountTimer.value); + // payCountTimer.value = null; + // payCountTimer.value = setInterval(() => { + // }, 1000); + uni.showLoading({ + title: `待支付,${payCount.value}s后过期...`, + mask: true, + }); + } else if (res.data.payStatus == 2) { + payMask.value = true; + payCount.value--; + uni.showLoading({ + title: `支付中,${payCount.value}s后过期...`, + mask: true, + }); + } } } catch (err) { console.log(err); @@ -191,7 +221,7 @@ watch( if (uni.getStorageSync("UserId") && qrCode.value) { getUser(); } - }, 3000); + }, 1000); } else if (showQrCode.value == false) { // uni.setStorageSync("UserId", null); qrCode.value = null; @@ -200,6 +230,20 @@ watch( } } ); +// 监听支付倒计时 +watch( + () => payCount.value, + () => { + if (payCount.value <= 0) { + uni.hideLoading(); + showQrCode.value = false; + payMask.value = false; + // clearInterval(payCountTimer.value); + // payCountTimer.value = null; + payCount.value = 90; + } + } +); onUnload(() => { clearInterval(timer.value); timer.value = null; @@ -261,13 +305,27 @@ function toCamera() { flex-direction: column; align-items: center; text-align: center; - image { + .imageBox { + position: relative; margin-top: 200rpx; - padding: 30rpx; width: 500rpx; height: 500rpx; border-radius: 30rpx; background-color: #fff; + .mask { + position: absolute; + width: 500rpx; + height: 500rpx; + border-radius: 30rpx; + background-color: rgba($color: #000000, $alpha: 0.7); + z-index: 2; + } + image { + width: 500rpx; + height: 500rpx; + border-radius: 30rpx; + background-color: #fff; + } } text { margin-top: 20rpx;