增加选择台桌和选择人数
This commit is contained in:
parent
3cc53ec6e1
commit
e59919c6f1
|
|
@ -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);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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,6 +30,13 @@
|
|||
: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>
|
||||
|
|
@ -39,7 +46,9 @@
|
|||
|
||||
<div class="confirm_btns">
|
||||
<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(){
|
||||
const item=this.tableList.find(v=>v.id==this.selTableId)
|
||||
this.$emit('confirm',item)
|
||||
this.close()
|
||||
confirm() {
|
||||
const item = this.tableList.find((v) => v.id == this.selTableId);
|
||||
this.$emit("confirm", item);
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -175,10 +175,19 @@
|
|||
</div>
|
||||
<div class="flex row-between">
|
||||
<!-- <div class="tableId" @click="chooseTableOpen"> -->
|
||||
<div class="tableId">
|
||||
<div class="tableId" @click="chooseTableOpen">
|
||||
{{ table ? "桌台号：" + table.name : "桌台号/取餐号" }}
|
||||
</div>
|
||||
|
||||
<div class="u-flex">
|
||||
<div class="u-p-r-14 border-r u-m-r-14">
|
||||
<div class="u-flex cursor-pointer" @click="refToggle('refChooseDinersNumber',true)">
|
||||
<span>就餐人数：{{perpole}}位</span>
|
||||
<span
|
||||
class="el-icon-arrow-right diningPeople_cell_arrow"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<el-button
|
||||
@click="clearCart"
|
||||
type="text"
|
||||
|
|
@ -186,12 +195,7 @@
|
|||
:disabled="order.list.length <= 0"
|
||||
>清空</el-button
|
||||
>
|
||||
<!-- <div
|
||||
class="clear cur-pointer color-000 flex"
|
||||
@click="clearCart"
|
||||
>
|
||||
清空
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom">
|
||||
|
|
@ -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,19 +1425,22 @@ export default {
|
|||
// this.refToggle("refDiscount", true);
|
||||
},
|
||||
methods: {
|
||||
chooseDinersNumberConfirm(e){
|
||||
this.perpole=e
|
||||
},
|
||||
//扫码支付弹窗确认
|
||||
scanPayConfirm(code) {
|
||||
this.createOrder.code = code;
|
||||
if(!code){
|
||||
return this.$message.error("请输入或扫付款码")
|
||||
if (!code) {
|
||||
return this.$message.error("请输入或扫付款码");
|
||||
}
|
||||
this.pays();
|
||||
},
|
||||
payTypeItemClick(item) {
|
||||
console.log(item);
|
||||
console.log(this.vipUser.id);
|
||||
if(item.payType=='vipPay'){
|
||||
return this.refChooseUserOpen()
|
||||
if (item.payType == "vipPay") {
|
||||
return this.refChooseUserOpen();
|
||||
}
|
||||
if (item.payType == "deposit") {
|
||||
//储值卡支付
|
||||
|
|
@ -1437,7 +1450,6 @@ export default {
|
|||
//扫码支付
|
||||
return this.refToggle("refWxScanCode", true);
|
||||
}
|
||||
|
||||
},
|
||||
ChangeDiscount(discount) {
|
||||
this.createOrder.discount = discount;
|
||||
|
|
@ -1535,21 +1547,20 @@ export default {
|
|||
},
|
||||
// 支付订单前的处理
|
||||
async payOrder() {
|
||||
|
||||
if(this.order.payType=='vipPay'&&!this.vipUser.id){
|
||||
return this.refChooseUserOpen()
|
||||
if (this.order.payType == "vipPay" && !this.vipUser.id) {
|
||||
return this.refChooseUserOpen();
|
||||
}
|
||||
if(this.order.payType=='scanCode'){
|
||||
if (this.order.payType == "scanCode") {
|
||||
return this.refToggle("refWxScanCode", true);
|
||||
}
|
||||
if(this.order.payType=='deposit'){
|
||||
if (this.order.payType == "deposit") {
|
||||
return this.refToggle("refScanCode", true);
|
||||
}
|
||||
console.log({
|
||||
orderId: this.createOrder.data.id,
|
||||
payType: this.order.payType,
|
||||
});
|
||||
this.pays()
|
||||
this.pays();
|
||||
},
|
||||
// 支付订单
|
||||
async pays() {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
}
|
||||
}
|
||||
|
|
@ -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: {
|
||||
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",
|
||||
},
|
||||
},
|
||||
status:$status
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue