优化台桌状态
This commit is contained in:
parent
4d939b2889
commit
2ba61eab19
|
|
@ -404,3 +404,14 @@ export function shopPagePermissionMine(params) {
|
|||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 台桌清台
|
||||
*/
|
||||
export function shopTableClear(data) {
|
||||
return request({
|
||||
method: "put",
|
||||
url: "/account/admin/shopTable/clear",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -473,10 +473,10 @@ async function confirmOrder() {
|
|||
} catch (error) {
|
||||
console.log(error);
|
||||
payLoading.value = false;
|
||||
if (error.code == 1003) {
|
||||
ElMessage.error(error.msg)
|
||||
return
|
||||
}
|
||||
// if (error.code == 1003) {
|
||||
// ElMessage.error(error.msg)
|
||||
// return
|
||||
// }
|
||||
if (error.code == 701) {
|
||||
// 订单已过期需刷新购物车和订单
|
||||
emit('orderExpired')
|
||||
|
|
|
|||
|
|
@ -383,9 +383,9 @@ function reset() {
|
|||
closeStateTime.value = 5
|
||||
|
||||
// 关闭锁单
|
||||
goodsStore.isOrderLock({
|
||||
table_code: table_code.value
|
||||
}, 'pay_unlock')
|
||||
// goodsStore.isOrderLock({
|
||||
// table_code: table_code.value
|
||||
// }, 'pay_unlock')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { useSocket } from "@/store/socket.js";
|
|||
import useStorage from "@/utils/useStorage.js";
|
||||
import { formatDecimal } from "@/utils/index.js";
|
||||
import { shopUserDetail } from "@/api/account.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
// 商品store + 购物车store
|
||||
export const useGoods = defineStore("goods", {
|
||||
|
|
@ -851,14 +852,13 @@ export const useGoods = defineStore("goods", {
|
|||
this.operateCart(data, operate_type);
|
||||
socket.ws.addEventListener("message", (e) => {
|
||||
let data = JSON.parse(e.data);
|
||||
console.log("isOrderLock===", data);
|
||||
|
||||
if (data.operate_type == "search_pay_lock") {
|
||||
if (data.status == 0) {
|
||||
reject({
|
||||
code: 1003,
|
||||
msg: "其他用户正在支付该订单,请稍后再试!",
|
||||
ElMessage({
|
||||
message: "其他用户正在支付该订单,请稍后再试!",
|
||||
type: "warning",
|
||||
});
|
||||
reject();
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue