优化扫码支付查询支付状态逻辑

src/components/payCard/payCard.vue

@@ -5,7 +5,7 @@
                 <div class="t1">
                     <span class="title">应收:￥</span>
                     <span class="num">{{ money }}</span>
-                    <div class="clear" v-if="money != props.amount" @click="reset">
+                    <div class="clear" v-if="money != props.amount" @click="emit('reset')">
                         <span style="margin-left: 10px;">清除优惠</span>
                         <el-icon style="margin-left: 6px">
                             <CircleClose />

src/components/payCard/scanModal.vue

@@ -1,7 +1,8 @@
 <!-- 扫码弹窗 -->
 <template>
   <div class="dialog">
-    <el-dialog title="扫码支付" width="600" v-model="dialogVisible" @open="reset" @closed="resetScanCode">
+    <el-dialog title="扫码支付" width="600" v-model="dialogVisible" :close-on-click-modal="false" :show-close="!userPayWait"
+      @open="reset" @closed="resetScanCode">
       <div class="content">
         <div class="left">
           <el-image :src="icon" style="width: 60px; height: 60px"></el-image>
@@ -12,8 +13,9 @@
             <span class="n">{{ props.money }}</span>
           </div>
           <div class="input">
-            <el-input ref="inputRef" v-model="scanCode" style="height: calc(var(--el-component-size-large) + 30px)"
+            <el-input ref="inputRef" v-model="scanCode" :maxlength="18"
-              placeholder="请扫描付款码" clearable @change="inputChange"></el-input>
+              style="height: calc(var(--el-component-size-large) + 30px)" placeholder="请扫描付款码" clearable
+              @change="inputChange"></el-input>
             <div class="tips">注意：扫码支付请保证输入框获得焦点，输入内容结束后会自动支付，请勿重复操作</div>
           </div>
           <!-- <div class="number_warp">
@@ -27,20 +29,23 @@
                         </div>
                     </div> -->
           <div class="btn">
-            <el-button type="primary" style="width: 100%" v-loading="loading">立即支付</el-button>
+            <el-button type="primary" style="width: 100%" v-loading="loading" @click="submitHandle">
+              立即支付
+            </el-button>
           </div>
         </div>
         <div class="pay_wait" v-else>
           <div class="loading" v-loading="loading" element-loading-text="用户支付中..."></div>
           <div class="btn">
-            <el-button type="primary" style="width: 100%" v-loading="checkPayStatusLoading" @click="checkPayStauts">
+            <el-button style="width: 100%" :disabled="!closeState" type="primary" @click="resetScanCode">
-              <span v-if="!checkPayStatusLoading">查询用户支付状态</span>
+              <span v-if="!closeState">{{ closeStateTime }}秒后可重新扫码</span>
-              <span v-else>查询中...</span>
+              <span v-else>重新扫码</span>
             </el-button>
           </div>
           <div class="btn">
-            <el-button style="width: 100%" @click="resetScanCode">
+            <el-button style="width: 100%" :disabled="!closeState" @click="closeScanCode">
-              重新扫码
+              <span v-if="!closeState">{{ closeStateTime }}秒后可关闭</span>
+              <span v-else>关闭</span>
             </el-button>
           </div>
         </div>
@@ -51,9 +56,9 @@
 
 <script setup>
 import _ from "lodash";
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import icon from "@/assets/icon_scan.png";
-import { scanpay, queryOrder, quickPay, queryQuickPayStatus, accountPay, queryScanPay } from "@/api/pay";
+import { quickPay, queryQuickPayStatus, accountPay } from "@/api/pay";
 import { useUser } from "@/store/user.js";
 import { useGlobal } from '@/store/global.js'
 import { formatDecimal } from '@/utils'
@@ -61,7 +66,6 @@ import { microPay, queryOrderStatus, microPayVip, vipPay, queryPayStatus } from
 import { ElMessage } from "element-plus";
 
 const store = useUser();
-const global = useGlobal()
 const emits = defineEmits(["success", 'orderExpired']);
 
 const props = defineProps({
@@ -103,17 +107,16 @@ const inputRef = ref(null);
 
 const loading = ref(false);
 const userPayWait = ref(false);
-const checkPayStatusLoading = ref(false);
 
 const fastOrder = ref('')
-const vipPayOrder = ref('')
+
+const submitHandle = _.throttle(submitHandleAjax, 200);
 
 // 提交扫码支付
-async function submitHandle() {
+async function submitHandleAjax() {
-  console.log('props.selecttype===', props.selecttype);
+  // console.log('props.selecttype===', props.selecttype);
-
   try {
-    if (!scanCode.value) return;
+    if (!scanCode.value || scanCode.value.length > 18) return;
     loading.value = true;
     if (props.selecttype == 0) {
       // 下单扫码支付
@@ -185,10 +188,30 @@ async function submitHandle() {
   }
 }
 
+// 关闭扫码支付
+function closeScanCode() {
+  dialogVisible.value = false;
+}
+
+const closeState = ref(false)
+const closeStateTime = ref(5);
+const closeStateTimer = ref(null)
+
+function closeStateTimerFuc() {
+  closeStateTimer.value = setInterval(() => {
+    closeStateTime.value--
+    if (closeStateTime.value <= 0) {
+      clearInterval(closeStateTimer.value)
+      closeStateTimer.value = null
+      closeState.value = true
+    }
+  }, 1000)
+}
 
-const timer = ref(null)
 // 自动查询订单状态
+const timer = ref(null)
 function autoCheckOrder() {
+  closeStateTimerFuc()
   timer.value = setInterval(() => {
     checkPayStauts(false)
   }, 2000)
@@ -285,9 +308,11 @@ function clearAutoCheckOrder() {
 function resetScanCode() {
   clearInterval(timer.value)
   timer.value = null
-  userPayWait.value = false;
+
-  loading.value = false;
+  clearInterval(closeStateTimer.value)
-  scanCode.value = "";
+  closeStateTimer.value = null
+
+  reset()
   setTimeout(() => {
     inputRef.value.focus();
   }, 500)
@@ -312,7 +337,6 @@ function delHandle() {
 // }
 
 const inputChange = _.debounce(function (e) {
-  // console.log(e);
   submitHandle();
 }, 100);
 
@@ -328,10 +352,11 @@ function close() {
 }
 
 function reset() {
+  userPayWait.value = false;
   loading.value = false;
   scanCode.value = "";
-  // 关闭叫号功能
+  closeState.value = false
-  // global.updateData(false)
+  closeStateTime.value = 5
 }
 
 defineExpose({

src/store/user.js

@@ -152,6 +152,8 @@ export const useUser = defineStore("user", {
         useStorage.del("shopInfo");
         useStorage.del("token");
         useStorage.del("douyin");
+        useStorage.del("categoryIndex");
+        useStorage.del("tableCode");
 
         this.userInfo = {};
         this.shopInfo = {};