避免调用paySubmit加载二维码还没返回就关闭支付弹窗进而造成setInterval一直存在

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

@@ -80,7 +80,7 @@
 
 <script setup>
 defineOptions({ name: 'mall-pay'})
-import { computed, onUnmounted, ref } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 import QrCode from '@/components/QrCode'
 import { definePayTypeList, qrCodePay, walletPay } from '@/utils/payType'
 import { getEnableCodeList, getOrderPayStatus } from '@/api/common'
@@ -130,9 +130,11 @@ const notEnoughMoney = computed(() => {
 })
 
 const timer = ref(null)
-onUnmounted(() => {
-  if (timer.value) clearInterval(timer.value); timer.value = null
+onBeforeUnmount(() => {
+  isQrCodePay.value = false // 避免调用paySubmit加载二维码还没返回就关闭支付弹窗进而造成setInterval一直存在
+  clear()
 })
+
 // 如果是点数支付的话走完payOrderSubmit之后即扣点数，如果是二维码支付的话只是生成二维码，这一步以后是轮询是否支付成功
 const paySubmit = async (showLoading = false) => {
   if (!payment.value) return
@@ -149,11 +151,15 @@ const paySubmit = async (showLoading = false) => {
       const res = await submitOrder(params)
       payQrCodeTxt.value = res?.displayContent || '' // 生成二维码内容
       remainder.value = 1 
+      if (!isQrCodePay.value) {
+        clear()
+        return
+      }
       
       initIntervalFun()
 
       if (timer.value) clearInterval(timer.value); timer.value = null
-      timer.value = setInterval(() => { getPayStatus() }, 1000) // 轮巡查询用户是否支付
+      if(isQrCodePay.value) timer.value = setInterval(() => { getPayStatus() }, 1000) // 轮巡查询用户是否支付
     }
   } catch (error) {
     console.log(error)
@@ -202,6 +208,13 @@ const setOrder = async () => {
 }
 setOrder()
 
+// 清空setInterval
+function clear() {
+  remainder.value = 1
+  payQrCodeTxt.value = '' // 生成二维码内容
+  if (timer.value) clearInterval(timer.value); timer.value = null
+  if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null // 每一次点击都清除上一个轮询
+}
 
 // 1.获得支付方式
 const isWalletPay = ref(false)
@@ -212,6 +225,7 @@ const payTypeChange = (value) => {
   isQrCodePay.value = qrCodePay.includes(payment.value)
   isWalletPay.value = walletPay.includes(payment.value)
   if (isQrCodePay.value) paySubmit()
+  else { clear() }
 }
 // 1.支付方式
 const setPayMethods = async () => {
@@ -285,10 +299,10 @@ const initIntervalFun = () => {
   if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null // 每一次点击都清除上一个轮询
   // 倒计时计算
   remainderCalc()
-  remainderTimer.value = setInterval(() => { remainderCalc() }, 1000)
+  if(isQrCodePay.value) remainderTimer.value = setInterval(() => { remainderCalc() }, 1000)
 
   if (timer.value) clearInterval(timer.value); timer.value = null
-  timer.value = setInterval(() => { getPayStatus() }, 2000) // 轮巡查询用户是否支付
+  if(isQrCodePay.value) timer.value = setInterval(() => { getPayStatus() }, 2000) // 轮巡查询用户是否支付
 }
 
 const remainderCalc = () => {