86 lines
2.0 KiB
Vue
86 lines
2.0 KiB
Vue
<template>
|
|
<div class="w-[100vw] h-screen-nav bg-[url('@/static/images/3532@2x.png')] bg-cover flex-grow-1 flex flex-col items-center pt-183px px-30px">
|
|
<div class="text-#000 text-16px mb-25px">等待销售员确认</div>
|
|
<img :src="qrCodeUrl" alt="" class="mb-10px">
|
|
<div class="text-#848484 text-14px">已生成订单确认二维码</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import QRCode from 'qrcode';
|
|
import { ref } from 'vue';
|
|
import {authStore} from "~/stores/auth/index.js";
|
|
import {orderQuery} from "~/api/goods/index.js";
|
|
const {payment}= authStore()
|
|
definePageMeta({
|
|
i18n: 'payment.title'
|
|
})
|
|
const router=useRouter()
|
|
const resData=ref({})
|
|
let timer = null
|
|
const queryOrder = async () => {
|
|
try {
|
|
const res = await orderQuery({
|
|
orderNo: payment.value.payUid
|
|
})
|
|
|
|
if (res.status === 0) {
|
|
resData.value = res.data
|
|
|
|
// 只在支付成功时停止轮询
|
|
if (resData.value.status === 1) {
|
|
clearInterval(timer)
|
|
router.push({
|
|
path: '/payment/result',
|
|
query:{
|
|
orderNo:payment.value.payUid
|
|
}
|
|
})
|
|
}
|
|
}
|
|
} catch (error) {
|
|
clearInterval(timer)
|
|
}
|
|
}
|
|
|
|
// 立即执行一次
|
|
await queryOrder()
|
|
const qrCodeUrl=ref('')
|
|
// 开始轮询
|
|
timer = setInterval(async () => {
|
|
await queryOrder()
|
|
}, 1000)
|
|
|
|
// 组件卸载时清除定时器
|
|
onUnmounted(() => {
|
|
if (timer) {
|
|
clearInterval(timer)
|
|
closeToast()
|
|
}
|
|
})
|
|
async function generateQRCodeURL(text) {
|
|
try {
|
|
const url = await QRCode.toDataURL(text, {
|
|
width: 283,
|
|
margin: 1,
|
|
errorCorrectionLevel: 'H',
|
|
color: {
|
|
dark: '#2B53AC', // 深色部分使用蓝色
|
|
light: '#ffffff' // 浅色部分使用白色
|
|
},
|
|
rendererOpts: {
|
|
quality: 1.0
|
|
}
|
|
});
|
|
return url;
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
|
|
qrCodeUrl.value = await generateQRCodeURL(JSON.stringify({
|
|
type:'auction-order',
|
|
buyUid: payment.value.buyUid,
|
|
payUid:payment.value.payUid
|
|
}))
|
|
</script> |