|
@@ -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; |
|
|