Skip to content

M
mayi-mp-shop
Commit 79d65692 by 李嘉林
Options

筛选支持分类

parent dfb4b39a
Showing with 183 additions and 38 deletions
src/api/goods.js
......@@ -18,4 +18,8 @@ export default {
queryProductBrand(data) {
return requestPOST(`${process.env.OLSHOP_URL}/product/query_brand_by_page`, data)
},
//查询商品品牌
getProductTopCategory(data) {
return requestPOST(`${process.env.OLSHOP_URL}/product/get_product_top_category`, data)
},
};
src/components/common/GoodsFliters.vue
......@@ -21,86 +21,81 @@
/>
</div>
</div>
<div
class="list clearfix brand-wrap"
v-for="(ele, index) in GoodsSpecificationNameAndValuesListResponseDTO"
:key="index"
v-show="ele.specificationValueList && ele.specificationValueList.length"
>
<!-- 分类 -->
<div class="list clearfix brand-wrap" v-if="showCategoryFlag">
<div class="tit">
<div class="tit-title">{{ ele.specificationName }}</div>
<div class="tit-title">分类</div>
<div class="tit-list" v-if="selectCategoryNameList.length>0">
<span class="line-clamp1 brands fl">{{
selectCategoryNameListStr
}}</span>
<span class="fl">(共{{ selectCategoryNameList.length }}个)</span>
</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"
>
<template v-if="categoryList.length <= 9">
<div class="brand-item" v-for="(item,index) in categoryList" :key="index">
<div
class="brand-item-text line-clamp1"
@click="selectBrandGoodsSpecification(item)"
@click="selecCategory(item)"
:class="item.selectFlag? 'brand-active': ''"
>
{{ item.specificationValue }}
{{ item.categoryName }}
<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"
>
</template>
<template v-else>
<div
class="brand-item"
v-for="(item,index2) in ele.specificationValueList1"
:key="index2"
v-for="(item,index) in categoryList2"
:key="index"
>
<div
class="brand-item-text line-clamp1"
:class="item.selectFlag? 'brand-active': ''"
@click="selectBrandGoodsSpecification(item)"
@click="selecCategory(item)"
>
{{ item.specificationValue }}
{{ item.categoryName }}
<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">
<template v-if="categoryMore">
<div
class="brand-item"
v-for="(item,index3) in ele.specificationValueList2"
:key="index3"
v-for="(item,index) in categoryList2"
:key="index"
>
<div
class="brand-item-text line-clamp1"
:class="item.selectFlag? 'brand-active': ''"
@click="selectBrandGoodsSpecification(item)"
@click="selecCategory(item)"
>
{{ item.specificationValue }}
{{ item.categoryName }}
<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>
</template>
<div
class="more"
v-if="ele.specificationValueList.length > 9 && !ele.brandMore"
@click="ele.brandMore = true"
v-if="categoryList.length > 9 && !categoryMore"
@click="categoryMore = true"
>
查看更多 <van-icon name="arrow" color="#000" size="14" />
</div>
</template>
</div>
</div>
</div>
<!-- 品牌 -->
<div class="list clearfix brand-wrap">
<div class="tit">
<div class="tit-title">品牌</div>
......@@ -183,6 +178,87 @@
</div>
</div>
</div>
<!-- 规格 -->
<div
class="list clearfix brand-wrap"
v-for="(ele, index) in GoodsSpecificationNameAndValuesListResponseDTO"
:key="index"
v-show="ele.specificationValueList && ele.specificationValueList.length"
>
<div class="tit">
<div class="tit-title">{{ ele.specificationName }}</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="selectBrandGoodsSpecification(item)"
: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="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="selectBrandGoodsSpecification(item)"
>
{{ item.specificationValue }}
<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="selectBrandGoodsSpecification(item)"
>
{{ item.specificationValue }}
<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">
......@@ -210,15 +286,20 @@ export default {
brandIdList: [], //品牌
brandActiveNameList: [],
goodsSpecificationIds: [],
categoryIdList: [],
},
categoryId: "",
GoodsSpecificationNameAndValuesListResponseDTO: [],
brandMore: false,
brandList: [],
brandListCopy: [],
brandList2: [],
specifications: [],
randomNumber: "",
hideBrandSelectFlag: false, // 隐藏品牌筛选
categoryList: [], //暂时为一级分类列表
categoryList2: [], //查看更多分类
categoryMore: false, // 查看更多分类
sourceType: 0, // 来源类型 0商品搜索页打开 1商品列表组件打开
};
},
components: {},
......@@ -232,6 +313,20 @@ export default {
brandActiveNameListStr() {
return this.submitFliterVal.brandActiveNameList.join("、");
},
// 是否显示分类筛选
showCategoryFlag() {
return this.sourceType == 1 && this.categoryId == "";
},
selectCategoryNameListStr() {
return this.selectCategoryNameList.join("、");
},
selectCategoryNameList() {
let filterList = this.categoryList.filter(item=>this.submitFliterVal.categoryIdList.includes(item.id)) || [];
if(filterList) {
return filterList.map(item=>item.categoryName);
}
return [];
},
},
created() {
this.query_specification_name_and_values_list();
......@@ -246,6 +341,7 @@ export default {
methods: {
open(val) {
console.log("筛选商品open",val);
this.sourceType = val.sourceType;
this.submitFliterVal = val.submitFliterVal;
this.categoryId = val.categoryId;
this.brandListCopy = val.filterBrand;
......@@ -253,6 +349,10 @@ export default {
this.hideBrandSelectFlag = val.hideBrandSelectFlag;
console.log(this.submitFliterVal,'-------------this.submitFliterVal')
this.getProductBrand();
// 商品列表组件打开获取一级分类筛选
if(this.sourceType == 1) {
this.getProductTopCategory();
}
this.show = true;
},
close() {
......@@ -318,6 +418,28 @@ export default {
}
});
},
getProductTopCategory() {
let query = {
level: 1,
}
goodsApi.getProductTopCategory(query).then(res=>{
if(res.data.code == "200"){
res.data.data.list.forEach(item=>{
item.selectFlag = false;
})
let list = [];
list = res.data.data.list;
list.forEach(item=>{
if(this.submitFliterVal.categoryIdList.includes(item.id)) {
item.selectFlag = true;
}
})
this.categoryList = list;
this.categoryList2 = this.categoryList.slice(8);
console.log(this.categoryList,'--this.categoryList')
}
})
},
selectBrandGoodsSpecification(item) {
console.log("----------------",item)
item.ids.forEach((id) => {
......@@ -359,6 +481,20 @@ export default {
"----------------------1532"
);
},
selecCategory(item) {
console.log(item, "----------------------1531");
console.log(this.submitFliterVal.categoryIdList, "----------------------1533");
if (!this.submitFliterVal.categoryIdList.includes(item.id)) {
this.submitFliterVal.categoryIdList.push(item.id);
item.selectFlag = true;
} else {
this.submitFliterVal.categoryIdList.splice(
this.submitFliterVal.categoryIdList.indexOf(item.id),
1
);
item.selectFlag = false;
}
},
// 重置筛选
resetFliter() {
this.submitFliterVal.minPrice = "";
......@@ -366,6 +502,7 @@ export default {
this.submitFliterVal.attribute = [];
this.submitFliterVal.brandIdList = [];
this.submitFliterVal.brandActiveNameList = [];
this.submitFliterVal.categoryIdList = [];
this.brandList.forEach(item=>{
item.selectFlag = false;
});
......@@ -644,7 +781,7 @@ button {
padding: 10px 5px 0 5px;
// border-top: 1px solid #eeeeed;
margin-top: 10px;
max-height: 40vh;
max-height: 46vh;
overflow-y: auto;
.brand-item {
width: 29%;
......
static/nativeComponents/GoodsList/index.js
......@@ -62,6 +62,7 @@ const componentOptions = {
brandIdList: [], //品牌
brandActiveNameList: [],
goodsSpecificationIds: [],
categoryIdList: [],
},
randomNumber: "",
selectScreen: false, // 筛选选中状态
......@@ -82,6 +83,7 @@ const componentOptions = {
|| val.submitFliterVal.brandIdList.length>0
|| val.submitFliterVal.brandActiveNameList.length>0
|| val.submitFliterVal.goodsSpecificationIds.length>0
|| val.submitFliterVal.categoryIdList.length>0
_this.setData({
submitFliterVal: val.submitFliterVal,
selectScreen,
......@@ -149,6 +151,7 @@ const componentOptions = {
filterBrand: _this.data.datas.componentData.filterBrand,
randomNumber: _this.data.randomNumber,
hideBrandSelectFlag: _this.data.datas.componentData.filterBrand.length>0?true:false,
sourceType: 1,
});
} else {
if(item == 2) {
......@@ -256,7 +259,8 @@ const componentOptions = {
? 1
: 0,
whetherFindMultiShopFlag: 1,
brandIdList: this.data.submitFliterVal.brandIdList || []
brandIdList: this.data.submitFliterVal.brandIdList || [],
categoryIdList: this.data.submitFliterVal.categoryIdList || [],
}; // 当前页 // 一页多少条 //查询销售数量 //查询收藏数 //是否使用虚拟销售数量 //是否使用虚拟收藏人数 //是否查询商品佣金（0：不查询，1：展示，为空不查佣金） //是否查询会员价 1是 0否 //是否展示营销标签 1是 0否 //是否查询多商户 //商城使用
// 启用了筛选组件
if(this.data.datas.componentData.filterComponentsFlag == true){
......
static/nativeComponents/GoodsList/index.wxml
......@@ -134,7 +134,7 @@
>
<goods-item
datas="{{datas}}"
items="{{goodsList[index]}}"
items="{{datas.componentData.goodsList[index]}}"
indexs="{{index}}"
></goods-item>
</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