代客下单页面修改，增加店铺配置页面

src/views/tool/Instead/index.vue

@@ -5,8 +5,29 @@
         <div class="left u-flex u-col-center">
           <span class="title">代客下单</span>
           <div class="u-m-l-20 flex">
-            <el-button type="primary">选择用户</el-button>
-            <el-popover placement="right" width="333" trigger="click" v-model="tableShow">
+            <div class="choose-user flex">
+              <el-button type="primary" v-if="!user.id" @click="showChooseUser">选择用户</el-button>
+
+              <div v-else class="flex cur-pointer" @click="refChooseUserOpen">
+                <img
+                  v-if="user.headImg && user.headImg != 'null'"
+                  class="headimg"
+                  :src="user.headImg"
+                  alt=""
+                />
+                <div v-else class="headimg flex flex-x-y-center">
+                  <i class="el-icon-user"></i>
+                </div>
+                <div>
+                  <div class="u-flex">
+                    <div class="ft-13 color-000">{{ user.nickName }}</div>
+                    <div class="vip" v-if="user.isVip">VIP{{ user.isVip }}</div>
+                  </div>
+                  <div style="margin-top: 2px" class="color-666 ft-12">余额：{{ user.amount }}</div>
+                </div>
+              </div>
+            </div>
+            <el-popover placement="right" width="333" trigger="click" ref="refTable">
               <el-input
                 placeholder="请输入内容"
                 prefix-icon="search"
@@ -30,7 +51,7 @@
                 </div>
               </div>
               <template #reference>
-                <el-button>选择桌号</el-button>
+                <el-button>{{ table.name ? "桌台号：" + table.name : "选择桌号" }}</el-button>
               </template>
             </el-popover>
             <el-button type="warning">扫码验券</el-button>
@@ -52,10 +73,12 @@
       <div class="diancan">
         <div class="left">
           <div class="diners">
+            <!-- 就餐类型 -->
             <el-button-group v-model="diners.sel" style="width: 100%; display: flex">
               <el-button
                 :class="{ active: index == diners.sel }"
                 v-for="(item, index) in diners.list"
+                @click="changeDinersSel(index)"
                 :key="index"
               >
                 {{ item.label }}
@@ -75,6 +98,7 @@
           </div>
           <cartsList
             @editNote="showNote(true)"
+            @createOrder="createOrder"
             :goodsMapisFinish="goodsMapisFinish"
             :goodsList="goods.list"
             ref="refCart"
@@ -88,48 +112,53 @@
           />
         </div>
         <div class="right">
-          <div class="flex categoty u-col-center">
-            <div
-              class="show_more_btn"
-              :class="{ showAll: category.showAll }"
-              @click="toggleShowAll"
-            >
-              <div class="flex">
-                <div class="flex showmore">
-                  <el-icon color="#fff"><ArrowDown /></el-icon>
-                </div>
-                <span>{{ category.showAll ? "收起" : "展开" }}</span>
-              </div>
-            </div>
-            <div class="flex categorys" :class="{ 'flex-wrap': category.showAll }">
+          <template v-if="!showOrder">
+            <div class="flex categoty u-col-center">
               <div
-                v-for="(item, index) in category.list"
-                :key="index"
-                @click="changeCategoryId(item)"
+                class="show_more_btn"
+                :class="{ showAll: category.showAll }"
+                @click="toggleShowAll"
               >
-                <el-tag
-                  size="large"
-                  :type="goods.query.categoryId === item.id ? 'primary' : 'info'"
-                  effect="dark"
+                <div class="flex">
+                  <div class="flex showmore">
+                    <el-icon color="#fff"><ArrowDown /></el-icon>
+                  </div>
+                  <span>{{ category.showAll ? "收起" : "展开" }}</span>
+                </div>
+              </div>
+              <div class="flex categorys" :class="{ 'flex-wrap': category.showAll }">
+                <div
+                  v-for="(item, index) in category.list"
+                  :key="index"
+                  @click="changeCategoryId(item)"
                 >
-                  {{ item.name }}
-                </el-tag>
+                  <el-tag
+                    size="large"
+                    :type="goods.query.categoryId === item.id ? 'primary' : 'info'"
+                    effect="dark"
+                  >
+                    {{ item.name }}
+                  </el-tag>
+                </div>
               </div>
             </div>
-          </div>
-          <div v-if="goods.list.length <= 0" class="no-goods">未找到相关商品</div>
-          <div class="goods-list">
-            <div class="lingshicai" @click="showaddLingShiCai">
-              <el-icon size="26"><Plus /></el-icon>
-              <div class="u-m-t-10">临时菜</div>
+            <div v-if="goods.list.length <= 0" class="no-goods">未找到相关商品</div>
+            <div class="goods-list">
+              <div class="lingshicai" @click="showaddLingShiCai">
+                <el-icon size="26"><Plus /></el-icon>
+                <div class="u-m-t-10">临时菜</div>
+              </div>
+              <GoodsItem
+                :item="item"
+                @click="goodsClick(item)"
+                v-for="item in goods.list"
+                :key="item.id"
+              ></GoodsItem>
             </div>
-            <GoodsItem
-              :item="item"
-              @click="goodsClick(item)"
-              v-for="item in goods.list"
-              :key="item.id"
-            ></GoodsItem>
-          </div>
+          </template>
+
+          <!-- 订单信息展示 -->
+          <Order @discountShow="discountShow" v-else></Order>
         </div>
       </div>
     </div>
@@ -146,14 +175,24 @@
     <changePrice ref="refChangePrice" @confirm="changePriceConfirm"></changePrice>
     <!-- 称重商品 -->
     <changeWeight ref="refChangeWeight" @confirm="changeWeightConfirm"></changeWeight>
+    <!-- 可选套餐 -->
+    <changeTaocan ref="refAddTaocan" @confirm="taocanConfirm"></changeTaocan>
+    <!-- 选择用户 -->
+    <chooseUser ref="refChooseUser" @chooseUser="chooseUserConfirm"></chooseUser>
+    <!-- 打折 -->
+    <discount ref="refDiscount" @confirm="discountConfirm"></discount>
   </div>
 </template>
 <script setup>
 import Controls from "./components/control.vue";
+import discount from "./components/discount.vue";
 import note from "./components/note.vue";
+import Order from "./components/order.vue";
 import pack from "./components/pack.vue";
 import changePrice from "./components/popup-cart-changePrice.vue";
+import chooseUser from "./components/choose-user.vue";
 import changeWeight from "./components/popup-weight-goods.vue";
+import changeTaocan from "./components/popup-taocan-goods.vue";
 import addLingShiCai from "./components/popup-linshiCai.vue";
 import GoodsItem from "./components/goods-item.vue";
 import dialogGoodsSel from "./components/dialog-goods-sel.vue";
@@ -162,15 +201,62 @@ import categoryApi from "@/api/product/productclassification";
 import productApi from "@/api/product/index";
 import tableApi from "@/api/account/table";
 import $status from "@/views/tool/table/status.js";
+import orderApi from "@/api/order/order";
+//打折
+const refDiscount = ref();
+function discountConfirm(e) {}
+function discountShow(e) {
+  refDiscount.value.open({
+    amount: 10,
+  });
+}
+
+//用户
+let user = ref({});
+const refChooseUser = ref();
+function chooseUserConfirm(e) {
+  console.log(e);
+  user.value = e;
+}
+function showChooseUser() {
+  refChooseUser.value.open();
+}
+
+//订单
+const showOrder = ref(false);
+function createOrder() {
+  console.log(refCart.value.carts.table_code);
+  orderApi.add({
+    tableCode: refCart.value.carts.table_code,
+    dineMode: "dine-in",
+  });
+}
+
+//套餐商品
+const refAddTaocan = ref();
+function taocanConfirm() {}
+function taocanShow(item) {
+  refAddTaocan.value.open(item);
+}
 
 // 称重商品
 const refChangeWeight = ref();
-function changeWeightConfirm(e) {}
+function changeWeightConfirm(goods, number) {
+  console.log(goods, number);
+  addCarts({
+    product_id: goods.id,
+    sku_id: goods.skuList[0].id,
+    number,
+  });
+}
 function showWeight(item) {
+  console.log(item);
   refChangeWeight.value.open(item);
 }
 
 //桌台
+const table = ref({}); //当前选中桌台
+const refTable = ref();
 const tableSearchText = ref("");
 const tableList = ref([]);
 function getTableList() {
@@ -190,6 +276,8 @@ function returnTableLabel(key) {
 }
 function tableClick(item) {
   console.log(item);
+  table.value = item;
+  refTable.value.hide();
 }
 
 //临时菜
@@ -258,6 +346,11 @@ const diners = reactive({
   ],
   sel: 0,
 });
+
+function changeDinersSel(index) {
+  diners.sel = index;
+}
+
 // 商品分类
 const category = reactive({
   list: [],
@@ -311,16 +404,7 @@ function goodsClick(item) {
     addCarts({
       product_id: item.id,
       sku_id: item.skuList[0].id,
-      number: 1,
-      is_pack: 0,
-      is_gift: 0,
-      is_temporary: 0,
-      discount_sale_amount: 0,
-      discount_sale_note: "",
-      is_print: 0,
-      is_wait_call: 0,
-      product_name: "",
-      remark: "",
+      number: item.skuList[0].suitNum || 1,
     });
     return;
   }
@@ -334,6 +418,24 @@ function goodsClick(item) {
     showWeight(item);
     return;
   }
+  //套餐商品
+  if (item.type === "package") {
+    //固定套餐
+    if (item.groupType == 0) {
+      addCarts({
+        sku_id: item.groupSnap[0].goods[0].skuId,
+        product_id: item.id,
+        number: item.groupSnap[0].goods[0].number,
+      });
+      return;
+    }
+    //可选套餐
+    if (item.groupType == 1) {
+      taocanShow(item);
+      return;
+    }
+    return;
+  }
 }
 
 // 多规格选择确认
@@ -345,18 +447,7 @@ function skuSelConfirm(item) {
   if (listItem) {
     refCart.value.carts.update({ ...listItem, ...item });
   } else {
-    refCart.value.carts.add({
-      is_pack: 0,
-      is_gift: 0,
-      is_temporary: 0,
-      discount_sale_amount: 0,
-      discount_sale_note: "",
-      is_print: 0,
-      is_wait_call: 0,
-      product_name: "",
-      remark: "",
-      ...item,
-    });
+    addCarts(item);
   }
 }
 
@@ -372,15 +463,7 @@ function clearCarts() {
   });
 }
 function addCarts(item) {
-  const hasCart = refCart.value.carts.list.find((cartItem) => {
-    return cartItem.product_id == item.product_id && cartItem.sku_id == item.sku_id;
-  });
-  console.log(hasCart);
-  if (hasCart) {
-    refCart.value.carts.update({ ...item, id: hasCart.id });
-  } else {
-    refCart.value.carts.add(item);
-  }
+  refCart.value.carts.add(item);
 }
 
 watch(
@@ -585,4 +668,7 @@ $pl: 30px;
 .no-goods {
   color: #999;
 }
+.choose-user {
+  margin-right: 10px;
+}
 </style>