代客下单增加用户扫描二维码支付

src/api/table.js

@@ -428,3 +428,14 @@ export function $changeUseType(data) {
     }
   });
 }
+//店铺订单支付获取链接
+export function $getOrderPayUrl(data) {
+  return request({
+    url: '/api/shopPayApi/getOrderPayUrl',
+    method: "get",
+    params:{
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    }
+  });
+}

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

@@ -46,7 +46,11 @@
         <template v-else>
           <div class="u-text-center">
             <div class="u-flex u-row-center">
-              <img :src="codeImg" class="codeImg" alt="" />
+              <div class="codeImg">
+                <canvas ref="canvas" id="QRCode_header"></canvas>
+              </div>
+
+              <!-- <img :src="codeImg" class="codeImg" alt="" /> -->
             </div>
             <div class="color-333 u-font-20 u-m-t-20">32.00元</div>
             <div class="color-aaa u-font-12 u-m-t-10">
@@ -60,12 +64,20 @@
   </el-dialog>
 </template>
   <script>
+import QRCode from "qrcode";
+import { $getOrderPayUrl } from "@/api/table";
+import { tbOrderInfoDetail } from "@/api/order";
+
 export default {
   props: {
     openSwitch: {
       type: Boolean,
       default: true,
     },
+    order: {
+      type: Object,
+      default: () => ({}),
+    },
     title: {
       type: String,
       default: "支付",
@@ -82,6 +94,7 @@ export default {
   data() {
     return {
       tips: "",
+      paymentQrcode: "",
       paysSel: 0,
       form: {
         money: "",
@@ -99,6 +112,7 @@ export default {
       ],
       number: "0",
       show: false,
+      timer: null,
     };
   },
   watch: {
@@ -111,12 +125,23 @@ export default {
     },
     paysSel(newval) {
       if (newval == 0) {
+        this.clear();
         this.tips = "请使用扫码枪扫微信/支付宝收款码";
         this.$nextTick(() => {
           this.$refs.refInputCode.focus();
         });
       } else {
         this.tips = "请用户使用微信/支付宝扫描付款码";
+        this.startGetOrderInfo();
+        this.$nextTick(() => {
+          QRCode.toCanvas(
+            this.$refs.canvas,
+            this.paymentQrcode,
+            function (error) {
+              console.log(error);
+            }
+          );
+        });
       }
     },
     number(newval) {
@@ -124,29 +149,50 @@ export default {
     },
   },
   methods: {
-    codeInputChange(e){
-      console.log(e)
+    clear() {
+      clearInterval(this.timer);
+    },
+    async getOrderDetail() {
+      const res = await tbOrderInfoDetail(this.order.id);
+      if (res.status == "closed") {
+        this.$emit("paySuccess");
+      }
+    },
+    startGetOrderInfo() {
+      clearInterval(this.timer);
+      this.getOrderDetail();
+      this.timer = setInterval(() => {
+        this.getOrderDetail();
+      }, 1000);
+    },
+    codeInputChange(e) {
+      console.log(e);
       // this.$emit("confirm", this.form.code);
     },
     reset() {
       // this.form.money=''
       this.form.code = "";
       this.paysSel = 0;
+      this.clear();
     },
     changeKey(key, val) {
       this[key] = val;
     },
 
     confirm() {
-      if(!this.form.code){
-        return this.$message.error("请输入或扫付款码")
+      if (!this.form.code) {
+        return this.$message.error("请输入或扫付款码");
       }
-        this.close()
+      this.close();
       this.$emit("confirm", this.form.code);
     },
     open() {
       this.show = true;
       this.form.money = Number(this.price).toFixed(2);
+      $getOrderPayUrl({ orderId: this.order.id }).then((res) => {
+        console.log(res);
+        this.paymentQrcode = res;
+      });
       this.$nextTick(() => {
         this.$refs.refInputCode.focus();
       });
@@ -171,8 +217,9 @@ export default {
   
 <style  lang="scss" scoped>
 .codeImg {
-  width: 160px;
+  width: 164px;
   border: 1px solid rgb(220, 223, 230);
-  height: 160px;
+  height: 164px;
+  overflow: hidden;
 }
 </style>

src/views/tool/Instead/index.vue

@@ -1087,9 +1087,11 @@
       ref="refWxScanCode"
       defaultTips="请使用扫码枪扫描微信/支付宝收款码"
       title="扫码支付"
-      :openSwitch="false"
+      :openSwitch="true"
       :price="createOrder.data.amount * createOrder.discount"
+      :order="createOrder.data"
       @confirm="scanPayConfirm"
+      @paySuccess="payOrderSuccess"
     ></scan-pay>
     <!-- 储值卡支付 -->
     <scan-pay
@@ -2085,11 +2087,17 @@ export default {
       // if(!this.table.tableId){
       //   return this.$message.error("请选择桌台");
       // }
-      if (this.table) {
+      if (this.table.tableId) {
         return $getMasterId({
           tableId: this.table.tableId,
           vipUserId: this.vipUser.id,
+          useType:this.useTypes.sel=='takeout'?'takeout':'',
         });
+      }else{
+        // return $getMasterId({
+        //   useType:'takeout',
+        //   vipUserId: this.vipUser.id,
+        // });
       }
     },
     onSelGoodsSkuClose() {
@@ -2888,6 +2896,8 @@ export default {
       this.getCategory();
       this.getTable();
       console.log(params);
+      const res=await this.getMasterId()
+      console.log(res)
       if (!params) {
         //无台桌代客下单
         return;