优化台桌状态
This commit is contained in:
@@ -13,9 +13,9 @@
|
||||
<el-icon class="icon">
|
||||
<Clock />
|
||||
</el-icon>
|
||||
<span class="t">{{ status[props.tableInfo.status] }}</span>
|
||||
<span class="t">{{tableStatusList.find(val => val.type == props.tableInfo.status).label}}</span>
|
||||
</div>
|
||||
<div class="cart" v-loading="payLoading" v-if="props.tableInfo.status == 'using'">
|
||||
<div class="cart" v-loading="payLoading" v-if="props.tableInfo.status == 'unsettled'">
|
||||
<div class="cart_list">
|
||||
<div class="item" v-for="item in cartList" :key="item.id">
|
||||
<div class="top">
|
||||
@@ -42,7 +42,8 @@
|
||||
</div>
|
||||
<div class="place_order" v-else>
|
||||
<div class="btn">
|
||||
<div class="top">
|
||||
<div class="top"
|
||||
:style="{ '--color': tableStatusList.find(val => val.type == props.tableInfo.status).color }">
|
||||
<el-icon class="icon">
|
||||
<TakeawayBox />
|
||||
</el-icon>
|
||||
@@ -52,7 +53,7 @@
|
||||
<div class="btn_wrap" v-if="props.tableInfo.status == 'idle'">
|
||||
<el-button type="primary" style="width: 100%;" @click="showPeopleNumHandle">开始新订单</el-button>
|
||||
</div>
|
||||
<div class="btn_wrap" v-if="props.tableInfo.status == 'cleaning'">
|
||||
<div class="btn_wrap" v-if="props.tableInfo.status == 'settled'">
|
||||
<el-button type="primary" style="width: 100%;" @click="clearTableStatus">清理完成</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -87,9 +88,10 @@ import { useUser } from "@/store/user.js"
|
||||
import { formatDecimal } from '@/utils/index.js'
|
||||
import SettleAccount from '@/views/home/components/settleAccount.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { clearTable } from '@/api/table.js'
|
||||
import { shopTableClear } from '@/api/account.js'
|
||||
import { useGoods } from "@/store/goods.js";
|
||||
import { getOrderByIdAjax } from '@/utils/index.js'
|
||||
import tableStatusList from '../statusList.js'
|
||||
|
||||
const goodsStore = useGoods()
|
||||
const router = useRouter()
|
||||
@@ -121,16 +123,6 @@ function inputFocus() {
|
||||
const orderInfo = ref({})
|
||||
const cartList = ref([])
|
||||
|
||||
const status = ref({
|
||||
'subscribe': '预定',
|
||||
'closed': '关台',
|
||||
'idle': '空闲',
|
||||
'using': '开台中',
|
||||
'pending': '挂单中',
|
||||
'paying': '结算中',
|
||||
'cleaning': '台桌清理中'
|
||||
})
|
||||
|
||||
const payLoading = ref(false)
|
||||
|
||||
// 显示结算页面
|
||||
@@ -164,15 +156,14 @@ const clearLoading = ref(false)
|
||||
async function clearTableStatus() {
|
||||
try {
|
||||
clearLoading.value = true
|
||||
const res = await clearTable({
|
||||
shopId: store.userInfo.shopId,
|
||||
tableId: props.tableInfo.qrcode
|
||||
await shopTableClear({
|
||||
tableId: props.tableInfo.id
|
||||
})
|
||||
clearLoading.value = false
|
||||
emits('success')
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
clearLoading.value = false
|
||||
}
|
||||
|
||||
// 获取订单详情
|
||||
@@ -188,6 +179,13 @@ async function getOrderDetail() {
|
||||
orderInfo.value = res
|
||||
|
||||
cartList.value = res.cartList
|
||||
|
||||
let total = 0
|
||||
res.cartList.forEach(item => {
|
||||
total += item.payAmount * item.num
|
||||
})
|
||||
|
||||
orderInfo.value.orderAmount = formatDecimal(total)
|
||||
}
|
||||
} catch (error) {
|
||||
payLoading.value = false
|
||||
@@ -387,7 +385,7 @@ onMounted(() => {
|
||||
$size: 150px;
|
||||
|
||||
.top {
|
||||
background-color: var(--el-color-danger);
|
||||
background-color: #fff;
|
||||
width: $size;
|
||||
height: $size;
|
||||
display: flex;
|
||||
@@ -397,7 +395,7 @@ onMounted(() => {
|
||||
border-radius: 6px;
|
||||
|
||||
.icon {
|
||||
color: #fff;
|
||||
color: var(--color);
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
|
||||
@@ -22,8 +22,8 @@
|
||||
</div>
|
||||
<div class="overflow_y" v-loading="loading">
|
||||
<div class="tab_list">
|
||||
<div class="item"
|
||||
:class="{ active: tableItemActive == index, using: item.status == 'using', closed: item.status == 'closed' }"
|
||||
<div class="item" :class="{ active: tableItemActive == index }"
|
||||
:style="{ '--color': tableStatusList.find(val => val.type == item.status).color }"
|
||||
v-for="(item, index) in tableList" :key="item.id" @click="slectTableHandle(index, item)">
|
||||
<div class="tab_title" :class="`${item.status}`">
|
||||
<span>{{ item.name }}</span>
|
||||
@@ -71,6 +71,7 @@ import countCard from '@/views/table/components/countCard.vue'
|
||||
import tableInfo from '@/views/table/components/tableInfo.vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { dayjs } from 'element-plus'
|
||||
import tableStatusList from './statusList.js'
|
||||
|
||||
const tabActive = ref(0)
|
||||
const tabAreas = ref([
|
||||
@@ -84,12 +85,16 @@ const tabAreas = ref([
|
||||
},
|
||||
{
|
||||
label: '使用中',
|
||||
type: 'using'
|
||||
type: 'unsettled'
|
||||
},
|
||||
// {
|
||||
// label: '已预订',
|
||||
// type: 3,
|
||||
// }
|
||||
{
|
||||
label: '待清理',
|
||||
type: 'settled',
|
||||
},
|
||||
{
|
||||
label: '已预订',
|
||||
type: 'subscribe',
|
||||
}
|
||||
])
|
||||
|
||||
const query = ref({
|
||||
@@ -268,50 +273,24 @@ onMounted(() => {
|
||||
gap: 10px;
|
||||
|
||||
.item {
|
||||
$closedColor: #aeb8c9;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
background-color: var(--primary-color);
|
||||
background-color: var(--color);
|
||||
|
||||
&.active {
|
||||
background-color: var(--primary-color);
|
||||
|
||||
.tab_cont {
|
||||
.icon {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.t1 {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.using {
|
||||
background-color: var(--el-color-success);
|
||||
|
||||
.tab_cont {
|
||||
.icon {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
|
||||
.t1 {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.closed {
|
||||
background-color: $closedColor;
|
||||
|
||||
.tab_cont {
|
||||
.icon {
|
||||
color: $closedColor;
|
||||
}
|
||||
|
||||
.t1 {
|
||||
color: $closedColor;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: var(--color);
|
||||
opacity: .2;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -334,38 +313,16 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #efefef;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
color: var(--primary-color);
|
||||
color: var(--color);
|
||||
font-size: 30px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.using {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.t1 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.t2 {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 2px;
|
||||
|
||||
span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
z-index: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
42
src/views/table/statusList.js
Normal file
42
src/views/table/statusList.js
Normal file
@@ -0,0 +1,42 @@
|
||||
export default [
|
||||
{
|
||||
label: "未绑定",
|
||||
type: "unbound",
|
||||
color: "#909090",
|
||||
},
|
||||
{
|
||||
label: "空闲",
|
||||
type: "idle",
|
||||
color: "#187CAA",
|
||||
},
|
||||
{
|
||||
label: "点餐中",
|
||||
type: "ordering",
|
||||
color: "#46AEA4",
|
||||
},
|
||||
{
|
||||
label: "未结账",
|
||||
type: "unsettled",
|
||||
color: "#DD3F41",
|
||||
},
|
||||
{
|
||||
label: "支付中",
|
||||
type: "paying",
|
||||
color: "#909090",
|
||||
},
|
||||
{
|
||||
label: "待清台",
|
||||
type: "settled ",
|
||||
color: "#FF9500",
|
||||
},
|
||||
{
|
||||
label: "关台",
|
||||
type: "closed",
|
||||
color: "#DDDDDD",
|
||||
},
|
||||
{
|
||||
label: "预定",
|
||||
type: "subscribe",
|
||||
color: "#58B22C",
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user