diff --git a/src/api/table.js b/src/api/table.js
index 8eb43e1..529b42e 100644
--- a/src/api/table.js
+++ b/src/api/table.js
@@ -1,10 +1,10 @@
 // 桌台管理
-import request from "@/utils/request";
-//就餐形式，默认堂食后付费
-const useType='dine-in-after'
-function getUseType(){
-  const type=localStorage.getItem("useType")
-  return type?type:useType
+import request from '@/utils/request'
+// 就餐形式，默认堂食后付费
+const useType = 'dine-in-after'
+function getUseType() {
+  const type = localStorage.getItem('useType')
+  return type || useType
 }
 /**
  * 台桌列表
@@ -13,12 +13,51 @@ function getUseType(){
 export function tbShopTableGet(params) {
   return request({
     url: `/api/tbShopTable`,
-    method: "get",
-    params:{
-      shopId: localStorage.getItem("shopId"),
+    method: 'get',
+    params: {
+      shopId: localStorage.getItem('shopId'),
       ...params
     }
-  });
+  })
+}
+
+/**
+ * 获取预约台桌列表
+ * @returns
+ */
+export function getShopTableList(params) {
+  return request({
+    url: `/api/booking/shop-table/list`,
+    method: 'get',
+    params: {
+      shopId: localStorage.getItem('shopId'),
+      ...params
+    }
+  })
+}
+
+/**
+ * 预约
+ * @returns
+ */
+export function makeShopTable(data) {
+  return request({
+    url: `/api/booking/shop-table`,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 标记预约状态
+ * @returns
+ */
+export function markStatus(data) {
+  return request({
+    url: `/api/booking/shop-table/mark-status`,
+    method: 'post',
+    data
+  })
 }
 
 /**
@@ -28,7 +67,7 @@ export function tbShopTableGet(params) {
 export function tbShopAreaGet(params) {
   return request({
     url: `/api/tbShopArea`,
-    method: "get",
+    method: 'get',
     params
   });
 }
diff --git a/src/views/table/components/subscribe.vue b/src/views/table/components/subscribe.vue
index 20caa03..d28d178 100644
--- a/src/views/table/components/subscribe.vue
+++ b/src/views/table/components/subscribe.vue
@@ -2,8 +2,7 @@
   <el-dialog
     title="预约"
     :visible.sync="dialogVisible"
-    width="400px"
-    @open="tbShopAreaGet"
+    width="500px"
     @close="reset"
   >
     <el-form
@@ -14,17 +13,67 @@
       label-position="left"
     >
 
-      <el-form-item label="就餐人数" prop="number">
-        <el-input-number v-model="form.number" :min="1" controls-position="right" />
+      <el-form-item label="预约日期" prop="bookingDate">
+        <!-- <el-date-picker
+          v-model="form.bookingDate"
+          type="date"
+          value-format="yyyy-MM-dd"
+          :picker-options="pickerOptions"
+          placeholder="选择预约日期"
+          style="width: 200px;margin-right: 10px;"
+          @change="getShopTableList"
+        /> -->
+        <el-radio-group
+          v-model="form.bookingDate"
+          class="date"
+          @change="getShopTableList"
+        >
+          <el-radio-button
+            v-for="(item) in dateList"
+            :key="item.date"
+            :label="item.date"
+          >
+            <div style="font-size: 12px;margin-bottom: 4px;">{{ item.label }} / {{ item.date.substring(8,10) }}</div>
+            <div style="font-size: 12px;"> {{ item.day }}</div>
+          </el-radio-button>
+        </el-radio-group>
       </el-form-item>
-      <el-form-item label="联系电话" prop="phone">
-        <el-input v-model="form.phone" oninput="value= value.replace(/[^0-9]/g, '')" maxlength="11" placeholder="请输入联系电话" />
+      <el-form-item label="预约类型" prop="bookingType">
+        <el-radio-group v-model="form.bookingType" @change="getShopTableList">
+          <el-radio-button label="lunch">午餐</el-radio-button>
+          <el-radio-button label="dinner">晚餐</el-radio-button>
+        </el-radio-group>
       </el-form-item>
-      <el-form-item label="联系人" prop="name">
-        <el-input v-model="form.name" placeholder="请输入联系人姓名" />
+      <el-form-item label="就餐时间" prop="bookingTime">
+        <el-time-picker
+          v-model="form.bookingTime"
+          value-format="HH:mm:ss"
+          placeholder="选择时间"
+          style="width: 100%;"
+        />
       </el-form-item>
-      <el-form-item label="就餐时间" prop="time">
-        <el-time-picker v-model="form.time" value-format="HH:mm:ss" placeholder="选择时间" style="width: 100%;" />
+      <el-form-item label="预约桌台" prop="shopTableId">
+        <el-select v-model="form.shopTableId" placeholder="请选择" style="width: 100%;">
+          <el-option
+            v-for="item in shopTableList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="用餐人数" prop="dinerNum">
+        <el-input-number v-model="form.dinerNum" :min="1" controls-position="right" style="width: 100%;"/>
+      </el-form-item>
+      <el-form-item label="订餐人" prop="bookingPerson">
+        <el-input v-model="form.bookingPerson" style="width: 200px;margin-right: 10px;" placeholder="请输入联系人姓名" />
+        <el-radio-group v-model="form.gender">
+          <el-radio-button label="1">先生</el-radio-button>
+          <el-radio-button label="2">女士</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="联系电话" prop="phoneNumber">
+        <el-input v-model="form.phoneNumber" oninput="value= value.replace(/[^0-9]/g, '')" maxlength="11" placeholder="请输入联系电话" />
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
@@ -39,46 +88,73 @@
 </template>
 
 <script>
-import { $fastCreateTable } from '@/api/table'
+import { getShopTableList, makeShopTable } from '@/api/table'
+import dayjs from 'dayjs'
+
 export default {
   data() {
     return {
       dialogVisible: false,
       resetForm: '',
       loading: false,
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() < Date.now() - 8.64e7 // 如果今天之前的日期都不可选，减去8.64e7是1天的毫秒数
+        }
+      },
+      dateList: [
+        { label: '今', day: '', date: '' },
+        { label: '明', day: '', date: '' },
+        { label: '后', day: '', date: '' }
+      ],
+      shopTableList: [],
       form: {
-        id: '',
-        number: 1,
-        name: '',
-        phone: '',
-        time: ''
+        bookingDate: '',
+        bookingType: 'lunch',
+        shopTableId: null,
+        dinerNum: 1,
+        bookingPerson: '',
+        phoneNumber: '',
+        gender: '1',
+        bookingTime: '',
+        diningType: '普通用餐',
+        focus: '0',
+        receiveMarketingSms: '0'
+
       },
       rules: {
-        number: [
+        shopTableId: [
           {
             required: true,
-            message: '请选择就餐人数',
+            message: '请选择预约桌台',
             trigger: ['blur']
           }
         ],
-        phone: [
+        dinerNum: [
+          {
+            required: true,
+            message: '请选择用餐人数',
+            trigger: ['blur']
+          }
+        ],
+        phoneNumber: [
           {
             required: true,
             message: '请输入联系方式',
             trigger: ['blur']
           }
         ],
-        name: [
+        bookingPerson: [
           {
             required: true,
-            message: '请输入联系人姓名',
+            message: '请输入订餐人姓名',
             trigger: ['blur']
           }
         ],
-        time: [
+        bookingTime: [
           {
             required: true,
-            message: '请选择时间',
+            message: '请选择用餐时间',
             trigger: ['change']
           }
         ]
@@ -89,19 +165,59 @@ export default {
     this.resetForm = { ...this.form }
   },
   methods: {
+    getWeekdays() {
+      const today = new Date()
+      const tomorrow = new Date(today)
+      const dayAfterTomorrow = new Date(today)
+
+      // 设置时间为今天
+      tomorrow.setDate(today.getDate() + 1)
+      dayAfterTomorrow.setDate(today.getDate() + 2)
+
+      // 获取星期几的方法
+      const getDayOfWeek = (date) => {
+        const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+        return days[date.getDay()]
+      }
+
+      // 获取今天、明天和后天的星期几
+      const todayWeekday = getDayOfWeek(today)
+      const tomorrowWeekday = getDayOfWeek(tomorrow)
+      const dayAfterTomorrowWeekday = getDayOfWeek(dayAfterTomorrow)
+      this.dateList[0].day = todayWeekday
+      this.dateList[1].day = tomorrowWeekday
+      this.dateList[2].day = dayAfterTomorrowWeekday
+      this.dateList[0].date = dayjs(today).format('YYYY-MM-DD')
+      this.dateList[1].date = dayjs(tomorrow).format('YYYY-MM-DD')
+      this.dateList[2].date = dayjs(dayAfterTomorrow).format('YYYY-MM-DD')
+
+      this.form.bookingDate = this.dateList[0].date
+    },
+    /**
+     * 获取桌台数据
+     */
+    async getShopTableList() {
+      this.form.shopTableId = null
+      const params = {
+        bookingDate: this.form.bookingDate,
+        bookingType: this.form.bookingType
+      }
+      const res = await getShopTableList(params)
+      this.shopTableList = res
+      console.log(res)
+    },
     onSubmitHandle() {
       this.$refs.form.validate(async(valid) => {
         if (valid) {
           this.loading = true
           try {
-            const res = await $fastCreateTable(
-              {
-                ...this.form,
-                qrcode: this.form.tableId,
-                shopId: localStorage.getItem('shopId')
-              },
-              this.form.id ? 'put' : 'post'
-            )
+            const bookingTime = this.form.bookingDate + ' ' + this.form.bookingTime
+            const params = {
+              ...this.form,
+              shopId: localStorage.getItem('shopId')
+            }
+            params.bookingTime = bookingTime
+            const res = await makeShopTable(params)
             this.$emit('success', res)
             this.close()
             this.$notify({
@@ -122,6 +238,8 @@ export default {
       if (obj && obj.id) {
         this.form = JSON.parse(JSON.stringify(obj))
       }
+      this.getShopTableList()
+      this.getWeekdays()
     },
     close() {
       this.dialogVisible = false
@@ -133,3 +251,19 @@ export default {
   }
 }
 </script>
+<style scoped lang="scss">
+.date{
+  ::v-deep .el-form-item__content{
+    // height: 36px;
+    // display: flex;
+    // justify-content: space-between;
+  }
+  ::v-deep .el-radio-button{
+    height: 100%;
+  }
+  ::v-deep .el-radio-button__inner{
+    padding: 4px 20px;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/table/status.js b/src/views/table/status.js
index a8d2007..ecaf8c8 100644
--- a/src/views/table/status.js
+++ b/src/views/table/status.js
@@ -1,38 +1,10 @@
 export default {
-    pending: {
-        label: "挂单中",
-        type: "#E6A23C",
-    },
-    using: {
-        label: "开台中",
-        type: "#fa5555",
-    },
-    paying: {
-        label: "结算中",
-        type: "#E6A23C",
-    },
-    idle: {
-        label: "空闲",
-        type: "#3F9EFF",
-    },
-    subscribe: {
-        label: "预定",
-        type: "rgb(34, 191, 100)",
-    },
-    closed: {
-        label: "关台",
-        type: "rgb(221,221,221)",
-    },
-    // opening: {
-    //   label: "开台中",
-    //   type: "#67C23A",
-    // },
-    cleaning: {
-        label: "待清台",
-        type: "#FAAD14",
-    },
-    unbind: {
-        label: "未绑定",
-        type: "rgb(221,221,221)",
-    }
-}
\ No newline at end of file
+  pending: { label: '挂单中', type: '#E6A23C' },
+  cleaning: { label: '待清台', type: '#FAAD14' },
+  using: { label: '开台中', type: '#FF4D4F' },
+  idle: { label: '空闲', type: '#3F9EFF' },
+  paying: { label: '结算中', type: '#E6A23C' },
+  closed: { label: '关台', type: '#DDDDDD' },
+  subscribe: { label: '预约', type: '#52C41A ' },
+  unbind: { label: '未绑定', type: 'rgb(221,221,221)' }
+}
diff --git a/src/views/table/table_list.vue b/src/views/table/table_list.vue
index 8d79d82..a064764 100644
--- a/src/views/table/table_list.vue
+++ b/src/views/table/table_list.vue
@@ -22,6 +22,27 @@
     </el-tabs>
     <div class="head-container">
       <div class="filter_wrap">
+        <el-radio-group
+          v-model="query.bookingDate"
+          class="date"
+          @change="tbShopTableGet"
+        >
+          <el-radio-button
+            v-for="(item) in dateList"
+            :key="item.date"
+            :label="item.date"
+          >
+            <div>{{ item.label }}
+              <!-- / {{ item.date.substring(8,10) }} -->
+            </div>
+            <!-- <div style="font-size: 12px;"> {{ item.day }}</div> -->
+          </el-radio-button>
+        </el-radio-group>
+
+        <el-radio-group v-model="query.bookingType" @change="tbShopTableGet">
+          <el-radio-button label="lunch">午餐</el-radio-button>
+          <el-radio-button label="dinner">晚餐</el-radio-button>
+        </el-radio-group>
         <el-button
           icon="el-icon-plus"
           @click="$refs.addEara.show()"
@@ -43,6 +64,11 @@
           icon="el-icon-download"
           @click="downloadShopCode"
         >下载店铺码</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          @click="$refs.subscribe.show()"
+        >预约</el-button>
       </div>
     </div>
     <div class="u-flex u-p-b-15 u-font-14">
@@ -89,33 +115,51 @@
           <div class="box">
             <div class="top">
               <!-- <div class="row row1">
-              <span>{{ item.name }}</span>
-              <div class="state">
-                <span
-                  class="dot"
-                  :style="{
-                    backgroundColor: status[item.status]
-                      ? status[item.status].type
-                      : '',
-                  }"
-                ></span>
-                {{ status[item.status] ? status[item.status].label : "" }}
+                <span>{{ item.name }}</span>
+                <div class="state">
+                  <span
+                    class="dot"
+                    :style="{
+                      backgroundColor: status[item.status]
+                        ? status[item.status].type
+                        : '',
+                    }"
+                  />
+                  {{ status[item.status] ? status[item.status].label : "" }}
+                </div>
+              </div> -->
+
+              <!-- <div class="row">
+                <el-tag type="warning" size="mini">{{
+                  item.type == 0 ? "低消" : "计时"
+                }}</el-tag>
+                <el-tag :type="item.isPredate == 1 ? '' : 'info'" size="mini">{{
+                  item.isPredate == 1 ? "可预约" : "不可预约"
+                }}</el-tag>
+              </div> -->
+
+              <!-- <div class="row">
+                <span class="tips">客座次数：{{ item.maxCapacity }}人</span>
+              </div> -->
+              <div v-if="item.status == 'subscribe'">
+                <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>
-            </div> -->
 
-              <!-- <div class="row">
-              <el-tag type="warning" size="mini">{{
-                item.type == 0 ? "低消" : "计时"
-              }}</el-tag>
-              <el-tag :type="item.isPredate == 1 ? '' : 'info'" size="mini">{{
-                item.isPredate == 1 ? "可预约" : "不可预约"
-              }}</el-tag>
-            </div> -->
-
-              <!-- <div class="row">
-              <span class="tips">客座次数：{{ item.maxCapacity }}人</span>
-            </div> -->
-              <div class="u-font-18 font-600 total-price">
+              <div v-else class="u-font-18 font-600 total-price">
                 <span
                   v-if="item.status == 'using'"
                   class="cur-pointer"
@@ -123,30 +167,31 @@
                 >
                   ¥{{ item.totalAmount || 0 }}「{{ item.productNum }}件」
                 </span>
-                <span v-else class="color-fff">|</span>
+                <!-- <span v-else class="color-fff">|</span> -->
               </div>
-              <div class="row btn-group">
-                <template v-if="item.status == 'idle'">
-                  <el-button
-                    type="primary"
-                    :disabled="!item.tableId || item.status === 'closed'"
-                    @click="diancanShow(item, 'subscribe')"
-                  >预约</el-button>
-                </template>
+              <div class="row btn-group" style="margin-top: 10px;">
                 <template v-if="item.status == 'subscribe'">
                   <el-button
-                    type="primary"
+                    type="success"
                     :disabled="!item.tableId || item.status === 'closed'"
-                  >已预约</el-button>
+                    @click="markStatus(item,-1)"
+                  >取消预约</el-button>
                 </template>
-                <template v-if="item.status == 'idle' || item.status == 'subscribe'">
+                <template v-if="item.status == 'subscribe'&&(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.status==10))">
                   <el-button
                     type="primary"
                     :disabled="!item.tableId || item.status === 'closed'"
                     @click="diancanShow(item)"
                   >点餐</el-button>
                 </template>
-                <template v-else>
+                <template v-else-if="item.status != 'idle' && item.status != 'subscribe'">
                   <template v-if="item.status == 'using'">
                     <el-button
                       :disabled="!item.tableId || item.status === 'closed'"
@@ -238,9 +283,12 @@ import downloadTableCode from './components/downloadTableCode'
 import chooseDinersNumber from './components/table-diancan-components/choose-diners-number.vue'
 import { tbShopInfo } from '@/api/user'
 import { hasPermission } from '@/utils/limits.js'
+import $status from './status.js'
+import dayjs from 'dayjs'
 
 import {
   tbShopTableGet,
+  markStatus,
   tbShopAreaGet,
   tbShopAreaDelete,
   tbShopTableDelete,
@@ -277,29 +325,40 @@ export default {
   },
   data() {
     return {
+      dateList: [
+        { label: '今天', day: '', date: '' },
+        { label: '明天', day: '', date: '' },
+        { label: '后天', day: '', date: '' }
+      ],
+      query: {
+        bookingDate: '',
+        bookingType: 'lunch'
+      },
       tabVlaue: '',
       tabs: [],
       loading: false,
       total: 0,
       tableList: [],
-      status: {
-        pending: { label: '挂单中', type: '#E6A23C' },
+      status: $status,
+      // status: {
+      //   pending: { label: '挂单中', type: '#E6A23C' },
 
-        cleaning: { label: '待清台', type: '#FAAD14' },
-        using: { label: '开台中', type: '#FF4D4F' },
-        idle: { label: '空闲', type: '#3F9EFF' },
+      //   cleaning: { label: '待清台', type: '#FAAD14' },
+      //   using: { label: '开台中', type: '#FF4D4F' },
+      //   idle: { label: '空闲', type: '#3F9EFF' },
 
-        paying: { label: '结算中', type: '#E6A23C' },
+      //   paying: { label: '结算中', type: '#E6A23C' },
 
-        closed: { label: '关台', type: '#DDDDDD' },
-        subscribe: { label: '预定', type: '#52C41A ' },
+      //   closed: { label: '关台', type: '#DDDDDD' },
+      //   subscribe: { label: '预定', type: '#52C41A ' },
 
-        unbind: { label: '未绑定', type: 'rgb(221,221,221)' }
+      //   unbind: { label: '未绑定', type: 'rgb(221,221,221)' }
 
-      },
+      // },
       selTable: '', // 当前选中的桌台
       areaMap: {},
       shopInfo: {},
+      bookingDate: '',
       timer: null
     }
   },
@@ -312,8 +371,53 @@ export default {
     this.setTimter(60)
     this.tbShopAreaGet()
     this.getShopInfo()
+    this.getWeekdays()
   },
   methods: {
+    /**
+     * 设置日期
+     */
+    getWeekdays() {
+      const today = new Date()
+      const tomorrow = new Date(today)
+      const dayAfterTomorrow = new Date(today)
+
+      // 设置时间为今天
+      tomorrow.setDate(today.getDate() + 1)
+      dayAfterTomorrow.setDate(today.getDate() + 2)
+
+      // 获取星期几的方法
+      const getDayOfWeek = (date) => {
+        const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+        return days[date.getDay()]
+      }
+
+      // 获取今天、明天和后天的星期几
+      const todayWeekday = getDayOfWeek(today)
+      const tomorrowWeekday = getDayOfWeek(tomorrow)
+      const dayAfterTomorrowWeekday = getDayOfWeek(dayAfterTomorrow)
+      this.dateList[0].day = todayWeekday
+      this.dateList[1].day = tomorrowWeekday
+      this.dateList[2].day = dayAfterTomorrowWeekday
+      this.dateList[0].date = dayjs(today).format('YYYY-MM-DD')
+      this.dateList[1].date = dayjs(tomorrow).format('YYYY-MM-DD')
+      this.dateList[2].date = dayjs(dayAfterTomorrow).format('YYYY-MM-DD')
+
+      this.query.bookingDate = this.dateList[0].date
+    },
+    /**
+     * 修改预约状态
+     */
+    async markStatus(item, type) {
+      console.log(item)
+      const params = {
+        id: item.bookingInfo.id,
+        status: type
+      }
+      const res = await markStatus(params)
+      this.tbShopTableGet()
+      console.log(res)
+    },
     /**
      * 下载店铺码
      */
@@ -332,6 +436,9 @@ export default {
         console.log(error)
       }
     },
+    tbShopSubscribe() {
+      this.tbShopTableGet()
+    },
     /**
      * 清除定时器
      */
@@ -499,11 +606,17 @@ export default {
     async tbShopTableGet(showloading = true) {
       this.loading = showloading
       try {
-        const { content, total } = await tbShopTableGet({
+        const res = await tbShopTableGet({
           shopId: localStorage.getItem('shopId'),
-          areaId: this.tabVlaue
+          areaId: this.tabVlaue === '0' ? '' : this.tabVlaue,
+          ...this.query
         })
-        this.tableList = content
+        res.content.map(item => {
+          if (item.status === 'subscribe' && !item.bookingInfo) {
+            item.status = 'idle'
+          }
+        })
+        this.tableList = res.content
         // this.tableList = content.sort((a,b)=>{
         //   if(a.status=='idle'&&b.status!='idle'){
         //     return 1
@@ -511,7 +624,7 @@ export default {
         //     return -1
         //   }
         // });
-        this.total = total
+        this.total = res.total
         setTimeout(() => {
           this.loading = false
         }, 300)
@@ -601,8 +714,8 @@ export default {
     justify-content: space-between;
     border-radius: 6px;
     background-color: #1890ff;
-    max-width: 172px;
-    min-width: 160px;
+    max-width: 210px;
+    min-width: 190px;
     &.using {
       background-color: rgb(250, 85, 85);
     }
@@ -630,8 +743,12 @@ export default {
       text-overflow: ellipsis;
     }
     .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;
@@ -642,6 +759,9 @@ export default {
       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;