优化台桌状态

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({
-            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;
                 }