代客下单增加结账金钱输入键盘
This commit is contained in:
parent
34f18e0e07
commit
335d604f5f
|
|
@ -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>
|
||||||
|
|
@ -897,6 +897,11 @@
|
||||||
@confirm="chooseTableConfirm"
|
@confirm="chooseTableConfirm"
|
||||||
></choose-table>
|
></choose-table>
|
||||||
<order-note ref="refOrderNote" @confirm="refOrderNoteConfirm"></order-note>
|
<order-note ref="refOrderNote" @confirm="refOrderNoteConfirm"></order-note>
|
||||||
|
|
||||||
|
<!-- 支付时的键盘弹窗 -->
|
||||||
|
<money-keyboard ref="refMoneyKeyboard" :title="moneyKeyboard.title">
|
||||||
|
|
||||||
|
</money-keyboard>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -905,6 +910,7 @@ import chooseUser from "./choose-user.vue";
|
||||||
import payType from "./pay-type.vue";
|
import payType from "./pay-type.vue";
|
||||||
import chooseTable from "./table-diancan-components/choose-table-master.vue";
|
import chooseTable from "./table-diancan-components/choose-table-master.vue";
|
||||||
import orderNote from "./table-diancan-components/note.vue";
|
import orderNote from "./table-diancan-components/note.vue";
|
||||||
|
import moneyKeyboard from "./money-keyboard.vue";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import {
|
import {
|
||||||
getGoodsLists,
|
getGoodsLists,
|
||||||
|
|
@ -977,9 +983,14 @@ export default {
|
||||||
chooseTable,
|
chooseTable,
|
||||||
payType,
|
payType,
|
||||||
orderNote,
|
orderNote,
|
||||||
|
moneyKeyboard
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
moneyKeyboard:{
|
||||||
|
show:true,
|
||||||
|
title:'支付'
|
||||||
|
},
|
||||||
//true后付款false先付款
|
//true后付款false先付款
|
||||||
postPay: true,
|
postPay: true,
|
||||||
//是否打印
|
//是否打印
|
||||||
|
|
@ -1328,6 +1339,10 @@ export default {
|
||||||
this.getCategory();
|
this.getCategory();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
//打开输入钱的键盘
|
||||||
|
openMoneyKeyboard(){
|
||||||
|
this.$refs.refMoneyKeyboard.open()
|
||||||
|
},
|
||||||
changePostPay(val) {
|
changePostPay(val) {
|
||||||
this.postPay = val;
|
this.postPay = val;
|
||||||
},
|
},
|
||||||
|
|
@ -1353,6 +1368,7 @@ export default {
|
||||||
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
|
||||||
});
|
});
|
||||||
this.payOrderSuccess();
|
this.payOrderSuccess();
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue