销毁定时器

src/views/mall/components/details/order/pay.vue

@@ -25,7 +25,7 @@
       <div v-if="isQrCodePay && remainder<=0" style="text-align: center;" class="my-10">
         二维码失效，请重试！
         <!-- 二维码刷新 -->
-        <span @click="paySubmit(true)">
+        <span @click="submitOrderFun(true)">
           <v-icon size="20" style="color: var(--v-primary-base)">mdi-refresh</v-icon>
           <span class="text-decoration-underline cursor-pointer mr-2" style="color: var(--v-primary-base)">刷新</span>
         </span>
@@ -68,7 +68,7 @@
           <v-btn
             class="buttons" color="primary"
             :loading="payLoading"
-            @click="walletPaySubmit"
+            @click="submitBtn"
           >
             确认
           </v-btn>
@@ -108,7 +108,6 @@ const payStatus = ref(0) // 0=检测支付环境, -2=未查询到支付单信息
 const payMethods = ref([]) // 可选的支付方式
 const payment = ref('') // 选中的支付方式
 
-
 import { useUserStore } from '@/store/user'; const userStore = useUserStore()
 const userAccount = ref(JSON.parse(localStorage.getItem('userAccount')) || {}) // 账户信息
 userStore.$subscribe((mutation, state) => {
@@ -129,14 +128,15 @@ const notEnoughMoney = computed(() => {
   return orderInfo.value?.price-0 > balance.value
 })
 
-const timer = ref(null)
+const Destroyed = ref(false)
 onBeforeUnmount(() => {
-  isQrCodePay.value = false // 避免调用paySubmit加载二维码还没返回就关闭支付弹窗进而造成setInterval一直存在
+  Destroyed.value = true // 避免执行paySubmit中关闭支付弹窗，造成setInterval一直存在
   clear()
 })
 
-// 如果是点数支付的话走完payOrderSubmit之后即扣点数，如果是二维码支付的话只是生成二维码，这一步以后是轮询是否支付成功
-const paySubmit = async (showLoading = false) => {
+// 提交支付订单 (提交后倒计时显示及支付状态轮巡)
+const timer = ref(null) // 支付状态轮询
+const submitOrderFun = async (showLoading = false) => {
   if (!payment.value) return
   try {
     if (orderInfo.value) {
@@ -149,17 +149,11 @@ const paySubmit = async (showLoading = false) => {
       }
       if (showLoading) loading.value = true
       const res = await submitOrder(params)
-      payQrCodeTxt.value = res?.displayContent || '' // 生成二维码内容
+      // 二维码内容赋值
+      payQrCodeTxt.value = res?.displayContent || ''
       remainder.value = 1 
-      if (!isQrCodePay.value) {
-        clear()
-        return
-      }
-      
-      initIntervalFun()
-
-      if (timer.value) clearInterval(timer.value); timer.value = null
-      if(isQrCodePay.value) timer.value = setInterval(() => { getPayStatus() }, 1000) // 轮巡查询用户是否支付
+      //
+      initIntervalFun() // 倒计时显示及支付状态轮巡
     }
   } catch (error) {
     console.log(error)
@@ -199,7 +193,7 @@ const setOrder = async () => {
     await setPayMethods()
     // 获得支付方式
     // await setPayMethods();
-    if (isQrCodePay.value) paySubmit()
+    if (isQrCodePay.value) submitOrderFun() // 二维码支付时自动创建订单获取二维码内容展示
   } catch (error) {
     console.log('error:', error)
   } finally {
@@ -211,7 +205,7 @@ setOrder()
 // 清空setInterval
 function clear() {
   remainder.value = 1
-  payQrCodeTxt.value = '' // 生成二维码内容
+  payQrCodeTxt.value = '' // 二维码内容
   if (timer.value) clearInterval(timer.value); timer.value = null
   if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null // 每一次点击都清除上一个轮询
 }
@@ -224,7 +218,7 @@ const payTypeChange = (value) => {
   tip.value = payMethods.value.find(e => e.code === payment.value)?.tip || ''
   isQrCodePay.value = qrCodePay.includes(payment.value)
   isWalletPay.value = walletPay.includes(payment.value)
-  if (isQrCodePay.value) paySubmit()
+  if (isQrCodePay.value) submitOrderFun() // 二维码支付时自动创建订单获取二维码内容展示
   else { clear() }
 }
 // 1.支付方式
@@ -256,30 +250,28 @@ const setPayMethods = async () => {
 const payLoading = ref(false)
 const payQrCodeTxt = ref('')
 
-// 钱包支付（余额支付）
-const walletPaySubmit = () => {
+// 钱包支付（余额支付）、模拟支付
+const submitBtn = () => {
   payLoading.value = true
-  paySubmit() // 使用点数
+  submitOrderFun()
 }
 
 import Snackbar from '@/plugins/snackbar'
 import { useRoute } from 'vue-router'; const route = useRoute()
 import { useRouter } from 'vue-router'; const router = useRouter()
 const getPayStatus = async () => {
+  if (Destroyed.value) return clear() // 用户关闭支付
   try {
     const data = await getOrderPayStatus({ id: orderInfo.value.id || orderInfo.value.payOrderId })
     if ((data?.status - 0) === 10) {
       // 支付成功
       if (timer.value) clearInterval(timer.value); timer.value = null
       setTimeout(() => {
-        // 更新余额
-        updateAccountInfo()
-        // 支付成功
         emit('paySuccess')
+        if (isWalletPay.value) updateAccountInfo() // 更新余额
         // Snackbar.success('支付成功')
-        // 返回指定页面
-        if (route.fullPath === props.returnUrl) router.go(0)
-        else if (props.returnUrl) router.push(props.returnUrl)
+        if (route.fullPath === props.returnUrl) router.go(0) // 刷新页面
+        else if (props.returnUrl) router.push(props.returnUrl) // 返回指定页面
       }, 2000);
     }
   } catch (error) {
@@ -297,18 +289,17 @@ const remainderTimer = ref(null)
 const initIntervalFun = () => {
   remainder.value = countdownTime // 初始倒计时时间
   if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null // 每一次点击都清除上一个轮询
-  // 倒计时计算
-  remainderCalc()
-  if(isQrCodePay.value) remainderTimer.value = setInterval(() => { remainderCalc() }, 1000)
-
   if (timer.value) clearInterval(timer.value); timer.value = null
-  if(isQrCodePay.value) timer.value = setInterval(() => { getPayStatus() }, 2000) // 轮巡查询用户是否支付
+  //
+  remainderCalc(); remainderTimer.value = setInterval(() => { remainderCalc() }, 1000) // 倒计时计算
+  timer.value = setInterval(() => { getPayStatus() }, 2000) // 轮巡支付状态
 }
 
 const remainderCalc = () => {
+  if (Destroyed.value) return clear() // 用户关闭支付
   remainder.value -= 1000
   remainderZhShow.value = formatDuration(remainder.value)
-  if (remainder.value <= 0) {
+  if (remainder.value <= 0) { // 倒计时结束
     tip.value = ''
     if (timer.value) clearInterval(timer.value); timer.value = null
     emit('stopInterval') // 倒计时结束，关闭倒计时弹窗