倒计时清空二维码及接口调用

src/components/personalRecharge/index.vue

@@ -56,6 +56,7 @@
     <initPay
       v-if="current"
       :info="itemInfo"
+      @stopInterval="current = 0"
       @paySuccess="current = 0"
     ></initPay>
   </div>
@@ -104,26 +105,14 @@ getListData()
 //   price.value = num
 // }
 
-const timer = ref(null)
+// const timer = ref(null)
 const itemInfo = ref(null)
-let count = 1; const interval = 2000;
+// let count = 1; const interval = 2000;
 const handleSelect = (item, index) => {
-  count = 1
+  // count = 1
   itemInfo.value = item
   current.value = index + 1
   price.value = item.payPrice
-  if (timer.value) clearInterval(timer.value); timer.value = null // 每一次点击都清除上一个轮询
-  timer.value = setInterval(() => { clearIntervalFun() }, interval)
-}
-
-// 一段时间后清除二维码轮询
-const clearIntervalFun = () => {
-  // console.log('一段时间后清除二维码轮询', (count * interval))
-  count++
-  if ((count * interval) >= 30000 && timer.value) {
-    current.value = 0
-    clearInterval(timer.value); timer.value = null
-  }
 }
 
 </script>

src/components/personalRecharge/initPay.vue

@@ -35,7 +35,13 @@
         </div>
       </div>
     </div>
-    <div class="mt-5 ml-2" style="color: var(--v-error-base);">扫码支付时请勿离开</div>
+    <div
+      class="mt-5 ml-2"
+      style="color: var(--v-error-base);"
+    >
+      扫码支付时请勿离开
+      <span>{{ countdownShow/1000 + 's' }}</span>
+    </div>
   </div>
 </template>
 
@@ -47,7 +53,7 @@ import { definePayTypeList, qrCodePay, walletPay } from '@/utils/payType'
 import { getEnableCodeList, payOrderSubmit, getOrderPayStatus } from '@/api/common'
 import { setWalletRecharge } from '@/api/recruit/personal/myWallet.js'
 import { onUnmounted, ref, nextTick, watch } from 'vue'
-const emit = defineEmits(['payTypeChange', 'paySuccess'])
+const emit = defineEmits(['payTypeChange', 'paySuccess', 'stopInterval'])
 const props = defineProps({
   info: {
     type: Object,
@@ -75,15 +81,16 @@ const updateAccountInfo = async () => {
 import Snackbar from '@/plugins/snackbar'
 import { useRoute } from 'vue-router'; const route = useRoute()
 import { useRouter } from 'vue-router'; const router = useRouter()
+const payStatusTimer = ref(null) // 支付状态轮询
 const payStatus = async () => {
-  // if (timer.value) clearInterval(timer.value); timer.value = null
+  // if (payStatusTimer.value) clearInterval(payStatusTimer.value); payStatusTimer.value = null
   // setTimeout(() => { // 测试代码
   // }, 2000)
   try {
     const data = await getOrderPayStatus({ id: (props.appId - 0) === 11 ? payOrder.value.payOrderId : payOrder.value.id })
     if ((data?.status - 0) === 10) {
       // 支付成功
-      if (timer.value) clearInterval(timer.value); timer.value = null
+      if (payStatusTimer.value) clearInterval(payStatusTimer.value); payStatusTimer.value = null
       setTimeout(() => {
         // 更新点数(充值、发布职位)
         updateAccountInfo()
@@ -100,11 +107,7 @@ const payStatus = async () => {
   }
 }
 
-const timer = ref(null)
 const payQrCodeTxt = ref('')
-onUnmounted(() => {
-  if (timer.value) clearInterval(timer.value); timer.value = null
-})
 // 如果是点数支付的话走完payOrderSubmit之后即扣点数，如果是二维码支付的话只是生成二维码，这一步以后是轮询是否支付成功
 const paySubmit = async () => {
   if (!payType.value) return
@@ -119,8 +122,9 @@ const paySubmit = async () => {
       const res = await payOrderSubmit(params)
       payQrCodeTxt.value = res?.displayContent || '二维码生成失败，请刷新再试。' // 生成二维码内容
 
-      if (timer.value) clearInterval(timer.value); timer.value = null
-      timer.value = setInterval(() => { payStatus() }, 1000) // 轮巡查询用户是否支付
+      if (payStatusTimer.value) clearInterval(payStatusTimer.value); payStatusTimer.value = null
+      payStatusTimer.value = setInterval(() => { payStatus() }, 2000) // 轮巡查询用户是否支付
+      stopIntervalFun()
     }
   } catch (error) {
     console.log(error)
@@ -190,26 +194,49 @@ const getCodeList = async () => {
     getUnpaidOrderList()
   }
 }
-// getCodeList()
 
 watch(
   () => props.info.id, 
   (newVal, oldVal) => {
     if (!newVal) return
-    if (!oldVal && newVal) getCodeList()
-    if (oldVal && newVal) getUnpaidOrderList()
+    if (!oldVal && newVal) getCodeList() // 初始化时要从获取支付方式列表开始
+    if (oldVal && newVal) getUnpaidOrderList() // 切换充值金额，从创建新充值订单开始
   },
   { immediate: true },
   { deep: true }
 )
 
+const countdownTime = 60000 // 倒计时
+const countdownShow = ref(null) // 展示
+
+const hideTimer = ref(null)
+const stopIntervalFun = () => {
+  if (hideTimer.value) clearInterval(hideTimer.value); hideTimer.value = null // 每一次点击都清除上一个轮询
+  // 初始化倒计时
+  countdownShow.value = countdownTime
+  // 倒计时展示
+  hideTimer.value = setInterval(() => { showCountdown() }, 1000)
+}
+
+const showCountdown = () => {
+  countdownShow.value -= 1000
+  if (countdownShow.value <= 0) clearTimer()
+}
+
+onUnmounted(() => {
+  clearTimer()
+})
+
+ const clearTimer = () => {
+  if (payStatusTimer.value) clearInterval(payStatusTimer.value); payStatusTimer.value = null
+  if (hideTimer.value) clearInterval(hideTimer.value); hideTimer.value = null
+  emit('stopInterval')
+ }
+
 </script>
 <style lang="scss" scoped>
 .code {
-  // max-width: 1100px;
-  // max-width: 600px;
   border-radius: 6px;
-  // margin: 0 auto;
   background-color: #f7f8fa;
   &-left {
     border: 1px solid #00897B;