feat: ✨ 楼层装修新增绑定分类功能

manager/src/components/lili-dialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :styles="{ top: '120px' }" width="1160" z-index="10000" @on-cancel="clickClose" @on-ok="clickOK" v-model="flag" :mask-closable="false" scrollable>
+  <Modal :styles="{ top: '120px' }" width="1160" :z-index="10000" @on-cancel="clickClose" @on-ok="clickOK" v-model="flag" :mask-closable="false" scrollable>
     <template v-if="flag">
       <goodsDialog @selected="(val) => {goodsData = val;}"
         v-if="goodsFlag" ref="goodsDialog" :selectedWay='goodsData'/>

manager/src/components/lili-dialog/template/category.vue

@@ -114,5 +114,6 @@ export default {
 }
 .wrapper {
   overflow: hidden;
+  display: flex;
 }
 </style>

manager/src/views/page-decoration/wap/config.js

@@ -521,21 +521,25 @@ export const modelData = [
               title: "精选",
               desc: "电子推荐",
               ___index: 0,
+              bindCategory:""
             },
             {
               title: "实惠",
               desc: "便宜好货",
               ___index: 1,
+              bindCategory:""
             },
             {
               title: "进口",
               desc: "国际自营",
               ___index: 2,
+              bindCategory:""
             },
             {
               title: "推荐",
               desc: "喂奶推荐",
               ___index: 3,
+              bindCategory:""
             }
           ],
           listWay: [
@@ -561,6 +565,7 @@ export const modelData = [
       ]
     }
   },
+
   {
     type: "notice",
     name: "公告",

manager/src/views/page-decoration/wap/decorate.scss

@@ -6,8 +6,18 @@
 .decorate-view-link {
   font-size: 12px;
   margin: 0 4px;
+  flex:8;
   color: #999;
 }
+.decorate-view-btn{
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  >button{
+
+    width: 70px;
+  }
+}
 
 .decorate-view-style {
   border: 1px solid #ededed;
@@ -97,6 +107,7 @@
 
 .decorate-view-title {
   margin-right: 10px;
+
 }
 
 .decorate-item {
@@ -161,3 +172,25 @@
 .active {
   background: #ededed;
 }
+.title-item{
+  border-bottom: 1px solid #ededed;
+  padding:10px 10px 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  >.title-btn{
+    display: flex;
+  }
+}
+.title-goodsName{
+  /* 适用于webkit内核和移动端 */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+
+}
+.title-tooltip{
+  white-space: normal;
+}

manager/src/views/page-decoration/wap/decorate.vue

@@ -2,6 +2,7 @@
   <div class="decorate">
     <div class="decorate-title">
       {{ res.name }}
+
       <Button
         style="margin-left: 20px"
         size="small"
@@ -25,6 +26,12 @@
         >选择促销活动</Button
       >
     </div>
+    <Alert type="warning" v-if="res.name == '商品分类'">装修提示
+        <template slot="desc">
+            <div style="color:red"> 如果当前装修内容不是最后一项且绑定为分类，则会默认展示当前分类的100条商品内容。</div>
+            <div style="color:red"> 如果当前装修内容是最后一项且绑定为分类，则会默认会根据当前分类触底加载</div>
+        </template>
+     </Alert>
 
     <!-- 右侧显示抽屉 -->
     <Drawer title="选择风格" :closable="false" width="400" v-model="styleFlag">
@@ -110,12 +117,14 @@
               </div>
             </div>
             <div class="decorate-view">
-              <div class="decorate-view-title">绑定商品</div>
+              <div class="decorate-view-title">绑定</div>
+              <div   class="decorate-view-link">
               <div
-                class="decorate-view-link"
+
                 v-if="res.options.list[0].listWay.length != 0"
               >
                 <!-- 绑定商品选择器回调已选择的商品 -->
+
                 <div
                   v-if="
                     title_item.___index == bindGoods.___index ||
@@ -124,18 +133,53 @@
                   v-for="(bindGoods, bindGoodsIndex) in res.options.list[0]
                     .listWay"
                   :key="bindGoodsIndex"
+                  class="title-item wes-2"
                 >
-                  {{ bindGoods.title }},
+                  <Tooltip max-width="200" placement="left">
+                    <div slot="content" class="title-tooltip">
+                      {{ bindGoods.title }}
                     </div>
+                    <div class="title-goodsName">
+                      {{ bindGoods.title }}
                     </div>
-              <div>
+                  </Tooltip>
+                  <div class="title-btn">
                     <Button
-                  @click="bindGoodsId(title_item)"
+                      @click="
+                        slotGoods(
+                          res.options.list[0].listWay,
+                          title_item.___index,
+                          bindGoods,
+                          'up'
+                        )
+                      "
+                      style="margin-right: 10px"
+                      size="small"
+                      >上移</Button
+                    >
+                  </div>
+                </div>
+
+              </div>
+               <!-- 显示绑定分类 -->
+                <div v-if="title_item.bindCategory" >
+                  绑定分类为：{{ title_item.bindCategory.name }}
+                </div>
+              </div>
+
+              <div class="decorate-view-btn">
+                <Button
+                  @click="bindGoodsId(title_item,title_index)"
                   size="small"
-                  ghost
-                  type="primary"
                   >选择商品</Button
                 >
+                <Button
+                  @click="bindGoodsCategory(title_index)"
+                  size="small"
+
+                  style='margin-top:20px'
+                  >选择分类</Button
+                >
               </div>
             </div>
           </div>
@@ -339,9 +383,11 @@
                 {{
                   ways.find((e) => {
                     return item.url.___type == e.name;
-                  }) ? ways.find((e) => {
+                  })
+                    ? ways.find((e) => {
                         return item.url.___type == e.name;
-                  }).title : '发现'
+                      }).title
+                    : "发现"
                 }}
                 -
                 <!-- 当选择完链接之后的专题名称 -->
@@ -428,6 +474,10 @@
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
 
+    <Modal width='800px' title="选择分类" v-model="enableSelectCategory">
+      <categoryTemplate v-if="enableSelectCategory" @selected="confirmCategory" />
+    </Modal>
+
     <hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
 
     <Modal width="1200px" v-model="picModelFlag">
@@ -440,10 +490,12 @@ import ossManage from "@/views/sys/oss-manage/ossManage";
 import { modelData } from "./config";
 import hotzone from "@/components/hotzone";
 import ways from "@/components/lili-dialog/wap.js"; // 选择链接的类型
+import categoryTemplate from "@/components/lili-dialog/template/category"; // 选择链接的类型
 export default {
   components: {
     ossManage,
     hotzone,
+    categoryTemplate
   },
   data() {
     return {
@@ -460,6 +512,8 @@ export default {
       selectedGoods: "", // 已选商品
       selectedLinks: "", // 已选链接
       modelList: "", // 装修列表
+      enableSelectCategory:false, //商品是否绑定分类
+      goodsSelectedIndex:0, //绑定商品分类的索引
     };
   },
   watch: {
@@ -470,6 +524,59 @@ export default {
   },
   props: ["res"],
   methods: {
+    // 选择分类
+    confirmCategory(val){
+      let data = {...this.res.options.list[0].titleWay[this.goodsSelectedIndex]}
+      let callback = {
+        id:val[0].id,
+        name:val[0].name,
+        categoryIdWay:val[0].id
+      };
+      data = {
+        ...data,
+        bindCategory:callback
+      }
+      this.res.options.list[0].listWay = this.res.options.list[0].listWay.filter(item=>{
+        return item.___index != this.goodsSelectedIndex
+      })
+      this.res.options.list[0].titleWay[this.goodsSelectedIndex] = data
+
+      console.log( this.res.options.list[0])
+    },
+    // 商品排序
+    slotGoods(list, key, val) {
+      const newVal = [];
+      let newValIndex = 0;
+      // 给当前点击的商品分组
+      list.forEach((item, index) => {
+        if (item.___index == key) {
+          newVal.push(item);
+        }
+      });
+      // 获得当前点击商品的索引
+      newVal.forEach((item, index) => {
+        if (item.id == val.id) {
+          newValIndex = index;
+        }
+      });
+      // 进行商品排序
+      this.upData(newVal, newValIndex);
+      if (list.length == newVal.length) {
+        list = newVal;
+      } else {
+        let newList;
+        newVal.forEach((item, index) => {
+          newList = list.filter((child) => {
+            return child.id != item.id && child.___index != key;
+          });
+        });
+        list = [...newList, ...newVal];
+      }
+
+      this.$set(this.res.options.list[0], "listWay", list);
+    },
+
+    // 轮播图排序
     slotBanner(val, key, index, down) {
       console.log(val);
       if (down == "down") {
@@ -534,13 +641,22 @@ export default {
         };
       });
       this.res.options.list[0].listWay.push(...data);
+      // 清除已经绑定的分类
+      this.res.options.list[0].titleWay[this.goodsSelectedIndex].bindCategory = ""
       this.linkType = "";
     },
     // 绑定商品
-    bindGoodsId(val) {
+    bindGoodsId(val,index) {
       this.selectedGoods = val;
+      this.goodsSelectedIndex = index
       this.liliDialogFlag(true);
     },
+    // 绑定分类
+    bindGoodsCategory(index,key){
+      this.enableSelectCategory = true
+      this.goodsSelectedIndex = index
+
+    },
     // 点击抽屉
     clickDrawer(item, index) {
       this.$emit("handleDrawer", item);

manager/src/views/page-decoration/wap/wapList.vue

@@ -97,13 +97,13 @@ export default {
     };
   },
   watch: {
-    // params: {
+    params: {
-    //   handler(val) {
+      handler(val) {
-    //     // this.pageNumber++;
+        // this.pageNumber++;
-    //     this.init();
+        this.init();
-    //   },
+      },
-    //   deep: true,
+      deep: true,
-    // },
+    },
   },
   mounted() {
     this.init();