feat: 增加代课下单收到商品信息变动时重新获取商品信息初始化购物车数据

src/views/tool/Instead/components/carts/list.vue

@@ -101,7 +101,7 @@
         <el-button
           type="primary"
           size="large"
-          :disabled="!goodsMapisFinish"
+          :disabled="!carts.isLinkFinshed"
           @click="createOrder('wx-aiplay')"
         >
           微信/支付宝
@@ -109,7 +109,7 @@
         <el-button
           type="primary"
           size="large"
-          :disabled="!goodsMapisFinish"
+          :disabled="!carts.isLinkFinshed"
           @click="createOrder('cash')"
         >
           现金
@@ -117,7 +117,7 @@
         <el-button
           type="primary"
           size="large"
-          :disabled="!goodsMapisFinish || showOrder"
+          :disabled="!carts.isLinkFinshed || showOrder"
           @click="createOrder('more-pay')"
         >
           更多支付
@@ -128,7 +128,7 @@
           <el-button
             type="primary"
             size="large"
-            :disabled="!goodsMapisFinish || carts.isEmpty"
+            :disabled="!carts.isLinkFinshed || carts.isEmpty"
             @click="createOrder('only-create')"
           >
             仅下单
@@ -136,7 +136,7 @@
           <el-button
             type="primary"
             size="large"
-            :disabled="!goodsMapisFinish"
+            :disabled="!carts.isLinkFinshed"
             @click="createOrder('to-pay')"
           >
             去结账
@@ -147,7 +147,7 @@
           <el-button
             type="primary"
             size="large"
-            :disabled="!goodsMapisFinish"
+            :disabled="!carts.isLinkFinshed"
             @click="createOrder('to-pay')"
           >
             立即支付
@@ -201,10 +201,6 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  goodsMapisFinish: {
-    type: Boolean,
-    default: false,
-  },
 });
 let isXianFuKuan = computed(() => {
   // if (!props.table.tableCode) {
@@ -230,31 +226,6 @@ function hideOrder() {
 function createOrder(key) {
   emits("createOrder", key);
 }
-const selCartId = ref(null);
-
-watch(
-  () => props.table.tableCode,
-  (newval) => {
-    init();
-  }
-);
-
-const goodsMap = {};
-watch(
-  () => props.goodsMapisFinish,
-  (newval) => {
-    if (newval) {
-      init();
-    }
-  }
-);
-
-function init() {
-  for (let goods of props.goodsList) {
-    goodsMap[goods.id] = goods;
-  }
-  carts.init({ table_code: props.table.tableCode }, goodsMap, props.oldOrder);
-}
 
 function itemClick(item) {
   carts.changeSelCart(item);
@@ -268,7 +239,6 @@ function changeNumber(step, item) {
 // });
 defineExpose({
   carts,
-  init,
 });
 </script>
 <style scoped lang="scss">

src/views/tool/Instead/components/control.vue

@@ -33,8 +33,8 @@ const controls = ref([
   { label: "打包", key: "is_pack", disabled: false, per: "pack" },
   { label: "删除", key: "del", disabled: false, per: "del" },
   { label: "转桌", key: "rottable", disabled: false, per: "rottable" },
-  // { label: "存单", key: "", disabled: false, per: "save" },
-  // { label: "取单", key: "", disabled: false },
+  { label: "存单", key: "saveCart", disabled: false, per: "saveCart" },
+  { label: "取单", key: "getCart", disabled: false, per: "getCart" },
   { label: "单品备注", key: "one-note", disabled: false, per: "one-note" },
   { label: "整单备注", key: "all-note", disabled: false, per: "all-note" },
   { label: "退菜", key: "return", disabled: false, per: "return" },
@@ -119,6 +119,9 @@ const perList = computed(() => {
   if (carts.oldOrder.id) {
     arr.push("rottable");
   }
+  if (!carts.isEmpty) {
+    arr.push("saveCart");
+  }
   return arr;
 });
 const canEdit = computed(() => {

src/views/tool/Instead/components/get-save-cart.vue

@@ -0,0 +1,199 @@
+<template>
+  <!-- 取单 -->
+  <el-dialog width="550px" title="取单" v-model="prveOrder.show">
+    <div class="take_order_list">
+      <div class="tol_left_list">
+        <div
+          class="tolll_item"
+          :class="{ active: prveOrder.sel === index }"
+          @click="changePrveOrder(index)"
+          v-for="(item, index) in prveOrder.list"
+          :key="index"
+        >
+          <div class="tollli_index">{{ index + 1 }}</div>
+          <div class="tollli_price">￥{{ item.totalAmount }}</div>
+          <div class="tollli_time_and_num">
+            <div class="tollli_time">{{ item.created_at || "" }}</div>
+            <div class="tollli_num">({{ item.totalNumber }}件)</div>
+          </div>
+        </div>
+      </div>
+      <div class="tol_right_list" v-if="prveOrder.list.length && prveOrder.sel >= 0">
+        <div class="tolrl_item" v-for="(item, index) in prveOrder.selCart" :key="index">
+          <div class="tolrli_img">
+            <img :src="item.coverImg" alt="" />
+          </div>
+          <div class="tolrli_right">
+            <div class="tr_top">
+              <div class="trt_name">{{ item.name }}</div>
+              <div class="trt_num">x{{ item.number }}</div>
+              <div class="trt_price">￥{{ item.totalAmount || 0 }}</div>
+            </div>
+            <div class="tr_bottom">
+              <span class="trb_item">
+                {{ item.specSnap }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex row-center">
+        <div style="margin-right: 20px">
+          <el-button type="primary" @click="confirmChoosePrveOrder">确认此单</el-button>
+        </div>
+        <el-button @click="delPrveOrder">删除此单</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+const prveOrder = reactive({
+  list: [],
+  show: false,
+  sel: 0,
+  selCart: [],
+});
+
+function show() {
+  prveOrder.show = true;
+}
+function close() {
+  prveOrder.show = false;
+}
+defineExpose({
+  show,
+  close,
+});
+</script>
+
+<style lang="scss" scoped>
+.take_order_list {
+  padding: 14px 0;
+  display: flex;
+  justify-content: space-between;
+
+  .tol_left_list {
+    height: 360px;
+    margin-right: 24px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+
+    .tolll_item {
+      border: 1px solid rgb(247, 247, 250);
+      height: 86px;
+      width: 130px;
+      padding: 10px 14px;
+      margin-bottom: 12px;
+      border-radius: 4px;
+      color: #303133;
+
+      background-color: #f7f7fa;
+
+      &.active {
+        border: 1px solid rgb(0, 194, 95);
+        background-color: rgba(0, 194, 95, 0.1);
+        color: rgb(0, 194, 95) !important;
+
+        .tollli_time,
+        .tollli_num {
+          color: rgb(0, 194, 95) !important;
+        }
+      }
+
+      cursor: pointer;
+
+      .tollli_index {
+        font-weight: 600;
+        font-size: 18px;
+      }
+
+      .tollli_price {
+        margin-top: 8px;
+        font-size: 14px;
+      }
+
+      .tollli_time_and_num {
+        margin-top: 6px;
+        display: flex;
+        justify-content: space-between;
+
+        .tollli_time,
+        .tollli_num {
+          font-size: 12px;
+          color: #909399;
+        }
+      }
+    }
+  }
+
+  .tol_right_list {
+    flex: 1;
+    height: 360px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+
+    .tolrl_item {
+      display: flex;
+      padding: 2px 2px 13px 2px;
+      margin-bottom: 12px;
+      border-bottom: 1px solid #ebebeb;
+
+      .tolrli_img {
+        img {
+          width: 40px;
+          height: 40px;
+          border-radius: 4px;
+        }
+      }
+
+      .tolrli_right {
+        display: flex;
+        justify-content: space-between;
+        flex: 1;
+        flex-direction: column;
+        padding: 1px 0 1px 8px;
+
+        .tr_top {
+          display: flex;
+          justify-content: space-between;
+
+          .trt_name {
+            width: 150px;
+            font-size: 14px;
+            color: #212121;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          .trt_num {
+            font-size: 14px;
+            color: #212121;
+          }
+
+          .trt_price {
+            width: 100px;
+            text-align: right;
+            font-size: 14px;
+            color: #212121;
+          }
+        }
+
+        .tr_bottom {
+          font-size: 12px;
+          color: #999;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/tool/Instead/components/order.vue

@@ -571,6 +571,7 @@ async function payOrder(payType, isScan, guazhangren) {
     if (payType == "arrears") {
       res = await payApi.creditPay({ ...returnPayParams(), creditBuyerId: guazhangren.id });
     }
+    carts.clearCart();
   } catch (error) {
     console.log(error);
     clearTimeout(payTimer);

src/views/tool/Instead/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="box" v-loading="cartsLoading" element-loading-text="购物车连接初始化中，请稍等……">
+  <div
+    class="box"
+    v-loading="!carts.isLinkFinshed"
+    element-loading-text="购物车连接初始化中，请稍等……"
+  >
     <div class="content">
       <div class="top">
         <div class="left u-flex u-col-center">
@@ -107,8 +111,7 @@
             @createOrder="createOrder"
             @hideOrder="hideOrder"
             :showOrder="showOrder"
-            :goodsMapisFinish="goodsMapisFinish"
-            :goodsList="goods.list"
+            :goodsList="carts.goods"
             :oldOrder="oldOrder"
             :perpole="perpole"
             :remark="remark"
@@ -158,7 +161,7 @@
                 </div>
               </div>
             </div>
-            <div v-if="goods.list.length <= 0" class="no-goods">未找到相关商品</div>
+            <div v-if="carts.goods.length <= 0" class="no-goods">未找到相关商品</div>
             <div class="goods-list">
               <div class="lingshicai" @click="showaddLingShiCai">
                 <el-icon size="26"><Plus /></el-icon>
@@ -167,7 +170,7 @@
               <GoodsItem
                 :item="item"
                 @click="goodsClick(item)"
-                v-for="item in goods.list"
+                v-for="item in carts.goods"
                 :key="item.id"
               ></GoodsItem>
             </div>
@@ -311,7 +314,9 @@ async function refReturnCartConfirm(e) {
     const res1 = await orderApi.getHistoryList({
       orderId: oldOrder.value.id,
     });
-    oldOrder.value = res1;
+    if (res1) {
+      oldOrder.value = res1;
+    }
     carts.setOldOrder(res1);
   }
 }
@@ -417,7 +422,9 @@ async function createOrder(key) {
         const res1 = await orderApi.getHistoryList({
           orderId: res.id,
         });
-        oldOrder.value = res1;
+        if (res1) {
+          oldOrder.value = res1;
+        }
         carts.setOldOrder(res1);
       }
       if (key == "only-create") {
@@ -616,24 +623,12 @@ const goods = reactive({
   },
 });
 
-let goodsMapisFinish = ref(false);
-
 async function getGoods() {
-  const res = await productApi.getPage({
-    page: 1,
-    size: 400,
-    status: "on_sale",
-    ...goods.query,
-  });
-  goods.list = res.records;
-  carts.goods = goods.list;
-  goodsMapisFinish.value = true;
+  carts.getGoods(goods.query);
 }
-const cartsLoading = computed(() => {
-  return !goodsMapisFinish.value || !carts.isLinkFinshed;
-});
+
 function goodsClick(item) {
-  if (!goodsMapisFinish.value) {
+  if (!carts.isLinkFinshed) {
     return ElMessage.error({
       message: "添加失败，socket未连接成功，请刷新再试",
       type: "error",
@@ -689,7 +684,6 @@ function skuSelConfirm(item) {
 
 //购物车
 
-const refCart = ref(null);
 function clearCarts() {
   ElMessageBox.alert("确定要清空点餐列表吗?", "提示", {
     confirmButtonText: "确定",
@@ -712,7 +706,7 @@ watch(
 function init() {
   getTableList();
   getCategoryList();
-  getGoods();
+  carts.init();
 }
 
 onBeforeRouteLeave(() => {
@@ -775,13 +769,12 @@ function refresh() {
   oldOrder.value = {
     detailMap: [],
   };
-  oldOrder.value = {};
   showOrder.value = false;
   user.value = {};
   table.value = {};
   router.replace(route.path);
   carts.dataReset();
-  refCart.value.carts.init();
+  carts.init();
   // setTimeout(() => {
   //   router.go(0);
   // }, 1500);