优化台桌状态

src/api/account.js

@@ -404,3 +404,14 @@ export function shopPagePermissionMine(params) {
     params,
   });
 }
+
+/**
+ * 台桌清台
+ */
+export function shopTableClear(data) {
+  return request({
+    method: "put",
+    url: "/account/admin/shopTable/clear",
+    data,
+  });
+}

src/components/payCard/payCard.vue

@@ -473,10 +473,10 @@ async function confirmOrder() {
     } catch (error) {
         console.log(error);
         payLoading.value = false;
-        if (error.code == 1003) {
+        // if (error.code == 1003) {
-            ElMessage.error(error.msg)
+        //     ElMessage.error(error.msg)
-            return
+        //     return
-        }
+        // }
         if (error.code == 701) {
             // 订单已过期需刷新购物车和订单
             emit('orderExpired')

src/components/payCard/scanModal.vue

@@ -383,9 +383,9 @@ function reset() {
   closeStateTime.value = 5
 
   // 关闭锁单
-  goodsStore.isOrderLock({
+  // goodsStore.isOrderLock({
-    table_code: table_code.value
+  //   table_code: table_code.value
-  }, 'pay_unlock')
+  // }, 'pay_unlock')
 }
 
 defineExpose({

src/store/goods.js

@@ -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({
+              ElMessage({
-                code: 1003,
+                message: "其他用户正在支付该订单，请稍后再试！",
-                msg: "其他用户正在支付该订单，请稍后再试！",
+                type: "warning",
               });
+              reject();
             } else {
               resolve();
             }

src/views/table/components/tableInfo.vue

@@ -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({
+        await shopTableClear({
-            shopId: store.userInfo.shopId,
+            tableId: props.tableInfo.id
-            tableId: props.tableInfo.qrcode
         })
-        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;
                 }
 

src/views/table/index.vue

@@ -22,8 +22,8 @@
                 </div>
                 <div class="overflow_y" v-loading="loading">
                     <div class="tab_list">
-                        <div class="item"
+                        <div class="item" :class="{ active: tableItemActive == index }"
-                            :class="{ active: tableItemActive == index, using: item.status == 'using', closed: item.status == 'closed' }"
+                            :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: '已预订',
+        label: '待清理',
-    //     type: 3,
+        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 {
+                    position: relative;
-                        color: var(--primary-color);
+                    &::before {
-                    }
+                        content: "";
-
+                        width: 100%;
-                    .t1 {
+                        height: 100%;
-                        color: var(--primary-color);
+                        position: absolute;
-                    }
+                        top: 0;
-                }
+                        left: 0;
-            }
+                        background-color: var(--color);
-
+                        opacity: .2;
-            &.using {
+                        z-index: 1;
-                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;
                     }
                 }
             }
@@ -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);
-                }
+                    position: relative;
-
+                    z-index: 2
-                .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;
-                        }
-                    }
                 }
             }
         }

src/views/table/statusList.js

@@ -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",
+  },
+];