增加扫码支付

src/views/table/components/pay-type.vue

@@ -46,6 +46,7 @@ export default {
   methods: {
     changeSel(item) {
       this.sel = item.payType;
+      this.$emit("itemClick", item);
     },
     async init() {
       const res = await $getPayType();

src/views/table/components/table-diancan-components/scan-pay.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-dialog width="400px" :title="title" :visible.sync="show">
+  <el-dialog width="400px" :title="title" :visible.sync="show" @close="reset">
     <div class="u-p-15">
-      <div>
+      <div v-if="openSwitch">
         <el-button
           size="medium"
           @click="changeKey('paysSel', index)"
@@ -27,12 +27,19 @@
             <el-form-item label="应付金额">
               <el-input :value="form.money" disabled></el-input>
             </el-form-item>
-            <el-form-item label="收款码">
-              <el-input v-model="form.code" autofocus></el-input>
+            <el-form-item label="付款码">
+              <el-input
+                v-model="form.code"
+                @change="codeInputChange"
+                placeholder="请扫码或者输入付款码"
+                ref="refInputCode"
+              ></el-input>
             </el-form-item>
             <div class="u-flex u-row-center u-m-t-50">
-              <el-button size="medium">取消</el-button>
-              <el-button size="medium" type="success">确定</el-button>
+              <el-button size="medium" @click="close">取消</el-button>
+              <el-button size="medium" type="success" @click="confirm"
+                >确定</el-button
+              >
             </div>
           </el-form>
         </template>
@@ -55,18 +62,26 @@
   <script>
 export default {
   props: {
+    openSwitch: {
+      type: Boolean,
+      default: true,
+    },
     title: {
       type: String,
       default: "支付",
     },
-    value: {
+    price: {
       type: [String, Number],
       default: 0,
     },
+    defaultTips: {
+      type: String,
+      default: "请使用扫码枪扫描付款码",
+    },
   },
   data() {
     return {
-      tips: "请使用扫码枪扫微信/支付宝收款码",
+      tips: "",
       paysSel: 0,
       form: {
         money: "",
@@ -87,9 +102,19 @@ export default {
     };
   },
   watch: {
+    defaultTips(val) {
+      this.tips = val;
+    },
+    price(val) {
+      console.log(val);
+      this.form.money = Number(val).toFixed(2);
+    },
     paysSel(newval) {
-      if (newval == 1) {
+      if (newval == 0) {
         this.tips = "请使用扫码枪扫微信/支付宝收款码";
+        this.$nextTick(() => {
+          this.$refs.refInputCode.focus();
+        });
       } else {
         this.tips = "请用户使用微信/支付宝扫描付款码";
       }
@@ -99,13 +124,32 @@ export default {
     },
   },
   methods: {
+    codeInputChange(e){
+      console.log(e)
+      // this.$emit("confirm", this.form.code);
+    },
+    reset() {
+      // this.form.money=''
+      this.form.code = "";
+      this.paysSel = 0;
+    },
     changeKey(key, val) {
       this[key] = val;
     },
 
-    confirm() {},
+    confirm() {
+      if(!this.form.code){
+        return this.$message.error("请输入或扫付款码")
+      }
+        this.close()
+        this.$emit("confirm", this.form.code);
+    },
     open() {
       this.show = true;
+      this.form.money = Number(this.price).toFixed(2);
+      this.$nextTick(() => {
+        this.$refs.refInputCode.focus();
+      });
     },
     close() {
       this.show = false;
@@ -120,6 +164,7 @@ export default {
   },
   mounted() {
     this.number = `${this.value}`;
+    this.tips = this.defaultTips;
   },
 };
 </script>

src/views/table/components/table-diancan.vue

@@ -142,7 +142,7 @@
           </div>
         </div>
       </div>
-      <div class="diancan">
+      <div class="diancan" v-loading="loading">
         <div class="order">
           <div class="relative">
             <div style="padding-right: 14px">
@@ -619,7 +619,12 @@
                   <!-- <el-button size="medium "> 免单 </el-button> -->
                 </div>
 
-                <pay-type ref="refPayType" v-model="order.payType"> </pay-type>
+                <pay-type
+                  ref="refPayType"
+                  v-model="order.payType"
+                  @itemClick="payTypeItemClick"
+                >
+                </pay-type>
                 <div style="margin-top: 20px">
                   <el-button type="success" size="medium" @click="payOrder">
                     <span>立即支付</span>
@@ -788,24 +793,21 @@
           </button>
           <template v-else>
             <button
-            class="my-btn disabled flex-1"
-            v-if=" skuGoods.data.stockNumber<=0"
-            disabled
-          >
-            库存不足
-          </button>
+              class="my-btn disabled flex-1"
+              v-if="skuGoods.data.stockNumber <= 0"
+              disabled
+            >
+              库存不足
+            </button>
             <button
-            class="my-btn success flex-1"
-            v-else
-            :disabled="CanConfirm"
-            @click="chooseSkuConfirm"
-          >
-            确定
-          </button>
-          
-           
+              class="my-btn success flex-1"
+              v-else
+              :disabled="CanConfirm"
+              @click="chooseSkuConfirm"
+            >
+              确定
+            </button>
           </template>
-         
         </div>
       </div>
     </el-dialog>
@@ -950,7 +952,14 @@
     </money-keyboard>
 
     <!-- 扫码支付 -->
-    <scan-pay ref="refScanCode"></scan-pay>
+    <scan-pay
+      ref="refScanCode"
+      title="扫码支付"
+      defaultTips="注意:扫码支付请保证输入框获得焦点"
+      :openSwitch="false"
+      :price="createOrder.data.amount * createOrder.discount"
+      @confirm="scanPayConfirm"
+    ></scan-pay>
     <!-- 打折 -->
     <money-discount ref="refDiscount" @confirm="ChangeDiscount">
     </money-discount>
@@ -1004,6 +1013,8 @@ export default {
   },
   data() {
     return {
+      //整体点餐页面loading
+      loading: false,
       //台桌点餐页面打开时带来的参数 isAddGoods 加菜    isPayOrder结账
       key: "",
       //是否是从挂单里取出来的订单
@@ -1060,7 +1071,7 @@ export default {
         total: 0,
       },
       order: {
-        orderId:"",
+        orderId: "",
         payType: "",
         masterId: "",
         allPack: false,
@@ -1133,10 +1144,13 @@ export default {
       canUpdate: true,
       //下单
       createOrder: {
+        code: "",
         status: "",
         discount: 1,
         form: {},
-        data: {},
+        data: {
+          amount: 0,
+        },
         quan: {
           list: [],
           sel: "",
@@ -1323,7 +1337,7 @@ export default {
     },
     "order.selIndex": function (val, oldval) {
       console.log(val);
-      this.order.old.selIndex=-1
+      this.order.old.selIndex = -1;
       if (val === -1) {
         // return (this.order.number = 1);
         this.order.cacheNumber = 1;
@@ -1393,6 +1407,18 @@ export default {
     // this.refToggle("refDiscount", true);
   },
   methods: {
+    //扫码支付弹窗确认
+    scanPayConfirm(code) {
+      this.createOrder.code = code;
+      this.payOrder();
+    },
+    payTypeItemClick(item) {
+      console.log(item);
+      if (item.payType == "scanCode") {
+        //扫码支付
+        this.refToggle("refScanCode", true);
+      }
+    },
     ChangeDiscount(discount) {
       this.createOrder.discount = discount;
     },
@@ -1493,15 +1519,22 @@ export default {
         orderId: this.createOrder.data.id,
         payType: this.order.payType,
       });
-      const res = await $payOrder({
-        tableId: this.table.tableId,
-        masterId: this.masterId,
-        orderId: this.createOrder.data.id,
-        payType: this.order.payType,
-        vipUserId: this.vipUser.id,
-        discount: this.createOrder.discount,
-      });
-      this.payOrderSuccess();
+      this.loading = true;
+      try {
+        const res = await $payOrder({
+          tableId: this.table.tableId,
+          masterId: this.masterId,
+          orderId: this.createOrder.data.id,
+          payType: this.order.payType,
+          vipUserId: this.vipUser.id,
+          discount: this.createOrder.discount,
+          code: this.createOrder.code,
+        });
+        this.loading = false;
+        this.payOrderSuccess();
+      } catch (error) {
+        this.loading = false;
+      }
     },
     payOrderSuccess() {
       this.$notify({
@@ -1533,29 +1566,32 @@ export default {
       this.isCreateOrder = false;
     },
     //生成订单
-    toCreateOrderDebounce(isNowPay){
-      if(this.createOrder.status!=''&&this.createOrder.status!='success'){
-        return
+    toCreateOrderDebounce(isNowPay) {
+      if (
+        this.createOrder.status != "" &&
+        this.createOrder.status != "success"
+      ) {
+        return;
       }
-      this.createOrder.status='loading'
-      this.toCreateOrder(isNowPay)
+      this.createOrder.status = "loading";
+      this.toCreateOrder(isNowPay);
     },
     async toCreateOrder(isNowPay = false) {
-      console.log(this.order)
-      console.log(this.order.orderId)
+      console.log(this.order);
+      console.log(this.order.orderId);
       const res = await $createOrder({
         masterId: this.order.masterId || this.masterId,
         vipUserId: this.vipUser.id,
         tableId: this.table.tableId,
         note: this.note.content,
         postPay: this.postPay,
-        orderld:this.order.orderId
+        orderld: this.order.orderId,
       });
       //后付款
       console.log(this.postPay);
       console.log(isNowPay);
       console.log(this.postPay && isNowPay);
-      this.createOrder.status='success'
+      this.createOrder.status = "success";
       if (this.postPay && !isNowPay) {
         this.$notify({
           title: "下单成功",
@@ -1713,12 +1749,12 @@ export default {
       //   masterId:order.carList[0].masterId
       // })
 
-      const { masterId, tableId, userId, remark,id } = await $cacheOrder({
+      const { masterId, tableId, userId, remark, id } = await $cacheOrder({
         orderId: this.prveOrder.list[this.prveOrder.sel].orderId,
         isPending: false,
       });
       this.order.orderId = id;
-      console.log(  this.order.orderId)
+      console.log(this.order.orderId);
 
       this.masterId = masterId;
       this.isPrverOrder = true;
@@ -1739,8 +1775,8 @@ export default {
     //删除挂单
     async delPrveOrder(isRequest = true) {
       const { sel } = this.prveOrder;
-      if(this.prveOrder.list<=0||sel<0){
-        return
+      if (this.prveOrder.list <= 0 || sel < 0) {
+        return;
       }
       const order = this.prveOrder.list[sel];
       const orderMasterId = order.carList[0].masterId;
@@ -1816,7 +1852,7 @@ export default {
       this.order.list = [];
       this.order.selIndex = -1;
       this.note.content = "";
-      this.order.orderId=""
+      this.order.orderId = "";
       this.$nextTick(() => {
         this.getCacheOrder();
       });
@@ -2116,13 +2152,13 @@ export default {
               .filter((v) => v.specSnap.match(i))
               .every((v) => {
                 // return isCanBuy(v,this.selGoods.data.isStock)
-                return isCanBuy(v)
+                return isCanBuy(v);
               });
           }
         }
         return prve;
       }, {});
-      console.log(includeSkuMap)
+      console.log(includeSkuMap);
       for (let i in includeSkuMap) {
         for (let k in skuList) {
           const index = skuList[k].valueArr.findIndex((val) => val === i);
@@ -2155,6 +2191,7 @@ export default {
     },
     reset() {
       // this.goods.list = [];
+      this.loading = false;
       this.order.masterId = "";
       this.order.list = [];
       this.order.query.page = 1;
@@ -2162,20 +2199,21 @@ export default {
       this.order.list = [];
       this.order.selIndex = -1;
       this.order.old.list = [];
-      this.prveOrder.list=[];
-      this.prveOrder.selIndex=-1
+      this.prveOrder.list = [];
+      this.prveOrder.selIndex = -1;
       this.order.old.selIndex = -1;
       this.isCreateOrder = false;
-      this.createOrder.status=""
+      this.createOrder.status = "";
+      this.createOrder.code = "";
       this.note.content = "";
       this.vipUser = { id: "" };
       this.allPack = false;
       this.note.content = "";
       this.isPrverOrder = false;
       this.createOrder.discount = 1;
-      this.order.cacheNumber=1
+      this.order.cacheNumber = 1;
       this.key = "";
-      this.order.orderId=''
+      this.order.orderId = "";
     },
     //获取购物车数据
     async getCart() {
@@ -2294,14 +2332,14 @@ export default {
       } else {
         //增加
         console.log(item);
-        const num= item.specList[0].suit
+        const num = item.specList[0].suit;
         res = await addCart({
           masterId: this.masterId,
           vipUserId: this.vipUser.id,
           productId: item.id,
           skuId: item.specList[0].id,
           tableId: this.table.tableId,
-          num:num<=0?1:num, // 0会删除此商品
+          num: num <= 0 ? 1 : num, // 0会删除此商品
           isPack: false, // 是否打包
         });
         this.orderListPush(res);