1

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.6.2",
+    "dayjs": "^1.11.10",
     "electron": "^29.0.1",
     "element-plus": "^2.4.3",
     "lodash": "^4.17.21",

src/App.vue

@@ -79,6 +79,12 @@ router.beforeEach((to, from) => {
   --el-component-size-large: 50px !important;
 }
 
+
+@font-face {
+  font-family: 'num';
+  src: url('@/assets/font/Ignotum-Regular.ttf');
+}
+
 html {
   font-size: var(--el-font-size-base);
   color: #333;
@@ -102,6 +108,10 @@ html {
   font-size: var(--el-font-size-base) !important;
 }
 
+.el-popover__title {
+  font-size: var(--el-font-size-base) !important;
+}
+
 .el-dialog__header {
   background-color: #555;
   margin-right: 0 !important;

src/api/product.js

@@ -37,4 +37,44 @@ export function queryProductSku(params) {
         url: "product/queryProductSku",
         params
     });
-}
+}
+
+/**
+ * 添加购物车
+ * @param {*} params 
+ * @returns 
+ */
+export function createCart(data) {
+    return request({
+        method: "post",
+        url: "/order/createCart",
+        data
+    });
+}
+
+/**
+ * 获取购物车商品
+ * @param {*} params 
+ * @returns 
+ */
+export function queryCart(params) {
+    return request({
+        method: "get",
+        url: "order/queryCart",
+        params
+    });
+}
+
+/**
+ * 获取取件码
+ * @param {*} params 
+ * @returns 
+ */
+export function createCode(params) {
+    return request({
+        method: "get",
+        url: "/order/createCode",
+        params
+    });
+}
+

src/api/table.js

@@ -0,0 +1,27 @@
+import request from "@/utils/request.js"
+
+/**
+ * 查询台桌分类
+ * @param {*} params 
+ * @returns
+ */
+export function queryShopArea(params) {
+    return request({
+        method: "get",
+        url: "shopInfo/queryShopArea",
+        params
+    });
+}
+
+/**
+ * 查询台桌信息
+ * @param {*} params 
+ * @returns
+ */
+export function queryShopTable(params) {
+    return request({
+        method: "get",
+        url: "shopInfo/queryShopTable",
+        params
+    });
+}

src/components/leftMenu.vue

@@ -99,7 +99,7 @@ const menus = ref([
         }
 
         &.more {
-            margin-top: 30px;
+            margin-top: 50px;
         }
 
         .icon {

src/components/remarkModal.vue

@@ -1,9 +1,9 @@
 <template>
     <el-dialog title="备注" width="800" v-model="dialogVisible">
         <div class="tag_wrap">
-            <div class="item" v-for="item in tagList" :key="item.remark" @click="remark = item.remark">
+            <el-button plain type="primary" v-for="item in tagList" :key="item.remark" @click="remark = item.remark">
                 {{ item.remark }}
-            </div>
+            </el-button>
         </div>
         <div class="content">
             <el-input type="textarea" :rows="6" v-model="remark" placeholder="请输入备注"></el-input>
@@ -45,21 +45,6 @@ defineExpose({
 .tag_wrap {
     display: flex;
     flex-wrap: wrap;
-    gap: 20px;
-
-    .item {
-        padding: 10px 20px;
-        border: 1px solid var(--primary-color);
-        border-radius: 4px;
-        color: var(--primary-color);
-        font-size: var(--el-font-size-base);
-
-        &:hover {
-            cursor: pointer;
-            background-color: var(--primary-color);
-            color: #fff;
-        }
-    }
 }
 
 .content {

src/components/skuModal.vue

@@ -5,22 +5,27 @@
             <div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :key="index">
                 <div class="title">{{ item.name }}</div>
                 <div class="sku_wrap">
-                    <div class="item" :class="{ active: val.active }" v-for="(val, i) in  item.value" :key="i"
-                        @click="selectedSku(index, i)">{{ val.name }}</div>
+                    <!-- <div class="item" :class="{ active: val.active }" v-for="(val, i) in  item.value" :key="i"
+                        @click="selectedSku(index, i)">{{ val.name }}</div> -->
+                    <el-button :plain="!val.active" type="primary" v-for="(val, i) in  item.value" :key="i"
+                        @click="selectedSku(index, i)">{{ val.name }}</el-button>
                 </div>
             </div>
         </div>
         <div class="footer">
-            <div class="info" v-if="goodsInfo.id">
-                <span>库存：{{ goodsInfo.stockNumber }}</span>
-                <span>￥{{ goodsInfo.salePrice }}</span>
+            <div class="info">
+                <template v-if="goodsInfo.id">
+                    <span>库存：{{ goodsInfo.stockNumber }}</span>
+                    <span>￥{{ goodsInfo.salePrice }}</span>
+                </template>
             </div>
             <div class="btn_wrap">
                 <div class="btn">
                     <el-button plain style="width: 100%;" @click="dialogVisible = false">取消</el-button>
                 </div>
                 <div class="btn">
-                    <el-button type="primary" style="width: 100%;" :disabled="!goodsInfo.id">确认</el-button>
+                    <el-button type="primary" style="width: 100%;" :disabled="!goodsInfo.id"
+                        @click="submitSku">确认</el-button>
                 </div>
             </div>
         </div>
@@ -28,12 +33,14 @@
 </template>
 
 <script setup>
-import { ref, defineExpose } from 'vue'
+import { ref } from 'vue'
 import { useUser } from "@/store/user.js"
-const store = useUser();
-
 import { queryProductSku } from '@/api/product'
 
+const store = useUser();
+const emit = defineEmits(['success'])
+
+
 const dialogVisible = ref(false)
 const goods = ref({})
 
@@ -44,6 +51,12 @@ const goodsInfo = ref({})
 
 const loading = ref(false)
 
+// 确认选择规格
+function submitSku() {
+    dialogVisible.value = false
+    emit('success', goodsInfo.value)
+}
+
 // 选择规格
 function selectedSku(index, i) {
     goods.value.tbProductSpec.specList[index].value.map(item => {
@@ -165,8 +178,9 @@ defineExpose({
     padding-top: 100px;
 
     .info {
-        padding-bottom: 20px;
+        height: 50px;
         display: flex;
+        align-items: center;
         justify-content: space-between;
         font-size: 20px;
     }

src/components/takeFoodCode.vue

@@ -1,13 +1,91 @@
 <!-- 取餐号组件 -->
 <template>
-    <el-dialog title="修改取餐号" v-model="dialogVisible">
-        <el-input v-model="number" placeholder="请输入取餐号"></el-input>
+    <el-dialog :title="props.title" width="600" v-model="dialogVisible" @open="opne">
+        <el-input v-model="number" :placeholder="props.placeholder" readonly></el-input>
+        <div class="keybord_wrap">
+            <div v-for="item in 9" :key="item">
+                <el-button plain type="info" style="width: 100%;" @click="inputHandle(item)">{{ item }}</el-button>
+            </div>
+            <div>
+                <el-button plain type="info" disabled style="width: 100%;">.</el-button>
+            </div>
+            <div>
+                <el-button plain type="info" style="width: 100%;" @click="inputHandle(0)">0</el-button>
+            </div>
+            <div>
+                <el-button plain type="info" icon="CloseBold" style="width: 100%;" @click="delHandle"></el-button>
+            </div>
+        </div>
+        <div class="footer">
+            <el-button type="primary" style="width: 100%;" @click="confirmHandle">确认</el-button>
+        </div>
     </el-dialog>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
+const props = defineProps({
+    title: {
+        type: String,
+        default: '标题'
+    },
+    placeholder: {
+        type: String,
+        default: '提示'
+    }
+})
+
 const dialogVisible = ref(false)
 const number = ref('')
-</script>
+
+const emit = defineEmits(['success'])
+
+function show() {
+    dialogVisible.value = true
+}
+
+function opne() {
+    number.value = ''
+}
+
+// 输入
+function inputHandle(n) {
+    number.value += n
+}
+
+// 删除
+function delHandle() {
+    if (!number.value) return
+    number.value = number.value.substring(0, number.value.length - 1)
+}
+
+// 确认
+function confirmHandle() {
+    emit('success', number.value)
+    dialogVisible.value = false
+}
+
+defineExpose({
+    show
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-input__inner) {
+    height: 70px;
+    font-size: 36px;
+}
+
+.keybord_wrap {
+    padding: 20px 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    gap: 20px;
+
+    :deep(.el-button--large) {
+        height: 70px;
+    }
+}
+</style>

src/router/index.js

@@ -29,7 +29,7 @@ const routes = [
     meta: {
       index: 1,
     },
-    component: () => import("@/views/table.vue"),
+    component: () => import("@/views/table/index.vue"),
   },
   {
     path: "/order",

src/views/home/components/cartOperation.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="operation_wrap">
+        <div class="item">
+            <el-icon class="icon">
+                <SemiSelect />
+            </el-icon>
+        </div>
+        <div class="item number" @click="takeFoodCodeRef.show()">
+            <el-text class="num">{{ props.item.number || 1 }}</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon add">
+                <CloseBold />
+            </el-icon>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <Filter />
+            </el-icon>
+            <el-text class="t">规格</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <ShoppingBag />
+            </el-icon>
+            <el-text class="t">赠送</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <Box />
+            </el-icon>
+            <el-text class="t">打包</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <Delete />
+            </el-icon>
+            <el-text class="t">删除</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <Sell />
+            </el-icon>
+            <el-text class="t">挂单</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <RefreshRight />
+            </el-icon>
+            <el-text class="t">清空</el-text>
+        </div>
+    </div>
+    <takeFoodCode ref="takeFoodCodeRef" title="修改商品数量" placeholder="请输入商品数量" @success="updateNumber" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import takeFoodCode from '@/components/takeFoodCode.vue'
+const props = defineProps({
+    item: {
+        type: Object,
+        default: {}
+    }
+})
+const emit = defineEmits(['confirm'])
+
+const takeFoodCodeRef = ref(null)
+
+// 修改数量
+function updateNumber(num) {
+    props.item.number = num
+    emit('confirm', props.item)
+}
+</script>
+
+<style scoped lang="scss">
+.operation_wrap {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    .item {
+        width: 100px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #efefef;
+        border-radius: 6px;
+
+        &.number {
+            background-color: transparent;
+            height: auto;
+        }
+
+        .num {
+            color: #333;
+            font-size: 18px;
+        }
+
+        .icon {
+            color: #333;
+        }
+
+        .add {
+            transform: rotate(-45deg);
+        }
+
+        .t {
+            margin-left: 4px;
+        }
+    }
+}
+</style>

src/views/home/components/category.vue

@@ -6,7 +6,7 @@
 import { queryCategory } from '@/api/product'
 import { ref, onMounted } from 'vue'
 import { useUser } from "@/store/user.js"
-const store = useUser();
+const store = useUser()
 
 const categorys = ref([])
 const categorysActive = ref(0)

src/views/home/components/goods.vue

@@ -7,15 +7,27 @@
                 <el-text>{{ item.name }}</el-text>
             </div>
         </div>
-        <div class="all">
-            <el-icon class="icon">
-                <Menu />
-            </el-icon>
-        </div>
+        <el-popover trigger="click" :width="800" title="全部分类" :visible="showPopover">
+            <template #reference>
+                <div class="all" @click="showMoreMenu">
+                    <el-icon class="icon" :class="{ active: showPopover }">
+                        <Menu />
+                    </el-icon>
+                </div>
+            </template>
+            <template #default>
+                <div class="popover_wrap">
+                    <el-button :plain="categorysActive != index" type="primary" v-for="(item, index) in categorys"
+                        :key="item.id" @click="changeCategory(item, index)">
+                        {{ item.name }}
+                    </el-button>
+                </div>
+            </template>
+        </el-popover>
     </div>
     <div class="search_wrap">
         <div class="input">
-            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" clearable
+            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" style="width: 400px;" clearable
                 @input="inputChange"></el-input>
         </div>
         <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'" @click="changeShopListType"></el-button>
@@ -39,7 +51,7 @@
         <el-empty description="空空如也~" v-if="!goodsList.length" />
     </div>
     <!-- 选择规格 -->
-    <skuModal ref="skuModalRef" />
+    <skuModal ref="skuModalRef" @success="skuConfirm" />
 </template>
 
 <script setup>
@@ -48,9 +60,10 @@ import _ from 'lodash'
 
 import skuModal from '@/components/skuModal.vue'
 
-import { queryCategory, productqueryCommodityInfo } from '@/api/product'
+import { queryCategory, productqueryCommodityInfo, queryProductSku } from '@/api/product'
 import { useUser } from "@/store/user.js"
-const store = useUser();
+const store = useUser()
+const emit = defineEmits(['success'])
 
 const skuModalRef = ref(null)
 
@@ -64,16 +77,44 @@ const commdityName = ref('')
 const originalGoods = ref([])
 const goodsList = ref([])
 
-const inputChange = _.debounce(function (e) {
+const showPopover = ref(false)
+
+const inputChange = _.debounce(function () {
     productqueryCommodityInfoAjax()
 }, 500)
 
+// 确认选择规格回调
+function skuConfirm(params) {
+    emit('success', params)
+}
+
+// 显示全部分类
+function showMoreMenu() {
+    showPopover.value = !showPopover.value
+}
+
 // 显示sku
 function showSkuHandle(item) {
     if (item.typeEnum == 'sku') {
+        // 多规格
         skuModalRef.value.show({ ...item })
     } else {
+        // 单规格
+        queryProductSkuAjax(item)
+    }
+}
 
+// 通过选中的商品规格查询价格
+async function queryProductSkuAjax(goods) {
+    try {
+        const res = await queryProductSku({
+            shopId: store.userInfo.shopId,
+            productId: goods.id,
+            spec_tag: ''
+        })
+        emit('success', res)
+    } catch (error) {
+        console.log(error)
     }
 }
 
@@ -88,6 +129,7 @@ function changeShopListType() {
 
 // 切换分类
 function changeCategory(item, index) {
+    showPopover.value = false
     categorysActive.value = index
     if (item.id) {
         goodsList.value = []
@@ -143,6 +185,12 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
+.popover_wrap {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 20px 0;
+}
+
 .header {
     display: flex;
     height: 80px;
@@ -202,6 +250,11 @@ onMounted(async () => {
     .icon {
         color: #555;
         font-size: 20px;
+        transition: all .2s ease-in-out;
+
+        &.active {
+            transform: rotate(45deg)
+        }
     }
 }
 

src/views/home/index.vue

@@ -8,8 +8,8 @@
           </el-icon>
           <el-text class="t">(1)</el-text>
         </div>
-        <div class="number">
-          <el-text class="t">#2</el-text>
+        <div class="number" @click="takeFoodCodeRef.show()">
+          <el-text class="t">{{ foodCode }}</el-text>
         </div>
         <div class="select_user" @click="membershow = true">
           <el-icon class="icon">
@@ -23,10 +23,11 @@
       </div>
       <div class="shop_operation">
         <div class="shop_list">
-          <div class="item" v-for="item in 3" :key="item">
+          <div class="item" :class="{ active: item.active }" v-for="item in cartList" :key="item.id"
+            @click="selectCartItemHandle(item)">
             <div class="name_wrap">
-              <span>鲜肉</span>
-              <span>￥1.00</span>
+              <span>{{ item.name }}</span>
+              <span>￥{{ item.salePrice }}</span>
             </div>
             <div class="sku_list">
               <div class="tag">默认1份</div>
@@ -34,61 +35,12 @@
               <div class="tag">半糖</div>
             </div>
             <div class="num">
-              <el-text>X1</el-text>
+              <el-text>X{{ item.number }}</el-text>
             </div>
           </div>
         </div>
-        <div class="operation_wrap">
-          <div class="item">
-            <el-icon class="icon">
-              <SemiSelect />
-            </el-icon>
-          </div>
-          <div class="item number">
-            <el-text class="num">1</el-text>
-          </div>
-          <div class="item">
-            <el-icon class="icon add">
-              <CloseBold />
-            </el-icon>
-          </div>
-          <div class="item">
-            <el-icon class="icon">
-              <Filter />
-            </el-icon>
-            <el-text class="t">规格</el-text>
-          </div>
-          <div class="item">
-            <el-icon class="icon">
-              <ShoppingBag />
-            </el-icon>
-            <el-text class="t">赠送</el-text>
-          </div>
-          <div class="item">
-            <el-icon class="icon">
-              <Box />
-            </el-icon>
-            <el-text class="t">打包</el-text>
-          </div>
-          <div class="item">
-            <el-icon class="icon">
-              <Delete />
-            </el-icon>
-            <el-text class="t">删除</el-text>
-          </div>
-          <div class="item">
-            <el-icon class="icon">
-              <Sell />
-            </el-icon>
-            <el-text class="t">挂单</el-text>
-          </div>
-          <div class="item">
-            <el-icon class="icon">
-              <RefreshRight />
-            </el-icon>
-            <el-text class="t">清空</el-text>
-          </div>
-        </div>
+        <!-- 购物车操作栏 -->
+        <cartOperation :item="selectCartItem" @confirm="addCart" />
       </div>
       <div class="footer">
         <div class="top">
@@ -120,7 +72,7 @@
     </div>
     <div class="shop_manage card">
       <!-- 分类/商品列表 -->
-      <goods />
+      <goods @success="addCart" />
     </div>
   </div>
   <!-- 备注 -->
@@ -130,20 +82,101 @@
   <el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员" >
     <member></member>
   </el-drawer>
+  <takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" />
 </template>
 
 <script setup>
-import { ref } from 'vue'
-
+import { onMounted, ref } from 'vue'
+import { useUser } from "@/store/user.js"
 import remarkModal from '@/components/remarkModal.vue'
 import takeFoodCode from '@/components/takeFoodCode.vue'
+import cartOperation from '@/views/home/components/cartOperation.vue'
+
+import { createCart, queryCart, createCode } from '@/api/product'
 
 // 商品列表
 import goods from '@/views/home/components/goods.vue'
 import member from '@/views/home/components/member.vue'
 const membershow = ref(false)
+const store = useUser()
 const remarkRef = ref(null)
+const takeFoodCodeRef = ref(null)
+
 const allSelected = ref(false)
+
+const cartList = ref([])
+
+// 取餐码
+const foodCode = ref('#006')
+
+// 确认取餐号
+function takeFoodCodeSuccess(code) {
+  console.log('取餐号===', code)
+}
+
+const selectCartItem = ref({})
+// 从购物车选择商品
+function selectCartItemHandle(item) {
+  cartList.value.map(val => {
+    val.active = false
+  })
+  item.active = true
+  selectCartItem.value = item
+}
+
+// 选择完规格开始添加购物车
+async function addCart(params) {
+  try {
+    const res = await createCart({
+      productId: params.productId,
+      maskerId: foodCode.value,
+      shopId: store.userInfo.shopId,
+      skuId: params.id,
+      number: params.number || 1
+    })
+    foodCode.value = res
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 获取购物车商品
+async function queryCartAjax() {
+  try {
+    const res = await queryCart({
+      masterId: foodCode.value,
+      shopId: store.userInfo.shopId
+    })
+    cartList.value = res.list.map((item, index) => {
+      if (index == 0) {
+        item.active = true
+        selectCartItem.value = item
+      } else {
+        item.active = false
+      }
+      return item
+    })
+    console.log(cartList.value)
+  } catch (error) {
+    console.log('获取购物车商品', error)
+  }
+}
+
+// 获取取件码
+async function createCodeAjax() {
+  try {
+    const res = await createCode({ shopId: store.userInfo.shopId })
+    foodCode.value = res
+    queryCartAjax()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+onMounted(() => {
+  // createCodeAjax()
+  queryCartAjax()
+})
 </script>
 
 <style scoped lang="scss">
@@ -230,6 +263,10 @@ const allSelected = ref(false)
       .item {
         padding: 20px;
 
+        &.active {
+          background-color: #f5f5f5;
+        }
+
         &:not(:last-child) {
           border-bottom: 1px solid #ececec;
         }
@@ -259,45 +296,6 @@ const allSelected = ref(false)
         }
       }
     }
-
-    .operation_wrap {
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-
-      .item {
-        width: 100px;
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #efefef;
-        border-radius: 6px;
-
-        &.number {
-          background-color: transparent;
-          height: auto;
-        }
-
-        .num {
-          color: #333;
-          font-size: 18px;
-        }
-
-        .icon {
-          color: #333;
-        }
-
-        .add {
-          transform: rotate(-45deg);
-        }
-
-        .t {
-          margin-left: 4px;
-        }
-      }
-    }
   }
 }
 

src/views/login.vue

@@ -32,7 +32,8 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" style="width: 100%" :loading="loading" @click="submitHandle">
-            登录
+            <span v-if="!loading">登录</span>
+            <span v-else>登录中...</span>
           </el-button>
         </el-form-item>
         <el-form-item>

src/views/table.vue

@@ -1,3 +0,0 @@
-<template>
-    <el-text>台桌</el-text>
-</template>

src/views/table/components/countCard.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="count_wrap">
+        <div class="date_wrap">
+            <div class="time">{{ nowTime }}</div>
+            <div class="date">
+                <span>{{ nowDate }}</span>
+                <span>{{ week }}</span>
+            </div>
+        </div>
+        <div class="order_info">
+            <div class="item">
+                <div class="title">未结算订单</div>
+                <div class="num">0</div>
+            </div>
+            <div class="item">
+                <div class="title">未结算金额</div>
+                <div class="num">0.00</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import dayjs from 'dayjs'
+import weekday from 'dayjs/plugin/weekday'
+dayjs.extend(weekday)
+
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const nowTime = ref(dayjs().format('HH:mm'))
+const nowDate = ref(dayjs().format('M月D日 '))
+const weekFormat = {
+    1: '星期一',
+    2: '星期二',
+    3: '星期三',
+    4: '星期四',
+    5: '星期五',
+    6: '星期六',
+    7: '星期天',
+}
+const week = ref(weekFormat[dayjs().weekday()])
+
+const timer = ref(null)
+function updateTime() {
+    timer.value = setInterval(() => {
+        nowTime.value = dayjs().format('HH:mm')
+        console.log('时间更新了')
+    }, 30000)
+}
+
+onMounted(() => {
+    updateTime()
+})
+
+onUnmounted(() => {
+    clearInterval(timer.value)
+    timer.value = null
+})
+</script>
+
+<style scoped lang="scss">
+.time {
+    font-family: 'num';
+    font-size: 82px;
+    letter-spacing: 10px;
+}
+
+.count_wrap {
+    padding: 0 20px;
+
+    .date_wrap {
+        padding: 40px 0;
+        border-bottom: 1px solid #ececec;
+
+        .date {
+            font-size: 26px;
+            padding-left: 6px;
+        }
+    }
+
+    .order_info {
+        padding: 40px 0;
+        display: flex;
+
+        .item {
+            flex: 1;
+
+            .num {
+                font-family: 'num';
+                font-size: 46px;
+                letter-spacing: 4px;
+                padding-top: 10px;
+            }
+        }
+    }
+}
+</style>

src/views/table/components/tableInfo.vue

@@ -0,0 +1,141 @@
+<!-- 空闲台桌 -->
+<template>
+    <div class="table_wrap">
+        <div class="header">
+            <span class="t">{{ props.tableInfo.name }}</span>
+            <div class="close" @click="close">
+                <el-icon class="icon">
+                    <Close />
+                </el-icon>
+            </div>
+        </div>
+        <div class="status_wrap">
+            <el-icon class="icon">
+                <Clock />
+            </el-icon>
+            <span class="t">{{ status[props.tableInfo.status] }}</span>
+        </div>
+        <div class="place_order">
+            <router-link class="btn" :to="{ name: 'home', query: { table_code: 1 } }">
+                <div class="top">
+                    <el-icon class="icon">
+                        <TakeawayBox />
+                    </el-icon>
+                    <span class="t">点单</span>
+                </div>
+                <span class="tips">开始新订单</span>
+            </router-link>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineEmits } from 'vue'
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+    tableInfo: {
+        type: Object,
+        default: {}
+    }
+})
+
+const status = ref({
+    'subscribe': '预定',
+    'closed': '关台',
+    'opening': '开台中',
+    'cleaning': '台桌清理中'
+})
+
+// 关闭
+function close() {
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+.table_wrap {
+    padding: 20px;
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .t {
+            font-size: 26px;
+        }
+
+        .close {
+            width: 50px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+
+            .icon {
+                font-size: 30px;
+                color: #999;
+            }
+        }
+    }
+
+    .status_wrap {
+        display: flex;
+        align-items: center;
+        padding-bottom: 20px;
+
+        .icon {
+            color: #666;
+            font-size: 24px;
+        }
+
+        .t {
+            color: #666;
+            margin-left: 4px;
+        }
+    }
+
+    .place_order {
+        background-color: #efefef;
+        height: calc(100vh - 180px);
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .btn {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-decoration: none;
+
+            .top {
+                background-color: var(--el-color-danger);
+                width: 130px;
+                height: 130px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                border-radius: 6px;
+
+                .icon {
+                    color: #fff;
+                    font-size: 50px;
+                }
+
+                .t {
+                    color: #fff;
+                }
+            }
+
+            .tips {
+                color: #999;
+                padding-top: 6px;
+            }
+        }
+    }
+}
+</style>

src/views/table/index.vue

@@ -0,0 +1,286 @@
+<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="primary" icon="Clock">预定管理</el-button>
+                </div>
+            </div>
+            <div class="tab_container">
+                <div class="tab_head">
+                    <el-radio-group v-model="area" @change="queryShopTableAjax">
+                        <el-radio-button label="">全部</el-radio-button>
+                        <el-radio-button :label="item.id" v-for="item in areaList" :key="item.id">{{ item.name
+                        }}</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 }" 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">
+                                    <CircleClose />
+                                </el-icon>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="empty">
+                        <el-empty description="空空如也~" v-if="!tableList.length" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right_card card">
+            <!-- 台桌统计 -->
+            <countCard v-if="!slectTable.id" />
+            <!-- 台桌信息 -->
+            <tableInfo v-else :tableInfo="slectTable" @close="slectTableClose" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { queryShopArea, queryShopTable } from '@/api/table'
+
+import countCard from '@/views/table/components/countCard.vue'
+import tableInfo from '@/views/table/components/tableInfo.vue'
+
+import { ref, onMounted } from 'vue'
+import { useUser } from "@/store/user.js"
+const store = useUser()
+
+
+const tabActive = ref(0)
+const tabAreas = ref([
+    {
+        label: '全部',
+        type: 0,
+    },
+    {
+        label: '空闲',
+        type: 1,
+    },
+    {
+        label: '使用中',
+        type: 2,
+    },
+    {
+        label: '已预订',
+        type: 3,
+    }
+])
+
+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
+}
+
+// 选择台桌
+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 queryShopAreaAjax() {
+    try {
+        const res = await queryShopArea({
+            shopId: store.userInfo.shopId
+        })
+        areaList.value = res
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+// 获取台桌列表
+async function queryShopTableAjax() {
+    try {
+        loading.value = true
+        const res = await queryShopTable({
+            shopId: store.userInfo.shopId,
+            areaId: area.value,
+            status: '',
+            page: 1,
+            pageSize: 500
+        })
+        tableList.value = res.list
+        setTimeout(() => {
+            loading.value = false
+        }, 500)
+    } catch (error) {
+        loading.value = false
+        console.log(error)
+    }
+}
+
+onMounted(() => {
+    queryShopAreaAjax()
+    queryShopTableAjax()
+})
+</script>
+
+<style scoped lang="scss">
+.cart_wrap {
+    flex: 1;
+}
+
+.right_card {
+    width: 550px;
+    height: 100%;
+    margin-left: 20px;
+}
+
+.header {
+    display: flex;
+    height: 80px;
+    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: 24px;
+            }
+
+            &.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;
+        padding-right: 20px;
+    }
+}
+
+.tab_container {
+    padding: 20px;
+
+    .tab_head {
+        padding-bottom: 20px;
+    }
+
+    .overflow_y {
+        height: calc(100vh - 225px);
+        overflow-y: auto;
+    }
+
+    .tab_list {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+        grid-template-rows: auto;
+        gap: 20px;
+
+        .item {
+            background-color: #efefef;
+            border-radius: 6px;
+            overflow: hidden;
+
+            &.active {
+                box-shadow: inset 0 0 0 2px var(--primary-color);
+            }
+
+            &:hover {
+                cursor: pointer;
+            }
+
+            .tab_title {
+                height: 50px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 0 10px;
+                color: #fff;
+
+                &.subscribe {
+                    background-color: var(--el-color-success);
+                }
+
+                &.closed {
+                    background-color: #999;
+                }
+
+                &.opening {
+                    background-color: var(--primary-color);
+                }
+
+                &.cleaning {
+                    background-color: var(--el-color-danger);
+                }
+            }
+
+            .tab_cont {
+                height: 160px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .icon {
+                    color: #555;
+                    font-size: 40px;
+                    transform: rotate(45deg);
+                }
+            }
+        }
+    }
+}
+</style>

vite.config.js

@@ -9,7 +9,8 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'https://cashierclient.sxczgkj.cn/cashier-client',
+        // target: 'https://cashierclient.sxczgkj.cn/cashier-client', // 测试
+        target: 'http://192.168.2.87:10587/cashier-client', // 国成
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '')
       }