From 335d604f5f0f4ca0702c9aaa1dae4555110aeff3 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Fri, 23 Aug 2024 13:57:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E5=AE=A2=E4=B8=8B=E5=8D=95=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E7=BB=93=E8=B4=A6=E9=87=91=E9=92=B1=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E9=94=AE=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/table/components/money-keyboard.vue | 339 ++++++++++++++++++
 src/views/table/components/table-diancan.vue  |  16 +
 2 files changed, 355 insertions(+)
 create mode 100644 src/views/table/components/money-keyboard.vue

diff --git a/src/views/table/components/money-keyboard.vue b/src/views/table/components/money-keyboard.vue
new file mode 100644
index 0000000..11e1909
--- /dev/null
+++ b/src/views/table/components/money-keyboard.vue
@@ -0,0 +1,339 @@
+<template>
+  <el-dialog width="330px" :title="title" :visible.sync="show">
+    <div class="simple-Keyboard-number">
+      <div class="carts">
+        <div class="pad-14">
+          <div class="box_status">
+            <span class="sym">￥</span>
+            <el-input v-model="number" type="text" @input="numberInput"></el-input>
+            <!-- <span class="inputs" :contenteditable="true" @input="numberInput" type="text" >{{ number }}</span> -->
+          </div>
+        </div>
+        <div class="number_list_box">
+          <div class="yd-keyboard">
+            <div class="mini-number-box1">
+              <div class="mini-number">
+                <div class="key-line">
+                  <div class="key" @click="keyboradAdd('1')">1</div>
+                  <div class="key" @click="keyboradAdd('2')">2</div>
+                  <div class="key" @click="keyboradAdd('3')">3</div>
+                  <div
+                    class="key"
+                    style="font-size: 31px"
+                    @click="keyboradReduce"
+                  >
+                    <svg
+                      t="1723453480343"
+                      class="icon"
+                      viewBox="0 0 1664 1024"
+                      version="1.1"
+                      xmlns="http://www.w3.org/2000/svg"
+                      p-id="1467"
+                      width="32"
+                      height="32"
+                    >
+                      <path
+                        d="M1526.08 1.6H459.84L41.28 416c-53.76 53.248-53.76 139.52 0 192.64l418.624 414.592v-0.064h1066.176a136.96 136.96 0 0 0 137.6-136.256V137.792a136.96 136.96 0 0 0-137.6-136.192z m-331.392 631.168c26.816 26.624 26.816 69.76 0 96.384-26.88 26.56-70.4 26.56-97.28 0l-121.28-120.128-123.328 122.112a69.76 69.76 0 0 1-97.92 0 68.096 68.096 0 0 1 0-96.96L878.208 512l-121.28-120.064a67.648 67.648 0 0 1 0-96.32c26.88-26.624 70.4-26.624 97.28 0l121.216 120.064 122.24-120.96a69.696 69.696 0 0 1 97.92 0 68.032 68.032 0 0 1 0 96.96l-122.24 120.96 121.344 120.064z"
+                        fill="#333333"
+                        p-id="1468"
+                      ></path>
+                    </svg>
+                  </div>
+                </div>
+                <div class="key-line">
+                  <div class="key" @click="keyboradAdd('4')">4</div>
+                  <div class="key" @click="keyboradAdd('5')">5</div>
+                  <div class="key" @click="keyboradAdd('6')">6</div>
+                  <div class="key" @click="keyboradAdd('clear')">清空</div>
+                </div>
+                <div class="key-line">
+                  <div class="key" @click="keyboradAdd('7')">7</div>
+                  <div class="key" @click="keyboradAdd('8')">8</div>
+                  <div class="key" @click="keyboradAdd('9')">9</div>
+                  <div class="key"></div>
+                </div>
+                <div class="key-line">
+                  <div class="key" @click="keyboradAdd('.')">.</div>
+                  <div class="key" @click="keyboradAdd('0')">0</div>
+                  <div class="key" @click="keyboradAdd('00')">00</div>
+                  <div class="key"></div>
+                </div>
+                <div class="confirm key" @click="confirm">确认</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="submit" @click="keyboradConfirm">确认</div> -->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "支付",
+    },
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      number: '0',
+      show:false
+    };
+  },
+  watch: {
+    number(newval) {
+      this.$emit("input", newval);
+    },
+  },
+  methods: {
+    confirm(){
+
+    },
+    open(){
+      this.show=true
+    },
+    close(){
+      this.show=false
+    },
+    numberInput(val){
+      console.log(val)
+      this.number=`${Number(val)}` 
+    },
+    keyboradAdd(n) {
+      if (n === "clear") {
+        return (this.number = '0');
+      }
+      if(n==='.'){
+        return this.number += this.number.includes('.')?'' : '.'
+      }
+      if (`${this.number}`.length<=1&&Number(this.number)===0) {
+        return (this.number = n);
+      }
+      this.number += n;
+    },
+    keyboradReduce() {
+      if (this.number.length <= 1) {
+        return (this.number = this.isCanEmpty ? "" : "0");
+      }
+      this.number = this.number.substring(0, this.number.length - 1);
+    },
+    keyboradConfirm() {
+      this.$emit("confirm", this.number);
+    },
+  },
+  mounted() {
+    this.number = `${this.value}`;
+  },
+};
+</script>
+
+<style  lang="scss" scoped>
+.pad-14 {
+  padding: 14px;
+  width: 100%;
+}
+::v-deep .el-dialog__body {
+  padding: 0;
+}
+::v-deep .el-input__inner::-webkit-outer-spin-button{
+  -webkit-appearance: none;  
+  margin: 0;  
+}  
+::v-deep .el-input__inner::-webkit-inner-spin-button {  
+  -webkit-appearance: none;  
+  margin: 0;  
+}  
+  
+/* Firefox */  
+::v-deep .el-input__inner {  
+  -moz-appearance: textfield;  
+}
+.number_list_box,
+.yd-keyboard,
+.mini-number,
+.mini-number-box1,
+.key-line {
+  width: 100%;
+}
+.yd-keyboard {
+  justify-content: center;
+}
+
+.mini-number-box1 .mini-number,
+.yd-keyboard {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+}
+
+.mini-number-box1 .mini-number {
+  border-top: 1px solid #dcdfe6;
+}
+
+.mini-number-box2 {
+  display: flex;
+
+  justify-content: center;
+}
+
+.mini-number-box2 .function-button {
+  display: flex;
+  flex-direction: column;
+}
+
+.key,
+.key-line {
+  display: flex;
+  justify-content: center;
+}
+
+.key {
+  width: 25%;
+  height: 70px;
+  box-sizing: border-box;
+  background: #fff;
+  align-items: center;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  font-size: 24px;
+  color: #212121;
+  text-align: center;
+  line-height: 34px;
+  cursor: pointer;
+  user-select: none;
+}
+.key:hover {
+  background-color: #dcdfe6;
+}
+.key:not(:last-child) {
+  border-right: 1px solid #dcdfe6;
+}
+
+.key-line:not(:last-child) {
+  border-bottom: 1px solid #dcdfe6;
+}
+.confirm {
+  height: 142px;
+  width: 25%;
+  background: #22bf64;
+  color: #fff;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-right: none;
+}
+.confirm:hover {
+  background: rgba(34, 191, 100, 0.8666666666666667);
+}
+.simple-Keyboard-number,
+.simple-Keyboard-weight {
+  background: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.submit {
+  width: 366px;
+  height: 44px;
+  background: #22bf64;
+  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: #fff;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  margin-bottom: 40px;
+  cursor: pointer;
+}
+.disabled-box {
+  position: absolute;
+  inset: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.carts {
+  flex-direction: column;
+  background: #fff;
+  height: 100%;
+}
+
+.carts .title,
+.carts {
+  display: flex;
+
+  align-items: center;
+  width: 100%;
+}
+
+.carts .title {
+  justify-content: space-between;
+  height: 64px;
+  border-bottom: 1px solid #ebebeb;
+  padding: 20px;
+  padding-top: 30px;
+}
+
+.carts .title .left {
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  font-size: 18px;
+  color: #000;
+}
+
+.carts .title .right {
+  font-size: 14.4px;
+  cursor: pointer;
+}
+
+.box_status {
+  box-sizing: border-box;
+  width: 100%;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  display: flex;
+  padding: 14px;
+  align-items: flex-end;
+  font-family: MicrosoftYaHei;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.8);
+  letter-spacing: 1.25px;
+  .sym {
+    font-size: 24px;
+    color: #212121;
+    width: 30px;
+    margin-bottom: 3px;
+  }
+  .inputs {
+    font-size: 28px;
+    color: #212121;
+    outline: none;
+    line-height: 37px;
+    border: none;
+    max-width: 250px;
+  }
+}
+::v-deep .el-input--small .el-input__inner{
+  font-size: 28px;
+    color: #212121;
+    outline: none;
+    line-height: 37px;
+    border: none;
+    max-width: 250px;
+    padding-left: 0;
+}
+
+.carts .box_status span {
+  padding: 0 5px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/table/components/table-diancan.vue b/src/views/table/components/table-diancan.vue
index 45713f6..48bdf27 100644
--- a/src/views/table/components/table-diancan.vue
+++ b/src/views/table/components/table-diancan.vue
@@ -897,6 +897,11 @@
       @confirm="chooseTableConfirm"
     ></choose-table>
     <order-note ref="refOrderNote" @confirm="refOrderNoteConfirm"></order-note>
+
+    <!-- 支付时的键盘弹窗 -->
+      <money-keyboard ref="refMoneyKeyboard" :title="moneyKeyboard.title">
+
+      </money-keyboard>
   </div>
 </template>
 
@@ -905,6 +910,7 @@ import chooseUser from "./choose-user.vue";
 import payType from "./pay-type.vue";
 import chooseTable from "./table-diancan-components/choose-table-master.vue";
 import orderNote from "./table-diancan-components/note.vue";
+import moneyKeyboard from "./money-keyboard.vue";
 import dayjs from "dayjs";
 import {
   getGoodsLists,
@@ -977,9 +983,14 @@ export default {
     chooseTable,
     payType,
     orderNote,
+    moneyKeyboard
   },
   data() {
     return {
+      moneyKeyboard:{
+        show:true,
+        title:'支付'
+      },
       //true后付款false先付款
       postPay: true,
       //是否打印
@@ -1328,6 +1339,10 @@ export default {
     this.getCategory();
   },
   methods: {
+    //打开输入钱的键盘
+    openMoneyKeyboard(){
+      this.$refs.refMoneyKeyboard.open()
+    },
     changePostPay(val) {
       this.postPay = val;
     },
@@ -1353,6 +1368,7 @@ export default {
         masterId: this.masterId,
         orderId: this.createOrder.data.id,
         payType: this.order.payType,
+        vipUserId:this.vipUser.id
       });
       this.payOrderSuccess();
     },