From 397f4b2bcf3ecedeec829c418845d8817d320fa1 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Sat, 28 Mar 2026 18:16:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=94=A8=E6=88=B7=E6=98=AF?=
 =?UTF-8?q?=E5=90=A6=E5=8F=AF=E4=BB=A5=E8=87=AA=E4=B8=BB=E7=BB=93=E8=B4=A6?=
 =?UTF-8?q?=E5=BC=80=E5=85=B3=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=8F=B0=E6=A1=8C?=
 =?UTF-8?q?=E6=9B=B4=E5=A4=9A=E4=BF=A1=E6=81=AF=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/carts.ts                    |  20 +-
 src/views/shop/config/components/shopInfo.vue | 187 +++-
 src/views/tool/table/index.vue                | 882 ++++++++++--------
 3 files changed, 642 insertions(+), 447 deletions(-)

diff --git a/src/store/modules/carts.ts b/src/store/modules/carts.ts
index 449ae77..b366611 100644
--- a/src/store/modules/carts.ts
+++ b/src/store/modules/carts.ts
@@ -226,7 +226,25 @@ export const useCartsStore = defineStore("carts", () => {
   const isLinkFinshed = ref(false);
 
   // 当前购物车数据（现在 getAllGoodsList 能直接访问）
-  const list = useStorage<any[]>("carts", []);
+  const list = useStorage<any[]>(
+    "carts",
+    [],
+    localStorage,
+    {
+      serializer: {
+        read: (rawValue) => {
+          // 没有值时直接返回默认空数组
+          if (!rawValue) return []
+          try {
+            return JSON.parse(rawValue)
+          } catch {
+            return []
+          }
+        },
+        write: (value) => JSON.stringify(value),
+      },
+    }
+  )
   // 历史订单数据（现在 getAllGoodsList 能直接访问）
   const oldOrder = useStorage<any>("Instead_olold_order", {
     detailMap: [],
diff --git a/src/views/shop/config/components/shopInfo.vue b/src/views/shop/config/components/shopInfo.vue
index 5f0a243..9346aa5 100644
--- a/src/views/shop/config/components/shopInfo.vue
+++ b/src/views/shop/config/components/shopInfo.vue
@@ -3,14 +3,25 @@
     <div>
       <el-form ref="form" :model="form" :rules="rules" label-width="160px" label-position="left">
         <el-form-item label="门店名称" prop="shopName">
-          <el-input v-model.trim="form.shopName" placeholder="请输入门店名称" style="width: 500px"></el-input>
+          <el-input
+            v-model.trim="form.shopName"
+            placeholder="请输入门店名称"
+            style="width: 500px"
+          ></el-input>
         </el-form-item>
         <el-form-item label="连锁店扩展店名">
-          <el-input v-model.trim="form.chainName" placeholder="请输入连锁店扩展店名" style="width: 500px"></el-input>
+          <el-input
+            v-model.trim="form.chainName"
+            placeholder="请输入连锁店扩展店名"
+            style="width: 500px"
+          ></el-input>
         </el-form-item>
         <el-form-item label="门店logo">
           <div class="img_box">
-            <single-image-upload style="width: 80px; height: 80px" v-model="form.logo"></single-image-upload>
+            <single-image-upload
+              style="width: 80px; height: 80px"
+              v-model="form.logo"
+            ></single-image-upload>
           </div>
         </el-form-item>
         <!-- <el-form-item label="门店照片">
@@ -27,14 +38,22 @@
         <el-form-item label="门店收款码">
           <div class="img_box">
             <canvas ref="canvas" id="QRCode_header" style="width: 80px; height: 80px"></canvas>
-            <el-button size="small" plain v-if="form.paymentQrcode" @click="downloadCanvas(form.paymentQrcode)">
+            <el-button
+              size="small"
+              plain
+              v-if="form.paymentQrcode"
+              @click="downloadCanvas(form.paymentQrcode)"
+            >
               下载
             </el-button>
           </div>
         </el-form-item>
         <el-form-item label="微信二维码">
           <div class="img_box">
-            <single-image-upload style="width: 80px; height: 80px" v-model="form.shopQrcode"></single-image-upload>
+            <single-image-upload
+              style="width: 80px; height: 80px"
+              v-model="form.shopQrcode"
+            ></single-image-upload>
           </div>
         </el-form-item>
         <!-- <el-form-item label="店铺小程序码">
@@ -52,6 +71,21 @@
             <el-radio value="after">餐饮版（先下单后支付）</el-radio>
           </el-radio-group>
         </el-form-item>
+        <el-form-item
+          label="是否允许用户自行支付"
+          prop="isUserPay"
+          v-if="form.registerType === 'after'"
+        >
+          <div class="column">
+            <div class="center" style="display: flex; align-items: center; gap: 14px">
+              <el-switch v-model="form.isUserPay" :active-value="1" :inactive-value="0"></el-switch>
+              <div class="tips" style="font-size: 14px; color: #999">
+                关闭后，用户将不能自行支付
+              </div>
+            </div>
+          </div>
+        </el-form-item>
+
         <el-form-item label="就餐模式「多选」" prop="eatModel">
           <el-checkbox-group v-model="form.eatModel">
             <el-checkbox value="dine-in">堂食自取</el-checkbox>
@@ -65,7 +99,11 @@
           </el-radio-group>
         </el-form-item> -->
         <el-form-item label="联系电话" prop="phone">
-          <el-input v-model.trim="form.phone" placeholder="请输入联系电话" style="width: 500px"></el-input>
+          <el-input
+            v-model.trim="form.phone"
+            placeholder="请输入联系电话"
+            style="width: 500px"
+          ></el-input>
         </el-form-item>
         <!-- <el-form-item label="外卖起送金额">
                     <el-input-number v-model="form.takeaway_money" placeholder="0.00" controls-position="right"
@@ -91,30 +129,62 @@
           <div style="color: #999">注：准确的定位便于用户导航到店铺</div>
         </el-form-item>
         <el-form-item label="门店详细地址">
-          <el-input type="textarea" v-model.trim="form.address" placeholder="请输入门店详细地址" style="width: 500px"></el-input>
+          <el-input
+            type="textarea"
+            v-model.trim="form.address"
+            placeholder="请输入门店详细地址"
+            style="width: 500px"
+          ></el-input>
         </el-form-item>
         <el-form-item label="营业时间">
           <div class="u-flex gap-2" style="width: 50%">
             <el-select v-model="form.businessStartDay" placeholder="周几开始">
-              <el-option :value="item.label" :label="item.label" v-for="item in weeks" :key="item.value"></el-option>
+              <el-option
+                :value="item.label"
+                :label="item.label"
+                v-for="item in weeks"
+                :key="item.value"
+              ></el-option>
             </el-select>
             <el-select v-model="form.businessEndDay" placeholder="周几结束">
-              <el-option :value="item.label" :label="item.label" v-for="item in weeks" :key="item.value"></el-option>
+              <el-option
+                :value="item.label"
+                :label="item.label"
+                v-for="item in weeks"
+                :key="item.value"
+              ></el-option>
             </el-select>
-            <el-time-picker placeholder="起始时间" v-model="startTime" :picker-options="{
-              selectableRange: '00:00:00 - 23:59:59',
-              format: 'HH:mm',
-            }" format="HH:mm" value-format="HH:mm"></el-time-picker>
-            <el-time-picker placeholder="结束时间" v-model="endTime" :picker-options="{
-              selectableRange: '00:00:00 - 23:59:59',
-            }" format="HH:mm" value-format="HH:mm"></el-time-picker>
+            <el-time-picker
+              placeholder="起始时间"
+              v-model="startTime"
+              :picker-options="{
+                selectableRange: '00:00:00 - 23:59:59',
+                format: 'HH:mm',
+              }"
+              format="HH:mm"
+              value-format="HH:mm"
+            ></el-time-picker>
+            <el-time-picker
+              placeholder="结束时间"
+              v-model="endTime"
+              :picker-options="{
+                selectableRange: '00:00:00 - 23:59:59',
+              }"
+              format="HH:mm"
+              value-format="HH:mm"
+            ></el-time-picker>
           </div>
         </el-form-item>
         <el-form-item label="桌位费/位/元">
           <el-input-number :disabled="!!form.isTableFee" v-model="form.tableFee" :min="0" />
           <!-- <el-checkbox v-model="form.isTableFee" :label="1">免餐位费</el-checkbox> -->
-          <el-switch class="u-m-l-10" v-model.trim="form.isTableFee" :active-value="1" :inactive-value="0"
-            active-text="免餐位费"></el-switch>
+          <el-switch
+            class="u-m-l-10"
+            v-model.trim="form.isTableFee"
+            :active-value="1"
+            :inactive-value="0"
+            active-text="免餐位费"
+          ></el-switch>
         </el-form-item>
         <!-- <el-form-item label="是否开启8折活动">
           <el-switch v-model.trim="form.isOpenYhq" active-value="true" inactive-value="false"></el-switch>
@@ -148,42 +218,68 @@
           </el-time-picker>
         </el-form-item> -->
         <el-form-item label="店铺简介">
-          <el-input type="textarea" v-model.trim="form.detail" placeholder="请输入店铺简介" style="width: 500px"></el-input>
+          <el-input
+            type="textarea"
+            v-model.trim="form.detail"
+            placeholder="请输入店铺简介"
+            style="width: 500px"
+          ></el-input>
         </el-form-item>
         <el-form-item label="台桌预订短信">
-          <el-input type="textarea" v-model.trim="form.bookingSms" placeholder="请输入台桌预订短信"
-            style="width: 500px"></el-input>
+          <el-input
+            type="textarea"
+            v-model.trim="form.bookingSms"
+            placeholder="请输入台桌预订短信"
+            style="width: 500px"
+          ></el-input>
         </el-form-item>
         <el-form-item label="电子围栏" prop="isOrderFence">
           <div class="column">
             <div class="center" style="display: flex; align-items: center; gap: 14px">
-              <el-switch v-model="form.isOrderFence" :active-value="1" :inactive-value="0"></el-switch>
+              <el-switch
+                v-model="form.isOrderFence"
+                :active-value="1"
+                :inactive-value="0"
+              ></el-switch>
               <div class="tips" style="font-size: 14px; color: #999">
                 开启后，用户只能在店铺附近xx公里内点餐
               </div>
             </div>
             <div class="center" v-if="form.isOrderFence == 1">
-              <el-input v-model="form.orderFenceDistance" placeholder="请输入"
-                @input="(e) => (form.orderFenceDistance = filterNumberInput(e))" style="width: 250px"
-                input-style="text-align: center;">
+              <el-input
+                v-model="form.orderFenceDistance"
+                placeholder="请输入"
+                @input="(e) => (form.orderFenceDistance = filterNumberInput(e))"
+                style="width: 250px"
+                input-style="text-align: center;"
+              >
                 <template #prepend>限制：</template>
                 <template #append>公里</template>
               </el-input>
             </div>
           </div>
         </el-form-item>
+
         <el-form-item label="上菜时间（分钟）" prop="isServeTimeControl">
           <div class="column">
             <div class="center" style="display: flex; align-items: center; gap: 14px">
-              <el-switch v-model="form.isServeTimeControl" :active-value="1" :inactive-value="0"></el-switch>
+              <el-switch
+                v-model="form.isServeTimeControl"
+                :active-value="1"
+                :inactive-value="0"
+              ></el-switch>
               <div class="tips" style="font-size: 14px; color: #999">
                 起菜到上菜的时间间隔，开启后会有超时提示
               </div>
             </div>
             <div class="center" v-if="form.isServeTimeControl == 1">
-              <el-input v-model="form.serveTime" placeholder="请输入"
-                @input="(e) => (form.serveTime = filterNumberInput(e))" style="width: 250px"
-                input-style="text-align: center;">
+              <el-input
+                v-model="form.serveTime"
+                placeholder="请输入"
+                @input="(e) => (form.serveTime = filterNumberInput(e))"
+                style="width: 250px"
+                input-style="text-align: center;"
+              >
                 <template #prepend>限制：</template>
                 <template #append>分钟</template>
               </el-input>
@@ -208,11 +304,24 @@
       </el-form>
     </div>
     <ChooseAddress ref="refChooseAddress" @choose="chooseAddressConfirm"></ChooseAddress>
-    <el-dialog v-model="showUpload" :close-on-click-modal="false" append-to-body width="500px"
-      @close="showUpload = false">
-      <el-upload :before-remove="handleBeforeRemove" :on-success="handleSuccess" :on-error="handleError"
-        :file-list="fileList" :headers="headers" :action="qiNiuUploadApi" :limit="1" list-type="picture"
-        class="upload-demo">
+    <el-dialog
+      v-model="showUpload"
+      :close-on-click-modal="false"
+      append-to-body
+      width="500px"
+      @close="showUpload = false"
+    >
+      <el-upload
+        :before-remove="handleBeforeRemove"
+        :on-success="handleSuccess"
+        :on-error="handleError"
+        :file-list="fileList"
+        :headers="headers"
+        :action="qiNiuUploadApi"
+        :limit="1"
+        list-type="picture"
+        class="upload-demo"
+      >
         <el-button size="small" type="primary">点击上传</el-button>
         <template #tip>
           <div style="display: block" class="el-upload__tip">请勿上传违法文件，且文件不超过15M</div>
@@ -341,6 +450,14 @@ export default {
   mounted() {
     this.tbShopInfo();
   },
+  watch: {
+    "form.registerType"(val) {
+      console.log(val);
+      if (val === "before") {
+        this.form.isUserPay = 1;
+      }
+    },
+  },
   methods: {
     chooseAddressConfirm(e) {
       console.log(e);
@@ -459,7 +576,7 @@ export default {
     handleBeforeRemove(file, fileList) {
       for (let i = 0; i < this.files.length; i++) {
         if (this.files[i].uid === file.uid) {
-          crudQiNiu.del([this.files[i].id]).then((res) => { });
+          crudQiNiu.del([this.files[i].id]).then((res) => {});
           return true;
         }
       }
diff --git a/src/views/tool/table/index.vue b/src/views/tool/table/index.vue
index 833360e..9809b6c 100644
--- a/src/views/tool/table/index.vue
+++ b/src/views/tool/table/index.vue
@@ -1,207 +1,254 @@
 <template>
-	<div class="app-container">
-		<el-tabs v-model="tableArea.tabsSel" type="card" @tab-click="tabClick">
-			<el-tab-pane label="全部" name="" />
-			<el-tab-pane v-for="item in tableArea.tabs" :key="item.id" :label="item.name" :name="`${item.id}`">
-				<template #label>
-					<div class="">
-						<span>
-							{{ item.name }}
-						</span>
-						<el-icon style="margin: 0 10px" @click="addEaraShow(item)">
-							<EditPen />
-						</el-icon>
-						<el-popconfirm title="确定删除吗？" @confirm="delArea(item.id)">
-							<template #reference>
-								<el-icon>
-									<Delete />
-								</el-icon>
-							</template>
-						</el-popconfirm>
-					</div>
-				</template>
-			</el-tab-pane>
-		</el-tabs>
+  <div class="app-container">
+    <el-tabs v-model="tableArea.tabsSel" type="card" @tab-click="tabClick">
+      <el-tab-pane label="全部" name="" />
+      <el-tab-pane
+        v-for="item in tableArea.tabs"
+        :key="item.id"
+        :label="item.name"
+        :name="`${item.id}`"
+      >
+        <template #label>
+          <div class="">
+            <span>
+              {{ item.name }}
+            </span>
+            <el-icon style="margin: 0 10px" @click="addEaraShow(item)">
+              <EditPen />
+            </el-icon>
+            <el-popconfirm title="确定删除吗？" @confirm="delArea(item.id)">
+              <template #reference>
+                <el-icon>
+                  <Delete />
+                </el-icon>
+              </template>
+            </el-popconfirm>
+          </div>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
 
-		<div class="">
-			<el-button icon="plus" @click="addEaraShow()">添加区域</el-button>
-			<el-button type="primary" icon="plus" @click="addTableShow()">添加台桌</el-button>
-			<el-button type="danger" icon="Setting" @click="clearTabDialogRef.show()">清台设置</el-button>
-			<el-button type="primary" icon="download" @click="showDownloadTableCode">
-				下载桌台码
-			</el-button>
-			<!-- <el-button type="primary" icon="download" @click="downloadShopCpde">
+    <div class="">
+      <el-button icon="plus" @click="addEaraShow()">添加区域</el-button>
+      <el-button type="primary" icon="plus" @click="addTableShow()">添加台桌</el-button>
+      <el-button type="danger" icon="Setting" @click="clearTabDialogRef.show()">清台设置</el-button>
+      <el-button type="primary" icon="download" @click="showDownloadTableCode">
+        下载桌台码
+      </el-button>
+      <!-- <el-button type="primary" icon="download" @click="downloadShopCpde">
 				下载店铺码
 			</el-button> -->
-		</div>
+    </div>
 
-		<div class="u-flex u-p-b-15 u-font-14 u-m-t-16">
-			<div v-for="(item, key) in status" :key="key" class="state u-m-r-24">
-				<span class="dot" :style="{
-					backgroundColor: status[key] ? status[key].type : '',
-				}" />
-				{{ item.label }}
-			</div>
-		</div>
+    <div class="u-flex u-p-b-15 u-font-14 u-m-t-16">
+      <div v-for="(item, key) in status" :key="key" class="state u-m-r-24">
+        <span
+          class="dot"
+          :style="{
+            backgroundColor: status[key] ? status[key].type : '',
+          }"
+        />
+        {{ item.label }}
+      </div>
+    </div>
 
-		<!-- 列表 -->
-		<div class="head-container">
-			<div v-loading="loading" class="table_list">
-				<div v-for="item in tableList" :key="item.id" class="item" :style="{
-					'background-color': status[item.status] ? status[item.status].type : '',
-				}">
-					<div class="new-top flex u-row-between">
-						<div class="u-flex u-flex-1 u-p-r-10">
-							<span class="name u-line-1" style="max-width: 50px">
-								{{ item.name }}
-							</span>
-							<span class="u-font-14 u-line-1" style="max-width: 100px">
-								丨{{ areaMap[item.areaId] || "" }}
-							</span>
-						</div>
-						<el-dropdown trigger="click" @command="tableComman($event, item)">
-							<el-icon color="#fff" class="cur-pointer">
-								<More />
-							</el-icon>
-							<template #dropdown>
-								<el-dropdown-menu>
-									<el-dropdown-item command="edit">
-										<span>编辑</span>
-									</el-dropdown-item>
-									<el-dropdown-item command="bindTableCode" v-if="envName !== 'production'">
-										<span>绑定桌码</span>
-									</el-dropdown-item>
-									<el-dropdown-item command="del">
-										<span>删除</span>
-									</el-dropdown-item>
-								</el-dropdown-menu>
-							</template>
-						</el-dropdown>
-					</div>
-					<div class="box">
-						<div class="top">
-							<div v-if="item.status == 'subscribe' && item.bookingInfo">
-								<div class="row row1" style="align-items: flex-start">
-									<span style="font-size: 14px; color: #333">
-										{{ item.bookingInfo.createUserName }}订{{
-											item.bookingInfo.bookingPerson
-										}}「{{ item.bookingInfo.gender == 1 ? "先生" : "女士" }}」
-									</span>
-									<div class="state" style="
-											font-size: 12px;
-											color: #666;
-											display: flex;
-											align-items: center;
-										">
-										<img style="width: 16px; height: 16px; filter: contrast(0.5)" src="@/assets/images/perpole.png"
-											alt="" />
+    <!-- 列表 -->
+    <div class="head-container">
+      <div v-loading="loading" class="table_list">
+        <div
+          v-for="item in tableList"
+          :key="item.id"
+          class="item"
+          :style="{
+            'background-color': status[item.status] ? status[item.status].type : '',
+          }"
+        >
+          <div class="new-top flex u-row-between">
+            <div class="u-flex u-flex-1 u-p-r-10">
+              <span class="name u-line-1" style="max-width: 50px">
+                {{ item.name }}
+              </span>
+              <span class="u-font-14 u-line-1" style="max-width: 100px">
+                丨{{ areaMap[item.areaId] || "" }}
+              </span>
+            </div>
+            <el-dropdown trigger="click" @command="tableComman($event, item)">
+              <el-icon color="#fff" class="cur-pointer">
+                <More />
+              </el-icon>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="edit">
+                    <span>编辑</span>
+                  </el-dropdown-item>
+                  <el-dropdown-item command="bindTableCode" v-if="envName !== 'production'">
+                    <span>绑定桌码</span>
+                  </el-dropdown-item>
+                  <el-dropdown-item command="del">
+                    <span>删除</span>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+          <div class="box">
+            <div class="top">
+              <div v-if="item.status == 'subscribe' && item.bookingInfo">
+                <div class="row row1" style="align-items: flex-start">
+                  <span style="font-size: 14px; color: #333">
+                    {{ item.bookingInfo.createUserName }}订{{ item.bookingInfo.bookingPerson }}「{{
+                      item.bookingInfo.gender == 1 ? "先生" : "女士"
+                    }}」
+                  </span>
+                  <div
+                    class="state"
+                    style="font-size: 12px; color: #666; display: flex; align-items: center"
+                  >
+                    <img
+                      style="width: 16px; height: 16px; filter: contrast(0.5)"
+                      src="@/assets/images/perpole.png"
+                      alt=""
+                    />
 
-										{{ item.bookingInfo.bookingTime.substring(11, 19) }}
-									</div>
-								</div>
-								<div class="row">
-									<span style="font-size: 14px; color: #333; margin-top: 5px">
-										{{ item.bookingInfo.phoneNumber }}
-									</span>
-								</div>
-							</div>
+                    {{ item.bookingInfo.bookingTime.substring(11, 19) }}
+                  </div>
+                </div>
+                <div class="row">
+                  <span style="font-size: 14px; color: #333; margin-top: 5px">
+                    {{ item.bookingInfo.phoneNumber }}
+                  </span>
+                </div>
+              </div>
 
-							<div v-else class="u-font-18 font-600 total-price">
-								<span v-if="item.status == 'using'" class="cur-pointer" @click="diancanShow(item, 'isAddGoods')">
-									¥{{ item.totalAmount || 0 }}「{{ item.productNum }}件」
-								</span>
-								<!-- <span v-else class="color-fff">|</span> -->
-							</div>
-							<div class="row btn-group" style="margin-top: 10px">
-								<template v-if="item.status == 'subscribe'">
-									<el-button type="success" :disabled="!item.tableId || item.status === 'closed'"
-										@click="markStatus(item, -1)">
-										取消预约
-									</el-button>
-								</template>
-								<template v-if="
-									item.status == 'subscribe' &&
-									item.bookingInfo &&
-									item.bookingInfo.status == 20
-								">
-									<el-button type="success" :disabled="!item.tableId || item.status === 'closed'"
-										@click="markStatus(item, 10)">
-										到店
-									</el-button>
-								</template>
-								<template v-if="
-									item.status == 'idle' ||
-									(item.status == 'subscribe' &&
-										item.bookingInfo &&
-										item.bookingInfo.status == 10)
-								">
-									<el-button type="primary" :disabled="!item.tableCode || item.status === 'closed'"
-										@click="diancanShow(item)">
-										点餐
-									</el-button>
-								</template>
-								<template v-else-if="item.status != 'idle' && item.status != 'subscribe'">
-									<template v-if="item.status == 'using'">
-										<el-button :disabled="!item.tableId || item.status === 'closed'"
-											@click="diancanShow(item, 'isAddGoods')">
-											加菜
-										</el-button>
-										<el-button type="danger" :disabled="!item.tableId || item.status === 'closed'"
-											@click="diancanShow(item, 'isPayOrder')">
-											结账
-										</el-button>
-									</template>
-									<template v-else-if="item.status == 'closed'">
-										<el-button type="info" disabled>已关台</el-button>
-									</template>
-									<template v-else-if="item.status == 'cleaning'">
-										<el-button type="info" :style="{
-											backgroundColor: status[item.status].type,
-											borderColor: status[item.status].type,
-										}">
-											清理中
-										</el-button>
-									</template>
-									<template v-else>
-										<el-button type="info" disabled>点餐</el-button>
-									</template>
-								</template>
-							</div>
-						</div>
-						<div class="u-flex u-col-bottom bottom u-row-between color-666"
-							:class="{ 'opacity-0': item.status == 'closed' }">
-							<div class="u-flex u-col-center">
-								<img style="width: 16px; height: 16px; filter: contrast(0.5)" src="@/assets/images/perpole.png"
-									alt="" />
-								<span class="u-m-t-4 u-font-12 u-m-l-2">
-									{{ item.useNum || 0 }}/{{ item.maxCapacity }}
-								</span>
-							</div>
-							<div v-if="item.status == 'using'" class="u-flex">
-								<img style="width: 16px; height: 16px; filter: contrast(0.5)" src="@/assets/images/shalou.png" alt="" />
-								<span class="u-m-t-4 u-font-12">
-									{{ formatTime(item.durationTime) }}
-								</span>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="empty_wrap">
-					<el-empty v-if="!tableList.length" description="空空如也~" />
-				</div>
-			</div>
-		</div>
+              <div v-else class="u-font-18 font-600 total-price">
+                <span
+                  v-if="item.status == 'unsettled'"
+                  class="cur-pointer"
+                  @click="diancanShow(item, 'isAddGoods')"
+                >
+                  ¥{{ item.orderAmount || 0 }}
+                  <!-- 「{{ item.productNum }}件」 -->
+                </span>
+                <!-- <span v-else class="color-fff">|</span> -->
+              </div>
+              <div class="row btn-group" style="margin-top: 10px">
+                <template v-if="item.status == 'subscribe'">
+                  <el-button
+                    type="success"
+                    :disabled="!item.tableId || item.status === 'closed'"
+                    @click="markStatus(item, -1)"
+                  >
+                    取消预约
+                  </el-button>
+                </template>
+                <template
+                  v-if="
+                    item.status == 'subscribe' && item.bookingInfo && item.bookingInfo.status == 20
+                  "
+                >
+                  <el-button
+                    type="success"
+                    :disabled="!item.tableId || item.status === 'closed'"
+                    @click="markStatus(item, 10)"
+                  >
+                    到店
+                  </el-button>
+                </template>
+                <template
+                  v-if="
+                    item.status == 'idle' ||
+                    (item.status == 'subscribe' &&
+                      item.bookingInfo &&
+                      item.bookingInfo.status == 10)
+                  "
+                >
+                  <el-button
+                    type="primary"
+                    :disabled="!item.tableCode || item.status === 'closed'"
+                    @click="diancanShow(item)"
+                  >
+                    点餐
+                  </el-button>
+                </template>
+                <template v-else-if="item.status != 'idle' && item.status != 'subscribe'">
+                  <template v-if="item.status == 'using'">
+                    <el-button
+                      :disabled="!item.tableId || item.status === 'closed'"
+                      @click="diancanShow(item, 'isAddGoods')"
+                    >
+                      加菜
+                    </el-button>
+                    <el-button
+                      type="danger"
+                      :disabled="!item.tableId || item.status === 'closed'"
+                      @click="diancanShow(item, 'isPayOrder')"
+                    >
+                      结账
+                    </el-button>
+                  </template>
+                  <template v-else-if="item.status == 'closed'">
+                    <el-button type="info" disabled>已关台</el-button>
+                  </template>
+                  <template v-else-if="item.status == 'cleaning'">
+                    <el-button
+                      type="info"
+                      :style="{
+                        backgroundColor: status[item.status].type,
+                        borderColor: status[item.status].type,
+                      }"
+                    >
+                      清理中
+                    </el-button>
+                  </template>
+                  <template v-else>
+                    <el-button type="info" disabled>点餐</el-button>
+                  </template>
+                </template>
+              </div>
+            </div>
+            <div
+              class="u-flex u-col-bottom bottom u-row-between color-666"
+              :class="{ 'opacity-0': item.status == 'closed' }"
+            >
+              <div class="u-flex u-col-center">
+                <img
+                  style="width: 16px; height: 16px; filter: contrast(0.5)"
+                  src="@/assets/images/perpole.png"
+                  alt=""
+                />
+                <span class="u-m-t-4 u-font-12 u-m-l-2">
+                  {{ item.personNum || 0 }}/{{ item.maxCapacity }}
+                </span>
+              </div>
+              <div v-if="item.status == 'unsettled'" class="u-flex">
+                <img
+                  style="width: 16px; height: 16px; filter: contrast(0.5)"
+                  src="@/assets/images/shalou.png"
+                  alt=""
+                />
+                <span class="u-m-t-4 u-font-12">
+                  {{ formatTime(item.orderCreateTime) }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="empty_wrap">
+          <el-empty v-if="!tableList.length" description="空空如也~" />
+        </div>
+      </div>
+    </div>
 
-		<!-- 弹窗 -->
-		<addEara ref="refAddEara" @success="areainit" />
-		<addTable ref="refAddTable" @success="tableInit" />
-		<!-- 下载桌台码 -->
-		<downloadTableCode ref="refDownloadTableCode" />
-		<!-- 绑定桌码 -->
-		<bindCode ref="refBindCode" @refresh="tableInit" />
-		<!-- 清台设置 -->
-		<clearTabDialog ref="clearTabDialogRef" />
-	</div>
+    <!-- 弹窗 -->
+    <addEara ref="refAddEara" @success="areainit" />
+    <addTable ref="refAddTable" @success="tableInit" />
+    <!-- 下载桌台码 -->
+    <downloadTableCode ref="refDownloadTableCode" />
+    <!-- 绑定桌码 -->
+    <bindCode ref="refBindCode" @refresh="tableInit" />
+    <!-- 清台设置 -->
+    <clearTabDialog ref="clearTabDialogRef" />
+  </div>
 </template>
 
 <script setup>
@@ -217,50 +264,63 @@ import bindCode from "./components/bind-table-code.vue";
 import downloadTableCode from "./components/downloadTableCode.vue";
 import clearTabDialog from "./components/clearTabDialog.vue";
 
-const clearTabDialogRef = ref(null)
+const clearTabDialogRef = ref(null);
 
 const envName = import.meta.env.VITE_APP_NAME;
 
 //绑定桌码
 const refBindCode = ref();
 function showBindCode(item) {
-	refBindCode.value.open(item);
+  refBindCode.value.open(item);
 }
 
 //桌台二维码
 const refDownloadTableCode = ref();
 function showDownloadTableCode() {
-	refDownloadTableCode.value.show();
+  refDownloadTableCode.value.show();
 }
 
 let loading = ref(false);
-//工具方法
-function formatTime(milliseconds) {
-	console.log(milliseconds);
-	if (!milliseconds) {
-		return "";
-	}
-	const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
-	const hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-	const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
-	return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${minutes + "分"}`;
+
+const nowTime = ref(new Date().getTime());
+
+// 实时更新当前时间（循环执行）
+function updateTime() {
+  nowTime.value = new Date().getTime();
+  requestAnimationFrame(updateTime);
+}
+updateTime(); // 启动
+
+// 工具方法
+function formatTime(str) {
+  if (!str) return "";
+  const targetTime = new Date(str).getTime();
+  const milliseconds = nowTime.value - targetTime;
+
+  if (milliseconds <= 0) return "已结束";
+
+  const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
+  const hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
+
+  return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${minutes + "分"}`;
 }
 
-function downloadTableCpde() { }
+function downloadTableCpde() {}
 function downloadShopCpde() {
-	try {
-		const link = document.createElement("a");
-		link.href = shopUser.userInfo.smallQrcode;
-		const fileName = shopUser.userInfo.shopName + "店铺码" + ".png";
-		console.log(fileName);
-		link.setAttribute("download", fileName);
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-		this.$message.success("下载成功");
-	} catch (error) {
-		console.log(error);
-	}
+  try {
+    const link = document.createElement("a");
+    link.href = shopUser.userInfo.smallQrcode;
+    const fileName = shopUser.userInfo.shopName + "店铺码" + ".png";
+    console.log(fileName);
+    link.setAttribute("download", fileName);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    this.$message.success("下载成功");
+  } catch (error) {
+    console.log(error);
+  }
 }
 
 // 台桌
@@ -271,278 +331,278 @@ function downloadShopCpde() {
  * @param item
  */
 function tableComman(command, item) {
-	if (command === "bindTableCode") {
-		showBindCode(item);
-		return;
-	}
-	if (command === "edit") {
-		return refAddTable.value.show(item);
-	}
-	if (command === "del") {
-		ElMessageBox.confirm("是否删除" + item.name + "台桌", "提示", {
-			confirmButtonText: "确定",
-			cancelButtonText: "取消",
-			type: "warning",
-		})
-			.then(async () => {
-				await tableApi.delete(item.id);
-				ElMessage.success("删除成功");
-				tableInit();
-			})
-			.catch(() => { });
-		return;
-	}
+  if (command === "bindTableCode") {
+    showBindCode(item);
+    return;
+  }
+  if (command === "edit") {
+    return refAddTable.value.show(item);
+  }
+  if (command === "del") {
+    ElMessageBox.confirm("是否删除" + item.name + "台桌", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    })
+      .then(async () => {
+        await tableApi.delete(item.id);
+        ElMessage.success("删除成功");
+        tableInit();
+      })
+      .catch(() => {});
+    return;
+  }
 }
 
 const refAddTable = ref(null);
 function addTableShow(item) {
-	refAddTable.value.show(item);
+  refAddTable.value.show(item);
 }
 
 const tableList = ref([]);
 const tablequery = reactive({
-	page: 1,
-	size: 100,
+  page: 1,
+  size: 100,
 });
 
 async function tableInit() {
-	const res = await tableApi.getList({ ...tablequery, areaId: tableArea.tabsSel });
-	tableList.value = res.records;
+  const res = await tableApi.getList({ ...tablequery, areaId: tableArea.tabsSel });
+  tableList.value = res.records;
 }
 
 // 区域
 let areaMap = ref({});
 const refAddEara = ref(null);
 function addEaraShow(item) {
-	refAddEara.value.show(item);
+  refAddEara.value.show(item);
 }
 const tabVlaue = ref("");
 const tabs = ref([]);
 const tableArea = reactive({
-	tabs: [],
-	tabsSel: "",
+  tabs: [],
+  tabsSel: "",
 });
 watch(
-	() => tableArea.tabsSel,
-	() => {
-		tableInit();
-	}
+  () => tableArea.tabsSel,
+  () => {
+    tableInit();
+  }
 );
 //区域删除
 function delArea(id) {
-	shopAreaApi.delete(id).then((res) => {
-		ElMessage.success("删除成功");
-		areainit();
-	});
+  shopAreaApi.delete(id).then((res) => {
+    ElMessage.success("删除成功");
+    areainit();
+  });
 }
 //区域列表初始化
 async function areainit() {
-	const res = await shopAreaApi.getList();
-	console.log(res);
-	tableArea.tabs = res.records;
-	areaMap.value = res.records.reduce((prve, cur) => {
-		prve[cur.id] = cur.name;
-		return prve;
-	}, {});
+  const res = await shopAreaApi.getList();
+  console.log(res);
+  tableArea.tabs = res.records;
+  areaMap.value = res.records.reduce((prve, cur) => {
+    prve[cur.id] = cur.name;
+    return prve;
+  }, {});
 }
 async function diancanShow(item, key) {
-	if (!key) {
-		router.push({ path: "/Instead", query: { tableCode: item.tableCode } });
-		return;
-	}
-	if (key == "isAddGoods") {
-		router.push({ path: "/Instead", query: { id: item.orderId, key } });
-	}
-	if (key == "isPayOrder") {
-		router.push({ path: "/Instead", query: { id: item.orderId, key } });
-	}
+  if (!key) {
+    router.push({ path: "/Instead", query: { tableCode: item.tableCode } });
+    return;
+  }
+  if (key == "isAddGoods") {
+    router.push({ path: "/Instead", query: { id: item.orderId, key } });
+  }
+  if (key == "isPayOrder") {
+    router.push({ path: "/Instead", query: { id: item.orderId, key } });
+  }
 }
 const tabClick = (tab) => {
-	console.log(tab);
+  console.log(tab);
 };
 init();
 function init() {
-	areainit();
-	tableInit();
+  areainit();
+  tableInit();
 }
-onMounted(() => { });
+onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
 .el-tabs {
-	margin-bottom: 0;
+  margin-bottom: 0;
 }
 </style>
 <style scoped lang="scss">
 .cur-pointer {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 .opacity-0 {
-	opacity: 0;
+  opacity: 0;
 }
 
 .icon {
-	margin-left: 10px;
+  margin-left: 10px;
 }
 
 :deep(.btn-group .el-button) {
-	width: 100%;
+  width: 100%;
 }
 
 :deep(.el-dropdown-menu__item) {
-	line-height: 36px;
-	padding: 0 20px;
-	min-width: 60px;
-	text-align: center;
+  line-height: 36px;
+  padding: 0 20px;
+  min-width: 60px;
+  text-align: center;
 }
 
 .state {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
 
-	.dot {
-		$size: 8px;
-		width: $size;
-		height: $size;
-		border-radius: 50%;
-		margin-right: $size;
-	}
+  .dot {
+    $size: 8px;
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+    margin-right: $size;
+  }
 }
 
 .table_list {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 20px;
-	min-height: 150px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  min-height: 150px;
 
-	.empty_wrap {
-		flex: 1;
-		display: flex;
-		justify-content: center;
-	}
+  .empty_wrap {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+  }
 
-	.btn-group {
-		display: flex;
-		gap: 10px;
-	}
+  .btn-group {
+    display: flex;
+    gap: 10px;
+  }
 
-	.item {
-		padding: 1px;
-		overflow: hidden;
-		border: 1px solid #ddd;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		border-radius: 6px;
-		background-color: #1890ff;
-		max-width: 210px;
-		min-width: 190px;
+  .item {
+    padding: 1px;
+    overflow: hidden;
+    border: 1px solid #ddd;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border-radius: 6px;
+    background-color: #1890ff;
+    max-width: 210px;
+    min-width: 190px;
 
-		&.using {
-			background-color: rgb(250, 85, 85);
-		}
+    &.using {
+      background-color: rgb(250, 85, 85);
+    }
 
-		&.closed {
-			background-color: rgb(221, 221, 221);
-			filter: grayscale(1);
-		}
+    &.closed {
+      background-color: rgb(221, 221, 221);
+      filter: grayscale(1);
+    }
 
-		.total-price {
-			line-height: 35px;
-			height: 35px;
+    .total-price {
+      line-height: 35px;
+      height: 35px;
 
-			&:hover {
-				text-decoration: underline;
-			}
-		}
+      &:hover {
+        text-decoration: underline;
+      }
+    }
 
-		.new-top {
-			height: 30px;
-			color: #fff;
-			padding: 0 12px;
-		}
+    .new-top {
+      height: 30px;
+      color: #fff;
+      padding: 0 12px;
+    }
 
-		.name {
-			font-size: 16px;
-			line-height: 30px;
-			margin-right: 10px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
+    .name {
+      font-size: 16px;
+      line-height: 30px;
+      margin-right: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
-		.box {
-			height: 100%;
-			background-color: #fff;
-			border-radius: 3px 3px 6px 6px;
-			display: flex;
-			flex-direction: column;
-			justify-content: flex-end;
-		}
+    .box {
+      height: 100%;
+      background-color: #fff;
+      border-radius: 3px 3px 6px 6px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+    }
 
-		.bottom {
-			border-top: 1px solid #f7f7fa;
-			padding: 6px 15px;
-		}
+    .bottom {
+      border-top: 1px solid #f7f7fa;
+      padding: 6px 15px;
+    }
 
-		.top {
-			padding: 10px;
-			background-color: #fff;
-			flex: 1;
-			border-radius: 3px 3px 0 0;
-			display: flex;
-			flex-direction: column;
-			justify-content: flex-end;
+    .top {
+      padding: 10px;
+      background-color: #fff;
+      flex: 1;
+      border-radius: 3px 3px 0 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
 
-			.row {
-				display: flex;
-				gap: 10px;
+      .row {
+        display: flex;
+        gap: 10px;
 
-				.tips {
-					font-size: 12px;
-				}
+        .tips {
+          font-size: 12px;
+        }
 
-				&.row1 {
-					justify-content: space-between;
-					font-size: 14px;
-				}
-			}
-		}
+        &.row1 {
+          justify-content: space-between;
+          font-size: 14px;
+        }
+      }
+    }
 
-		.btm {
-			border-top: 1px solid #ddd;
-			background-color: #efefef;
-			display: flex;
-			border-radius: 0 0 6px 6px;
+    .btm {
+      border-top: 1px solid #ddd;
+      background-color: #efefef;
+      display: flex;
+      border-radius: 0 0 6px 6px;
 
-			.btm_item {
-				flex: 1;
-				height: 40px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				position: relative;
+      .btm_item {
+        flex: 1;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
 
-				&:hover {
-					cursor: pointer;
-				}
+        &:hover {
+          cursor: pointer;
+        }
 
-				&:nth-child(1) {
-					&::before {
-						content: "";
-						height: 50%;
-						border-right: 1px solid #ddd;
-						position: absolute;
-						top: 25%;
-						right: 0;
-					}
-				}
+        &:nth-child(1) {
+          &::before {
+            content: "";
+            height: 50%;
+            border-right: 1px solid #ddd;
+            position: absolute;
+            top: 25%;
+            right: 0;
+          }
+        }
 
-				.i {
-					color: #666;
-				}
-			}
-		}
-	}
+        .i {
+          color: #666;
+        }
+      }
+    }
+  }
 }
 </style>