企业：支付倒计时五分钟，倒计时结束关闭弹窗

src/components/pay/confirmPaymentDialog.vue

@@ -14,6 +14,7 @@
         ref="payRef"
         v-bind="$attrs"
         @paySuccess="paySuccess"
+        @stopInterval="stopInterval"
       ></pay>
     </CtDialog>
   </div>
@@ -39,6 +40,10 @@ const paySuccess = () => {
   emit('paySuccess')
   // payDialog.value = false
 }
+const stopInterval = () => {
+  emit('stopInterval')
+  // payDialog.value = false
+}
 </script>
 <style lang="scss" scoped>
 </style>

src/components/pay/index.vue

@@ -43,7 +43,14 @@
         <!-- 二维码支付 -->
         <div v-if="isQrCodePay" style="text-align: center;">
           <QrCode :text="payQrCodeTxt" :width="170" style="margin: 0 auto;" />
-          <div class="mb-5" v-if="payQrCodeTxt" style="color: var(--v-error-base);">扫码支付时请勿离开</div>
+          <div
+            v-if="payQrCodeTxt"
+            class="mb-5"
+            style="color: var(--v-error-base);"
+          >
+            扫码支付时请勿离开
+            <span v-if="remainderZhShow">{{ remainderZhShow }}</span>
+          </div>
         </div>
         <!-- 钱包支付确认按钮 -->
         <div v-if="isWalletPay && !notEnoughMoney" class="mt-2" style="text-align: center;">
@@ -76,7 +83,7 @@ import { rechargeOrderCreate } from '@/api/recruit/enterprise/member/points'
 // import { payCalculation } from '@/utils/position'
 import Recharge from '@/views/recruit/enterprise/memberCenter/myMembers/components/pointsAndBalance.vue'
 
-const emit = defineEmits(['payTypeChange', 'paySuccess'])
+const emit = defineEmits(['payTypeChange', 'paySuccess', 'stopInterval'])
 const props = defineProps({
   params: {
     type: Object,
@@ -159,6 +166,8 @@ const paySubmit = async () => {
       }
       const res = await payOrderSubmit(params)
       payQrCodeTxt.value = res?.displayContent || '' // 生成二维码内容
+      
+      initIntervalFun()
 
       if (timer.value) clearInterval(timer.value); timer.value = null
       timer.value = setInterval(() => { payStatus() }, 1000) // 轮巡查询用户是否支付
@@ -321,6 +330,47 @@ const updateAccountInfo = async (init = false) => {
 }
 if ((props.appId - 0) !== 11) updateAccountInfo(true) // 点数发生支付时点充值-充值不查余额
 
+
+// 倒计时
+
+const countdownTime = 60000*5 // 倒计时五分钟
+let remainder = 0 // number
+const remainderZhShow = ref('') // 倒计时展示
+
+const remainderTimer = ref(null)
+// 初始化倒计时
+const initIntervalFun = () => {
+  remainder = countdownTime // 初始倒计时时间
+  if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null // 每一次点击都清除上一个轮询
+  // 倒计时计算
+  remainderCalc()
+  remainderTimer.value = setInterval(() => { remainderCalc() }, 1000)
+
+  if (timer.value) clearInterval(timer.value); timer.value = null
+  timer.value = setInterval(() => { payStatus() }, 2000) // 轮巡查询用户是否支付
+}
+
+const remainderCalc = () => {
+  remainder -= 1000
+  remainderZhShow.value = formatDuration(remainder)
+  if (remainder <= 0) {
+    emit('stopInterval') // 倒计时结束，关闭倒计时弹窗
+  }
+}
+
+const formatDuration = (remainder) => {
+  // 将毫秒转换为秒
+  var seconds = Math.floor(remainder / 1000)
+  // 计算分钟和剩余的秒数
+  var minutes = Math.floor(seconds / 60)
+  var remainingSeconds = seconds % 60
+  // 格式化分钟和秒数，确保秒数为两位数（如果小于10，则前面补0）
+  minutes = minutes.toString().padStart(2, '0')
+  remainingSeconds = remainingSeconds.toString().padStart(2, '0')
+  // 返回格式化的字符串
+  return `${minutes}分${remainingSeconds}秒`
+}
+
 </script>
 <style lang="scss" scoped>
 .font-size-30 { font-size: 30px; }

src/components/personalRecharge/initPay.vue

@@ -219,13 +219,15 @@ const remainderTimer = ref(null)
 const initIntervalFun = () => {
   remainder = countdownTime // 初始倒计时时间
   if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null // 每一次点击都清除上一个轮询
-  remainderTimer.value = setInterval(() => { showCountdown() }, 1000)
+  // 倒计时计算
+  remainderCalc()
+  remainderTimer.value = setInterval(() => { remainderCalc() }, 1000)
 
   if (payStatusTimer.value) clearInterval(payStatusTimer.value); payStatusTimer.value = null
   payStatusTimer.value = setInterval(() => { payStatus() }, 2000) // 轮巡查询用户是否支付
 }
 
-const showCountdown = () => {
+const remainderCalc = () => {
   remainder -= 1000
   remainderZhShow.value = formatDuration(remainder)
   if (remainder <= 0) clearTimer()
@@ -242,8 +244,7 @@ const formatDuration = (remainder) => {
   remainingSeconds = remainingSeconds.toString().padStart(2, '0')
   // 返回格式化的字符串
   return `${minutes}分${remainingSeconds}秒`
-} 
-
+}
 
 onUnmounted(() => {
   clearTimer()

src/views/recruit/enterprise/memberCenter/myMembers/components/pointsAndBalance.vue

@@ -84,6 +84,7 @@
     :cost="payCalculation(rechargeDataItem.payPrice, 'realPay')"
     :rechargeInfo="rechargeDataItem"
     @paySuccess="paySuccess"
+    @stopInterval="stopInterval"
     @close="showConfirmPaymentDialog = false"
   ></confirmPaymentDialog>
 </template>
@@ -151,6 +152,11 @@ const paySuccess = async () => {
   emits('paySuccess', 'CtDialogRecharge')
 }
 
+// 关闭支付弹窗
+const stopInterval = async () => {
+  showConfirmPaymentDialog.value = false
+}
+
 
 </script>