增加选择台桌和选择人数

src/views/table/components/keyboard.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="simple-Keyboard-number">
     <div class="carts">
-      <div class="box_status">{{ number }}</div>
+      <div class="box_status">
+        <slot name="input">
+          <span> {{ number }}</span>
+        </slot>
+      </div>
       <div class="number_list_box">
         <div class="yd-keyboard">
           <div class="mini-number-box1">
@@ -22,7 +26,9 @@
                 <div class="key" @click="keyboradAdd('9')">9</div>
               </div>
               <div class="key-line">
-                <div class="key"></div>
+                <div class="key" @click="clearFunction">
+                  <slot name="clear"> </slot>
+                </div>
                 <div class="key" @click="keyboradAdd('0')">0</div>
                 <div
                   class="key"
@@ -64,10 +70,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    maxTips: {
+      type: String,
+      default: "输入值超范围",
+    },
     showConfirm: {
       type: Boolean,
       default: false,
     },
+    max: {
+      type: Number,
+      default: Infinity,
+    },
     value: {
       type: [String, Number],
       default: 0,
@@ -79,20 +93,31 @@ export default {
     };
   },
   watch: {
+    value(newval) {
+      this.number = newval;
+    },
     number(newval) {
+      console.log(newval);
       this.$emit("input", newval);
     },
   },
   methods: {
+    clearFunction() {
+      this.$emit("clear", this.number);
+    },
     keyboradAdd(n) {
       if (Number(this.number) == 0) {
         return (this.number = n);
       }
-      this.number += n;
+      const newval = this.number + n;
+      if (newval > this.max) {
+        return this.$message( this.maxTips);
+      }
+      this.number = newval;
     },
     keyboradReduce() {
       if (this.number.length <= 1) {
-        return (this.number =this.isCanEmpty?'': "0");
+        return (this.number = this.isCanEmpty ? "" : "0");
       }
       this.number = this.number.substring(0, this.number.length - 1);
     },

src/views/table/components/table-diancan-components/choose-diners-number.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="select_desk">
+    <el-dialog width="410px" title="就餐人数" :visible.sync="show">
+      <div class="select_desk_dialog  u-p-b-20">
+        <key-board
+          isCanEmpty
+          v-model="number"
+          @clear="clear"
+          :max="99"
+          maxTips="最多99位"
+        >
+          <div slot="clear">清空</div>
+          <div slot="input" class="u-p-l-20 u-p-r-20 u-flex w-full">
+            <el-input
+              placeholder="请输入就餐人数"
+              v-model="number"
+              @input="inputNumber"
+              @change="inputChange"
+              type="number"
+            >
+              <template slot="append">位</template>
+            </el-input>
+          </div>
+        </key-board>
+        <div class="confirm_btns">
+          <el-button size="medium" @click="close">取消</el-button>
+          <el-button type="success" size="medium" @click="confirm"
+            >确定</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+  
+  <script>
+import keyBoard from "../keyboard.vue";
+export default {
+  components: { keyBoard },
+  data() {
+    return {
+      number: "",
+      show: false,
+      hasOpen: false,
+      loading: false,
+    };
+  },
+  watch: {
+    number(newval) {
+      if (newval >= 99) {
+        this.number = 99;
+        this.$message("最多只能选择99位就餐人数");
+      }
+      console.log(newval)
+      // 使用正则表达式匹配正整数
+      const regex = /^[1-9]\d*$/;
+      // 如果输入的值不是正整数，则将其设置为上一个有效值
+      if (!regex.test(newval)) {
+        this.number = newval.substring(0, newval.length - 1);
+      }
+    },
+  },
+  methods: {
+    inputNumber(e){
+    },
+    inputChange(e) {
+    },
+    clear(e) {
+      console.log(e);
+      this.number = "";
+    },
+    confirm() {
+      this.$emit("confirm", this.number);
+      this.close();
+    },
+    open() {
+      this.show = true;
+    },
+    close() {
+      this.show = false;
+    },
+  },
+  mounted() {},
+};
+</script>
+  
+  <style lang="scss" scoped>
+::v-deep.el-button {
+  padding: 12px 20px;
+}
+::v-deep .el-input__inner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+::v-deep .el-input__inner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+::v-deep .el-button--success {
+  border-color: #22bf64;
+  background-color: #22bf64;
+}
+.select_desk .btn {
+  height: 34px;
+}
+.tags {
+  font-size: 16px;
+  &.using {
+    color: rgb(234, 64, 37);
+  }
+  &.wait {
+    color: rgb(252, 236, 79);
+  }
+  &.idle {
+    color: rgb(137, 234, 71);
+  }
+  &.closed {
+    color: rgb(221, 221, 221);
+    filter: grayscale(1);
+  }
+}
+::v-deep .inputs .el-input__inner {
+  border-color: transparent !important;
+  color: rgba(0, 0, 0, 0.8);
+  letter-spacing: 1.25px;
+  font-size: 20px;
+}
+.select_desk .select_desk_dialog {
+  display: flex;
+
+  flex-direction: column;
+
+  align-items: center;
+}
+
+.select_desk .select_desk_dialog .nav {
+  width: 286px;
+  height: 38px;
+  background: #dcf0e8;
+
+  justify-content: space-around;
+}
+
+.select_desk .select_desk_dialog .nav .li,
+.select_desk .select_desk_dialog .nav {
+  border-radius: 4px;
+
+  display: flex;
+
+  align-items: center;
+}
+
+.select_desk .select_desk_dialog .nav .li {
+  width: 140px;
+  height: 34px;
+  color: #0fc161;
+
+  justify-content: center;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.select_desk .select_desk_dialog .nav .lion {
+  background: #0fc161;
+  color: #fff;
+}
+
+.select_desk .select_desk_dialog .inputs {
+  width: 370px;
+  line-height: 54px;
+  margin-top: 24px;
+  height: 54px;
+  margin-bottom: 20px;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  color: rgba(0, 0, 0, 0.8);
+  letter-spacing: 1.25px;
+  text-align: center;
+  font-size: 20px;
+  position: relative;
+}
+
+.select_desk .select_desk_dialog .inputs .close {
+  color: #aaa;
+  position: absolute;
+  right: 10px;
+  height: 30px;
+  width: 30px;
+  line-height: 30px;
+  top: 50%;
+  margin-top: -15px;
+  cursor: pointer;
+}
+
+.select_desk .select_desk_dialog .keyboard {
+  display: flex;
+
+  flex-wrap: wrap;
+  width: 100%;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  border-right: 1px solid #dcdfe6;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.select_desk .select_desk_dialog .keyboard .li {
+  height: 60px;
+  width: 33.333%;
+
+  display: flex;
+
+  justify-content: center;
+
+  align-items: center;
+  font-size: 24px;
+  color: #212121;
+  cursor: pointer;
+
+  user-select: none;
+  border-left: 1px solid #dcdfe6;
+  border-top: 1px solid #dcdfe6;
+
+  transition: all 0.1s;
+}
+
+.select_desk .select_desk_dialog .keyboard .li:hover {
+  background: #dcdfe6;
+}
+
+.select_desk .select_desk_dialog .keyboard .li .icon {
+  font-size: 1.3em;
+}
+
+.select_desk .select_desk_dialog .keyboard .confirm {
+  height: 140px;
+  background: #ff9f2e;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-right: none;
+}
+
+.select_desk .select_desk_dialog .keyboard .confirm:hover {
+  background: #f88502;
+}
+
+.confirm_btns {
+  display: flex;
+
+  justify-content: space-between;
+  width: 100%;
+}
+
+.confirm_btns .el-button {
+  width: 175px;
+}
+</style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="select_desk">
     <el-dialog width="410px" title="桌台号/取餐号" :visible.sync="show">
-      <div class="select_desk_dialog">
+      <div class="select_desk_dialog u-p-t-20 u-p-b-20">
         <div class="nav">
           <div
             class="li"
@@ -30,16 +30,25 @@
               :label="item.name"
               :value="item.id"
             >
+              <div class="u-flex u-row-between ">
+                <span>{{ item.name }}</span>
+                <span :class="['tags',item.status]">
+                {{ status[item.status] ? status[item.status].label : "" }}
+
+                </span>
+              </div>
             </el-option>
           </el-select>
         </template>
         <template v-else>
-          <key-board isCanEmpty  v-model="masterId"></key-board>
+          <key-board isCanEmpty v-model="masterId"></key-board>
         </template>
 
         <div class="confirm_btns">
-          <el-button size="medium"  @click="close">取消</el-button>
+          <el-button size="medium" @click="close">取消</el-button>
-          <el-button type="success" size="medium" @click="confirm">确定</el-button>
+          <el-button type="success" size="medium" @click="confirm"
+            >确定</el-button
+          >
         </div>
       </div>
     </el-dialog>
@@ -48,13 +57,14 @@
 
 <script>
 import { tbShopTableGet } from "@/api/table";
-import keyBoard from '../keyboard.vue';
+import keyBoard from "../keyboard.vue";
+import $status from "../../status.js";
 
 export default {
-  components:{keyBoard},
+  components: { keyBoard },
   data() {
     return {
-      masterId:'',
+      masterId: "",
       //0 台桌 ,1 取餐号
       type: 0,
       show: false,
@@ -63,14 +73,15 @@ export default {
       loading: false,
       tableList: [],
       selTableId: "",
+      status:$status
+
     };
   },
   methods: {
-  
+    confirm() {
-    confirm(){
+      const item = this.tableList.find((v) => v.id == this.selTableId);
-      const item=this.tableList.find(v=>v.id==this.selTableId)
+      this.$emit("confirm", item);
-      this.$emit('confirm',item)
+      this.close();
-      this.close()
     },
     // 台桌列表
     async tbShopTableGet() {
@@ -119,6 +130,22 @@ export default {
 .select_desk .btn {
   height: 34px;
 }
+.tags {
+  font-size: 16px;
+  &.using {
+    color: rgb(234, 64, 37);
+  }
+  &.wait{
+    color: rgb(252, 236, 79);
+  }
+  &.idle{
+    color: rgb(137, 234, 71);
+  }
+  &.closed {
+    color: rgb(221, 221, 221);
+    filter: grayscale(1);
+  }
+}
 ::v-deep .inputs .el-input__inner {
   border-color: transparent !important;
   color: rgba(0, 0, 0, 0.8);

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

@@ -175,23 +175,27 @@
               </div>
               <div class="flex row-between">
                 <!-- <div class="tableId" @click="chooseTableOpen"> -->
-                <div class="tableId">
+                <div class="tableId" @click="chooseTableOpen">
                   {{ table ? "桌台号：" + table.name : "桌台号/取餐号" }}
                 </div>
 
-                <el-button
+                <div class="u-flex">
-                  @click="clearCart"
+                  <div class="u-p-r-14 border-r u-m-r-14">
-                  type="text"
+                    <div class="u-flex cursor-pointer" @click="refToggle('refChooseDinersNumber',true)">
-                  size="mini"
+                      <span>就餐人数：{{perpole}}位</span>
-                  :disabled="order.list.length <= 0"
+                      <span
-                  >清空</el-button
+                        class="el-icon-arrow-right diningPeople_cell_arrow"
-                >
+                      ></span>
-                <!-- <div
+                    </div>
-                  class="clear cur-pointer color-000 flex"
+                  </div>
-                  @click="clearCart"
+                  <el-button
-                >
+                    @click="clearCart"
-                  清空
+                    type="text"
-                </div> -->
+                    size="mini"
+                    :disabled="order.list.length <= 0"
+                    >清空</el-button
+                  >
+                </div>
               </div>
             </div>
             <div class="absolute bottom">
@@ -950,8 +954,8 @@
     <!-- 支付时的键盘弹窗 -->
     <money-keyboard ref="refMoneyKeyboard" :title="moneyKeyboard.title">
     </money-keyboard>
-      <!-- 扫码支付 -->
+    <!-- 扫码支付 -->
-      <scan-pay
+    <scan-pay
       ref="refWxScanCode"
       defaultTips="请使用扫码枪扫描微信/支付宝收款码"
       title="扫码支付"
@@ -971,6 +975,8 @@
     <!-- 打折 -->
     <money-discount ref="refDiscount" @confirm="ChangeDiscount">
     </money-discount>
+    <!-- 选择人数 -->
+    <choose-diners-number ref="refChooseDinersNumber" @confirm="chooseDinersNumberConfirm"></choose-diners-number>
   </div>
 </template>
 
@@ -983,6 +989,7 @@ import cartItem from "./table-diancan-components/cart-item.vue";
 import scanPay from "./table-diancan-components/scan-pay.vue";
 import moneyDiscount from "./table-diancan-components/discount.vue";
 import orderNote from "./table-diancan-components/note.vue";
+import chooseDinersNumber from "./table-diancan-components/choose-diners-number.vue";
 import moneyKeyboard from "./money-keyboard.vue";
 import dayjs from "dayjs";
 import {
@@ -1018,9 +1025,12 @@ export default {
     scanPay,
     moneyDiscount,
     cartItem,
+    chooseDinersNumber,
   },
   data() {
     return {
+      //就餐人数
+      perpole:'',
       //整体点餐页面loading
       loading: false,
       //台桌点餐页面打开时带来的参数 isAddGoods 加菜    isPayOrder结账
@@ -1415,29 +1425,31 @@ export default {
     // this.refToggle("refDiscount", true);
   },
   methods: {
+    chooseDinersNumberConfirm(e){
+      this.perpole=e
+    },
     //扫码支付弹窗确认
     scanPayConfirm(code) {
       this.createOrder.code = code;
-      if(!code){
+      if (!code) {
-        return this.$message.error("请输入或扫付款码")
+        return this.$message.error("请输入或扫付款码");
       }
       this.pays();
     },
     payTypeItemClick(item) {
       console.log(item);
       console.log(this.vipUser.id);
-      if(item.payType=='vipPay'){
+      if (item.payType == "vipPay") {
-       return this.refChooseUserOpen()
+        return this.refChooseUserOpen();
       }
       if (item.payType == "deposit") {
         //储值卡支付
-       return this.refToggle("refScanCode", true);
+        return this.refToggle("refScanCode", true);
       }
       if (item.payType == "scanCode") {
         //扫码支付
-       return this.refToggle("refWxScanCode", true);
+        return this.refToggle("refWxScanCode", true);
       }
-      
     },
     ChangeDiscount(discount) {
       this.createOrder.discount = discount;
@@ -1535,41 +1547,40 @@ export default {
     },
     // 支付订单前的处理
     async payOrder() {
-    
+      if (this.order.payType == "vipPay" && !this.vipUser.id) {
-      if(this.order.payType=='vipPay'&&!this.vipUser.id){
+        return this.refChooseUserOpen();
-       return this.refChooseUserOpen()
       }
-      if(this.order.payType=='scanCode'){
+      if (this.order.payType == "scanCode") {
-       return this.refToggle("refWxScanCode", true);
+        return this.refToggle("refWxScanCode", true);
       }
-      if(this.order.payType=='deposit'){
+      if (this.order.payType == "deposit") {
-       return  this.refToggle("refScanCode", true);
+        return this.refToggle("refScanCode", true);
       }
       console.log({
         orderId: this.createOrder.data.id,
         payType: this.order.payType,
       });
-      this.pays()
+      this.pays();
     },
     // 支付订单
     async pays() {
-    this.loading = true;
+      this.loading = true;
-    try {
+      try {
-      const res = await $payOrder({
+        const res = await $payOrder({
-        tableId: this.table.tableId,
+          tableId: this.table.tableId,
-        masterId: this.masterId,
+          masterId: this.masterId,
-        orderId: this.createOrder.data.id,
+          orderId: this.createOrder.data.id,
-        payType: this.order.payType,
+          payType: this.order.payType,
-        vipUserId: this.vipUser.id,
+          vipUserId: this.vipUser.id,
-        discount: this.createOrder.discount,
+          discount: this.createOrder.discount,
-        code: this.createOrder.code,
+          code: this.createOrder.code,
-      });
+        });
-      this.loading = false;
+        this.loading = false;
-      this.payOrderSuccess();
+        this.payOrderSuccess();
-    } catch (error) {
+      } catch (error) {
-      this.loading = false;
+        this.loading = false;
-    }
+      }
-  },
+    },
     payOrderSuccess() {
       this.$notify({
         title: "支付成功",
@@ -2653,7 +2664,9 @@ input[type="number"]::-webkit-outer-spin-button {
     margin-left: 10px;
   }
 }
-
+.border-r {
+  border-right: 1px solid #ebebeb;
+}
 .lh-16 {
   line-height: 16px;
 }
@@ -2722,6 +2735,9 @@ input[type="number"]::-webkit-outer-spin-button {
 .col-baseline {
   align-items: baseline;
 }
+.cursor-pointer {
+  cursor: pointer;
+}
 .flex-x-y-center {
   display: flex;
   justify-content: center;
@@ -3517,7 +3533,7 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 .carts .title .right {
-  font-size: 14.4px;
+  font-size: 14px;
   cursor: pointer;
 }
 

src/views/table/status.js

@@ -0,0 +1,34 @@
+export default {
+    pending: {
+        label: "挂单中",
+        type: "#E6A23C",
+    },
+    using: {
+        label: "开台中",
+        type: "#E6A23C",
+    },
+    paying: {
+        label: "结算中",
+        type: "#E6A23C",
+    },
+    idle: {
+        label: "空闲",
+        type: "#67C23A",
+    },
+    subscribe: {
+        label: "预定",
+        type: "#E6A23C",
+    },
+    closed: {
+        label: "关台",
+        type: "rgb(221,221,221)",
+    },
+    // opening: {
+    //   label: "开台中",
+    //   type: "#67C23A",
+    // },
+    cleaning: {
+        label: "台桌清理中",
+        type: "#909399",
+    }
+}

src/views/table/table_list.vue

@@ -97,7 +97,7 @@
                   type="primary"
                   :disabled="!item.tableId || item.status === 'closed'"
                   @click="diancanShow(item)"
-                  >开始点餐</el-button
+                  >点餐</el-button
                 >
               </template>
               <template v-else >
@@ -164,6 +164,7 @@ import addEara from "./components/addEara";
 import addTable from "./components/addTable";
 import downloadTableCode from "./components/downloadTableCode";
 import tableDiancan from "./components/table-diancan.vue";
+import $status from "./status.js";
 import {
   tbShopTableGet,
   tbShopAreaGet,
@@ -184,40 +185,7 @@ export default {
       loading: false,
       total: 0,
       tableList: [],
-      status: {
+      status:$status
-        pending: {
-          label: "挂单中",
-          type: "#E6A23C",
-        },
-        using: {
-          label: "开台中",
-          type: "#E6A23C",
-        },
-        paying: {
-          label: "结算中",
-          type: "#E6A23C",
-        },
-        idle: {
-          label: "空闲",
-          type: "#67C23A",
-        },
-        subscribe: {
-          label: "预定",
-          type: "#E6A23C",
-        },
-        closed: {
-          label: "关台",
-          type: "rgb(221,221,221)",
-        },
-        // opening: {
-        //   label: "开台中",
-        //   type: "#67C23A",
-        // },
-        cleaning: {
-          label: "台桌清理中",
-          type: "#909399",
-        },
-      },
     };
   },
   mounted() {