优化订单结算不去结算购物车

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "vite-electron",
 	"private": true,
-	"version": "2.0.15",
+	"version": "2.0.21",
 	"main": "dist-electron/main.js",
 	"scripts": {
 		"dev": "chcp 65001 && vite",

src/components/payCard/payCard.vue

@@ -48,6 +48,7 @@
             <div class="input_wrap">
                 <div class="input" style="flex: 1">付款：￥{{ formatDecimal(goodsStore.cartInfo.costSummary.finalPayAmount
                     || 0) }}</div>
+                <!-- <el-button type="warning" style="width: 80px;border-radius: 6px; height: 60px;" @click="applyRounding">抹零</el-button> -->
                 <el-button type="primary" style="width: 120px;border-radius: 6px; height: 60px;"
                     @click="showCouponHandle">添加优惠</el-button>
             </div>
@@ -139,11 +140,25 @@
                         <el-button type="danger" @click="clearCouponUser">清除</el-button>
                     </div>
                 </el-form-item>
-                <el-form-item label="整单折扣">
+                <el-form-item label="优惠金额">
-                    <el-input v-model="couponForm.discountRatio" placeholder="请输入折扣" style="width: 180px;"
+                    <div class="column">
-                        @input="discountInput">
+                        <div>
+                            <el-radio-group v-model="discountType" @change="clearDiscountChange">
+                                <el-radio-button label="按金额优惠" :value="1"></el-radio-button>
+                                <el-radio-button label="按折扣优惠" :value="2"></el-radio-button>
+                            </el-radio-group>
+                        </div>
+                        <div>
+                            <el-input v-model="couponForm.discountAmount" placeholder="请输入金额" style="width: 239px;"
+                                @input="amountDiscountInput" v-if="discountType == 1">
+                                <template #append>元</template>
+                            </el-input>
+                            <el-input v-model="couponForm.discountRatio" placeholder="请输入折扣" style="width: 239px;"
+                                @input="discountInput" v-if="discountType == 2">
                                 <template #append>折</template>
                             </el-input>
+                        </div>
+                    </div>
                 </el-form-item>
                 <el-form-item label="优惠券">
                     <div style="width: 100%;">
@@ -258,6 +273,7 @@ import { staffPermission } from "@/api/user.js";
 import { cashPay, buyerPage, creditPay, vipPay } from "@/api/order.js";
 import { calcUsablePoints } from '@/api/account.js'
 import { useGoods } from "@/store/goods.js";
+import { createOrder } from '@/api/order.js';
 
 const emit = defineEmits(["paySuccess", 'orderExpired', 'reset']);
 
@@ -475,8 +491,44 @@ function upadatePayData() {
 }
 
 // 结算支付
-async function confirmOrder() {
+async function confirmOrder(t = 1) {
     try {
+        // if (goodsStore.cartList.length >= 0) {
+        //     // 如果购物还存在商品，先下单后进行支付操作
+        //     const data = {
+        //         orderId: goodsStore.orderListInfo.id || '',  // 订单id
+        //         shopId: store.shopInfo.id, // 店铺id
+        //         seatNum: goodsStore.tableInfo.num || 0, // 用餐人数
+        //         packFee: goodsStore.cartInfo.packFee, // 打包费
+        //         originAmount: goodsStore.cartInfo.costSummary.goodsOriginalAmount,
+        //         tableCode: goodsStore.cartList[0].table_code, // 台桌号
+        //         dineMode: goodsStore.allSelected ? store.shopInfo.eatModel.split(',')[1] : store.shopInfo.eatModel.split(',')[0], // 用餐方式
+        //         remark: goodsStore.remark, // 备注
+        //         placeNum: (goodsStore.orderListInfo.placeNum || 0) + 1, // 下单次数
+        //         waitCall: 0, // 是否叫号
+        //         userId: goodsStore.vipUserInfo.userId || '', // 会员用户id
+        //         limitRate: goodsStore.limitDiscountRes
+        //     }
+
+        //     // goodsStore.calcCartInfo()
+        //     const res = await createOrder(data)
+        //     if (res.id) {
+        //         // 设置订单信息
+        //         // goodsStore.orderListInfo = res
+        //         // if (t == 1) {
+        //         //     // 向其他端发送清空购物车消息
+        //         //     goodsStore.operateCart({ table_code: goodsStore.orderListInfo.tableCode }, "cleanup");
+        //         //     console.log('生成订单===', res);
+        //         // } else {
+        //         //     goodsStore.clearCart()
+        //         // }
+        //         // 清除购物车，更新历史订单
+        //         // goodsStore.updateOrderList()
+        //     } else {
+        //         ElMessage.error('订单成功失败，请重新下单')
+        //     }
+        // }
+
         // 判断订单是否锁定
         await goodsStore.isOrderLock({
             table_code: goodsStore.orderListInfo.tableCode
@@ -486,7 +538,6 @@ async function confirmOrder() {
 
         upadatePayData()
 
-
         payType.value = payList.value[payActive.value].payType
         if (payList.value[payActive.value].payType == "arrears") {
             showBuyerHandle();
@@ -576,6 +627,20 @@ function amountInput(num) {
     payData.value.checkOrderPay.orderAmount = money.value;
 }
 
+// 应用抹零
+function applyRounding() {
+    if (discountAmount.value !== null) {
+        money.value = formatDecimal(discountAmount.value)
+        roundAmount.value = 0
+    } else {
+        money.value = formatDecimal(props.amount)
+        roundAmount.value = 0
+    }
+
+    payData.value.checkOrderPay.roundAmount = roundAmount.value;
+    payData.value.checkOrderPay.orderAmount = money.value;
+}
+
 // 删除
 function delHandle() {
     if (!money.value) return; money.value = money.value.substring(0, money.value.length - 1);
@@ -718,6 +783,32 @@ function clearCouponUser() {
     // resetCouponFormHandle()
 }
 
+// 按照金额优惠
+const discountType = ref(1)
+
+// 清除优惠方式变更时的优惠数据
+function clearDiscountChange() {
+    couponForm.value.discountRatio = ''
+    couponForm.value.discountAmount = ''
+    discountRateNumber.value = 0
+
+    updateCartCalc()
+}
+
+const amountDiscountInput = _.debounce(function (e) {
+    couponForm.value.discountAmount = inputFilterFloat(e)
+    if (couponForm.value.discountAmount > goodsStore.cartInfo.costSummary.goodsRealAmount) {
+        couponForm.value.discountAmount = goodsStore.cartInfo.costSummary.goodsRealAmount
+    }
+    if (couponForm.value.discountAmount < 0) {
+        couponForm.value.discountAmount = 0
+    }
+
+    discountRateNumber.value = couponForm.value.discountAmount
+
+    updateCartCalc()
+}, 500)
+
 // 折扣格式化
 const discountRateNumber = ref(0)
 const discountInput = _.debounce(function (e) {
@@ -1251,6 +1342,12 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
+.column {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
 .point_tips {
     &.err {
         color: var(--el-color-danger);

src/store/goods.js

@@ -46,6 +46,7 @@ export const useGoods = defineStore("goods", {
     }, // 台桌信息
     cartActiveIndex: 0, // 购物车激活索引,
     isCartInit: false,
+    payType: "cart", // 结算类型，cart 购物车结算 table 桌台结算 order 订单结算,
     cartList: [], // 购物车列表
     // 购物车信息,
     cartInfo: {
@@ -889,8 +890,12 @@ export const useGoods = defineStore("goods", {
           .map((item) => item.goods)
           .flat()
           .map(this.comleteOrderInfo);
+        if (this.payType == 'table' || this.payType == 'order') {
+          return [...giftGoods, ...oldOrderGoods];
+        } else {
           return [...currentGoods, ...giftGoods, ...oldOrderGoods];
         }
+      }
 
       // 合并所有商品列表
       const allGoods = ref(getAllGoodsList() || [])

src/views/home/components/goods.vue

@@ -55,7 +55,13 @@
     </div>
     <div class="shop_list" :class="{ img: shopListType == 'img' }" v-loading="loading">
         <!-- <swiper class="swiper_box" direction="vertical" @slideChange="onSlideChange"> -->
-        <swiper ref="swiperRef" :loop="false" class="swiper_box" direction="vertical">
+        <swiper ref="swiperRef" :loop="false" class="swiper_box" direction="vertical" :modules="[Mousewheel]"
+            :simulate-touch="true" :allow-touch-move="true" :mousewheel="{
+                enabled: true,
+                forceToAxis: true,
+                releaseOnEdges: true,
+                invert: false,
+            }">
             <swiper-slide class="slide_item" v-for="(goods, index) in goodsStore.goodsList" :key="index">
                 <div class="item_wrap" v-for="item in goods" :key="item.id" @click="showSkuHandle(item)">
                     <div class="item">
@@ -294,6 +300,8 @@ import { staffPermission } from '@/api/user.js'
 import { clearNoNum } from '@/utils/index.js'
 import { productOnOff, markIsSoldOut } from '@/api/product_new.js'
 
+import { Mousewheel } from 'swiper/modules'
+
 const swiperRef = ref(null)
 
 const store = useUser()

src/views/home/components/settleAccount.vue

@@ -144,6 +144,10 @@ const props = defineProps({
   member: {
     type: Object,
     default: {}
+  },
+  type: {
+    type: String,
+    default: 'cart' // cart 代客下单 table 桌台结算 order 订单结算
   }
 });
 
@@ -227,11 +231,11 @@ async function printOrderLable(isBefore = false) {
         printStore.pushReceiptData(commOrderPrintData({ ...data, isBefore: isBefore }));
       } else {
         // 本地没有可用打印机使用云打印机
-        // await orderPrint({
+        await orderPrint({
-        //   type: isBefore ? 1 : 0,
+          type: isBefore ? 1 : 0,
-        //   id: orderId,
+          id: orderId,
-        // });
+        });
-        // ElMessage.success(`云打印${isBefore ? '预' : ''}结算单成功`);
+        ElMessage.success(`云打印${isBefore ? '预' : ''}结算单成功`);
       }
     }
   } catch (error) {
@@ -244,7 +248,7 @@ async function printOrderLable(isBefore = false) {
 
 // 订单已支付
 function paySuccess() {
-  if (isPrint.value) printOrderLable()
+  // if (isPrint.value) printOrderLable()
   emits('success')
   dialogVisible.value = false;
   ElMessage.success('支付成功')
@@ -258,9 +262,14 @@ function paySuccess() {
 
 const payCardRef = ref(null)
 function show(t) {
+  goodsStore.payType = props.type
   dialogVisible.value = true;
   cartInfo.value = { ...goodsStore.cartInfo }
+  if (props.type === 'table' || props.type === 'order') {
+    orderList.value = goodsStore.orderList.map(item => item.goods).flat()
+  } else {
     orderList.value = [...goodsStore.cartList, ...goodsStore.orderList.map(item => item.goods).flat()]
+  }
 
   console.log('orderListInfo===================', { ...goodsStore.orderListInfo });
 

src/views/home/components/tableMerging.vue

@@ -204,7 +204,7 @@ function confirmHandle() {
                         goodsStore.operateCart({
                             table_code: table_code,
                             new_table_code: new_table_code,
-                            cart_ids: cart_ids
+                            cart_id: cart_ids
                         }, 'rottable')
                     }
 

src/views/order/index.vue

@@ -168,7 +168,7 @@
   <!-- 打印操作 -->
   <PrintDrawer ref="PrintDrawerRef" />
   <!-- 结算订单 -->
-  <SettleAccount ref="SettleAccountRef" @success="orderListAjax" />
+  <SettleAccount ref="SettleAccountRef" type="order" @success="orderListAjax" />
   <!-- 全部商品 -->
   <allGoodsDialog ref="allGoodsDialogRef" />
 </template>

src/views/table/components/tableInfo.vue

@@ -1,7 +1,7 @@
 <!-- 空闲台桌 -->
 <template>
     <div class="table_wrap">
-        <div class="header">
+        <!-- <div class="header">
             <span class="t">{{ props.tableInfo.name }}</span>
             <div class="close" @click="close">
                 <el-icon class="icon">
@@ -14,14 +14,29 @@
                 <Clock />
             </el-icon>
             <span class="t">{{tableStatusList.find(val => val.type == props.tableInfo.status).label}}</span>
-        </div>
+        </div> -->
         <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">
-                        <span class="name">{{ item.productName }}</span>
+                        <span class="name">
-                        <span class="n">x{{ item.num }}</span>
+                            <span v-if="item.isTemporary" style="color: #999;">[临时菜]</span>
-                        <span class="p">￥{{ item.price }}</span>
+                            <span v-if="item.isGift" style="color: #999;">[赠]</span>
+                            {{ item.productName }}
+                        </span>
+                        <span class="n">x{{ item.num - item.returnNum }}</span>
+                        <span class="p">￥{{ item.unitPrice }}</span>
+                    </div>
+                    <div class="top" v-if="item.returnNum > 0" style="font-size: 12px;color: #999;">
+                        <span class="name">[退菜]</span>
+                        <span class="n">x{{ item.returnNum }}</span>
+                        <span class="p">-￥{{ item.returnNum * item.price }}</span>
+                    </div>
+                    <div class="top" v-if="item.discountSaleAmount > 0 && item.isTemporary == 0"
+                        style="font-size: 12px;color: #999;">
+                        <span class="name">[改价优惠]</span>
+                        <span class="n"></span>
+                        <span class="p">-￥{{ item.price - item.unitPrice }}</span>
                     </div>
                     <div class="tag_wrap" v-if="item.skuName">
                         <div class="tag" v-for="item in item.skuName.split(',')">
@@ -56,6 +71,9 @@
                 <div class="btn_wrap" v-if="props.tableInfo.status == 'settled'">
                     <el-button type="primary" style="width: 100%;" @click="clearTableStatus">清理完成</el-button>
                 </div>
+                <div class="btn_wrap" v-if="props.tableInfo.status == 'unbound'">
+                    <el-button type="default" disabled style="width: 100%;">{{ props.tableInfo.statusMsg }}</el-button>
+                </div>
             </div>
             <transition name="el-fade-in">
                 <div class="people_num_wrap" v-show="showPeopleNum">
@@ -77,7 +95,7 @@
             </transition>
         </div>
         <!-- 结算订单 -->
-        <SettleAccount ref="SettleAccountRef" @success="emits('success')" />
+        <SettleAccount ref="SettleAccountRef" type="table" @success="emits('success')" />
     </div>
 </template>
 
@@ -182,9 +200,8 @@ async function getOrderDetail() {
 
             let total = 0
             res.cartList.forEach(item => {
-                total += item.payAmount * item.num
+                total += +item.payAmount - (item.returnNum * item.price)
             })
-
             orderInfo.value.orderAmount = formatDecimal(total)
         }
     } catch (error) {
@@ -257,7 +274,8 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .table_wrap {
-    padding: 20px;
+    // padding: 20px;
+    padding-top: 14px;
 
     .header {
         display: flex;
@@ -299,14 +317,14 @@ onMounted(() => {
     }
 
     .cart {
-        height: calc(100vh - 160px);
+        height: calc(100vh - 75px);
         display: flex;
         flex-direction: column;
 
         .cart_list {
             flex: 1;
             border-radius: 6px;
-            background-color: #efefef;
+            background-color: #fff;
             padding: 0 var(--el-font-size-base);
             overflow-y: auto;
 

src/views/table/index.vue

@@ -5,42 +5,57 @@
                 <div class="menus">
                     <div class="item" :class="{ active: tabActive == index }" v-for="(item, index) in tabAreas"
                         :key="item.id" @click="tabChange(item, index)">
+                        <div class="dot" :style="{ backgroundColor: item.color }" v-if="item.color"></div>
                         <el-text>{{ item.label }}</el-text>
                     </div>
                 </div>
                 <!-- <div class="all">
                     <el-button type="link" icon="Clock">预定管理</el-button>
                 </div> -->
+                <div class="order_info">
+                    <div class="title">
+                        <el-icon>
+                            <Tickets />
+                        </el-icon>
+                        <el-text>未结账：</el-text>
+                    </div>
+                    <el-text type="primary">
+                        {{ orderInfo.num }}笔 | {{ orderInfo.personNum }}人 | ￥{{ formatDecimal(orderInfo.amount) }}
+                    </el-text>
+                </div>
             </div>
             <div class="tab_container">
-                <div class="tab_head">
+                <div class="tab_head" ref="tabHeadRef">
-                    <el-radio-group v-model="area" @change="shopTableAjax">
+                    <div class="item" :class="{ active: tabItemActive == -1 }" @click="tabItemChange('', -1)">全部</div>
-                        <el-radio-button label="全部" value=""></el-radio-button>
+                    <div class="item" :class="{ active: index == tabItemActive }" v-for="(item, index) in areaList"
-                        <el-radio-button :label="item.name" :value="item.id" v-for="item in areaList"
+                        :key="item.id" @click="tabItemChange(item, index)">
-                            :key="item.id"></el-radio-button>
+                        {{ item.name }}
-                    </el-radio-group>
+                    </div>
                 </div>
                 <div class="overflow_y" v-loading="loading">
                     <div class="tab_list">
-                        <div class="item" :class="{ active: tableItemActive == index }"
+                        <div class="item"
                             :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>
+                                <span>{{ item.areaName }} | {{ item.name }}</span>
-                                <span>0/{{ item.maxCapacity }}</span>
+                                <span>{{ item.personNum || 0 }}/{{ item.maxCapacity }}</span>
                             </div>
                             <div class="tab_cont">
-                                <el-icon class="icon" v-if="item.status != 'using'">
+                                <div class="using"
-                                    <CircleClose />
+                                    v-if="item.status == 'unsettled' || item.status == 'unsettled' || item.status == 'paying' || item.status == 'settled' || item.status == 'unpaid'">
-                                </el-icon>
+                                    <div class="t1">￥{{ formatDecimal(+item.orderAmount) }}</div>
-                                <div class="using" v-else>
+                                    <div class="t2">
-                                    <div class="t1">开台中</div>
+                                        <el-icon color="#333">
-                                    <!-- <div class="t2">
-                                        <el-icon>
                                             <Timer />
                                         </el-icon>
-                                        <span>{{ countTime(item.updatedAt) }}</span>
+                                        <span :key="refreshKey">{{ countTime(item.orderCreateTime) }}</span>
-                                    </div> -->
+                                    </div>
+                                </div>
+                                <div class="icon_wrap" v-else>
+                                    <el-icon class="icon">
+                                        <CircleClose />
+                                    </el-icon>
                                 </div>
                             </div>
                         </div>
@@ -49,19 +64,22 @@
                         <el-empty description="空空如也~" />
                     </div>
                 </div>
-                <div class="pagination">
+                <!-- <div class="pagination">
                     <el-pagination background v-model:current-page="query.page" :pager-count="5"
                         layout=" pager, jumper, total" :total="query.total"
                         @current-change="shopTableAjax"></el-pagination>
+                </div> -->
             </div>
         </div>
-        </div>
+        <el-drawer v-model="drawerVisible"
-        <div class="right_card card">
+            :title="`${tableList[tableItemActive].areaName} | ${tableList[tableItemActive].name} （${tableList[tableItemActive].personNum || 0}/${tableList[tableItemActive].maxCapacity}）`"
-            <!-- 台桌统计 -->
+            size="35%" v-if="tableList.length">
+            <tableInfo :tableInfo="tableList[tableItemActive]" @success="paySuccess" />
+        </el-drawer>
+        <!-- <div class="right_card card">
             <countCard v-if="!slectTable.id" />
-            <!-- 台桌信息 -->
             <tableInfo v-else :tableInfo="slectTable" @close="slectTableClose" @success="paySuccess" />
-        </div>
+        </div> -->
     </div>
 </template>
 
@@ -69,9 +87,16 @@
 import { shopArea, shopTable } from "@/api/account.js";
 import countCard from '@/views/table/components/countCard.vue'
 import tableInfo from '@/views/table/components/tableInfo.vue'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import { dayjs } from 'element-plus'
 import tableStatusList from './statusList.js'
+import { formatDecimal } from '@/utils/index.js'
+
+const orderInfo = ref({
+    num: 0,
+    personNum: 0,
+    amount: 0
+})
 
 const tabActive = ref(0)
 const tabAreas = ref([
@@ -82,18 +107,22 @@ const tabAreas = ref([
     {
         label: '空闲',
         type: 'idle',
+        color: "#187CAA",
     },
     {
         label: '使用中',
-        type: 'unsettled'
+        type: 'unsettled',
+        color: "#DD3F41",
     },
     {
         label: '待清理',
         type: 'settled',
+        color: "#FF9500",
     },
     {
         label: '已预订',
         type: 'subscribe',
+        color: "#58B22C",
     }
 ])
 
@@ -110,7 +139,7 @@ const tableList = ref([])
 // 所选区域
 const area = ref('')
 // 选择台桌索引
-const tableItemActive = ref(-1)
+const tableItemActive = ref(0)
 // 选择台桌信息
 const slectTable = ref('')
 
@@ -120,33 +149,89 @@ function tabChange(item, index) {
     shopTableAjax()
 }
 
+const tabItemActive = ref(-1)
+function tabItemChange(item, index) {
+    tabItemActive.value = index
+    if (index == -1) {
+        area.value = ''
+    } else {
+        area.value = item.id
+    }
+    shopTableAjax()
+
+    nextTick(() => {
+        scrollTabToCenter()
+    })
+}
+
+// 自动居中滚动
+const tabHeadRef = ref(null)
+function scrollTabToCenter() {
+    const container = tabHeadRef.value
+    if (!container) return
+
+    // 获取当前激活的 item
+    const activeItem = container.querySelector('.item.active')
+    if (!activeItem) return
+
+    // 计算居中位置
+    const containerWidth = container.offsetWidth
+    const itemWidth = activeItem.offsetWidth
+    const itemLeft = activeItem.offsetLeft
+
+    // 滚动到中间（核心公式）
+    container.scrollTo({
+        left: itemLeft - containerWidth / 2 + itemWidth / 2,
+        behavior: 'smooth' // 丝滑滚动
+    })
+}
+
 // 计算当前的时间差
 function countTime(t) {
-    let ctime = dayjs().valueOf()
+    if (!t) return '0小时1分'
-    return dayjs(ctime - t).format('H小时m分')
+
+    const now = dayjs().valueOf()
+    const createTime = dayjs(t).valueOf()
+
+    let diff = now - createTime
+
+    // 负数 或 小于1分钟，都强制显示 0小时1分
+    if (diff < 0 || diff < 60 * 1000) {
+        return '0小时1分'
+    }
+
+    const h = Math.floor(diff / 3600000)
+    const m = Math.floor((diff % 3600000) / 60000)
+
+    return `${h}小时${m}分`
 }
 
 // 支付成功，刷新状态
 async function paySuccess() {
+    drawerVisible.value = false
     await shopTableAjax()
-    slectTableHandle(tableItemActive.value, tableList.value[tableItemActive.value])
+    // slectTableHandle(tableItemActive.value, tableList.value[tableItemActive.value])
 }
 
 // 选择台桌
+const drawerVisible = ref(false)
 function slectTableHandle(index, item) {
-    if (tableItemActive.value == index) {
-        tableItemActive.value = -1
-        slectTable.value = ''
-    } else {
     tableItemActive.value = index
-        slectTable.value = item
+    drawerVisible.value = true
-    }
+    // if (tableItemActive.value == index) {
+    //     tableItemActive.value = -1
+    //     slectTable.value = ''
+    // } else {
+    //     tableItemActive.value = index
+    //     slectTable.value = item
+    // }
 }
 
 // 关闭台桌
 function slectTableClose() {
     tableItemActive.value = -1
     slectTable.value = ''
+    drawerVisible.value = false
 }
 
 // 获取台桌区域
@@ -163,12 +248,21 @@ async function shopAreaAjax() {
 }
 
 // 获取台桌列表
-async function shopTableAjax() {
+async function shopTableAjax(isLoading = true) {
     try {
+        orderInfo.value = {
+            num: 0,
+            personNum: 0,
+            amount: 0
+        }
+        if (isLoading) {
             loading.value = true
+        }
         const res = await shopTable({
-            page: query.value.page,
+            // page: query.value.page,
-            size: query.value.size,
+            // size: query.value.size,
+            page: 1,
+            size: 999,
             areaId: area.value,
             tableCode: '',
             name: '',
@@ -176,19 +270,60 @@ async function shopTableAjax() {
         })
         tableList.value = res.records
         query.value.total = +res.totalRow
+
+        tableList.value.forEach(item => {
+            if (item.status == 'unsettled') {
+                orderInfo.value.num += 1
+                orderInfo.value.personNum += item.personNum || 0
+                orderInfo.value.amount += item.orderAmount || 0
+            }
+        })
+        if (isLoading) {
             setTimeout(() => {
                 loading.value = false
             }, 500)
+        }
     } catch (error) {
+        if (isLoading) {
             loading.value = false
+        }
         console.log(error)
     }
 }
 
+const refreshKey = ref(0)
+
+// 精准【每分钟 00 秒】自动刷新时间（和时钟完全同步）
+let timeTimer = null
+
+function syncMinuteRefresh() {
+    // 1. 计算当前时间距离下一个 00 秒还剩多少毫秒
+    const now = new Date()
+    const seconds = now.getSeconds()
+    const delay = (60 - seconds) * 1000 // 等到下一个整分钟
+
+    // 2. 等到整分钟时，执行一次刷新
+    setTimeout(() => {
+        refreshKey.value++ // 刷新时间
+
+        // 3. 之后每 60 秒执行一次（永远在 00 秒刷新）
+        timeTimer = setInterval(() => {
+            refreshKey.value++
+        }, 60000)
+    }, delay)
+}
+
 onMounted(() => {
     shopAreaAjax()
     shopTableAjax()
+    syncMinuteRefresh()
 })
+
+// 销毁清理
+onUnmounted(() => {
+    clearInterval(timeTimer)
+})
+
 </script>
 
 <style scoped lang="scss">
@@ -219,7 +354,7 @@ onMounted(() => {
         padding: 0 10px;
 
         .item {
-            padding: 0 10px;
+            padding: 0 20px;
             display: flex;
             align-items: center;
             position: relative;
@@ -228,6 +363,13 @@ onMounted(() => {
                 font-size: var(--el-font-size-base);
             }
 
+            .dot {
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                margin-right: 6px;
+            }
+
             &.active {
 
                 &::after {
@@ -252,35 +394,82 @@ onMounted(() => {
         display: flex;
         align-items: center;
     }
+
+    .order_info {
+        display: flex;
+        padding-right: 14px;
+
+        .title {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+    }
 }
 
 .tab_container {
     padding: var(--el-font-size-base);
 
     .tab_head {
+        width: calc(100vw - 125px);
         padding-bottom: var(--el-font-size-base);
+        overflow-x: auto;
+        white-space: nowrap;
+
+        /* 隐藏滚动条（通用） */
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+
+
+        .item {
+            height: 42px;
+            display: inline-flex;
+            align-items: center;
+            padding: 4px 12px;
+            border-radius: 4px;
+            background-color: #f5f5f5;
+            margin-right: 10px;
+
+            &.active {
+                background-color: var(--primary-color);
+                color: #fff;
+            }
+
+            &:hover {
+                cursor: pointer;
+                background-color: var(--primary-color);
+                color: #fff;
+            }
+        }
+    }
+
+    /* 隐藏滚动条（Chrome / Electron / Edge） */
+    .tab_head::-webkit-scrollbar {
+        display: none !important;
     }
 
     .overflow_y {
-        height: calc(100vh - 220px);
+        // height: calc(100vh - 220px);
+        height: calc(100vh - 162px);
         overflow-y: auto;
     }
 
     .tab_list {
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
         grid-template-rows: auto;
         gap: 10px;
 
         .item {
             border-radius: 6px;
             overflow: hidden;
-            padding: 2px;
+            padding: 4px;
             background-color: var(--color);
 
             &.active {
                 .tab_cont {
                     position: relative;
+
                     &::before {
                         content: "";
                         width: 100%;
@@ -306,17 +495,37 @@ onMounted(() => {
                 justify-content: space-between;
                 padding: 0 10px;
                 color: #fff;
+                gap: 4px;
+
+                span:nth-child(1) {
+                    /* 核心：最多两行，超出... */
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    /* 最多2行 */
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+
+                    /* 保证换行正常 */
+                    white-space: normal;
+                    word-break: break-all;
+                }
             }
 
             .tab_cont {
-                height: 112px;
+                height: 108px;
                 display: flex;
-                align-items: center;
-                justify-content: center;
                 background-color: #fff;
                 border-radius: 4px;
                 position: relative;
 
+                .icon_wrap {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
                     .icon {
                         color: var(--color);
                         font-size: 30px;
@@ -325,6 +534,29 @@ onMounted(() => {
                         z-index: 2
                     }
                 }
+
+                .using {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    gap: 20px;
+                    padding-left: 14px;
+
+                    .t1 {
+                        color: #333;
+                    }
+
+                    .t2 {
+                        display: flex;
+                        align-items: center;
+                        gap: 4px;
+
+                        span {
+                            color: #555;
+                        }
+                    }
+                }
+            }
         }
     }
 }

src/views/table/index20260328.vue

@@ -0,0 +1,331 @@
+<template>
+    <div class="content">
+        <div class="cart_wrap card">
+            <div class="header">
+                <div class="menus">
+                    <div class="item" :class="{ active: tabActive == index }" v-for="(item, index) in tabAreas"
+                        :key="item.id" @click="tabChange(item, index)">
+                        <el-text>{{ item.label }}</el-text>
+                    </div>
+                </div>
+                <!-- <div class="all">
+                    <el-button type="link" icon="Clock">预定管理</el-button>
+                </div> -->
+            </div>
+            <div class="tab_container">
+                <div class="tab_head">
+                    <el-radio-group v-model="area" @change="shopTableAjax">
+                        <el-radio-button label="全部" value=""></el-radio-button>
+                        <el-radio-button :label="item.name" :value="item.id" v-for="item in areaList"
+                            :key="item.id"></el-radio-button>
+                    </el-radio-group>
+                </div>
+                <div class="overflow_y" v-loading="loading">
+                    <div class="tab_list">
+                        <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>
+                                <span>0/{{ item.maxCapacity }}</span>
+                            </div>
+                            <div class="tab_cont">
+                                <el-icon class="icon" v-if="item.status != 'using'">
+                                    <CircleClose />
+                                </el-icon>
+                                <div class="using" v-else>
+                                    <div class="t1">开台中</div>
+                                    <!-- <div class="t2">
+                                        <el-icon>
+                                            <Timer />
+                                        </el-icon>
+                                        <span>{{ countTime(item.updatedAt) }}</span>
+                                    </div> -->
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="empty" v-if="!tableList.length">
+                        <el-empty description="空空如也~" />
+                    </div>
+                </div>
+                <div class="pagination">
+                    <el-pagination background v-model:current-page="query.page" :pager-count="5"
+                        layout=" pager, jumper, total" :total="query.total"
+                        @current-change="shopTableAjax"></el-pagination>
+                </div>
+            </div>
+        </div>
+        <div class="right_card card">
+            <!-- 台桌统计 -->
+            <countCard v-if="!slectTable.id" />
+            <!-- 台桌信息 -->
+            <tableInfo v-else :tableInfo="slectTable" @close="slectTableClose" @success="paySuccess" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { shopArea, shopTable } from "@/api/account.js";
+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([
+    {
+        label: '全部',
+        type: '',
+    },
+    {
+        label: '空闲',
+        type: 'idle',
+    },
+    {
+        label: '使用中',
+        type: 'unsettled'
+    },
+    {
+        label: '待清理',
+        type: 'settled',
+    },
+    {
+        label: '已预订',
+        type: 'subscribe',
+    }
+])
+
+const query = ref({
+    page: 1,
+    size: 12,
+    total: 0
+})
+const loading = ref(false)
+// 区域列表
+const areaList = ref([])
+// 台桌列表
+const tableList = ref([])
+// 所选区域
+const area = ref('')
+// 选择台桌索引
+const tableItemActive = ref(-1)
+// 选择台桌信息
+const slectTable = ref('')
+
+// 切换类型
+function tabChange(item, index) {
+    tabActive.value = index
+    shopTableAjax()
+}
+
+// 计算当前的时间差
+function countTime(t) {
+    let ctime = dayjs().valueOf()
+    return dayjs(ctime - t).format('H小时m分')
+}
+
+// 支付成功，刷新状态
+async function paySuccess() {
+    await shopTableAjax()
+    slectTableHandle(tableItemActive.value, tableList.value[tableItemActive.value])
+}
+
+// 选择台桌
+function slectTableHandle(index, item) {
+    if (tableItemActive.value == index) {
+        tableItemActive.value = -1
+        slectTable.value = ''
+    } else {
+        tableItemActive.value = index
+        slectTable.value = item
+    }
+}
+
+// 关闭台桌
+function slectTableClose() {
+    tableItemActive.value = -1
+    slectTable.value = ''
+}
+
+// 获取台桌区域
+async function shopAreaAjax() {
+    try {
+        const res = await shopArea({
+            page: 1,
+            size: 500
+        })
+        areaList.value = res.records
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+// 获取台桌列表
+async function shopTableAjax() {
+    try {
+        loading.value = true
+        const res = await shopTable({
+            page: query.value.page,
+            size: query.value.size,
+            areaId: area.value,
+            tableCode: '',
+            name: '',
+            status: tabAreas.value[tabActive.value].type,
+        })
+        tableList.value = res.records
+        query.value.total = +res.totalRow
+        setTimeout(() => {
+            loading.value = false
+        }, 500)
+    } catch (error) {
+        loading.value = false
+        console.log(error)
+    }
+}
+
+onMounted(() => {
+    shopAreaAjax()
+    shopTableAjax()
+})
+</script>
+
+<style scoped lang="scss">
+.pagination {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: var(--el-font-size-base);
+}
+
+.cart_wrap {
+    flex: 2;
+}
+
+.right_card {
+    flex: 1;
+    height: 100%;
+    margin-left: var(--el-font-size-base);
+}
+
+.header {
+    display: flex;
+    height: var(--el-component-size-large);
+    justify-content: space-between;
+    border-bottom: 1px solid #ececec;
+
+    .menus {
+        display: flex;
+        padding: 0 10px;
+
+        .item {
+            padding: 0 10px;
+            display: flex;
+            align-items: center;
+            position: relative;
+
+            span {
+                font-size: var(--el-font-size-base);
+            }
+
+            &.active {
+
+                &::after {
+                    content: "";
+                    width: 70%;
+                    height: 4px;
+                    border-radius: 4px;
+                    position: absolute;
+                    bottom: 0;
+                    left: 15%;
+                    background-color: var(--primary-color);
+                }
+
+                span {
+                    color: var(--primary-color);
+                }
+            }
+        }
+    }
+
+    .all {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.tab_container {
+    padding: var(--el-font-size-base);
+
+    .tab_head {
+        padding-bottom: var(--el-font-size-base);
+    }
+
+    .overflow_y {
+        height: calc(100vh - 220px);
+        overflow-y: auto;
+    }
+
+    .tab_list {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-rows: auto;
+        gap: 10px;
+
+        .item {
+            border-radius: 6px;
+            overflow: hidden;
+            padding: 2px;
+            background-color: var(--color);
+
+            &.active {
+                .tab_cont {
+                    position: relative;
+                    &::before {
+                        content: "";
+                        width: 100%;
+                        height: 100%;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        background-color: var(--color);
+                        opacity: .2;
+                        z-index: 1;
+                    }
+                }
+            }
+
+            &:hover {
+                cursor: pointer;
+            }
+
+            .tab_title {
+                height: var(--el-component-size-large);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 0 10px;
+                color: #fff;
+            }
+
+            .tab_cont {
+                height: 112px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: #fff;
+                border-radius: 4px;
+                position: relative;
+
+                .icon {
+                    color: var(--color);
+                    font-size: 30px;
+                    transform: rotate(45deg);
+                    position: relative;
+                    z-index: 2
+                }
+            }
+        }
+    }
+}
+</style>