liveh5-nuxt/app/pages/collectCode/payment/result/index.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>