Skip to content

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

商品筛选

parent db631f4a
Showing with 89 additions and 48 deletions
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`);
......
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