商品筛选

src/components/common/GoodsFliters.vue

@@ -31,7 +31,7 @@
               <div class="tit-title">{{ ele.specificationName }}</div>
             </div>
             <div class="brand-list">
-              <template
+              <div
                 v-if="ele.specificationValueList &&ele.specificationValueList.length <= 9"
               >
                 <div
@@ -42,55 +42,55 @@
                   <div
                     class="brand-item-text line-clamp1"
                     @click="selectBrandGoodsSpecification(item)"
-                    :class="submitFliterVal.goodsSpecificationIds.includes(item.id)? 'brand-active': ''"
+                    :class="item.selectFlag? 'brand-active': ''"
                   >
                     {{ item.specificationValue }}
                     <img
                       src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
-                      v-if="submitFliterVal.goodsSpecificationIds.includes(item.id)"
+                      v-if="item.selectFlag"
                     />
                   </div>
                 </div>
-              </template>
-              <template
+              </div>
+              <div
                 v-if="ele.specificationValueList &&ele.specificationValueList.length > 9"
               >
                 <div
                   class="brand-item"
-                  v-for="(item,index2) in ele.specificationValueList.slice(0, 8)"
+                  v-for="(item,index2) in ele.specificationValueList1"
                   :key="index2"
                 >
                   <div
                     class="brand-item-text line-clamp1"
-                    :class="submitFliterVal.goodsSpecificationIds.includes(item.id)? 'brand-active': ''"
+                    :class="item.selectFlag? 'brand-active': ''"
                     @click="selectBrandGoodsSpecification(item)"
                   >
                     {{ item.specificationValue }}
                     <img
                       src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
-                      v-if="submitFliterVal.goodsSpecificationIds.includes(item.id)"
+                      v-if="item.selectFlag"
                     />
                   </div>
                 </div>
-                <template v-if="ele.brandMore">
+                <div v-if="ele.brandMore">
                   <div
                     class="brand-item"
-                    v-for="(item,index3) in ele.specificationValueList.slice(8)"
+                    v-for="(item,index3) in ele.specificationValueList2"
                     :key="index3"
                   >
                     <div
                       class="brand-item-text line-clamp1"
-                      :class="submitFliterVal.goodsSpecificationIds.includes(item.id)? 'brand-active': ''"
+                      :class="item.selectFlag? 'brand-active': ''"
                       @click="selectBrandGoodsSpecification(item)"
                     >
                       {{ item.specificationValue }}
                       <img
                         src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
-                        v-if="submitFliterVal.goodsSpecificationIds.includes(item.id)"
+                        v-if="item.selectFlag"
                       />
                     </div>
                   </div>
-                </template>
+                </div>
                 <div
                   class="more"
                   v-if="ele.specificationValueList.length > 9 && !ele.brandMore"
@@ -98,7 +98,7 @@
                 >
                   查看更多 <van-icon name="arrow" color="#000" size="14" />
                 </div>
-              </template>
+              </div>
             </div>
           </div>
           <div class="list clearfix brand-wrap" v-if="!hideBrandSelectFlag">
@@ -109,7 +109,7 @@
                 v-if="submitFliterVal.brandActiveNameList.length"
               >
                 <span class="line-clamp1 brands fl">{{
-                  submitFliterVal.brandActiveNameList.join("、")
+                  brandActiveNameListStr
                 }}</span>
                 <span class="fl"
                   >(共{{ submitFliterVal.brandActiveNameList.length }}个)</span
@@ -117,62 +117,62 @@
               </div>
             </div>
             <div class="brand-list">
-              <template v-if="brandList.length <= 9">
+              <div v-if="brandList.length <= 9">
                 <div
                   class="brand-item"
-                  v-for="(item,index4) in brandList"
+                  v-for="(item,index4) in useBrandList"
                   :key="index4"
                 >
                   <div
                     class="brand-item-text line-clamp1"
                     @click="selectBrand(item)"
-                    :class="submitFliterVal.brandIdList.includes(item.id)? 'brand-active': ''"
+                    :class="item.selectFlag? 'brand-active': ''"
                   >
                     {{ item.brandName }}
                     <img
                       src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
-                      v-if="submitFliterVal.brandIdList.includes(item.id)"
+                      v-if="item.selectFlag"
                     />
                   </div>
                 </div>
-              </template>
-              <template v-else>
+              </div>
+              <div v-else>
                 <div
                   class="brand-item"
-                  v-for="(item,index5) in brandList.slice(0, 8)"
+                  v-for="(item,index5) in useBrandList"
                   :key="index5"
                 >
                   <div
                     class="brand-item-text line-clamp1"
-                    :class="submitFliterVal.brandIdList.includes(item.id)? 'brand-active': ''"
+                    :class="item.selectFlag? 'brand-active': ''"
                     @click="selectBrand(item)"
                   >
                     {{ item.brandName }}
                     <img
                       src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
-                      v-if="submitFliterVal.brandIdList.includes(item.id)"
+                      v-if="item.selectFlag"
                     />
                   </div>
                 </div>
-                <template v-if="brandMore">
+                <div v-if="brandMore">
                   <div
                     class="brand-item"
-                    v-for="(item,index6) in brandList.slice(8)"
+                    v-for="(item,index6) in brandList2"
                     :key="index6"
                   >
                     <div
                       class="brand-item-text line-clamp1"
-                      :class="submitFliterVal.brandIdList.includes(item.id)? 'brand-active': ''"
+                      :class="item.selectFlag? 'brand-active': ''"
                       @click="selectBrand(item)"
                     >
                       {{ item.brandName }}
                       <img
                         src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
-                        v-if="submitFliterVal.brandIdList.includes(item.id)"
+                        v-if="item.selectFlag"
                       />
                     </div>
                   </div>
-                </template>
+                </div>
                 <div
                   class="more"
                   v-if="brandList.length > 9 && !brandMore"
@@ -180,7 +180,7 @@
                 >
                   查看更多 <van-icon name="arrow" color="#000" size="14" />
                 </div>
-              </template>
+              </div>
             </div>
           </div>
         </div>
@@ -214,13 +214,23 @@ export default {
       GoodsSpecificationNameAndValuesListResponseDTO: [],
       brandMore: false,
       brandList: [],
-      specifications: [],
+      brandList2: [],
       randomNumber: "",
       hideBrandSelectFlag: false, // 隐藏品牌筛选
     };
   },
   components: {},
-  computed: {},
+  computed: {
+    useBrandList() {
+      if(this.brandList.length <= 9) {
+        return this.brandList
+      }
+      return this.brandList.slice(0, 8)
+    },
+    brandActiveNameListStr() {
+      return this.submitFliterVal.brandActiveNameList.join("、");
+    },
+  },
   created() {
     this.getProductBrand();
     this.query_specification_name_and_values_list();
@@ -256,10 +266,13 @@ export default {
                 this.$set(ele, "brandMore", false);
                 if (ele.specificationValueList) {
                   ele.specificationValueList.forEach((val) => {
+                    val.selectFlag = false;
                     this.$set(val, "id", val.specificationValueIds[0]);
                     this.$set(val, "ids", val.specificationValueIds);
                   });
                 }
+                ele.specificationValueList1 = ele.specificationValueList.slice(0, 8);
+                ele.specificationValueList2 = ele.specificationValueList.slice(8);
               }
             );
           }
@@ -272,37 +285,42 @@ export default {
           used: 1,
         })
         .then((res) => {
-          console.log(res);
+          console.log(res,'-------275');
           if (res.data.code == "200") {
+            res.data.data.list.forEach(item=>{
+              item.selectFlag = false;
+            })
             this.brandList = res.data.data.list;
+            this.brandList2 = this.brandList.slice(8);
+            console.log(this.brandList,'---------brandList')
           }
         });
     },
     selectBrandGoodsSpecification(item) {
+      console.log("----------------",item)
       item.ids.forEach((id) => {
         if (!this.submitFliterVal.goodsSpecificationIds.includes(id)) {
           this.submitFliterVal.goodsSpecificationIds.push(id);
+          item.selectFlag = true;
         } else {
           this.submitFliterVal.goodsSpecificationIds.splice(
             this.submitFliterVal.goodsSpecificationIds.indexOf(id),
             1
           );
+          item.selectFlag = false;
         }
       });
     },
     selectBrand(item) {
       console.log(item, "----------------------1531");
       console.log(
-        this.submitFliterVal.brandIdList,
-        "----------------------1532"
-      );
-      console.log(
         this.submitFliterVal.brandActiveNameList,
         "----------------------1533"
       );
-      if (!this.submitFliterVal.brandIdList.includes(item.id)) {
+      if (!item.selectFlag) {
         this.submitFliterVal.brandIdList.push(item.id);
         this.submitFliterVal.brandActiveNameList.push(item.brandName);
+        item.selectFlag = true;
       } else {
         this.submitFliterVal.brandIdList.splice(
           this.submitFliterVal.brandIdList.indexOf(item.id),
@@ -312,7 +330,12 @@ export default {
           this.submitFliterVal.brandIdList.indexOf(item.id),
           1
         );
+        item.selectFlag = false;
       }
+      console.log(
+        this.submitFliterVal.brandIdList,
+        "----------------------1532"
+      );
     },
     // 重置筛选
     resetFliter() {
@@ -322,12 +345,26 @@ export default {
       if (!this.hideBrandSelectFlag) {
         this.submitFliterVal.brandIdList = [];
         this.submitFliterVal.brandActiveNameList = [];
+        this.brandList.forEach(item=>{
+          item.selectFlag = false;
+        });
+        this.brandList2.forEach(item=>{
+          item.selectFlag = false;
+        });
       }
+      this.GoodsSpecificationNameAndValuesListResponseDTO.forEach(
+        (ele) => {
+          if (ele.specificationValueList) {
+            ele.specificationValueList.forEach((val) => {
+              val.selectFlag = false;
+            });
+          }
+          ele.specificationValueList1 = ele.specificationValueList.slice(0, 8);
+          ele.specificationValueList2 = ele.specificationValueList.slice(8);
+        }
+      );
       this.submitFliterVal.goodsSpecificationIds = [];
-
-      this.specifications.forEach((item, index) => {
-        item.index = "false";
-      });
+      console.log(this.submitFliterVal,'--------重置')
     },
     // 提交筛选
     submitFliter() {
@@ -350,6 +387,7 @@ export default {
         randomNumber: this.randomNumber,
       };
       // 向外传值
+      console.log(callbackObj,'----callbackObj')
       app.getFilterGoodsData(callbackObj);
       this.show = false;
     },
@@ -483,7 +521,7 @@ button {
         margin-top: 10px;
 
         .brand-item {
-          width: 33%;
+          width: 29%;
           padding: 0 5px;
           float: left;
           margin-bottom: 10px;
@@ -589,7 +627,7 @@ button {
       max-height: 40vh;
       overflow-y: auto;
       .brand-item {
-        width: 33%;
+        width: 29%;
         padding: 0 5px;
         float: left;
         margin-bottom: 10px;

static/nativeComponents/GoodsList/index.js

@@ -62,7 +62,7 @@ const componentOptions = {
       brandIdList: [], //品牌
       brandActiveNameList: [],
       goodsSpecificationIds: [],
-      randomNumber: random_string(6),
+      randomNumber: "",
     },
   },
   // 数据监听器
@@ -77,6 +77,7 @@ const componentOptions = {
         _this.setData({
           submitFliterVal: val.submitFliterVal,
         })
+        console.log(_this.data.submitFliterVal,'----------submitFliterVal')
         _this.init();
       }
       this.init();
@@ -139,10 +140,11 @@ const componentOptions = {
       if(item == 99) {
         // 展示筛选弹窗
         // wx.showToast({title:"暂未开发", icon:"error"})
+        let _this = this;
         app.openFilterGoods({
-          submitFliterVal: this.data.submitFliterVal,
-          randomNumber: this.data.randomNumber,
-          hideBrandSelectFlag: this.data.datas.componentData.filterBrand.length>0?true:false,
+          submitFliterVal: _this.data.submitFliterVal,
+          randomNumber: _this.data.randomNumber,
+          hideBrandSelectFlag: _this.data.datas.componentData.filterBrand.length>0?true:false,
         });
         // this.opt.bus.$emit("openGoodsFilters",{
         //   submitFliterVal: this.submitFliterVal,
@@ -170,6 +172,7 @@ const componentOptions = {
         titleIcon,
         mainColor: app.themeColor["--main-color"],
         "submitFliterVal.brandIdList": filterBrand,
+        randomNumber: random_string(6),
       });
       console.log(this.data.titleIcon, "----------------------------68");
       let ids = this.getStorageSync(`ids`);