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

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>