| @@ -20,7 +20,10 @@ | |||
| opacity="0.9" | |||
| > | |||
| <view class="content"> | |||
| <image :src="qrCode" mode="scaleToFill" /> | |||
| <view class="imageBox" :class="payMask ? 'glass' : ''"> | |||
| <view class="mask" v-show="payMask"></view> | |||
| <image :src="qrCode" mode="scaleToFill" /> | |||
| </view> | |||
| <text>打开微信扫码登录小程序</text> | |||
| <view class="orangeBtn" style="margin-top: 100rpx">取 消</view> | |||
| </view> | |||
| @@ -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; | |||