Authored by 李奇

sub filter change

... ... @@ -61,7 +61,7 @@ module.exports = {
}
this.$emit('select', {
value: this.currentValue,
subType: this.subType
subType: this.type
});
},
renderData() {
... ...
... ... @@ -20,6 +20,13 @@
const _ = require('lodash');
const bus = require('common/vue-bus');
const typeMap = {
品牌: 'brand',
品类: 'group_sort',
颜色: 'color',
尺寸: 'size'
};
module.exports = {
props: {
name: String,
... ... @@ -75,21 +82,16 @@ module.exports = {
this.chosenVal = names.join(',');
},
expandSub(name){
const typeMap = {
品牌: 'brand',
品类: 'group_sort',
颜色: 'color'
};
bus.$emit('expand.subFilter', typeMap[name]);
},
setAllChoices(){
let isLimited = false;
const len = this.choices.length;
const overCut = ['品牌', '品类', '颜色', '尺寸'];
this.allChoices = this.choices.slice();
this.initialChoices = this.choices.slice();
isLimited = ['品牌', '品类', '颜色'].indexOf(this.name) > -1;
isLimited = overCut.indexOf(this.name) > -1;
if (len > 11 && isLimited) {
this.showMore = true;
this.allChoices = this.choices.slice(0, 11);
... ... @@ -108,6 +110,19 @@ module.exports = {
},
foldExcept(name) {
this.show = this.name === name
},
subFilterChange(sub){
if (typeMap[this.name] === sub.subType) {
let names = [];
if (sub.value && sub.value.length) {
_.each(sub.value, item => {
names.push(item.name);
});
this.show = false;
this.chosenVal = names.join(',');
}
}
}
},
created(){
... ... @@ -115,6 +130,7 @@ module.exports = {
bus.$on('chosenVal.clear', this.clearChosenVal);
bus.$on('chosenVal.search', this.searchChosenVal);
bus.$on('fold.choice.except', this.foldExcept);
bus.$on('subFilter.change', this.subFilterChange);
},
components: {}
};
... ...
... ... @@ -22,7 +22,7 @@
</div>
</div>
<filter-sub :value="valueData" :type="subType"
:data="subFilterData" v-ref:filter-sub @select="subChange"></filter-sub>
:data="subFilterData" v-ref:filter-sub @select="subFilterChange"></filter-sub>
</div>
</template>
<script>
... ... @@ -97,7 +97,10 @@ module.exports = {
group_sort: [],
brand: [],
color: [],
}
size: []
},
valueData: [],
subFilterData: []
}
},
computed: {
... ... @@ -114,12 +117,6 @@ module.exports = {
'icon-sort-up': !this.filterDown,
'icon-sort-down': this.filterDown
}
},
subFilterData() {
return this.filter ? this.filter[this.subType] : {};
},
valueData() {
return this.values && this.values[this.subType];
}
},
methods: {
... ... @@ -213,8 +210,8 @@ module.exports = {
this.subType = type;
this.$refs.filterSub.isVisible = true;
},
subChange(v){
console.log('subSelected=', v);
subFilterChange(sub){
bus.$emit('subFilter.change', sub);
}
},
watch: {
... ... @@ -233,6 +230,10 @@ module.exports = {
}
this.showLay();
},
subType(type){
this.valueData = this.values && this.values[type];
this.subFilterData = this.filter ? this.filter[type] : {};
}
},
components: {
... ...
<template>
<div>
<ul class="item-action">
<li><a href="{{brand && brand.brand_domain | brandUrl}}"><i class="brand icon"></i><span
<li><a href="{{brand && brand.brand_domain | brandUrl}}"><i class="brand icon icon-brand"></i><span
class="action-text">{{brand && brand.brand_name
}}</span></a></li>
<li><i class="icon"
... ... @@ -19,12 +19,9 @@
font-size: 0;
text-align: center;
.brand {
display: inline-block;
width: 36px;
height: 33px;
background: resolve('product/brand.png');
background-size: cover;
.brand.icon {
font-size: 54px;
margin-bottom: 10px;
}
li {
... ...