fe / yohoblk-wap · Commits

Go to a project

Authored by 李奇
Commit 2689c8d49ab08067162d84827140737e0d11dc1c 1 parent 2bca614e

列表页筛选修改

Inline Side-by-side
Showing 3 changed files with 111 additions and 49 deletions
... ... @@ -7,8 +7,8 @@
</div>
<div class="choices" v-show="show">
<span v-for="(index, choice) in allChoices"
class="ellipsis choice"
@click="addChoice(index, choice)">
class="ellipsis choice" :class="{active: choice.isChosen}"
@click="toggleChoice(index, choice)">
{{name === '品类' ? choice.category_name : choice.name}}
</span>
<span v-if="showMore" class="choice more" @click="expandAll(name)">全部{{name
... ... @@ -17,6 +17,7 @@
</div>
</template>
<script>
const _ = require('lodash');
const bus = require('common/vue-bus');
module.exports = {
... ... @@ -34,18 +35,6 @@ module.exports = {
allChoices: []
}
},
computed: {
allChoices(){
const len = this.choices.length;
const isLimited = ['品牌', '品类'].indexOf(this.name) > -1;
if (len > 11 && isLimited) {
this.showMore = true;
return this.choices.slice(0, 11);
}
return this.choices.slice();
}
},
methods: {
toggle(name) {
if (this.show) {
... ... @@ -60,12 +49,14 @@ module.exports = {
this.show = true;
},
addChoice(index, choice) {
choice._chosen = true;
this.chosen.push({
index,
choice
});
toggleChoice(index, choice) {
const newChoice = {
name: choice.name,
category_name: choice.category_name,
isChosen: !choice.isChosen
};
this.allChoices.$set(index, newChoice);
},
expandAll(name){
switch (name) {
... ... @@ -74,9 +65,21 @@ module.exports = {
case '品类':
break;
}
},
setAllChoices(){
let isLimited = false;
const len = this.choices.length;
this.allChoices = this.choices.slice();
isLimited = ['品牌', '品类'].indexOf(this.name) > -1;
if (len > 11 && isLimited) {
this.showMore = true;
this.allChoices = this.choices.slice(0, 11);
}
}
},
watch: {
created(){
this.setAllChoices();
},
components: {}
};
... ...
<template>
<div class="top-filter clearfix">
<ul class="filter-type">
<li class="type-item" @click="toggleRec">{{activeSort.text}}<i class="icon" :class="recClass"></i></li>
<li class="type-item" @click="toggleFilter">筛选<i class="icon" :class="filterClass"></i></li>
</ul>
<div class="rec-detail" v-show="!recDown">
<ul class="re-items">
<li v-for="item in recItems" class="re-item"
:class="{active: activeSort.text === item.text}" @click="sortChange(item)">{{item.text}}</li>
<div class="filter-overlay" v-show="layFlag"></div>
<div class="filter-content">
<ul class="filter-type">
<li class="type-item" @click="toggleRec">{{activeSort.text}}<i class="icon" :class="recClass"></i></li>
<li class="type-item" @click="toggleFilter">筛选<i class="icon" :class="filterClass"></i></li>
</ul>
</div>
<div class="filter-detail" v-show="!filterDown">
<filter-item v-for="item in filterItems" :name="item.name" :choices="item.choices"></filter-item>
<div class="action">
<p class="tip">您可以选择一个或多个筛选项进行筛选</p>
<a class="action-btn filter-btn">筛选</a>
<a class="action-btn clear-btn">清空</a>
<div class="rec-detail" v-show="!recDown">
<ul class="re-items">
<li v-for="item in recItems" class="re-item"
:class="{active: activeSort.text === item.text}" @click="sortChange(item)">{{item.text}}</li>
</ul>
</div>
<div class="filter-detail" v-show="!filterDown">
<filter-item v-for="item in filterItems" :name="item.name" :choices="item.choices"></filter-item>
<div class="action">
<p class="tip">您可以选择一个或多个筛选项进行筛选</p>
<a class="action-btn filter-btn" @click="filterSearch">筛选</a>
<a class="action-btn clear-btn" @click="clearFilter">清空</a>
</div>
</div>
</div>
</div>
... ... @@ -51,34 +54,29 @@ module.exports = {
filterItems: [
{
name: '品牌',
val: '',
choices: this.filter.brand
}, {
name: '品类',
val: '',
choices: []
}, {
name: '颜色',
val: '',
choices: this.filter.color
}, {
name: '尺寸',
val: '',
choices: this.filter.size
}, {
name: '价格',
val: '',
choices: this.filter.priceRange
}, {
name: '折扣',
val: '',
choices: this.filter.discount
}
],
activeSort: {
text: '推荐',
order: ''
}
},
layFlag: false
}
},
computed: {
... ... @@ -101,7 +99,6 @@ module.exports = {
toggleRec(){
this.filterDown = true;
this.recDown = !this.recDown;
},
toggleFilter(){
this.recDown = true;
... ... @@ -121,6 +118,45 @@ module.exports = {
ref: this._uid
});
this.recDown = true;
},
showLay() {
this.bodyElStyle = document.querySelector('body').style;
this.bodyElStyle.position = 'absolute';
this.bodyElStyle.top = 0;
this.bodyElStyle.left = 0;
this.bodyElStyle.right = 0;
this.bodyElStyle.bottom = 0;
this.bodyElStyle.overflow = 'hidden';
this.layFlag = true;
},
hideLay() {
this.bodyElStyle.position = 'static';
this.bodyElStyle.overflow = 'auto';
this.layFlag = false;
},
filterSearch(){
},
clearFilter(){
}
},
watch: {
recDown(val){
if (val) {
this.hideLay();
return;
} else {
this.showLay();
}
},
filterDown(val){
if (val) {
return this.hideLay();
}
this.showLay();
}
},
components: {
... ... @@ -134,7 +170,9 @@ module.exports = {
this.filterItems[1].choices = temp;
console.log(temp)
bus.$on('filter.choice.change', choice => {
})
}
};
</script>
... ... @@ -144,12 +182,29 @@ module.exports = {
.top-filter {
position: relative;
height: 81px;
border-bottom: 1px solid #eee;
.filter-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .5;
background-color: #000;
}
.filter-content {
position: relative;
background-color: #fff;
}
.filter-type {
font-size: 0;
list-style: none;
height: 79px;
background-color: #fff;
padding: 16px 30px 0;
border-bottom: 1px solid #eee;
.type-item {
display: inline-block;
... ... @@ -179,7 +234,7 @@ module.exports = {
.rec-detail {
position: absolute;
top: 81px;
top: 79px;
left: 0;
right: 0;
... ... @@ -192,6 +247,10 @@ module.exports = {
background-color: #fff;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: none;
}
&.active {
background: $grey;
}
... ... @@ -200,7 +259,7 @@ module.exports = {
.filter-detail {
position: absolute;
top: 81px;
top: 79px;
left: 0;
right: 0;
height: 950px;
... ...
... ... @@ -286,7 +286,7 @@
entity: {},
showFeatureSelector: false,
cartCount: 0,
isApp: true, // TODO yoho.isApp,
isApp: yoho.isApp,
isSoldOut: false,
isReady: false,
preferTitle: 'You Might Also Like',
... ...