Skip to content

M
mayi-mp-shop
Commit fe0771ab by 李嘉林
Options

属性筛选

parent f3e0b049
Showing with 148 additions and 2 deletions
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment