优化台桌点餐

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"
-            :key="item.id" @click="selectCartItemHandle(item, index)">
-            <div class="name_wrap">
-              <span>{{ item.name }}</span>
-              <span>￥{{ item.salePrice }}</span>
-            </div>
-            <div class="sku_list" v-if="item.skuName">
-              <div class="tag" v-for="item in item.skuName.split(',')">
-                {{ item }}
+          <template v-for="(arr, index) in cartList" :key="index">
+            <el-divider v-if="arr.placeNum">{{ `第${arr.placeNum}次下单` }}</el-divider>
+            <div class="item" :class="{ active: item.active }" :key="item.id" v-for="(item, i) in arr.info"
+              @click="selectCartItemHandle(item, index, i)">
+              <div class="name_wrap">
+                <span>{{ item.name }}</span>
+                <span>￥{{ item.salePrice }}</span>
               </div>
-            </div>
-            <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 class="sku_list" v-if="item.skuName">
+                <div class="tag" v-for="item in item.skuName.split(',')">
+                  {{ item }}
                 </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">
-              <el-button type="primary" style="width: 100%;" :disabled="!cartList.length"
-                @click="createOrderHandle(0)">仅下单</el-button>
-            </div> -->
-            <div class="btn">
+            <div class="btn" v-if="shopStore.info.registerType == 'restaurant'">
+              <el-button type="primary" style="width: 100%;" :disabled="!cartList.length" @click="createOrderHandle(0)">
+                <template v-if="!createOrderLoading">
+                  仅下单</template>
+                <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) {
-  cartListActive.value = index;
+function selectCartItemHandle(row, index, i) {
+  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;
+              }
             }
           }