czg_team/management
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新桌台列表页面

Browse Source 
代客下单修改部分样式，修复创建订单后未刷新订单问题
This commit is contained in:
YeMingfei666
2024-09-12 14:08:03 +08:00
parent 6795f2ccd3
commit c95c630a75
6 changed files with 256 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/shalou.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 412 B

109
src/views/table/components/table-diancan-components/return-cart copy.vue Normal file
View File

@@ -0,0 +1,109 @@
<template>
<el-dialog title="撤单" width="410px" :visible.sync="show" @close="reset">
<div>
<div><span>撤单原因</span> <span class="color-red">*</span></div>
</div>
<div class="u-flex u-flex-wrap tags">
<div
class="tag"
v-for="(tag, index) in tags"
@click="changeSel(index)"
:key="index"
:class="{ active: tagSel == index }"
>
{{ tag }}
</div>
</div>
<div class="u-m-t-20">
<el-input
v-model="note"
size="medium"
placeholder="请输入自定义备注"
></el-input>
</div>
<div class="u-m-t-20">
<el-checkbox v-model="isPrint"
>打印退菜单</el-checkbox
>
</div>
<div slot="footer">
<el-button size="medium" @click="close"> 取消 </el-button>
<el-button size="medium" type="primary" @click="confirm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
isPrint:false,
tagSel: -1,
show: false,
tags: ["人手不足", "店满无法招待", "顾客要求", "商品质量问题"],
note: "",
};
},
methods: {
changeSel(i) {
this.tagSel = i;
},
reset() {
this.note = "";
},
delTag(index) {
this.tags.splice(index, 1);
},
addNote(tag) {
if (this.note.length <= 0) {
return (this.note = tag);
}
this.note = tag + "," + this.note;
},
open(note) {
this.show = true;
},
close() {
this.show = false;
},
confirm() {
this.$emit("confirm", this.note);
this.close();
},
},
mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
margin-bottom: 14px;
margin-top: 14px;
}
::v-deep .el-tag {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 5px;
cursor: pointer;
font-size: 15px;
line-height: 35px;
height: 35px;
}
.tags {
.tag {
margin: 10px 10px 0 0;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 10px 13px;
font-size: 14px;
color: #000;
cursor: pointer;
&.active {
color: #1890ff;
background: #e8f4ff;
border-color: #a3d3ff;
}
}
}
</style>

16
src/views/table/components/table-diancan-components/return-cart.vue
View File

@@ -1,18 +1,18 @@
<template>
<el-dialog title="撤单" width="410px" :visible.sync="show" @close="reset">
<el-dialog title="退菜" width="410px" :visible.sync="show" @close="reset">
<div>
<div><span>撤单原因</span> <span class="color-red">*</span></div>
<div><span>退菜原因</span> <span class="color-red">*</span></div>
</div>
<div class="u-flex u-flex-wrap tags">
<div
class="tag"
v-for="(tag, index) in tags"
@click="changeSel(index)"
@click="changeSel(tag)"
:key="index"
:class="{ active: tagSel == index }"
:class="{ active: tag.checked }"
>
{{ tag }}
{{ tag.label }}
</div>
</div>
<div class="u-m-t-20">
@@ -40,14 +40,14 @@ export default {
isPrint:false,
tagSel: -1,
show: false,
tags: ["人手不足", "店满无法招待", "顾客要求", "商品质量问题"],
tags: [{label:"不想要了",checked:false} ,{label:"食材不足",checked:false} ,{label:"等待时间过长",checked:false}],
note: "",
};
},
methods: {
changeSel(i) {
this.tagSel = i;
changeSel(item) {
item.checked = !item.checked ;
},
reset() {
this.note = "";

65
src/views/table/components/table-diancan.vue
View File

@@ -146,7 +146,7 @@
<div class="order">
<div class="relative u-flex u-flex-col u-row-between">
<div class="w-full" style="padding-right: 14px">
<div class="choose-user flex">
<div class="choose-user flex u-m-l-20">
<el-button
type="primary"
v-if="vipUser.id === ''"
@@ -173,7 +173,7 @@
</div>
</template>
</div>
<div class="flex row-between table-list">
<div class="flex row-between table-list u-m-l-20">
<!-- <div class="tableId" @click="chooseTableOpen"> -->
<el-popover
placement="right"
@@ -224,7 +224,7 @@
</div>
</div>
<div class="order-list-all" style="flex: 1; overflow-y: scroll">
<div class="order-list-all u-p-l-20" style="flex: 1; overflow-y: scroll">
<div class="list">
<!-- 当前购物车列表 -->
<template v-if="order.list.length">
@@ -284,7 +284,8 @@
</div>
<div class="w-full bottom">
<div class="flex row-right youhui" v-if="giftLen">
<div class="border-top">
<div class="flex row-right youhui" v-if="giftLen">
<span> 已优惠￥{{ allGiftMoney | to2 }} </span>
<i class="el-icon-arrow-right"></i>
</div>
@@ -312,7 +313,7 @@
<span>加菜/返回</span>
</button>
<div style="width: 15px"></div>
<button class="my-btn flex-1 success" @click="payOrder">
<button class="my-btn flex-1 primary" @click="payOrder">
<span>立即支付</span>
</button>
</template>
@@ -341,6 +342,9 @@
</div>
</template>
</div>
</div>
</div>
</div>
@@ -401,14 +405,14 @@
<div
class="btn"
:class="{ disabled: !order.list.length }"
:class="{ disabled: !order.list.length||order.old.list.length }"
@click="saveOrder"
>
存单
</div>
<div
class="btn relative"
:class="{ disabled: !prveOrder.list.length }"
:class="{ disabled: !prveOrder.list.length ||order.old.list.length }"
@click="cacheOrderShow"
>
取单
@@ -438,12 +442,19 @@
<div class="btn" @click="refNoteShow">整单备注</div>
<div
class="btn"
:class="{ disabled:order.placeNum<=0||order.old.selIndex<0 }"
@click="orderBtnsClick('returnCart')"
>
退菜
</div>
<!-- <div
class="btn"
:class="{ disabled: order.old.list.length <= 0 }"
@click="orderBtnsClick('returnCart')"
>
撤单
</div>
</div> -->
</div>
</div>
<div class="goods">
@@ -1275,10 +1286,8 @@ export default {
return result.substring(0, result.length - 1);
},
allPrice() {
const oldPrice = this.order.old.list
.filter((v) => v.isGift !== "true")
.reduce((a, b) => {
const bTotal = b.info.reduce((prve, cur) => {
const oldPrice = this.order.old.list.reduce((a, b) => {
const bTotal = b.info.filter((v) => v.isGift !== "true").reduce((prve, cur) => {
return prve + cur.number * cur.salePrice;
}, 0);
return a + bTotal;
@@ -1724,6 +1733,7 @@ export default {
console.log(isNowPay);
console.log(this.postPay && isNowPay);
this.createOrder.status = "success";
this.getCart()
if (this.postPay && !isNowPay) {
this.$notify({
title: "下单成功",
@@ -2364,16 +2374,25 @@ export default {
},
//获取购物车数据
async getCart() {
this.order.list=[]
this.order.old.list=[]
const res = await getCart({
...this.order.query,
masterId: this.masterId,
tableId: this.table.tableId,
});
if (this.key|| res.records.length) {
this.order.old.list = res.records;
} else {
this.order.list = res.records;
for(let i in res.records){
if(res.records[i].placeNum==0){
this.order.list = res.records[i].info;
}else{
this.order.old.list.push(res.records[i]);
}
}
// if (this.key|| res.records.length) {
// this.order.old.list = res.records;
// } else {
// this.order.list = res.records;
// }
},
showSelGoods(item) {
console.log(item);
@@ -3316,19 +3335,20 @@ input[type="number"]::-webkit-outer-spin-button {
border-bottom: 1px solid #ebebeb;
margin-bottom: 10px;
}
.order-list-all{
}
.order {
border-radius: 6px;
display: flex;
padding-left: 12px;
.bottom {
left: 0;
right: 0;
box-sizing: border-box;
padding: 14px;
bottom: 0;
padding:0 14px 14px 14px;
background-color: #fff;
z-index: 10;
border-top: 1px solid #ebebeb;
.border-top{
padding-top: 14px;
border-top: 1px solid #ebebeb;
}
}
.list {
@@ -3385,6 +3405,7 @@ input[type="number"]::-webkit-outer-spin-button {
color: #fff;
text-align: center;
line-height: 17px;
z-index: 2;
}
&.active {
background-color: rgba(0, 0, 0, 0.04);

2
src/views/table/status.js
View File

@@ -13,7 +13,7 @@ export default {
},
idle: {
label: "空闲",
type: "#67C23A",
type: "#3F9EFF",
},
subscribe: {
label: "预定",

143
src/views/table/table_list.vue
View File

@@ -41,6 +41,20 @@
<el-button type="primary" icon="el-icon-download">下载店铺码</el-button>
</div>
</div>
<div class="u-flex u-p-b-15 u-font-14">
<div class="state u-m-r-24" v-for="(item,key) in status" :key="key">
<span
class="dot"
:style="{
backgroundColor: status[key]
? status[key].type
: '',
}"
></span>
{{ item.label }}
</div>
</div>
<div class="head-container">
<div class="table_list" v-loading="loading">
<div
@@ -50,7 +64,10 @@
:class="[item.status]"
>
<div class="new-top flex u-row-between">
<span class="name">{{ item.name }}</span>
<div class="u-flex u-flex-1 u-p-r-10">
<span class="name u-line-1 " style="max-width: 50px;"> {{ item.name }}</span>
<span class="u-font-14 u-line-1">丨{{areaMap[item.areaId]||''}}</span>
</div>
<el-dropdown trigger="click" @command="tableComman($event, item)">
<i class="el-icon-more cur-pointer color-fff"></i>
<el-dropdown-menu slot="dropdown">
@@ -65,8 +82,9 @@
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="box">
<div class="top">
<div class="row row1">
<!-- <div class="row row1">
<span>{{ item.name }}</span>
<div class="state">
<span
@@ -79,17 +97,25 @@
></span>
{{ status[item.status] ? status[item.status].label : "" }}
</div>
</div>
<div class="row">
</div> -->
<!-- <div class="row">
<el-tag type="warning" size="mini">{{
item.type == 0 ? "低消" : "计时"
}}</el-tag>
<el-tag :type="item.isPredate == 1 ? '' : 'info'" size="mini">{{
item.isPredate == 1 ? "可预约" : "不可预约"
}}</el-tag>
</div>
<div class="row">
</div> -->
<!-- <div class="row">
<span class="tips">客座次数：{{ item.maxCapacity }}人</span>
</div> -->
<div class="u-font-18 font-600 total-price" >
<span class="color-fff" v-if="item.status != 'using'">|</span>
<span v-else>
¥{{item.totalAmount||0}}「{{item.productNum}}件」
</span>
</div>
<div class="row btn-group">
<template v-if="item.status == 'idle'">
@@ -114,31 +140,27 @@
>结账</el-button
>
</template>
<template v-else-if="item.status == 'closed'">
<el-button type="info" disabled>已关台</el-button>
</template>
<template v-else>
<el-button type="info" disabled>开始点餐</el-button>
<el-button type="info" disabled>点餐</el-button>
</template>
</template>
</div>
<!-- <div class="u-flex u-col-center">
<img style="width: 16px;height: 16px;" src="@/assets/images/perpole.png" alt="">
<span class="color-000 u-font-12">{{ item.maxCapacity }}</span>
</div> -->
</div>
<!-- <div class="btm">
<div class="btm_item" @click="$refs.addTable.show(item)">
<i class="i el-icon-edit"></i>
<div class="u-flex u-col-bottom bottom u-row-between color-666" :class="{'opacity-0':item.status == 'closed'}" >
<div class="u-flex u-col-center">
<img style="width: 16px;height: 16px;filter: contrast(0.5);" src="@/assets/images/perpole.png" alt="">
<span class="u-m-t-4 u-font-12 u-m-l-2">{{item.useNum||0}}/{{ item.maxCapacity }}</span>
</div>
<el-popconfirm
title="确定删除吗？"
@confirm="delTableHandle([item.id])"
style="flex: 1"
>
<div class="btm_item" slot="reference">
<i class="i el-icon-delete"></i>
</div>
</el-popconfirm>
</div> -->
<div class="u-flex" v-if="item.status == 'using'">
<img style="width: 16px;height: 16px;filter: contrast(0.5);" src="@/assets/images/shalou.png" alt="">
<span class="u-m-t-4 u-font-12 ">{{item.durationTime|formatTime}}</span>
</div>
</div>
</div>
</div>
<div class="empty_wrap">
<el-empty description="空空如也~" v-if="!tableList.length"></el-empty>
@@ -177,6 +199,7 @@ import {
tbShopAreaDelete,
tbShopTableDelete,
} from "@/api/table";
import dayjs from "dayjs";
export default {
components: {
addEara,
@@ -192,12 +215,18 @@ export default {
total: 0,
tableList: [],
status: $status,
selTable:''//当前选中的桌台
selTable:'',//当前选中的桌台
areaMap:{}
};
},
mounted() {
this.tbShopAreaGet();
},
filters:{
formatTime(time){
return dayjs(time).format('HH小时mm分');
}
},
methods: {
tableComman(command, item) {
if (command == "edit") {
@@ -226,10 +255,11 @@ export default {
//key isPayOrder结账
console.log(item)
this.selTable=item
if(item.status=='idle'){
const num=item.useNum||0
if(item.useNum<=0){
return this.$refs.refChooseDinersNumber.open()
}
this.$refs.diancan.open(item, key);
this.$refs.diancan.open(item, key,num);
},
chooseDinersNumberConfirm(num){
//就餐人数
@@ -290,6 +320,10 @@ export default {
shopId: localStorage.getItem("shopId"),
});
this.tabs = content;
this.areaMap=content.reduce((prve,cur)=>{
prve[cur.id]=cur.name
return prve
},{})
this.tbShopTableGet();
} catch (error) {
console.log(error);
@@ -305,6 +339,9 @@ export default {
}
</style>
<style scoped lang="scss">
.opacity-0{
opacity: 0;
}
.icon {
margin-left: 10px;
}
@@ -317,6 +354,18 @@ export default {
min-width: 60px;
text-align: center;
}
.state {
display: flex;
align-items: center;
.dot {
$size: 8px;
width: $size;
height: $size;
border-radius: 50%;
margin-right: $size;
}
}
.table_list {
display: flex;
flex-wrap: wrap;
@@ -334,7 +383,7 @@ export default {
}
.item {
padding: 1px;
padding: 1px ;
overflow: hidden;
border: 1px solid #ddd;
display: flex;
@@ -342,7 +391,8 @@ export default {
justify-content: space-between;
border-radius: 6px;
background-color: #1890ff;
min-width: 162px;
max-width: 172px;
min-width: 160px;
&.using {
background-color: rgb(250, 85, 85);
}
@@ -350,6 +400,10 @@ export default {
background-color: rgb(221, 221, 221);
filter: grayscale(1);
}
.total-price{
line-height: 35px;
height: 35px;
}
.new-top {
height: 30px;
color: #fff;
@@ -362,12 +416,19 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
}
.box{
background-color: #fff;
border-radius:3px 3px 6px 6px;
}
.bottom{
border-top: 1px solid #F7F7FA;;
padding: 6px 15px;
}
.top {
padding: 20px;
padding: 10px;
background-color: #fff;
flex: 1;
// border-radius: 6px 6px 0 0;
border-radius: 6px;
border-radius: 3px 3px 0 0;
.row {
display: flex;
gap: 10px;
@@ -376,26 +437,12 @@ export default {
font-size: 12px;
}
&:not(:first-child) {
margin-top: 10px;
}
&.row1 {
justify-content: space-between;
font-size: 14px;
.state {
display: flex;
align-items: center;
.dot {
$size: 6px;
width: $size;
height: $size;
border-radius: 50%;
margin-right: $size;
}
}
}
}
}
@@ -435,4 +482,4 @@ export default {
}
}
}
</style>
</style>