优化台桌点餐

src/App.vue

@@ -255,6 +255,10 @@ html {
   color: #333;
 }
 
+.el-divider__text {
+  white-space: nowrap;
+}
+
 .el-dialog__headerbtn {
   top: 10px !important;
 }

src/api/table.js

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

src/api/user.js

@@ -34,3 +34,19 @@ export function queryPwdInfo() {
     },
   });
 }
+
+/**
+ * 查询店铺信息
+ * @param {*} params
+ * @returns
+ */
+export function queryShopInfo() {
+  let userInfo = JSON.parse(localStorage.getItem("userInfo"));
+  return request({
+    method: "get",
+    url: "/shopInfo/queryShopInfo",
+    params: {
+      shopId: userInfo.shopId,
+    },
+  });
+}

src/store/shop.js

@@ -0,0 +1,22 @@
+import { defineStore } from "pinia";
+import { queryShopInfo } from "@/api/user";
+import useStorage from "@/utils/useStorage";
+
+export const useShop = defineStore({
+  id: "shopInfo",
+  state: () => ({
+    info: useStorage.get("shopInfo"),
+  }),
+  actions: {
+    // 获取店铺信息
+    async queryShopInfo() {
+      try {
+        const res = await queryShopInfo();
+        useStorage.set("shopInfo", res);
+        this.info = useStorage.get("shopInfo");
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+});

src/views/home/components/cartOperation.vue

@@ -83,6 +83,8 @@ function giftPackHandle(key) {
 
 // 加减修改数量
 function numberChange(t) {
+    console.log(props.item);
+
     if (!props.item.id) return
     switch (t) {
         case 'sub':

src/views/home/components/settleAccount.vue

@@ -26,7 +26,7 @@
           </div>
         </div>
         <div class="list_wrap card" style="margin-top: var(--el-font-size-base)">
-          <div class="item" v-for="item in props.cart" :key="item.id">
+          <div class="item" v-for="item in cartList" :key="item.id">
             <div class="top">
               <span class="name">{{ item.name }}</span>
               <span class="n">x{{ item.number }}</span>
@@ -148,6 +148,8 @@ const props = defineProps({
   }
 });
 
+const cartList = ref([])
+
 const isPrint = ref(true);
 
 
@@ -202,7 +204,7 @@ const printHandle = _.throttle(async function () {
       shop_name: store.userInfo.shopName,
       loginAccount: store.userInfo.loginAccount,
       isBefore: true,
-      carts: props.cart,
+      carts: cartList.value,
       amount: formatDecimal(props.amount),
       discountAmount: propsDiscount.value > 0 ? formatDecimal(props.amount * propsDiscount.value) : formatDecimal(props.amount),
       discount: formatDecimal(propsDiscount.value * 10, 1, true),
@@ -305,6 +307,16 @@ function paySuccess() {
 
 function show() {
   dialogVisible.value = true;
+  cartList.value = []
+  props.cart.map(item => {
+    if (item.info && item.info.length) {
+      item.info.map(item => {
+        cartList.value.push({ ...item })
+      })
+    } else {
+      cartList.value.push({ ...item })
+    }
+  })
 }
 
 defineExpose({

src/views/home/index.vue

@@ -42,39 +42,45 @@
       </div>
       <div class="shop_operation">
         <div class="shop_list">
-          <div class="item" :class="{ active: cartListActive == index }" v-for="(item, index) in cartList"
+          <template v-for="(arr, index) in cartList" :key="index">
-            :key="item.id" @click="selectCartItemHandle(item, index)">
+            <el-divider v-if="arr.placeNum">{{ `第${arr.placeNum}次下单` }}</el-divider>
-            <div class="name_wrap">
+            <div class="item" :class="{ active: item.active }" :key="item.id" v-for="(item, i) in arr.info"
-              <span>{{ item.name }}</span>
+              @click="selectCartItemHandle(item, index, i)">
-              <span>￥{{ item.salePrice }}</span>
+              <div class="name_wrap">
-            </div>
+                <span>{{ item.name }}</span>
-            <div class="sku_list" v-if="item.skuName">
+                <span>￥{{ item.salePrice }}</span>
-              <div class="tag" v-for="item in item.skuName.split(',')">
-                {{ item }}
               </div>
-            </div>
+              <div class="sku_list" v-if="item.skuName">
-            <div class="num">
+                <div class="tag" v-for="item in item.skuName.split(',')">
-              <div class="left">
+                  {{ item }}
-                <div class="icon_item" v-if="item.isGift == 'true'" @click="giftPackHandle('isGift', item)">
-                  <el-icon class="icon">
-                    <ShoppingBag />
-                  </el-icon>
-                </div>
-                <div class="icon_item" v-if="item.isPack == 'true'" @click="giftPackHandle('isPack', item)">
-                  <el-icon class="icon" style="color: var(--primary-color)">
-                    <Box />
-                  </el-icon>
                 </div>
               </div>
-              <el-text class="t">X{{ item.number }}</el-text>
+              <div class="num">
+                <div class="left">
+                  <div class="icon_item" v-if="item.isGift == 'true'" @click="giftPackHandle('isGift', item)">
+                    <el-icon class="icon">
+                      <ShoppingBag />
+                    </el-icon>
+                  </div>
+                  <div class="icon_item" v-if="item.isPack == 'true'" @click="giftPackHandle('isPack', item)">
+                    <el-icon class="icon" style="color: var(--primary-color)">
+                      <Box />
+                    </el-icon>
+                  </div>
+                  <div class="icon_item" v-if="item.status == 'return'">
+                    <span class="t">已退</span>
+                  </div>
+                </div>
+                <el-text class="t">X{{ item.number }}</el-text>
+              </div>
             </div>
-          </div>
+          </template>
           <div class="empty">
             <el-empty description="请选择商品" v-if="!cartList.length" />
           </div>
         </div>
         <!-- 购物车操作栏 -->
-        <cartOperation :item="cartList[cartListActive]" @confirm="(res) => addCart(res, 'edit')" @delete="delCartHandle"
+        <cartOperation :item="cartListActiveItem" @confirm="(res) => addCart(res, 'edit')" @delete="delCartHandle"
           @pending="pendingCart" @clearCart="clearCartHandle" />
       </div>
       <div class="footer">
@@ -98,11 +104,14 @@
         <div class="btm">
           <el-button icon="Edit" @click="remarkRef.show()"></el-button>
           <div class="button">
-            <!-- <div class="btn" v-if="global.tableInfo.id">
+            <div class="btn" v-if="shopStore.info.registerType == 'restaurant'">
-              <el-button type="primary" style="width: 100%;" :disabled="!cartList.length"
+              <el-button type="primary" style="width: 100%;" :disabled="!cartList.length" @click="createOrderHandle(0)">
-                @click="createOrderHandle(0)">仅下单</el-button>
+                <template v-if="!createOrderLoading">
-            </div> -->
+                  仅下单</template>
-            <div class="btn">
+                <template v-else>下单中...</template>
+              </el-button>
+            </div>
+            <div class="btn" v-if="shopStore.info.registerType != 'restaurant' || cartList.length">
               <el-button type="primary" style="width: 100%;" :disabled="!cartList.length" v-loading="createOrderLoading"
                 @click="createOrderHandle(1)">
                 <template v-if="!createOrderLoading">
@@ -171,11 +180,17 @@ import {
   createOrder,
 } from "@/api/product";
 
+import { queryShopInfo } from '@/api/user.js'
+
 // 商品列表
 import goods from "@/views/home/components/goods.vue";
 import member from "@/views/member/index.vue";
 import { ElMessage } from "element-plus";
 
+import { useShop } from '@/store/shop.js'
+
+const shopStore = useShop()
+
 const global = useGlobal()
 
 const route = useRoute()
@@ -193,6 +208,7 @@ const allSelected = ref(false);
 
 const remark = ref("");
 const cartListActive = ref(0);
+const cartListActiveItem = ref({})
 const cartList = ref([]);
 const cartInfo = ref({});
 const cartLoading = ref(false);
@@ -216,18 +232,28 @@ async function createOrderHandle(t = 0) {
       remark: remark.value,
       vipUserId: global.orderMemberInfo.id || '',
       tableId: global.tableInfo.qrcode || '',
-      type: t
+      type: t,
+      seatNum: global.tableInfo.num
     });
     createOrderLoading.value = false;
 
-    if (global.tableInfo.id && t == 0) {
+    // 订单数据
+    orderInfo.value = res;
+
+    if (shopStore.info.registerType == 'restaurant' && t == 0) {
       ElMessage.success('下单成功')
-      global.setOrderTable({})
-      createCodeAjax(1)
     } else {
-      orderInfo.value = res;
       settleAccountRef.value.show();
     }
+
+    // if (global.tableInfo.id && t == 0) {
+    //   ElMessage.success('下单成功')
+    //   global.setOrderTable({})
+    //   createCodeAjax(1)
+    // } else {
+    //   orderInfo.value = res;
+    //   settleAccountRef.value.show();
+    // }
   } catch (error) {
     console.log(error);
     createOrderLoading.value = false;
@@ -242,6 +268,7 @@ async function clearCartHandle() {
       masterId: masterId.value,
       tableId: global.tableInfo.qrcode || ''
     });
+    cartListActiveItem.value = {}
     queryCartAjax();
 
     // 清除商品所有红点
@@ -273,7 +300,8 @@ async function pendingCart(params, status = true) {
       status: status,
       uuid: params.uuid,
       vipUserId: global.orderMemberInfo.id || '',
-      tableId: global.tableInfo.qrcode || ''
+      tableId: global.tableInfo.qrcode || '',
+      orderId: params.orderId
     });
     if (status && cartList.value.length) {
       await createCodeAjax();
@@ -299,6 +327,7 @@ async function delCartHandle(params) {
       masterId: params.masterId,
       cartId: params.id,
     });
+    cartListActiveItem.value = {}
     await queryCartAjax();
     cartLoading.value = false;
     cartListActive.value = 0;
@@ -338,8 +367,17 @@ async function takeFoodCodeSuccess(code) {
 }
 
 // 从购物车选择商品
-function selectCartItemHandle(item, index) {
+function selectCartItemHandle(row, index, i) {
-  cartListActive.value = index;
+  cartList.value.map(item => {
+    item.info.map(val => {
+      if (val.id == row.id) {
+        val.active = true
+        cartListActiveItem.value = val
+      } else {
+        val.active = false
+      }
+    })
+  })
 }
 
 // 选择完规格开始添加购物车
@@ -377,9 +415,33 @@ async function queryCartAjax() {
       masterId: masterId.value,
       shopId: store.userInfo.shopId,
       tableId: global.tableInfo.qrcode || '',
-      vipUserId: global.orderMemberInfo.id || ''
+      vipUserId: global.orderMemberInfo.id || '',
+      num: ''
     });
+
+    if (!res.list.length) {
+      cartListActiveItem.value = {}
+    }
+
+    res.list.map((item, index) => {
+      item.info.map((val, i) => {
+        if (i == 0 && index == 0) {
+          val.active = true
+          if (!cartListActiveItem.value.id) {
+            cartListActiveItem.value = val
+          }
+        } else {
+          val.active = false
+        }
+      })
+    })
+
     cartList.value = res.list;
+
+    if (cartListActiveItem.value.id) {
+      selectCartItemHandle(cartListActiveItem.value)
+    }
+
     cartInfo.value = res.amount;
     pendingCartNum.value = res.num;
     goodsRef.value.updateData();
@@ -440,7 +502,8 @@ function clearMember() {
 }
 
 onMounted(() => {
-  createCodeAjax();
+  createCodeAjax()
+  shopStore.queryShopInfo()
 });
 </script>
 
@@ -595,6 +658,11 @@ onMounted(() => {
               align-items: center;
               justify-content: center;
               margin-right: 10px;
+
+              .t {
+                font-size: 10px;
+                color: #888;
+              }
             }
           }
 

src/views/login.vue

@@ -73,8 +73,11 @@ import { douyincheckIn } from "@/api/group";
 import { useUser } from "@/store/user.js";
 import { useSocket } from "@/store/socket.js";
 import { useGlobal } from '@/store/global.js'
+import { useShop } from '@/store/shop.js'
 const global = useGlobal()
 
+const shopInfo = useShop()
+
 const store = useUser();
 const socket = useSocket();
 
@@ -125,6 +128,7 @@ const submitHandle = () => {
         .then(async (res) => {
           ElMessage.success("登录成功");
           socket.init();
+          await shopInfo.queryShopInfo()
           setTimeout(() => {
             router.replace({
               name: "home",

src/views/member/components/add.vue

@@ -113,6 +113,7 @@ const formRef = ref(null)
 
 function showRefundHandle(item) {
     refundItem.value = item
+    form.amount = item.amount
     showDialog.value = true
 }
 

src/views/table/components/tableInfo.vue

@@ -50,9 +50,30 @@
                 </div>
                 <!-- <span class="tips">开始新订单</span> -->
                 <div class="btn_wrap" v-if="props.tableInfo.status == 'idle'">
-                    <el-button type="primary" style="width: 100%;" @click="toOrderMeal(1)">开始新订单</el-button>
+                    <el-button type="primary" style="width: 100%;" @click="showPeopleNumHandle">开始新订单</el-button>
+                </div>
+                <div class="btn_wrap" v-if="props.tableInfo.status == 'cleaning'">
+                    <el-button type="primary" style="width: 100%;" @click="clearTableStatus">清理完成</el-button>
                 </div>
             </div>
+            <transition name="el-fade-in">
+                <div class="people_num_wrap" v-show="showPeopleNum">
+                    <div class="title">应选择就餐人数</div>
+                    <div class="num_btns">
+                        <div class="item" :class="{ active: peopleNum == item }" v-for="item in 8"
+                            @click="peopleNum = item">{{ item }}人</div>
+                        <div class="item" :class="{ active: peopleNum == 'custom' }">
+                            <input class="ipt" @focus="inputFocus" placeholder="自定义" v-model="peopleNumInputValue"
+                                @change="" />
+                        </div>
+                    </div>
+                    <div class="btn">
+                        <el-button type="primary" style="width: 100%;"
+                            :disabled="(!peopleNum && !peopleNumInputValue) || (peopleNum == 'custom' && !peopleNumInputValue)"
+                            @click="orderDownHandle">确认</el-button>
+                    </div>
+                </div>
+            </transition>
         </div>
         <!-- 结算订单 -->
         <settleAccount ref="settleAccountRef" :cart="cartList" :amount="orderInfo.orderAmount"
@@ -69,6 +90,8 @@ import { queryMembermember } from '@/api/member/index.js'
 import { orderDetail } from '@/api/order/index.js'
 import { formatDecimal } from '@/utils/index.js'
 import settleAccount from "@/views/home/components/settleAccount.vue";
+import { ElMessage } from 'element-plus'
+import { clearTable } from '@/api/table.js'
 
 const router = useRouter()
 const global = useGlobal()
@@ -83,10 +106,20 @@ const props = defineProps({
     }
 })
 
+
+const showPeopleNum = ref(false)
+const peopleNum = ref(0)
+const peopleNumInputValue = ref('')
+
 watch(props, () => {
     getOrderDetail()
 })
 
+// 自定义人数输入获得焦点
+function inputFocus() {
+    peopleNum.value = 'custom'
+}
+
 const settleAccountRef = ref(null)
 const orderInfo = ref({})
 const cartList = ref([])
@@ -108,6 +141,27 @@ function showPayHandle() {
     settleAccountRef.value.show()
 }
 
+// 显示就就餐人数
+function showPeopleNumHandle() {
+    showPeopleNum.value = true
+}
+
+// 清理桌台
+const clearLoading = ref(false)
+async function clearTableStatus() {
+    try {
+        clearLoading.value = true
+        const res = await clearTable({
+            shopId: store.userInfo.shopId,
+            tableId: props.tableInfo.qrcode
+        })
+        clearLoading.value = false
+        emits('success')
+    } catch (error) {
+        console.log(error);
+    }
+}
+
 // 获取订单详情
 async function getOrderDetail() {
     try {
@@ -141,6 +195,30 @@ function close() {
     emits('close')
 }
 
+// 判断数字是不是正整数
+function isPositiveInteger(num) {
+    return Number.isInteger(num) && num > 0;
+}
+
+// 选择人数后确认下单
+function orderDownHandle() {
+    if (peopleNum.value == 'custom') {
+        if (!isPositiveInteger(parseFloat(peopleNumInputValue.value))) {
+            ElMessage.error('请输入有效的就餐人数')
+            return
+        }
+    }
+
+    // 直接点单
+    global.setOrderTable({
+        ...props.tableInfo,
+        num: peopleNum.value == 'custom' ? peopleNumInputValue.value : peopleNum.value
+    })
+    router.push({
+        name: 'home',
+    })
+}
+
 // 点单
 function toOrderMeal(t) {
     if (t == 1) {
@@ -324,6 +402,77 @@ onMounted(() => {
                 width: $size;
             }
         }
+
+        .people_num_wrap {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 9;
+            background-color: rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(10px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+
+            .title {
+                padding-bottom: 40px;
+                font-size: 18px;
+                font-weight: bold;
+            }
+
+            .num_btns {
+                width: 80%;
+                display: grid;
+                grid-template-columns: 1fr 1fr 1fr;
+                grid-template-rows: 40px 40px 40px;
+                gap: 20px;
+
+                .item {
+                    color: #fff;
+                    border-radius: 4px;
+                    background-color: var(--el-color-danger);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: relative;
+                    transition: all .1s ease-in-out;
+
+                    &.active {
+                        font-size: 14px;
+                        background-color: #e96565;
+                        box-shadow: inset 0 4px 5px rgba(0, 0, 0, 0.3);
+
+                        .ipt {
+                            font-size: 14px;
+                        }
+                    }
+
+                    .ipt {
+                        width: 100%;
+                        height: 100%;
+                        outline: none;
+                        border: none;
+                        background: transparent;
+                        color: #fff;
+                        text-align: center;
+                        font-size: 16px;
+                        transition: all .1s ease-in-out;
+
+                        &::-webkit-input-placeholder {
+                            color: #fff;
+                        }
+                    }
+                }
+            }
+
+            .btn {
+                width: 80%;
+                padding-top: 40px;
+            }
+        }
     }
 }
 </style>

src/views/table/index.vue

@@ -254,13 +254,13 @@ onMounted(() => {
         gap: var(--el-font-size-base);
 
         .item {
+            $usingColor: #D2441F;
+            $subColor: #3274D5;
+            $closedColor: #aeb8c9;
             background-color: #efefef;
             border-radius: 6px;
             overflow: hidden;
             border: 2px solid #fff;
-            $usingColor: #D2441F;
-            $subColor: #3274D5;
-            $closedColor: #aeb8c9;
 
             &.active {
                 border-color: $subColor;