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