优化代客下单扫码支付订单状态查询

src/api/order/pay.ts

@@ -3,7 +3,6 @@ import { Order_BaseUrl } from "@/api/config";
 const baseURL = Order_BaseUrl + "/pay";
 const Api = {
   // h5支付
-
   h5Pay(data: h5PayRequest) {
     return request<any>({
       url: `${baseURL}/h5Pay`,
@@ -67,7 +66,6 @@ const Api = {
       params
     });
   },
-
 };
 
 export default Api;

src/utils/request.ts

@@ -91,7 +91,7 @@ service.interceptors.response.use(
       return;
     }
     ElMessage.error(formatErrorMsg(msg || "Error"));
-    return Promise.reject(new Error(formatErrorMsg(msg || "Error")));
+    return Promise.reject(response.data);
   },
   async (error: any) => {
 

src/views/order/index/components/detail.vue

@@ -33,7 +33,7 @@
           <div class="item">
             <div class="t">订单类型</div>
             <div class="b">
-              {{ sendTypeFilter(detail.sendType) }}
+              {{ sendTypeFilter(detail.dineMode) }}
             </div>
           </div>
         </div>
@@ -46,12 +46,12 @@
           </div>
           <div class="item">
             <div class="t">下单时间</div>
-            <div class="b">{{ timeFilter(detail.createdAt) }}</div>
+            <div class="b">{{ timeFilter(detail.createTime) }}</div>
           </div>
           <div class="item">
             <div class="t">支付时间</div>
             <div class="b">
-              {{ timeFilter(detail.createdAt) }}
+              {{ timeFilter(detail.paidTime) }}
             </div>
           </div>
         </div>

src/views/order/index/components/orderEnum.js

@@ -51,15 +51,15 @@ export default {
       label: "快递",
     },
     {
-      key: "takeaway",
+      key: "take-away",
       label: "外卖",
     },
     {
-      key: "takeself",
+      key: "take-out",
       label: "自提",
     },
     {
-      key: "table",
+      key: "dine-in",
       label: "堂食",
     },
   ],

src/views/tool/Instead/components/order.vue

@@ -220,6 +220,25 @@
     <popup-coupon ref="refCoupon" :user="carts.vipUser" @confirm="refCouponConfirm"></popup-coupon>
     <!-- 挂账 -->
     <chooseGuaZahng ref="refGuaZhang" :payMoney="currentpayMoney" @confirm="refGuaZhangConfirm"></chooseGuaZahng>
+    <!-- 扫码等待用户支付转台查询 -->
+    <el-dialog v-model="showCheckPayStauts" width="400" title="订单支付状态查询中..." :close-on-click-modal="false"
+      :show-close="false">
+      <div class="pay_status_content">
+        <div class="loading" v-loading="checkPayStautsLoading" element-loading-text="用户支付中..."></div>
+        <div class="btn">
+          <el-button style="width: 100%" :disabled="!closeState" type="primary" @click="resetScanCode">
+            <span v-if="!closeState">{{ closeStateTime }}秒后可重新扫码</span>
+            <span v-else>重新扫码</span>
+          </el-button>
+        </div>
+        <div class="btn">
+          <el-button style="width: 100%" :disabled="!closeState" @click="closeScanCode">
+            <span v-if="!closeState">{{ closeStateTime }}秒后可关闭</span>
+            <span v-else>关闭</span>
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -243,6 +262,7 @@ import discount from "./discount.vue";
 import { ElLoading } from "element-plus";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { BigNumber } from "bignumber.js";
+import { onUnmounted } from 'vue'
 
 // 配置BigNumber精度
 BigNumber.set({
@@ -751,7 +771,12 @@ async function payOrder(payType, isScan, guazhangren) {
     }
     carts.clear();
   } catch (error) {
-    console.log(error);
+    console.log('payOrder===', error);
+    // 启动状态查询
+    if (error.code == 211) {
+      showCheckPayStauts.value = true
+      autoCheckOrder()
+    }
     clearTimeout(payTimer);
     loading.close();
   }
@@ -762,6 +787,102 @@ async function payOrder(payType, isScan, guazhangren) {
   }
 }
 
+function clearAutoCheckOrder() {
+  clearInterval(timer.value)
+  timer.value = null
+}
+
+// 关闭查询
+function closeScanCode() {
+  showCheckPayStauts.value = false;
+  reset()
+}
+
+// 重新扫码
+function resetScanCode() {
+  reset()
+  showCheckPayStauts.value = false;
+  clearInterval(timer.value)
+  timer.value = null
+
+  clearInterval(closeStateTimer.value)
+  closeStateTimer.value = null
+
+  setTimeout(() => {
+    refScanPay.value.open(returnPayParams(), "scanCode")
+  }, 500)
+}
+
+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)
+function autoCheckOrder() {
+  closeStateTimerFuc()
+  timer.value = setInterval(() => {
+    // 开始锁单
+    // goodsStore.isOrderLock({
+    //   table_code: table_code.value
+    // }, 'pay_lock')
+    checkPayStauts(false)
+  }, 2000)
+}
+
+function reset() {
+  checkPayStautsLoading.value = true;
+  closeState.value = false
+  closeStateTime.value = 5
+}
+
+// 查询订单支付状态
+const showCheckPayStauts = ref(false)
+const checkPayStautsLoading = ref(true)
+async function checkPayStauts(tips = true) {
+  try {
+    // 扫码下单
+    const res = await payApi.queryOrderStatus({ orderId: props.orderInfo.id });
+    if (res == "done") {
+      // 支付成功，解锁订单
+      // await goodsStore.isOrderLock({
+      //   table_code: table_code.value
+      // }, 'pay_unlock')
+
+      // userPayWait.value = false
+      checkPayStautsLoading.value = false;
+      // scanCode.value = "";
+      showCheckPayStauts.value = false;
+      clearAutoCheckOrder()
+      paysuccess();
+      return;
+    }
+    if (res == "unpaid") {
+      if (tips) {
+        ElMessage.warning("用户支付中...");
+      }
+      return;
+    } else {
+      clearAutoCheckOrder()
+      ElMessage.warning(res.msg || '');
+      return;
+    }
+  } catch (error) {
+    console.log(error);
+  }
+}
+
 function paysuccess() {
   clearTimeout(payTimer);
   ElMessage.success("支付成功");
@@ -822,6 +943,10 @@ watch(
   }
 );
 
+onUnmounted(() => {
+  clearAutoCheckOrder()
+})
+
 onMounted(() => {
   carts.payParamsInit();
   getPaytype();
@@ -899,4 +1024,30 @@ defineExpose({
   color: #666;
   padding: 8px 10px 8px 20px;
 }
+
+.pay_status_content {
+  flex: 1;
+  padding: 0 var(--el-font-size-base);
+  height: 400px;
+  padding-bottom: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .loading {
+    width: 200px;
+    height: 200px;
+    --el-loading-spinner-size: 100px;
+
+    :deep(.el-loading-text) {
+      font-size: 20px;
+    }
+  }
+
+  .btn {
+    width: 200px;
+    padding-top: var(--el-font-size-base);
+  }
+}
 </style>

src/views/tool/Instead/components/scan-pay.vue

@@ -2,12 +2,8 @@
   <el-dialog width="400px" :title="title" v-model="show" @close="reset">
     <div class="u-p-15">
       <div v-if="openSwitch" class="u-m-b-20">
-        <el-button
+        <el-button @click="changeKey('paysSel', index)" v-for="(item, index) in pays" :key="index"
-          @click="changeKey('paysSel', index)"
+          :type="paysSel == index ? 'primary' : ''">
-          v-for="(item, index) in pays"
-          :key="index"
-          :type="paysSel == index ? 'primary' : ''"
-        >
           {{ item.text }}
         </el-button>
       </div>
@@ -21,13 +17,8 @@
               <el-input :value="form.money" disabled></el-input>
             </el-form-item>
             <el-form-item label="付款码">
-              <el-input
+              <el-input v-model="form.code" @change="inputChange" autofocus placeholder="请扫码或者输入付款码"
-                v-model="form.code"
+                ref="refInputCode"></el-input>
-                @change="codeInputChange"
-                autofocus
-                placeholder="请扫码或者输入付款码"
-                ref="refInputCode"
-              ></el-input>
             </el-form-item>
             <div class="u-flex u-row-center u-m-t-50">
               <el-button @click="close">取消</el-button>
@@ -46,7 +37,9 @@
             </div>
             <div class="color-333 u-font-20 u-m-t-20">{{ form.money }}元</div>
             <div class="color-aaa u-font-12 u-m-t-10">
-              <el-icon class="loading-ani"><Loading /></el-icon>
+              <el-icon class="loading-ani">
+                <Loading />
+              </el-icon>
               <span>等待用户支付</span>
             </div>
           </div>
@@ -55,7 +48,8 @@
     </div>
   </el-dialog>
 </template>
-  <script>
+<script>
+import _ from 'lodash'
 import QRCode from "qrcode";
 import orderApi from "@/api/order/order";
 import payApi from "@/api/order/pay";
@@ -128,6 +122,9 @@ export default {
     },
   },
   methods: {
+    inputChange: _.debounce(function (e) {
+      this.confirm();
+    }, 100),
     to2(n) {
       return n.toFixed(2);
     },
@@ -175,7 +172,6 @@ export default {
     changeKey(key, val) {
       this[key] = val;
     },
-
     confirm() {
       if (!this.form.code) {
         return ElMessage.error("请输入或扫付款码");
@@ -240,13 +236,14 @@ export default {
 };
 </script>
 
-<style  lang="scss" scoped>
+<style lang="scss" scoped>
 .codeImg {
   width: 164px;
   border: 1px solid rgb(220, 223, 230);
   height: 164px;
   overflow: hidden;
 }
+
 @keyframes rotating {
   0% {
     -webkit-transform: rotate(0deg);
@@ -258,6 +255,7 @@ export default {
     transform: rotate(1turn);
   }
 }
+
 .loading-ani {
   animation: rotating 2s linear infinite;
 }