feat: 增强组件功能与样式优化

- 在多个组件中添加了新的属性和方法以提升功能性，如在卡片组件中引入 _ActiveTab 属性以管理活动标签。
- 优化了商品详情和商户页面的收藏逻辑，确保在未登录状态下引导用户登录。
- 更新了轮播组件的路由解析逻辑，增强了用户体验。
- 改进了投诉列表和收藏列表的样式，提升了响应式布局和可读性。
- 在全局配置中添加了对开发环境的错误处理，提升了调试体验。

seller/src/views/shop/hotzone/components/Hotzone.vue

@@ -31,9 +31,8 @@
                 {{ showZoneText(zone) }}
               </div>
             </div>
-            <div class="flex">
+            <div class="hotzone-box-item-actions">
               <div class="hotzone-btn" @click="editZone(index)">修改</div>
-              &nbsp;&nbsp;&nbsp;&nbsp;
               <div class="hotzone-btn" @click="delZone(index)">删除</div>
             </div>
           </div>
@@ -239,13 +238,16 @@ export default {
   }
   > div:nth-of-type(2) {
     width: 50%;
+    min-width: 0;
     background: #f7f7f7;
+    overflow: hidden;
   }
 }
 
 .hotzone-add-box-body {
   height: 90%;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .hotzone-box-item-main {
@@ -256,11 +258,18 @@ export default {
 .hotzone-box-item {
   align-items: center;
   display: flex;
+  gap: 8px;
   border-bottom: 1px solid #ededed;
   font-size: 12px;
-  justify-content: space-between;
   padding: 5px 10px 0;
   width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+
+  > div:nth-child(2) {
+    flex: 1;
+    min-width: 0;
+  }
 }
 
 .hotzone-add-box-footer {
@@ -280,8 +289,18 @@ export default {
   cursor: pointer;
 }
 
+.hotzone-box-item-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
 .hotzone-box-item-text {
-  width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   cursor: pointer;
 }
 

seller/src/views/shop/hotzone/components/Zone.vue

@@ -63,7 +63,7 @@
           <img class="show-image" :src="zoneForm.img" alt />
         </div>
 
-        <el-form :model="zoneForm" label-width="80px">
+        <el-form :model="zoneForm" label-width="90px" class="hz-edit-form">
           <!-- <el-form-item label="图片链接：">
             <el-input v-model="zoneForm.img"></el-input>
             <el-button size="small" type="primary" @click="handleSelectImg"
@@ -240,3 +240,9 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="scss">
+.hz-edit-form :deep(.el-form-item__label) {
+  white-space: nowrap;
+}
+</style>

seller/src/views/shop/hotzone/directives/addItem.js

@@ -1,34 +1,31 @@
 import _ from '../utils'
 
 export default {
-  bind: function (el, binding, vnode) {
-    const MIN_LIMIT = _.MIN_LIMIT
+  mounted(el, binding) {
+    const handleMouseDown = (e) => {
+      const ctx = binding.instance
+      if (!ctx) return
 
-    el.addEventListener('mousedown', handleMouseDown, { passive: false })
-
-    function handleMouseDown(e) {
-      // console.log('additem', e)
       e && e.preventDefault()
 
       let itemInfo = {
         top: _.getDistanceY(e, el),
         left: _.getDistanceX(e, el),
         width: 0,
-        height: 0
+        height: 0,
       }
-      let container = _.getOffset(el)
+      const container = _.getOffset(el)
 
-      // Only used once at the beginning of init
-      let setting = {
+      const setting = {
         topPer: _.decimalPoint(itemInfo.top / container.height),
         leftPer: _.decimalPoint(itemInfo.left / container.width),
         widthPer: 0,
-        heightPer: 0
+        heightPer: 0,
       }
       let preX = _.getPageX(e)
       let preY = _.getPageY(e)
 
-      vnode.context.addItem(setting)// 这里去添加并发送了add通知，不应该发送通知
+      ctx.addItem(setting)
 
       window.addEventListener('mousemove', handleChange, { passive: false })
       window.addEventListener('mouseup', handleMouseUp, { passive: false })
@@ -36,56 +33,58 @@ export default {
       function handleChange(e) {
         e && e.preventDefault()
 
-        let moveX = _.getPageX(e) - preX
-        let moveY = _.getPageY(e) - preY
+        const moveX = _.getPageX(e) - preX
+        const moveY = _.getPageY(e) - preY
         preX = _.getPageX(e)
         preY = _.getPageY(e)
 
-        // Not consider the direction of movement first, consider only the lower right drag point
-        let minLimit = 0
-        // 添加热区时，判定鼠标释放时，满足（热区大于48*48时）条件时生效
-        let styleInfo = _.dealBR(itemInfo, moveX, moveY, minLimit)
+        const minLimit = 0
+        const styleInfo = _.dealBR(itemInfo, moveX, moveY, minLimit)
 
-        // Boundary value processing 改变热区大小时边界条件的处理
-        itemInfo = _.dealEdgeValue(itemInfo, styleInfo, container, vnode.context.zones)
+        itemInfo = _.dealEdgeValue(itemInfo, styleInfo, container, ctx.zones)
 
         Object.assign(el.lastElementChild.style, {
           top: `${itemInfo.top}px`,
           left: `${itemInfo.left}px`,
           width: `${itemInfo.width}px`,
-          height: `${itemInfo.height}px`
+          height: `${itemInfo.height}px`,
         })
       }
 
       function handleMouseUp() {
-        let perInfo = {
+        const perInfo = {
           topPer: _.decimalPoint(itemInfo.top / container.height),
           leftPer: _.decimalPoint(itemInfo.left / container.width),
           widthPer: _.decimalPoint(itemInfo.width / container.width),
           heightPer: _.decimalPoint(itemInfo.height / container.height),
-          img: "",
-          link: "",
-          type: "",
-          title: ""
+          img: '',
+          link: '',
+          type: '',
+          title: '',
         }
 
-        if (vnode.context.isOverRange()) {
-          vnode.context.overRange() // 判断超出个数限制，给overRange钩子抛回调
-        } else if (container.height < MIN_LIMIT && itemInfo.width > MIN_LIMIT) {
-          vnode.context.changeItem(Object.assign(perInfo, {
-            topPer: 0,
-            heightPer: 1
-          }), true)
-        } else if (container.width < MIN_LIMIT && itemInfo.height > MIN_LIMIT) {
-          vnode.context.changeItem(Object.assign(perInfo, {
-            leftper: 0,
-            widthPer: 1
-          }), true)
-        } else if (itemInfo.width > MIN_LIMIT && itemInfo.height > MIN_LIMIT) {
-          vnode.context.changeItem(perInfo, true)
+        if (ctx.isOverRange()) {
+          ctx.overRange()
+        } else if (container.height < _.MIN_LIMIT && itemInfo.width > _.MIN_LIMIT) {
+          ctx.changeItem(
+            Object.assign(perInfo, {
+              topPer: 0,
+              heightPer: 1,
+            }),
+            true
+          )
+        } else if (container.width < _.MIN_LIMIT && itemInfo.height > _.MIN_LIMIT) {
+          ctx.changeItem(
+            Object.assign(perInfo, {
+              leftper: 0,
+              widthPer: 1,
+            }),
+            true
+          )
+        } else if (itemInfo.width > _.MIN_LIMIT && itemInfo.height > _.MIN_LIMIT) {
+          ctx.changeItem(perInfo, true)
         } else {
-          // 当添加区域超出范围或小于最小区域（48*48）时触发，删除当亲绘制的热区并发送erase事件通知
-          vnode.context.eraseItem()
+          ctx.eraseItem()
         }
 
         window.removeEventListener('mousemove', handleChange)
@@ -93,9 +92,10 @@ export default {
       }
     }
 
-    el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown)
+    el.__hotzoneAddDestroy = () => el.removeEventListener('mousedown', handleMouseDown)
+    el.addEventListener('mousedown', handleMouseDown, { passive: false })
+  },
+  beforeUnmount(el) {
+    el.__hotzoneAddDestroy?.()
   },
-  unbind: function (el) {
-    el.$destroy()
-  }
 }

seller/src/views/shop/hotzone/directives/changeSize.js

@@ -1,11 +1,12 @@
 import _ from '../utils'
 
 export default {
-  bind: function (el, binding, vnode) {
-    el.addEventListener('mousedown', handleMouseDown,{ passive: false })
+  mounted(el, binding) {
+    const handleMouseDown = (e) => {
+      const ctx = binding.instance
+      if (!ctx) return
 
-    function handleMouseDown (e) {
-      let pointer = e.target.dataset.pointer //元素上绑定的方法名
+      const pointer = e.target.dataset.pointer
 
       if (!pointer) {
         return
@@ -13,79 +14,81 @@ export default {
 
       e && e.stopPropagation()
 
-      let zone = el.parentNode
-      let setting = vnode.context.setting
-      let currentIndex = vnode.context.index
-      let container = _.getOffset(zone.parentNode)
+      const zone = el.parentNode
+      const setting = ctx.setting
+      const currentIndex = ctx.index
+      const container = _.getOffset(zone.parentNode)
       let itemInfo = {
         width: _.getOffset(zone).width || 0,
         height: _.getOffset(zone).height || 0,
         top: setting.topPer * container.height || 0,
-        left: setting.leftPer * container.width || 0
+        left: setting.leftPer * container.width || 0,
       }
       let preX = _.getPageX(e)
       let preY = _.getPageY(e)
       let flag
 
-      // Hide the info displayed by hover
-      vnode.context.handlehideZone(true)
+      ctx.handlehideZone(true)
 
-      window.addEventListener('mousemove', handleChange,{ passive: false })
-      window.addEventListener('mouseup', handleMouseUp,{ passive: false })
+      window.addEventListener('mousemove', handleChange, { passive: false })
+      window.addEventListener('mouseup', handleMouseUp, { passive: false })
 
-      function handleChange (e) {
+      function handleChange(e) {
         e && e.preventDefault()
         flag = true
 
-        let moveX = _.getPageX(e) - preX
-        let moveY = _.getPageY(e) - preY
+        const moveX = _.getPageX(e) - preX
+        const moveY = _.getPageY(e) - preY
 
         preX = _.getPageX(e)
         preY = _.getPageY(e)
 
-        // Handling the situation when different dragging points are selected
-        let styleInfo = _[pointer](itemInfo, moveX, moveY)//调用对应的方法
-        // Boundary value processing
-        itemInfo = _.dealEdgeValue(itemInfo, styleInfo, container, vnode.context.$parent.zones, currentIndex)
+        const styleInfo = _[pointer](itemInfo, moveX, moveY)
+        itemInfo = _.dealEdgeValue(
+          itemInfo,
+          styleInfo,
+          container,
+          ctx.$parent.zones,
+          currentIndex
+        )
 
         Object.assign(zone.style, {
           top: `${itemInfo.top}px`,
           left: `${itemInfo.left}px`,
           width: `${itemInfo.width}px`,
-          height: `${itemInfo.height}px`
+          height: `${itemInfo.height}px`,
         })
       }
 
-      function handleMouseUp () {
+      function handleMouseUp() {
         if (flag) {
           flag = false
-          let perInfo = {
+          const perInfo = {
             topPer: _.decimalPoint(itemInfo.top / container.height),
             leftPer: _.decimalPoint(itemInfo.left / container.width),
             widthPer: _.decimalPoint(itemInfo.width / container.width),
-            heightPer: _.decimalPoint(itemInfo.height / container.height)
+            heightPer: _.decimalPoint(itemInfo.height / container.height),
           }
-          vnode.context.changeInfo(perInfo)
+          ctx.changeInfo(perInfo)
 
-          // 兼容数据无变更情况下导致 computed 不更新，数据仍为 px 时 resize 出现的问题
           Object.assign(zone.style, {
             top: `${itemInfo.top}px`,
             left: `${itemInfo.left}px`,
             width: `${itemInfo.width}px`,
-            height: `${itemInfo.height}px`
+            height: `${itemInfo.height}px`,
           })
         }
-        // Show the info
-        vnode.context.handlehideZone(false)
+        ctx.handlehideZone(false)
 
         window.removeEventListener('mousemove', handleChange)
         window.removeEventListener('mouseup', handleMouseUp)
       }
     }
 
-    el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown)
+    el.__hotzoneResizeDestroy = () => el.removeEventListener('mousedown', handleMouseDown)
+    el.addEventListener('mousedown', handleMouseDown, { passive: false })
+  },
+  beforeUnmount(el) {
+    el.__hotzoneResizeDestroy?.()
   },
-  unbind: function (el) {
-    el.$destroy()
-  }
 }

seller/src/views/shop/hotzone/directives/dragItem.js

@@ -1,30 +1,31 @@
 import _ from '../utils'
 
 export default {
-  bind: function (el, binding, vnode) {
-    el.addEventListener('mousedown', handleMouseDown)
+  mounted(el, binding) {
     let collision
-    function handleMouseDown (e) {
+    const handleMouseDown = (e) => {
+      const ctx = binding.instance
+      if (!ctx) return
+
       e && e.stopPropagation()
-      let container = _.getOffset(el.parentNode)
+      const container = _.getOffset(el.parentNode)
       let preX = _.getPageX(e)
       let preY = _.getPageY(e)
       let topPer
       let leftPer
       let flag
 
-      window.addEventListener('mousemove', handleChange,{ passive: false })
-      window.addEventListener('mouseup', handleMouseUp,{ passive: false })
+      window.addEventListener('mousemove', handleChange, { passive: false })
+      window.addEventListener('mouseup', handleMouseUp, { passive: false })
 
-      function handleChange (e) {
+      function handleChange(e) {
         e && e.preventDefault()
         flag = true
         collision = false
-        // Hide the info displayed by hover
-        vnode.context.handlehideZone(true)
+        ctx.handlehideZone(true)
 
-        let setting = vnode.context.setting
-        let currentIndex = vnode.context.index
+        const setting = ctx.setting
+        const currentIndex = ctx.index
         let moveX = _.getPageX(e) - preX
         let moveY = _.getPageY(e) - preY
 
@@ -33,7 +34,6 @@ export default {
         topPer = _.decimalPoint(moveY / container.height + setting.topPer)
         leftPer = _.decimalPoint(moveX / container.width + setting.leftPer)
 
-        // Hotzone moving boundary processing
         if (topPer < 0) {
           topPer = 0
           moveY = -container.height * setting.topPer
@@ -53,23 +53,20 @@ export default {
           leftPer = 1 - setting.widthPer
           moveX = container.width * (leftPer - setting.leftPer)
         }
-        // 拖拽碰撞检测
-        if (vnode.context.$parent.zones.length > 1) {
-          let currentzones = JSON.parse(JSON.stringify(vnode.context.$parent.zones)).map((zone) => {
-            return {
-              left: (zone.leftPer || 0) * container.width,
-              top: (zone.topPer || 0) * container.height,
-              width: (zone.widthPer || 0) * container.width,
-              height: (zone.heightPer || 0) * container.height
-            }
-          })
-          // 矫正
-          let changeSetting = {}
-          changeSetting.left = setting.leftPer * container.width + moveX
-          changeSetting.top = setting.topPer * container.height + moveY
-          changeSetting.width = setting.widthPer * container.width
-          changeSetting.height = setting.heightPer * container.height
-          // 碰撞检测
+
+        if (ctx.$parent.zones.length > 1) {
+          const currentzones = JSON.parse(JSON.stringify(ctx.$parent.zones)).map((zone) => ({
+            left: (zone.leftPer || 0) * container.width,
+            top: (zone.topPer || 0) * container.height,
+            width: (zone.widthPer || 0) * container.width,
+            height: (zone.heightPer || 0) * container.height,
+          }))
+          const changeSetting = {
+            left: setting.leftPer * container.width + moveX,
+            top: setting.topPer * container.height + moveY,
+            width: setting.widthPer * container.width,
+            height: setting.heightPer * container.height,
+          }
           for (let i = 0, len = currentzones.length; i < len; i++) {
             if (currentIndex !== i && _.handleEgdeCollisions(currentzones[i], changeSetting)) {
               collision = true
@@ -80,29 +77,29 @@ export default {
         el.style.transform = `translate(${moveX}px, ${moveY}px)`
       }
 
-      function handleMouseUp () {
+      function handleMouseUp() {
         if (flag) {
           flag = false
           el.style.transform = 'translate(0, 0)'
           if (!collision) {
-            vnode.context.changeInfo({
+            ctx.changeInfo({
               topPer,
-              leftPer
+              leftPer,
             })
           }
         }
 
-        // Show the info
-        vnode.context.handlehideZone(false)
+        ctx.handlehideZone(false)
 
         window.removeEventListener('mousemove', handleChange)
         window.removeEventListener('mouseup', handleMouseUp)
       }
     }
 
-    el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown)
+    el.__hotzoneDragDestroy = () => el.removeEventListener('mousedown', handleMouseDown)
+    el.addEventListener('mousedown', handleMouseDown)
+  },
+  beforeUnmount(el) {
+    el.__hotzoneDragDestroy?.()
   },
-  unbind: function (el) {
-    el.$destroy()
-  }
 }

seller/src/views/shop/hotzone/index.vue

@@ -9,11 +9,11 @@
     destroy-on-close
     @close="clickClose"
   >
-    <template v-if="flag">
+    <template v-if="flag && hotzoneRes">
       <hotzone
         ref="hotzone"
-        :zonesInit="res.zoneInfo"
-        :image="res.img"
+        :zonesInit="hotzoneRes.zoneInfo"
+        :image="hotzoneRes.img"
         @change="changeHotzone"
       />
     </template>
@@ -33,25 +33,34 @@ export default {
   data() {
     return {
       flag: false,
+      hotzoneRes: null,
     };
   },
-  props: ["res"],
   methods: {
     changeHotzone(info) {
+      if (this.hotzoneRes) {
+        this.hotzoneRes.zoneInfo = info;
+      }
       this.$emit("changeZone", info);
     },
     clickClose() {
       this.flag = false;
+      this.hotzoneRes = null;
       this.$emit("closeFlag", false);
     },
     clickOK() {
       this.clickClose();
     },
-    open() {
+    open(val) {
+      this.hotzoneRes = val || null;
+      if (this.hotzoneRes && !this.hotzoneRes.zoneInfo) {
+        this.hotzoneRes.zoneInfo = [];
+      }
       this.flag = true;
     },
     close() {
       this.flag = false;
+      this.hotzoneRes = null;
     },
   },
 };

seller/src/views/shop/modelForm.vue

@@ -49,11 +49,13 @@
         <draggable
           class="model-form-list"
           v-model="data.list"
-          v-bind="{ group: 'model', ghostClass: 'ghost' }"
+          :item-key="getModelItemKey"
+          group="model"
+          ghost-class="ghost"
           @end="handleMoveEnd"
           @add="handleModelAdd"
         >
-          <template v-for="(element, index) in data.list" :key="element.key || index">
+          <template #item="{ element, index }">
             <model-form-item
               v-if="element && element.key"
               :element="element"
@@ -190,6 +192,9 @@ export default {
     };
   },
   methods: {
+    getModelItemKey(element) {
+      return element.model || element.key || element.type;
+    },
     handleSelectLink(item, index) {
       if (item) this.selectedNav = item;
       this.$refs.liliDialog.open("link");
@@ -238,16 +243,18 @@ export default {
     },
     handleModelAdd(evt) {
       const newIndex = evt.newIndex;
-
-      this.data.list[newIndex] = JSON.parse(JSON.stringify(this.data.list[newIndex]));
-      const key = Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+      const current = this.data.list[newIndex];
+      if (!current || current.key) {
+        return;
+      }
+      const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
       this.data.list[newIndex] = {
-        ...this.data.list[newIndex],
+        ...JSON.parse(JSON.stringify(current)),
         options: {
-          ...this.data.list[newIndex].options,
+          ...current.options,
         },
         key,
-        model: this.data.list[newIndex].type + "_" + key,
+        model: current.type + "_" + key,
       };
     },
   },

seller/src/views/shop/modelList/seckill-only-album.vue

@@ -16,35 +16,31 @@
       </div>
     </div>
     <div class="section">
-      <swiper ref="mySwiper" :options="swiperOptions">
-        <swiper-slide
-          v-for="(item, index) in options.list[0].goodsList"
-          :key="index"
-        >
-          <div class="content">
-            <img :src="item.img" width="140" height="140" :alt="item.name" />
-            <div class="ellipsis">{{ item.name }}</div>
-            <div>
-              <span>{{ $filters.unitPrice(item.price, "￥") }}</span>
-              <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
+      <div ref="swiperEl" class="swiper">
+        <div class="swiper-wrapper">
+          <div
+            class="swiper-slide"
+            v-for="(item, index) in options.list[0].goodsList"
+            :key="index"
+          >
+            <div class="content">
+              <img :src="item.img" width="140" height="140" :alt="item.name" />
+              <div class="ellipsis">{{ item.name }}</div>
+              <div>
+                <span>{{ $filters.unitPrice(item.price, "￥") }}</span>
+                <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
+              </div>
             </div>
           </div>
-        </swiper-slide>
-      </swiper>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
-import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
+import Swiper from "swiper";
 import "swiper/swiper-bundle.css";
 export default {
-  components: {
-    Swiper,
-    SwiperSlide,
-  },
-  directives: {
-    swiper: directive,
-  },
   props: {
     data: {
       type: Object,
@@ -62,12 +58,7 @@ export default {
       minutes: "00", // 分钟
       seconds: "00", // 秒
       interval: undefined, // 定时器
-      swiperOptions: {
-        // 轮播图参数
-        slidesPerView: 5,
-        autoplay: true,
-        loop: true,
-      },
+      swiperInstance: null,
     };
   },
   watch: {
@@ -94,11 +85,26 @@ export default {
   },
   mounted() {
     this.countDown(this.options.list);
+    this.initSwiper();
   },
   beforeUnmount() {
     clearInterval(this.interval);
+    if (this.swiperInstance) {
+      this.swiperInstance.destroy(true, true);
+      this.swiperInstance = null;
+    }
   },
   methods: {
+    initSwiper() {
+      if (!this.$refs.swiperEl) {
+        return;
+      }
+      this.swiperInstance = new Swiper(this.$refs.swiperEl, {
+        slidesPerView: 5,
+        autoplay: true,
+        loop: true,
+      });
+    },
     // 倒计时
     countDown(list) {
       /**

seller/src/views/shop/modelList/seckill.vue

@@ -16,35 +16,31 @@
       </div>
     </div>
     <div class="section">
-      <swiper ref="mySwiper" :options="swiperOptions">
-        <swiper-slide
-          v-for="(item, index) in options.list[0].goodsList"
-          :key="index"
-        >
-          <div class="content">
-            <img :src="item.img" width="140" height="140" :alt="item.name" />
-            <div class="ellipsis">{{ item.name }}</div>
-            <div>
-              <span>{{ $filters.unitPrice(item.price, "￥") }}</span>
-              <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
+      <div ref="swiperEl" class="swiper">
+        <div class="swiper-wrapper">
+          <div
+            class="swiper-slide"
+            v-for="(item, index) in options.list[0].goodsList"
+            :key="index"
+          >
+            <div class="content">
+              <img :src="item.img" width="140" height="140" :alt="item.name" />
+              <div class="ellipsis">{{ item.name }}</div>
+              <div>
+                <span>{{ $filters.unitPrice(item.price, "￥") }}</span>
+                <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
+              </div>
             </div>
           </div>
-        </swiper-slide>
-      </swiper>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
-import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
+import Swiper from "swiper";
 import "swiper/swiper-bundle.css";
 export default {
-  components: {
-    Swiper,
-    SwiperSlide,
-  },
-  directives: {
-    swiper: directive,
-  },
   props: {
     data: {
       type: Object,
@@ -62,12 +58,7 @@ export default {
       minutes: "00", // 分钟
       seconds: "00", // 秒
       interval: undefined, // 定时器
-      swiperOptions: {
-        // 轮播图参数
-        slidesPerView: 5,
-        autoplay: true,
-        loop: true,
-      },
+      swiperInstance: null,
     };
   },
   watch: {
@@ -94,11 +85,26 @@ export default {
   },
   mounted() {
     this.countDown(this.options.list);
+    this.initSwiper();
   },
   beforeUnmount() {
     clearInterval(this.interval);
+    if (this.swiperInstance) {
+      this.swiperInstance.destroy(true, true);
+      this.swiperInstance = null;
+    }
   },
   methods: {
+    initSwiper() {
+      if (!this.$refs.swiperEl) {
+        return;
+      }
+      this.swiperInstance = new Swiper(this.$refs.swiperEl, {
+        slidesPerView: 5,
+        autoplay: true,
+        loop: true,
+      });
+    },
     // 倒计时
     countDown(list) {
       /**

seller/src/views/shop/renovation.vue

@@ -1,23 +1,36 @@
 <template>
   <div class="renovation">
-    <div class="model-list">
-      <div class="classification-title">基础模块</div>
-      <draggable tag="ul" :list="modelData" v-bind="{group:{ name:'model', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"   >
-        <li v-for="(model, index) in modelData" :key="index" class="model-item">
-          <el-icon><Picture /></el-icon>
-          <span>{{model.name}}</span>
-        </li>
-      </draggable>
-    </div>
-    <div class="show-content">
-      <model-form ref="modelForm" :data="modelForm"></model-form>
-    </div>
-    <div class="btn-bar" :class="{'top':isHiddenBar}">
+    <div class="btn-bar">
       <el-button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</el-button>
       <el-button class="ml_10" @click="resetTemplate">还原模板</el-button>
       <el-button class="ml_10" @click="witeLocalStore">将装修内容写入到本地</el-button>
       <el-button class="ml_10" v-if="hasCache" @click="clearCache">清空本地装修缓存</el-button>
     </div>
+    <div class="renovation-main">
+      <div class="model-list">
+        <div class="classification-title">基础模块</div>
+        <draggable
+          tag="ul"
+          :list="modelData"
+          :item-key="getModelKey"
+          :clone="cloneModel"
+          :group="{ name: 'model', pull: 'clone', put: false }"
+          :sort="false"
+          ghost-class="ghost"
+          handle=".model-item"
+        >
+          <template #item="{ element: model }">
+            <li class="model-item">
+              <el-icon><Picture /></el-icon>
+              <span>{{ model.name }}</span>
+            </li>
+          </template>
+        </draggable>
+      </div>
+      <div class="show-content">
+        <model-form ref="modelForm" :data="modelForm"></model-form>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -33,9 +46,7 @@ export default {
     Picture,
   },
   mounted() {
-    const setting = window.localStorage.getItem('seller-setting') ? JSON.parse(window.localStorage.getItem('seller-setting')) : {};
-    this.isHiddenBar = setting.isUseTabsRouter
-     const cache = this.getStore('managerPCPageCache')
+    const cache = this.getStore('managerPCPageCache')
     this.hasCache = !!cache;
       if(cache){
         this.$Modal.confirm({
@@ -69,10 +80,21 @@ export default {
       modelData,
       modelForm: { list: [] },
       submitLoading: false,
-      isHiddenBar:true,
     };
   },
   methods: {
+    getModelKey(model) {
+      return model.type || model.name;
+    },
+    cloneModel(model) {
+      const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
+      const cloned = JSON.parse(JSON.stringify(model));
+      return {
+        ...cloned,
+        key,
+        model: cloned.type + "_" + key,
+      };
+    },
     clearCache(){
       this.setStore('managerPCPageCache', '')
       this.$Message.success('清除成功')
@@ -143,21 +165,49 @@ export default {
 .renovation {
   position: relative;
   display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+.btn-bar {
+  position: sticky;
+  top: 0;
+  z-index: 99;
+  background: #fff;
+  height: 50px;
+  padding: 10px;
+  box-shadow: 1px 1px 10px #999;
+}
+.renovation-main {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  flex: 1;
+  padding-top: 10px;
 }
 .model-list {
+  flex-shrink: 0;
   width: 130px;
-  height: 620px;
+  max-height: calc(100vh - 180px);
   overflow-y: auto;
   padding: 10px;
   background: #fff;
-  margin-top: 60px;
-  position: fixed;
-  z-index: 100;
+  position: sticky;
+  top: 60px;
+  z-index: 10;
   box-shadow: 1px 1px 10px #999;
   .classification-title {
     width: 100%;
     height: 30px;
     line-height: 30px;
+    text-align: center;
+  }
+  :deep(ul) {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
   .model-item {
     width: 110px;
@@ -165,9 +215,12 @@ export default {
     background: #eee;
     margin-top: 10px;
     line-height: 30px;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
     color: #999;
-    transition:0.15s;
+    transition: 0.15s;
     border-radius: 4px;
     &:hover {
       background: $theme_color;
@@ -182,8 +235,8 @@ export default {
   }
 }
 .show-content {
-  margin-left: 150px;
-  margin-top: 60px;
+  flex: 1;
+  min-width: 0;
 }
 .ghost {
   background: #fff;
@@ -203,16 +256,4 @@ export default {
     line-height: 50px;
   }
 }
-.btn-bar {
-  position: fixed;
-  width: 100%;
-  background: #fff;
-  height: 50px;
-  padding: 10px;
-  box-shadow: 1px 1px 10px #999;
-  z-index: 99;
-}
-.top{
-  top: 100px;
-}
 </style>

seller/src/views/shop/shopAddress.vue

@@ -133,11 +133,22 @@ export default {
         }
       });
     },
+    resetForm() {
+      this.form = {
+        addressName: "",
+        center: "",
+        address: "",
+        mobile: "",
+      };
+    },
     add() {
       this.modalType = 0;
-      this.$refs.form.resetFields();
-      this.modalVisible = true;
       this.modalTitle = "添加自提地址";
+      this.resetForm();
+      this.modalVisible = true;
+      this.$nextTick(() => {
+        this.$refs.form?.resetFields();
+      });
     },
     edit(v) {
       this.modalType = 1;

seller/src/views/shop/shopSetting.vue

@@ -35,7 +35,7 @@
           </el-form>
         </el-tab-pane>
         <el-tab-pane label="发货地址">
-          <el-form ref="addressGoods" :model="addressGoods" label-width="100px" :rules="addressGoodsValidate">
+          <el-form ref="addressGoods" :model="addressGoods" label-width="120px" :rules="addressGoodsValidate" class="shop-setting-form">
             <el-form-item label="发货人姓名" prop="salesConsignorName">
               <el-input v-model="addressGoods.salesConsignorName" maxlength="11" clearable style="width: 20%">
               </el-input>
@@ -482,4 +482,15 @@ export default {
   margin-left: 10px;
   color: #999;
 }
+
+.shop-setting-form {
+  :deep(.el-form-item) {
+    align-items: center;
+  }
+
+  :deep(.el-form-item__label) {
+    white-space: nowrap;
+    line-height: 32px;
+  }
+}
 </style>

seller/src/views/shop/system/clerk/clerkManage.vue

@@ -95,9 +95,10 @@
       v-model="userEditModalVisible"
       :close-on-click-modal="false"
       width="500px"
-      top="30px"
+      align-center
+      append-to-body
     >
-      <el-form ref="form" :model="editForm" label-width="80px" :rules="formValidate">
+      <el-form ref="editFormRef" :model="editForm" label-width="100px" :rules="formValidate" class="clerk-form">
         <el-form-item label="手机号">
           <el-input v-model="mobile" disabled/>
         </el-form-item>
@@ -106,12 +107,12 @@
         </el-form-item>
         <el-form-item label="超级管理员" prop="isSuper">
           <el-radio-group v-model="editForm.isSuper">
-            <el-radio-button value="1">是</el-radio-button>
-            <el-radio-button value="0">否</el-radio-button>
+            <el-radio-button :value="1">是</el-radio-button>
+            <el-radio-button :value="0">否</el-radio-button>
           </el-radio-group>
         </el-form-item>
 
-        <el-form-item label="角色" prop="roles" v-if="editForm.isSuper == 0">
+        <el-form-item label="角色" prop="roles" v-if="editForm.isSuper === 0">
           <el-select v-model="editForm.roles" multiple>
             <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
@@ -132,9 +133,10 @@
       v-model="userModalVisible"
       :close-on-click-modal="false"
       width="500px"
-      top="30px"
+      align-center
+      append-to-body
     >
-      <el-form ref="form" :model="form" label-width="80px" :rules="formValidate">
+      <el-form ref="addForm" :model="form" label-width="100px" :rules="addFormRules" class="clerk-form">
         <el-form-item label="手机号" prop="mobile">
           <el-input placeholder="请输入要添加的会员手机号码" maxlength="11" style="width: 75%" v-model="form.mobile"
                  autocomplete="off" @change="checkClerks"/>
@@ -146,6 +148,7 @@
         </el-form-item>
         <el-form-item v-if="oldMember" label="用户名" prop="username">
           <el-input v-model="form.username" autocomplete="off" disabled/>
+          <div class="form-tip">该手机号已注册为平台会员，提交后将直接添加为店员</div>
         </el-form-item>
 
         <el-form-item label="密码" prop="password" v-if="newMember" :error="errorPass">
@@ -153,11 +156,11 @@
         </el-form-item>
         <el-form-item label="超级管理员" prop="isSuper" v-if="newMember || oldMember">
           <el-radio-group v-model="form.isSuper">
-            <el-radio-button value="1">是</el-radio-button>
-            <el-radio-button value="0">否</el-radio-button>
+            <el-radio-button :value="1">是</el-radio-button>
+            <el-radio-button :value="0">否</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="角色" prop="roles" v-if="(oldMember || newMember) && form.isSuper == 0">
+        <el-form-item label="角色" prop="roles" v-if="(oldMember || newMember) && form.isSuper === 0">
           <el-select v-model="form.roles" multiple>
             <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
@@ -260,6 +263,18 @@ export default {
       total: 0, // 总数
     };
   },
+  computed: {
+    addFormRules() {
+      const rules = {
+        username: this.formValidate.username,
+        mobile: this.formValidate.mobile,
+      };
+      if (this.newMember) {
+        rules.password = this.formValidate.password;
+      }
+      return rules;
+    },
+  },
   methods: {
     // 初始化数据
     init() {
@@ -297,28 +312,43 @@ export default {
     },
     //重新校验会员
     checkAgainClerk() {
-      this.memberCheck = false
-      this.newMember = false
-      this.oldMember = false
+      this.memberCheck = false;
+      this.newMember = false;
+      this.oldMember = false;
+      this.form.username = "";
+      this.form.password = "";
+      this.form.isSuper = 0;
+      this.form.roles = [];
+      this.errorPass = "";
     },
-    //检测当前店员
+    // 检测当前手机号对应会员：无 id 为新建会员，有 id 为已有会员
     checkClerk() {
-      if (this.form.mobile) {
-        this.newMember = false
-        this.oldMember = false
-        checkClerk(this.form.mobile).then(res => {
-          if (!res.result.id) {
-            this.newMember = true
-          } else {
-            this.oldMember = true
-            this.form.username = res.result.username
-            this.form.password = res.result.password
-          }
-          this.form.isSuper = 1
-          this.memberCheck = true;
-        });
+      if (!this.form.mobile) {
+        return;
       }
-
+      this.newMember = false;
+      this.oldMember = false;
+      this.form.username = "";
+      this.form.password = "";
+      this.errorPass = "";
+      checkClerk(this.form.mobile).then((res) => {
+        if (!res.success) {
+          return;
+        }
+        if (!res.result || !res.result.id) {
+          // 平台无此会员，需新建账号并设置密码
+          this.newMember = true;
+          this.oldMember = false;
+        } else {
+          // 已有会员，仅绑定为店员，不需要也不应展示/回填密码
+          this.newMember = false;
+          this.oldMember = true;
+          this.form.username = res.result.username || "";
+          this.form.password = "";
+        }
+        this.form.isSuper = 0;
+        this.memberCheck = true;
+      });
     },
     // 搜索项部门选择
     handleSelectDep(v) {
@@ -416,10 +446,9 @@ export default {
     },
     // 确认提交
     submitUser() {
-      this.$refs.form.validate(valid => {
+      this.$refs.addForm?.validate(valid => {
         if (valid) {
-          // 添加用户 避免编辑后传入id
-          const params = JSON.parse(JSON.stringify(this.form))
+          const params = JSON.parse(JSON.stringify(this.form));
           delete params.id;
           delete params.status;
           if (this.newMember) {
@@ -431,10 +460,12 @@ export default {
               this.errorPass = "密码长度不得少于6位";
               return;
             }
-            //todo
-            params.password = this.md5(params.password)
-          } else {
-            params.password = this.form.password
+            params.password = this.md5(params.password);
+          } else if (this.oldMember) {
+            // 后端 ClerkAddDTO 对 username/password 有 @NotEmpty 校验；
+            // 已有会员走 findByMobile 分支，不会使用该 password，仅用于通过参数校验
+            params.username = this.form.username;
+            params.password = params.password || "000000";
           }
           this.submitLoading = true;
           addUser(params).then(res => {
@@ -450,21 +481,25 @@ export default {
     },
     // 添加用户
     add() {
-      // this.checkClerks();
       this.modalType = 0;
       this.modalTitle = "添加店员";
-      this.$refs.form.resetFields();
-      this.form = { // 表单
+      this.form = {
         username: "",
         mobile: "",
+        password: "",
         isSuper: 0,
         roles: [],
         departmentId: "",
-        departmentTitle: ""
-      },
-      this.oldMember = false
-      this.newMember = false
+        departmentTitle: "",
+      };
+      this.oldMember = false;
+      this.newMember = false;
+      this.memberCheck = false;
       this.userModalVisible = true;
+      this.$nextTick(() => {
+        this.$refs.addForm?.resetFields();
+        this.$refs.depTree?.clearSelect?.();
+      });
     },
     // 编辑用户
     edit(v) {
@@ -593,3 +628,17 @@ export default {
   }
 };
 </script>
+
+<style scoped lang="scss">
+.clerk-form {
+  :deep(.el-form-item__label) {
+    white-space: nowrap;
+  }
+}
+.form-tip {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.4;
+}
+</style>

seller/src/views/shop/system/role/storeRoleManage.vue

@@ -75,8 +75,9 @@
       :title="modalTitle"
       width="500px"
       :close-on-click-modal="false"
+      align-center
+      append-to-body
       class="permModal"
-      top="30px"
     >
       <div v-loading="treeLoading" style="position: relative; max-height: 560px; overflow: auto">
         <el-tree
@@ -115,7 +116,15 @@
       </template>
     </el-dialog>
 
-    <el-dialog v-model="selectIsSuperModel" title="选择菜单权限" width="800px">
+    <el-dialog
+      v-model="selectIsSuperModel"
+      title="选择菜单权限"
+      width="800px"
+      append-to-body
+      align-center
+      :close-on-click-modal="false"
+      :z-index="3500"
+    >
       <div class="btns">
         <el-button type="primary" class="btn-item" @click="setRole()">一键选中·数据权限</el-button>
         <el-button class="btn-item" @click="setRole('onlyView')">一键选中·查看权限</el-button>
@@ -295,9 +304,14 @@ export default {
     addRole() {
       this.modalType = 0;
       this.modalTitle = "添加角色";
-      this.$refs.roleForm?.resetFields();
-      delete this.roleForm.id;
+      this.roleForm = {
+        name: "",
+        description: "",
+      };
       this.roleModalVisible = true;
+      this.$nextTick(() => {
+        this.$refs.roleForm?.clearValidate();
+      });
     },
     edit(v) {
       this.modalType = 1;

seller/src/views/shop/wap/decorate.scss

@@ -1,12 +1,27 @@
 
 :deep(.el-overlay) {
-  z-index: 800;
+  z-index: 2000;
 }
 .decorate-view-link{
     font-size: 12px;
     margin: 0 4px;
+    flex: 1;
+    min-width: 0;
     color: #999;
 }
+.decorate-view-btn {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  margin-left: 10px;
+
+  :deep(.el-button) {
+    width: 76px;
+    margin: 0;
+  }
+}
 .decorate-view-style {
     border: 1px solid #ededed;
     background: #f7f7fa;

seller/src/views/shop/wap/decorate.vue

@@ -46,7 +46,14 @@
     </el-alert>
 
     <!-- 右侧显示抽屉 -->
-    <el-drawer title="选择风格" :show-close="false" size="400px" v-model="styleFlag">
+    <el-drawer
+      title="选择风格"
+      :show-close="false"
+      size="400px"
+      v-model="styleFlag"
+      append-to-body
+      destroy-on-close
+    >
       <div class="drawer">
         <template v-for="(item, index) in modelData" :key="index">
           <div
@@ -67,6 +74,8 @@
       :show-close="false"
       size="400px"
       v-model="promotionsFlag"
+      append-to-body
+      destroy-on-close
     >
       <div class="drawer">
         <template v-for="(item, index) in modelData" :key="index">
@@ -185,7 +194,6 @@
                 <el-button
                   @click="bindGoodsCategory(title_index)"
                   size="small"
-                  style="margin-top: 20px"
                   >选择分类</el-button
                 >
               </div>
@@ -686,6 +694,7 @@ export default {
     clickDrawer(item, index) {
       this.$emit("handleDrawer", item);
       this.styleFlag = false;
+      this.promotionsFlag = false;
     },
     // 打开图片选择器
     liliDialogFlag(flag) {
@@ -705,8 +714,7 @@ export default {
         if (!val.zoneInfo) {
           val.zoneInfo = [];
         }
-        this.$refs.hotzone.flag = true;
-        this.$refs.hotzone.res = val;
+        this.$refs.hotzone.open(val);
       } else {
         this.liliDialogFlag(false);
       }

seller/src/views/shop/wap/index.vue

@@ -186,25 +186,27 @@ export default {
           API_Promotions.getLiveList({
             status: "START",
             pageSize: 1,
-          }).then((res) => {
-            if (res.success && res.result.size > 0) {
-              API_Promotions.getLiveInfo(res.result.records[0].id).then(
-                (res) => {
-                  if (res.success) {
-                    this.contentData.list[newIndex].options.list.push({
-                      type: val.promotionsType,
-                      title: val.name,
-                      title1: val.subName,
-                      color1: val.subColor,
-                      bk_color: val.subBkColor,
-                      data: res.result.commodityList
-                        ? res.result.commodityList.splice(0, 2)
-                        : [],
-                    });
-                  }
-                }
-              );
+            pageNumber: 1,
+          }).then((listRes) => {
+            const records = listRes.result?.records || [];
+            if (!listRes.success || records.length === 0) {
+              this.$Message.warning("暂无进行中的直播活动");
+              return;
             }
+            API_Promotions.getLiveInfo(records[0].id).then((infoRes) => {
+              if (infoRes.success) {
+                this.contentData.list[newIndex].options.list.push({
+                  type: val.promotionsType,
+                  title: val.name,
+                  title1: val.subName,
+                  color1: val.subColor,
+                  bk_color: val.subBkColor,
+                  data: infoRes.result.commodityList
+                    ? infoRes.result.commodityList.splice(0, 2)
+                    : [],
+                });
+              }
+            });
           });
         } else {
           API_Promotions.getAllPromotion().then((res) => {

seller/src/views/shop/wap/style.scss

@@ -42,23 +42,36 @@
   text-align: center;
   height: 44px;
   border-bottom: 1px solid #ededed;
+  background: #fff;
+  flex-shrink: 0;
 }
 .content {
+  box-sizing: border-box;
   margin: 20px 0;
   padding: 50px 13px;
   width: 360px;
   background: url("../../../assets/iPhoneX_model.png") no-repeat;
   height: 780px;
-  background-size: 360px;
+  background-size: 100% 100%;
   overflow: hidden;
-  > .component,
-  .draggable {
-    height: 590px;
+  display: flex;
+  flex-direction: column;
+
+  > .draggable {
+    flex: 1;
+    width: 100%;
+    min-height: 0;
+    overflow-x: hidden;
     overflow-y: auto;
     background: #ebebeb;
-  }
-  > .draggable {
     padding-bottom: 100px;
+    box-sizing: border-box;
+  }
+
+  > .component,
+  .draggable :deep(.component) {
+    max-width: 100%;
+    box-sizing: border-box;
   }
 }
 .list {

seller/src/views/shop/wap/template/tpl_banner.vue

@@ -13,14 +13,6 @@
 export default {
   title: "导航栏",
   props: ["res"],
-  watch: {
-    res: {
-      handler(newValue, oldValue) {
-          this['res'] = newValue;
-      },
-      deep: true
-    }
-  }
 };
 </script>
 <style lang="scss" scoped>

seller/src/views/shop/wap/template/tpl_goods.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="layout">
+  <div v-if="goodsBlock" class="layout">
     <div class="goods-cell-title">
       <div
         class="goods-item-title"
         :class="{ selected: selected.index == index }"
         @click="handleClickTitle(title, index)"
-        v-for="(title, index) in res.list[0].titleWay"
+        v-for="(title, index) in goodsBlock.titleWay"
         :key="index"
       >
         <h4>{{ title.title }}</h4>
@@ -13,36 +13,29 @@
       </div>
     </div>
     <div class="goods-list">
-      <div
-        v-if="
-          item.___index != undefined
-            ? selected.index == item.___index
-            : selected.val == item.type
-        "
-        class="goods-item"
-        v-for="(item, item_index) in res.list[0].listWay"
-        :key="item_index"
-      >
-        <div class="goods-img">
-          <el-icon
-            :size="20"
-            color="#e1251b"
-            @click="closeGoods(item, item_index)"
-            class="goods-icon"
-          >
-            <CircleClose />
-          </el-icon>
-          <img :src="item.img" alt />
-        </div>
-        <div class="goods-desc">
-          <div class="goods-title">
-            {{ item.title }}
+      <template v-for="(item, item_index) in goodsBlock.listWay" :key="item_index">
+        <div v-if="isGoodsVisible(item)" class="goods-item">
+          <div class="goods-img">
+            <el-icon
+              :size="20"
+              color="#e1251b"
+              @click="closeGoods(item, item_index)"
+              class="goods-icon"
+            >
+              <CircleClose />
+            </el-icon>
+            <img :src="item.img" alt />
           </div>
-          <div class="goods-bottom">
-            <div class="goods-price">￥{{ $filters.unitPrice(item.price) }}</div>
+          <div class="goods-desc">
+            <div class="goods-title">
+              {{ item.title }}
+            </div>
+            <div class="goods-bottom">
+              <div class="goods-price">￥{{ $filters.unitPrice(item.price) }}</div>
+            </div>
           </div>
         </div>
-      </div>
+      </template>
     </div>
   </div>
 </template>
@@ -53,29 +46,46 @@ export default {
   data() {
     return {
       selected: {
-        // 已选数据
         index: 0,
+        val: "",
       },
     };
   },
   props: ["res"],
+  computed: {
+    goodsBlock() {
+      return this.res?.list?.[0] || null;
+    },
+  },
   watch: {
-    res: {
+    goodsBlock: {
       handler(val) {
-        // 监听父级的值 如果有值将值赋给selected
-        if (val) {
-          this.selected.val = this.res.list[0].listWay[0].type;
+        if (!val) {
+          return;
+        }
+        const firstGoods = (val.listWay || []).find(Boolean);
+        if (firstGoods) {
+          this.selected.val = firstGoods.type;
+        } else if (val.titleWay?.[0]?.title) {
+          this.selected.val = val.titleWay[0].title;
         }
       },
       immediate: true,
     },
   },
   methods: {
-    // 删除商品
-    closeGoods(val, index) {
-      this.res.list[0].listWay.splice(index, 1);
+    isGoodsVisible(item) {
+      if (!item) {
+        return false;
+      }
+      if (item.___index != undefined) {
+        return this.selected.index == item.___index;
+      }
+      return this.selected.val == item.type;
+    },
+    closeGoods(val, index) {
+      this.goodsBlock.listWay.splice(index, 1);
     },
-    // 切换商品列表
     handleClickTitle(val, index) {
       this.selected.index = index;
       this.selected.val = val.title;