87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
|
<script setup>
|
||
|
|
import {orderQuery} from "~/api/goods/index.js";
|
||
|
|
import { showLoadingToast, closeToast } from 'vant';
|
||
|
|
|
||
|
|
definePageMeta({
|
||
|
|
i18n: 'payment.text1',
|
||
|
|
})
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
const {t} = useI18n();
|
||
|
|
const route = useRoute();
|
||
|
|
const resData = ref({})
|
||
|
|
let timer = null
|
||
|
|
let startTime = Date.now()
|
||
|
|
|
||
|
|
const queryOrder = async () => {
|
||
|
|
// 首先检查是否已经超过5秒
|
||
|
|
if (Date.now() - startTime > 5000) {
|
||
|
|
clearInterval(timer)
|
||
|
|
closeToast()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
showLoadingToast({
|
||
|
|
message:t('common.loading'),
|
||
|
|
forbidClick: true,
|
||
|
|
});
|
||
|
|
|
||
|
|
try {
|
||
|
|
const res = await orderQuery({
|
||
|
|
orderNo: route.query.orderNo
|
||
|
|
})
|
||
|
|
|
||
|
|
if (res.status === 0) {
|
||
|
|
resData.value = res.data
|
||
|
|
|
||
|
|
// 只在支付成功时停止轮询
|
||
|
|
if (resData.value.status === 1) {
|
||
|
|
clearInterval(timer)
|
||
|
|
closeToast()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
clearInterval(timer)
|
||
|
|
closeToast()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 立即执行一次
|
||
|
|
await queryOrder()
|
||
|
|
|
||
|
|
// 开始轮询
|
||
|
|
timer = setInterval(async () => {
|
||
|
|
await queryOrder()
|
||
|
|
}, 1000)
|
||
|
|
|
||
|
|
// 组件卸载时清除定时器
|
||
|
|
onUnmounted(() => {
|
||
|
|
if (timer) {
|
||
|
|
clearInterval(timer)
|
||
|
|
closeToast()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const statusLabel = {
|
||
|
|
1: t('payment.text2'),
|
||
|
|
2: t('payment.text3'),
|
||
|
|
3: t('payment.text4'),
|
||
|
|
4: t('payment.text5'),
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
class="w-[100vw] h-screen-nav bg-[url('@/static/images/3532@2x.png')] bg-cover grow-1 flex flex-col items-center px-30px">
|
||
|
|
<div class="flex flex-col items-center mt-150px">
|
||
|
|
<img v-if="resData.status===1" class="w-119px h-120px mb-36px" src="@/static/images/5554@2x1.png" alt="">
|
||
|
|
<img v-else class="w-119px h-120px mb-36px" src="@/static/images/zu6021@2x.png" alt="">
|
||
|
|
<div class="text-#000 text-16px mb-25px">{{ statusLabel[resData.status] }}!</div>
|
||
|
|
<div class="text-#999 text-16px">{{ resData.currency }}{{ resData.money }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
</style>
|