Browse Source

支付倒计时

dev_YWQ
congzc 1 year ago
parent
commit
c31fade69c
1 changed files with 75 additions and 17 deletions
  1. +75
    -17
      src/pages/createing/index.vue

+ 75
- 17
src/pages/createing/index.vue View File

@@ -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">取&nbsp;消</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;


Loading…
Cancel
Save