|
|
<template>
|
|
|
<div class="top-filter clearfix">
|
|
|
<ul class="filter-type">
|
|
|
<li class="type-item" @click="toggleRec">推荐<i class="icon" :class="recClass"></i></li>
|
|
|
<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="recommend-detail" v-show="!recDown">
|
|
|
<ul class="rec-items">
|
|
|
<li class="item active">推荐</li>
|
|
|
<li class="item">新品</li>
|
|
|
<li class="item">价格从高到低</li>
|
|
|
<li class="item">价格从低到高</li>
|
|
|
<li v-for="item in recItems" class="item"
|
|
|
:class="{active: activeSort.text === item.text}" @click="sortChange(item)">{{item.text}}</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="recommend-detail" v-show="!filterDown">
|
...
|
...
|
@@ -30,13 +28,28 @@ module.exports = { |
|
|
data(){
|
|
|
return {
|
|
|
recDown: true,
|
|
|
filterDown: true
|
|
|
filterDown: true,
|
|
|
recItems: [
|
|
|
{
|
|
|
text: '推荐',
|
|
|
val: ''
|
|
|
}, {
|
|
|
text: '新品',
|
|
|
val: 's_t_desc'
|
|
|
}, {
|
|
|
text: '价格从高到低',
|
|
|
val: 's_p_desc'
|
|
|
}, {
|
|
|
text: '价格从低到高',
|
|
|
val: 's_p_asc'
|
|
|
}
|
|
|
],
|
|
|
activeSort: {
|
|
|
text: '推荐',
|
|
|
order: ''
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
simple,
|
|
|
updown
|
|
|
},
|
|
|
computed: {
|
|
|
recClass(){
|
|
|
return {
|
...
|
...
|
@@ -62,16 +75,26 @@ module.exports = { |
|
|
toggleFilter(){
|
|
|
this.recDown = true;
|
|
|
this.filterDown = !this.filterDown;
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
val: function(newVal) {
|
|
|
},
|
|
|
sortChange(item) {
|
|
|
const text = this.activeSort.text;
|
|
|
|
|
|
if (item.text === text) {
|
|
|
this.recDown = true;
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
this.activeSort = item;
|
|
|
bus.$emit('order.change', {
|
|
|
val: newVal,
|
|
|
val: item.val,
|
|
|
ref: this._uid
|
|
|
});
|
|
|
this.recDown = true;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
},
|
|
|
components: {}
|
|
|
};
|
|
|
</script>
|
|
|
<style>
|
...
|
...
|
|