属性筛选

src/api/goods.js

@@ -22,4 +22,8 @@ export default {
   getProductTopCategory(data) {
     return requestPOST(`${process.env.OLSHOP_URL}/product/get_product_top_category`, data)
   },
+  //查询商品属性
+  query_product_attribute_values_list(data) {
+    return requestPOST(`${process.env.OLSHOP_URL}/product/query_product_attribute_values_list`, data)
+  },
 };

src/components/common/GoodsFliters.vue

@@ -259,6 +259,87 @@
               </div>
             </div>
           </div>
+          <!-- 属性 -->
+          <div
+            class="list clearfix brand-wrap"
+            v-for="(ele, index) in attributeList"
+            :key="index"
+            v-show="ele.specificationValueList && ele.specificationValueList.length"
+          >
+            <div class="tit">
+              <div class="tit-title">{{ ele.attributeName }}</div>
+            </div>
+            <div class="brand-list">
+              <div
+                v-if="ele.specificationValueList &&ele.specificationValueList.length <= 9"
+              >
+                <div
+                  class="brand-item"
+                  v-for="(item,index1) in ele.specificationValueList"
+                  :key="index1"
+                >
+                  <div
+                    class="brand-item-text line-clamp1"
+                    @click="selectAttributeValue(item)"
+                    :class="item.selectFlag? 'brand-active': ''"
+                  >
+                    {{ item.attributeValue }}
+                    <img
+                      src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
+                      v-if="item.selectFlag"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div
+                v-if="ele.specificationValueList &&ele.specificationValueList.length > 9"
+              >
+                <div
+                  class="brand-item"
+                  v-for="(item,index2) in ele.specificationValueList1"
+                  :key="index2"
+                >
+                  <div
+                    class="brand-item-text line-clamp1"
+                    :class="item.selectFlag? 'brand-active': ''"
+                    @click="selectAttributeValue(item)"
+                  >
+                    {{ item.attributeValue }}
+                    <img
+                      src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
+                      v-if="item.selectFlag"
+                    />
+                  </div>
+                </div>
+                <div v-if="ele.brandMore">
+                  <div
+                    class="brand-item"
+                    v-for="(item,index3) in ele.specificationValueList2"
+                    :key="index3"
+                  >
+                    <div
+                      class="brand-item-text line-clamp1"
+                      :class="item.selectFlag? 'brand-active': ''"
+                      @click="selectAttributeValue(item)"
+                    >
+                      {{ item.attributeValue }}
+                      <img
+                        src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
+                        v-if="item.selectFlag"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="more"
+                  v-if="ele.specificationValueList.length > 9 && !ele.brandMore"
+                  @click="ele.brandMore = true"
+                >
+                  查看更多 <van-icon name="arrow" color="#000" size="14" />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
         <div class="fliterBtn van-hairline--top">
           <div class="btns">
@@ -287,6 +368,7 @@ export default {
         brandActiveNameList: [],
         goodsSpecificationIds: [],
         categoryIdList: [],
+        productAttributeIds: [],
       },
       categoryId: "",
       GoodsSpecificationNameAndValuesListResponseDTO: [],
@@ -300,6 +382,7 @@ export default {
       categoryList2: [], //查看更多分类
       categoryMore: false, // 查看更多分类
       sourceType: 0, // 来源类型 0商品搜索页打开 1商品列表组件打开
+      attributeList: [], //属性列表
     };
   },
   components: {},
@@ -353,6 +436,8 @@ export default {
       if(this.sourceType == 1) {
         this.getProductTopCategory();
       }
+      // 查询商品属性
+      this.query_product_attribute_values_list();
       this.show = true;
     },
     close() {
@@ -383,6 +468,34 @@ export default {
           }
         });
     },
+    query_product_attribute_values_list() {
+      let query = {
+        filterFieldsShowFlag: 1,
+      }
+      goodsApi.query_product_attribute_values_list(query).then(res=>{
+        if(res.data.code == "200" && res.data.data && res.data.data.length){
+          this.attributeList = res.data.data || [];
+          this.attributeList.forEach(
+              (ele) => {
+                this.$set(ele, "brandMore", false);
+                if (ele.specificationValueList) {
+                  ele.specificationValueList.forEach((val) => {
+                    val.selectFlag = false;
+                    this.$set(val, "id", val.attributeValueIds[0]);
+                    this.$set(val, "ids", val.attributeValueIds);
+                    if(this.submitFliterVal.productAttributeIds.includes(val.id)) {
+                      val.selectFlag = true;
+                    }
+                  });
+                }
+                ele.specificationValueList1 = ele.specificationValueList.slice(0, 8);
+                ele.specificationValueList2 = ele.specificationValueList.slice(8);
+              }
+            );
+          console.log(this.attributeList,'--this.attributeList')
+        }
+      })
+    },
     getProductBrand() {
       goodsApi.queryProductBrand({
           page: 1,
@@ -455,6 +568,20 @@ export default {
         }
       });
     },
+    selectAttributeValue(item) {
+      item.ids.forEach((id) => {
+        if (!this.submitFliterVal.productAttributeIds.includes(id)) {
+          this.submitFliterVal.productAttributeIds.push(id);
+          item.selectFlag = true;
+        } else {
+          this.submitFliterVal.productAttributeIds.splice(
+            this.submitFliterVal.productAttributeIds.indexOf(id),
+            1
+          );
+          item.selectFlag = false;
+        }
+      });
+    },
     selectBrand(item) {
       console.log(item, "----------------------1531");
       console.log(
@@ -503,6 +630,7 @@ export default {
       this.submitFliterVal.brandIdList = [];
       this.submitFliterVal.brandActiveNameList = [];
       this.submitFliterVal.categoryIdList = [];
+      this.submitFliterVal.goodsSpecificationIds = [];
       this.brandList.forEach(item=>{
         item.selectFlag = false;
       });
@@ -520,7 +648,17 @@ export default {
           ele.specificationValueList2 = ele.specificationValueList.slice(8);
         }
       );
-      this.submitFliterVal.goodsSpecificationIds = [];
+      this.attributeList.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);
+        }
+      );
       console.log(this.submitFliterVal,'--------重置')
     },
     // 提交筛选

static/nativeComponents/GoodsList/index.js

@@ -63,6 +63,7 @@ const componentOptions = {
       brandActiveNameList: [],
       goodsSpecificationIds: [],
       categoryIdList: [],
+      productAttributeIds: [],
     },
     randomNumber: "",
     selectScreen: false, // 筛选选中状态
@@ -92,6 +93,7 @@ const componentOptions = {
         || val.submitFliterVal.brandActiveNameList.length>0
         || val.submitFliterVal.goodsSpecificationIds.length>0
         || val.submitFliterVal.categoryIdList.length>0
+        || val.submitFliterVal.productAttributeIds.length>0
         _this.setData({
           submitFliterVal: val.submitFliterVal,
           selectScreen,
@@ -276,6 +278,8 @@ const componentOptions = {
           query.sortColumn = this.data.filterType == -1 ? "" : this.data.filterType
           query.sortType = this.data.filterType == 2 ? this.data.filterPriceType : "";
           query.goodsSpecificationIds = this.data.submitFliterVal.goodsSpecificationIds;
+          query.categoryIdList = this.data.submitFliterVal.categoryIdList;
+          query.productAttributeIds = this.data.submitFliterVal.productAttributeIds;
           query.minPrice = this.data.submitFliterVal.minPrice;
           query.maxPrice = this.data.submitFliterVal.maxPrice;
         }

static/nativeComponents/GoodsList/index.wxml

@@ -149,7 +149,7 @@
     <view class="goods-heap-Item" wx:if="{{datas.componentData.style==='heap'}}">
       <heap-item datas="{{datas}}"></heap-item>
     </view>
-    <view class="noGoods" wx:if="{{datas.componentData.goodsList.length == 0 && datas.componentData.filterComponentsFlag && !loading}}">
+    <view class="noGoods" wx:if="{{datas.componentData.goodsList.length == 0 && datas.componentData.filterComponentsFlag && !loading && datas.componentData.style != 'rowList'}}">
       <image mode="widthFix" src="https://cdn.mayi888.com/static/img/empty-goods.png"></image>
       没有找到商品
     </view>