| @@ -20,7 +20,10 @@ | |||||
| opacity="0.9" | opacity="0.9" | ||||
| > | > | ||||
| <view class="content"> | <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> | <text>打开微信扫码登录小程序</text> | ||||
| <view class="orangeBtn" style="margin-top: 100rpx">取 消</view> | <view class="orangeBtn" style="margin-top: 100rpx">取 消</view> | ||||
| </view> | </view> | ||||
| @@ -160,22 +163,49 @@ async function getQRCode() { | |||||
| //#endregion --------------------- | //#endregion --------------------- | ||||
| //#region 获取用户信息 | //#region 获取用户信息 | ||||
| const timer = ref(null); | |||||
| const timer = ref(null); //轮询用户信息 | |||||
| const payMask = ref(false); //支付状态遮罩层 | |||||
| const payCount = ref(90); //支付倒计时数 | |||||
| const payCountTimer = ref(null); //支付倒计时 | |||||
| async function getUser() { | async function getUser() { | ||||
| try { | try { | ||||
| const res = await getUserApi(uni.getStorageSync("UserId")); | 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) { | } catch (err) { | ||||
| console.log(err); | console.log(err); | ||||
| @@ -191,7 +221,7 @@ watch( | |||||
| if (uni.getStorageSync("UserId") && qrCode.value) { | if (uni.getStorageSync("UserId") && qrCode.value) { | ||||
| getUser(); | getUser(); | ||||
| } | } | ||||
| }, 3000); | |||||
| }, 1000); | |||||
| } else if (showQrCode.value == false) { | } else if (showQrCode.value == false) { | ||||
| // uni.setStorageSync("UserId", null); | // uni.setStorageSync("UserId", null); | ||||
| qrCode.value = 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(() => { | onUnload(() => { | ||||
| clearInterval(timer.value); | clearInterval(timer.value); | ||||
| timer.value = null; | timer.value = null; | ||||
| @@ -261,13 +305,27 @@ function toCamera() { | |||||
| flex-direction: column; | flex-direction: column; | ||||
| align-items: center; | align-items: center; | ||||
| text-align: center; | text-align: center; | ||||
| image { | |||||
| .imageBox { | |||||
| position: relative; | |||||
| margin-top: 200rpx; | margin-top: 200rpx; | ||||
| padding: 30rpx; | |||||
| width: 500rpx; | width: 500rpx; | ||||
| height: 500rpx; | height: 500rpx; | ||||
| border-radius: 30rpx; | border-radius: 30rpx; | ||||
| background-color: #fff; | 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 { | text { | ||||
| margin-top: 20rpx; | margin-top: 20rpx; | ||||