代客下单增加扫码支付退款弹窗

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

@@ -0,0 +1,133 @@
+<template>
+  <el-dialog width="400px" :title="title" :visible.sync="show">
+    <div class="u-p-15">
+      <div>
+        <el-button
+          size="medium"
+          @click="changeKey('paysSel', index)"
+          v-for="(item, index) in pays"
+          :key="index"
+          :type="paysSel == index ? 'success' : ''"
+          >{{ item.text }}</el-button
+        >
+      </div>
+      <div class="u-m-t-20">
+        <el-alert
+          :closable="false"
+          v-if="tips"
+          :title="tips"
+          type="warning"
+          show-icon
+        >
+        </el-alert>
+      </div>
+      <div class="u-m-t-20">
+        <template v-if="paysSel == 0">
+          <el-form label-width="90px" label-position="left">
+            <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>
+            <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>
+            </div>
+          </el-form>
+        </template>
+        <template v-else>
+          <div class="u-text-center">
+            <div class="u-flex u-row-center">
+              <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">
+              <i class="el-icon-loading"></i>
+              <span>等待用户支付</span>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+  <script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "支付",
+    },
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      tips: "请使用扫码枪扫微信/支付宝收款码",
+      paysSel: 0,
+      form: {
+        money: "",
+        code: "",
+      },
+      codeImg:
+        "https://zhyx.eingdong.com/qrcode/api.php?url=https%3A%2F%2Fzhyx.eingdong.com%2Fcopyright%2F%23%2Fpay%3Fid%3D139451580",
+      pays: [
+        {
+          text: "主扫",
+        },
+        {
+          text: "被扫",
+        },
+      ],
+      number: "0",
+      show: false,
+    };
+  },
+  watch: {
+    paysSel(newval) {
+      if (newval == 1) {
+        this.tips = "请使用扫码枪扫微信/支付宝收款码";
+      } else {
+        this.tips = "请用户使用微信/支付宝扫描付款码";
+      }
+    },
+    number(newval) {
+      this.$emit("input", newval);
+    },
+  },
+  methods: {
+    changeKey(key, val) {
+      this[key] = val;
+    },
+
+    confirm() {},
+    open() {
+      this.show = true;
+    },
+    close() {
+      this.show = false;
+    },
+    numberInput(val) {
+      console.log(val);
+      this.number = `${Number(val)}`;
+    },
+    keyboradConfirm() {
+      this.$emit("confirm", this.number);
+    },
+  },
+  mounted() {
+    this.number = `${this.value}`;
+  },
+};
+</script>
+  
+<style  lang="scss" scoped>
+.codeImg {
+  width: 160px;
+  border: 1px solid rgb(220, 223, 230);
+  height: 160px;
+}
+</style>

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

@@ -311,8 +311,8 @@
                           <el-input
                             :min="0"
                             type="number"
-                            @input="cartGoodsNumberInput($event,item)"
+                            @input="cartGoodsNumberInput($event, item)"
-                            @change="cartGoodsNumberChange($event,item)"
+                            @change="cartGoodsNumberChange($event, item)"
                             v-model="item.number"
                             placeholder="0"
                           ></el-input>
@@ -504,10 +504,7 @@
                 <div class="flex img-box" v-if="layout.sel !== 'text'">
                   <img class="goods-img" :src="item.coverImg" alt="" />
                   <template v-if="layout.sel === 'img-and-text'">
-                    <div
+                    <div class="sell-out-svg" v-if="isSellOut(item)">
-                      class="sell-out-svg"
-                      v-if="isSellOut(item)"
-                    >
                       <svg
                         t="1724234807994"
                         class="icon"
@@ -981,6 +978,9 @@
     <!-- 支付时的键盘弹窗 -->
     <money-keyboard ref="refMoneyKeyboard" :title="moneyKeyboard.title">
     </money-keyboard>
+
+    <!-- 扫码支付 -->
+    <scan-pay ref="refScanCode"></scan-pay>
   </div>
 </template>
 
@@ -988,6 +988,7 @@
 import chooseUser from "./choose-user.vue";
 import payType from "./pay-type.vue";
 import chooseTable from "./table-diancan-components/choose-table-master.vue";
+import scanPay from "./table-diancan-components/scan-pay.vue";
 import orderNote from "./table-diancan-components/note.vue";
 import moneyKeyboard from "./money-keyboard.vue";
 import dayjs from "dayjs";
@@ -1008,53 +1009,7 @@ import {
   $payOrder,
 } from "@/api/table";
 import { tbShopCategoryGet } from "@/api/shop";
-//判断商品是否可以下单
+import { isCanBuy,arrayContainsAll,generateCombinations,returnReverseVal } from "./util.js";
-function isCanBuy(goods) {
-  return goods.isGrounding && goods.isPauseSale == 0 && goods.stockNumber > 0;
-}
-
-// 一个数组是否包含另外一个数组全部元素
-function arrayContainsAll(arr1, arr2) {
-  for (let i = 0; i < arr2.length; i++) {
-    if (!arr1.includes(arr2[i])) {
-      return false;
-    }
-  }
-  return true;
-}
-
-//n项 n-1项组合，生成全部结果
-function generateCombinations(arr, k) {
-  let result = [];
-
-  function helper(index, current) {
-    if (current.length === k) {
-      result.push(current.slice()); // 使用slice()来避免直接修改原始数组
-    } else {
-      for (let i = index; i < arr.length; i++) {
-        current.push(arr[i]); // 将当前元素添加到组合中
-        helper(i + 1, current); // 递归调用，索引增加以避免重复选择相同的元素
-        current.pop(); // 回溯，移除当前元素以便尝试其他组合
-      }
-    }
-  }
-
-  helper(0, []); // 从索引0开始，初始空数组作为起点
-  return result;
-}
-
-function returnReverseVal(val, isReturnString = true) {
-  const isBol = typeof val === "boolean";
-  const isString = typeof val === "string";
-  let reverseNewval = "";
-  if (isBol) {
-    reverseNewval = !val;
-  }
-  if (isString) {
-    reverseNewval = val === "true" ? "false" : "true";
-  }
-  return reverseNewval;
-}
 
 export default {
   components: {
@@ -1063,6 +1018,7 @@ export default {
     payType,
     orderNote,
     moneyKeyboard,
+    scanPay,
   },
   data() {
     return {
@@ -1250,7 +1206,7 @@ export default {
     },
     allNumber() {
       return this.order.list.reduce((a, b) => {
-        return a + b.number*1;
+        return a + b.number * 1;
       }, 0);
     },
     selGoodsHide() {
@@ -1405,8 +1361,8 @@ export default {
       });
     },
     "goods.query.productId": function (newval) {
-      if(!this.$goodsData){
+      if (!this.$goodsData) {
-        return
+        return;
       }
       if (newval == "") {
         this.goods.list = this.$goodsData || [];
@@ -1422,31 +1378,38 @@ export default {
   mounted() {
     // this.getGoods();
     // this.getCategory();
+    
+    // this.refToggle('refScanCode',true)
   },
   methods: {
-    //购物车商品输入框数量输入
+    refToggle(key,isShow){
-    cartGoodsNumberInput(newval,item){
+      if(!this.$refs[key]){
-      if(newval<=0){
+        return
-        return this.order.cacheNumber=1
       }
-      newval=`${newval}`.split('.')[0]*1
+      isShow?this.$refs[key].open():this.$refs[key].close()
-      this.order.cacheNumber=newval
+    },  
-      this.$nextTick(()=>{
+    //购物车商品输入框数量输入
-        item.number=newval
+    cartGoodsNumberInput(newval, item) {
-      })
+      if (newval <= 0) {
+        return (this.order.cacheNumber = 1);
+      }
+      newval = `${newval}`.split(".")[0] * 1;
+      this.order.cacheNumber = newval;
+      this.$nextTick(() => {
+        item.number = newval;
+      });
     },
     //购物车商品输入框数量改变
-    cartGoodsNumberChange(newval,item){
+    cartGoodsNumberChange(newval, item) {
-      console.log(newval)
+      console.log(newval);
-      if(newval<=0){
+      if (newval <= 0) {
-        item.number=1
+        item.number = 1;
-       return this.order.number=1
+        return (this.order.number = 1);
       }
-      newval=`${newval}`.split('.')[0]*1
+      newval = `${newval}`.split(".")[0] * 1;
-      console.log(newval)
+      console.log(newval);
-      this.order.cacheNumber=newval
+      this.order.cacheNumber = newval;
-      this.order.number=newval
+      this.order.number = newval;
-     
     },
     //判读单规格商品是否售尽
     isSellOut(item) {
@@ -2386,9 +2349,9 @@ export default {
     },
     async getGoods() {
       const res = await getGoodsLists(this.goods.query);
-      const goods= res.records.filter((v) => {
+      const goods = res.records.filter((v) => {
-        if(!v){
+        if (!v) {
-          return false
+          return false;
         }
         let isShow = true;
         if (v.typeEnum !== "sku") {
@@ -2396,7 +2359,7 @@ export default {
         }
         return isShow;
       });
-      this.goods.list =goods
+      this.goods.list = goods;
       this.goods.total = res.total;
       this.$goodsData = goods;
     },
@@ -2943,7 +2906,6 @@ input[type="number"]::-webkit-outer-spin-button {
   cursor: pointer;
 }
 
-
 ::v-deep .tag-group .el-tag {
   min-width: 80px;
   height: 28px;

src/views/table/components/util.js

@@ -0,0 +1,47 @@
+//判断商品是否可以下单
+export function isCanBuy(goods) {
+    return goods.isGrounding && goods.isPauseSale == 0 && goods.stockNumber > 0;
+}
+
+// 一个数组是否包含另外一个数组全部元素
+export function arrayContainsAll(arr1, arr2) {
+    for (let i = 0; i < arr2.length; i++) {
+        if (!arr1.includes(arr2[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+
+//n项 n-1项组合，生成全部结果
+export function generateCombinations(arr, k) {
+    let result = [];
+
+    function helper(index, current) {
+        if (current.length === k) {
+            result.push(current.slice()); // 使用slice()来避免直接修改原始数组
+        } else {
+            for (let i = index; i < arr.length; i++) {
+                current.push(arr[i]); // 将当前元素添加到组合中
+                helper(i + 1, current); // 递归调用，索引增加以避免重复选择相同的元素
+                current.pop(); // 回溯，移除当前元素以便尝试其他组合
+            }
+        }
+    }
+
+    helper(0, []); // 从索引0开始，初始空数组作为起点
+    return result;
+}
+
+export function returnReverseVal(val, isReturnString = true) {
+    const isBol = typeof val === "boolean";
+    const isString = typeof val === "string";
+    let reverseNewval = "";
+    if (isBol) {
+        reverseNewval = !val;
+    }
+    if (isString) {
+        reverseNewval = val === "true" ? "false" : "true";
+    }
+    return reverseNewval;
+}