103 lines
2.1 KiB
Vue
103 lines
2.1 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: "加载中...",
|
|
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"),
|
|
};
|
|
|
|
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>
|