代客下单增加结账金钱输入键盘
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"
|
||||
></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();
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue