86 lines
1.9 KiB
Vue
86 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 () => {
|
||
showLoadingToast({
|
||
message: '加载中...',
|
||
forbidClick: true,
|
||
});
|
||
|
||
try {
|
||
const res = await orderQuery({
|
||
orderNo: route.query.orderNo
|
||
})
|
||
|
||
if (res.status === 0) {
|
||
resData.value = res.data
|
||
|
||
// 如果状态为1或者超过5秒，停止轮询
|
||
if (resData.value.status === 1 || Date.now() - startTime > 5000) {
|
||
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'),
|
||
}
|
||
|
||
const goHome = () => {
|
||
router.push('/')
|
||
}
|
||
</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 class="w-119px h-120px mb-36px" src="@/static/images/5554@2x1.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 class="w-full mt-auto mb-40px">
|
||
<van-button type="primary" block @click="goHome">
|
||
{{ t('payment.result.backToHome') }}
|
||
</van-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
</style> |