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 @@ @@ -7,8 +7,8 @@
7 </div> 7 </div>
8 <div class="choices" v-show="show"> 8 <div class="choices" v-show="show">
9 <span v-for="(index, choice) in allChoices" 9 <span v-for="(index, choice) in allChoices"
10 - class="ellipsis choice"  
11 - @click="addChoice(index, choice)"> 10 + class="ellipsis choice" :class="{active: choice.isChosen}"
  11 + @click="toggleChoice(index, choice)">
12 {{name === '品类' ? choice.category_name : choice.name}} 12 {{name === '品类' ? choice.category_name : choice.name}}
13 </span> 13 </span>
14 <span v-if="showMore" class="choice more" @click="expandAll(name)">全部{{name 14 <span v-if="showMore" class="choice more" @click="expandAll(name)">全部{{name
@@ -17,6 +17,7 @@ @@ -17,6 +17,7 @@
17 </div> 17 </div>
18 </template> 18 </template>
19 <script> 19 <script>
  20 +const _ = require('lodash');
20 const bus = require('common/vue-bus'); 21 const bus = require('common/vue-bus');
21 22
22 module.exports = { 23 module.exports = {
@@ -34,18 +35,6 @@ module.exports = { @@ -34,18 +35,6 @@ module.exports = {
34 allChoices: [] 35 allChoices: []
35 } 36 }
36 }, 37 },
37 - computed: {  
38 - allChoices(){  
39 - const len = this.choices.length;  
40 - const isLimited = ['品牌', '品类'].indexOf(this.name) > -1;  
41 -  
42 - if (len > 11 && isLimited) {  
43 - this.showMore = true;  
44 - return this.choices.slice(0, 11);  
45 - }  
46 - return this.choices.slice();  
47 - }  
48 - },  
49 methods: { 38 methods: {
50 toggle(name) { 39 toggle(name) {
51 if (this.show) { 40 if (this.show) {
@@ -60,12 +49,14 @@ module.exports = { @@ -60,12 +49,14 @@ module.exports = {
60 49
61 this.show = true; 50 this.show = true;
62 }, 51 },
63 - addChoice(index, choice) {  
64 - choice._chosen = true;  
65 - this.chosen.push({  
66 - index,  
67 - choice  
68 - }); 52 + toggleChoice(index, choice) {
  53 + const newChoice = {
  54 + name: choice.name,
  55 + category_name: choice.category_name,
  56 + isChosen: !choice.isChosen
  57 + };
  58 +
  59 + this.allChoices.$set(index, newChoice);
69 }, 60 },
70 expandAll(name){ 61 expandAll(name){
71 switch (name) { 62 switch (name) {
@@ -74,9 +65,21 @@ module.exports = { @@ -74,9 +65,21 @@ module.exports = {
74 case '品类': 65 case '品类':
75 break; 66 break;
76 } 67 }
  68 + },
  69 + setAllChoices(){
  70 + let isLimited = false;
  71 + const len = this.choices.length;
  72 +
  73 + this.allChoices = this.choices.slice();
  74 + isLimited = ['品牌', '品类'].indexOf(this.name) > -1;
  75 + if (len > 11 && isLimited) {
  76 + this.showMore = true;
  77 + this.allChoices = this.choices.slice(0, 11);
  78 + }
77 } 79 }
78 }, 80 },
79 - watch: { 81 + created(){
  82 + this.setAllChoices();
80 }, 83 },
81 components: {} 84 components: {}
82 }; 85 };
1 <template> 1 <template>
2 <div class="top-filter clearfix"> 2 <div class="top-filter clearfix">
3 - <ul class="filter-type">  
4 - <li class="type-item" @click="toggleRec">{{activeSort.text}}<i class="icon" :class="recClass"></i></li>  
5 - <li class="type-item" @click="toggleFilter">筛选<i class="icon" :class="filterClass"></i></li>  
6 - </ul>  
7 - <div class="rec-detail" v-show="!recDown">  
8 - <ul class="re-items">  
9 - <li v-for="item in recItems" class="re-item"  
10 - :class="{active: activeSort.text === item.text}" @click="sortChange(item)">{{item.text}}</li> 3 + <div class="filter-overlay" v-show="layFlag"></div>
  4 + <div class="filter-content">
  5 + <ul class="filter-type">
  6 + <li class="type-item" @click="toggleRec">{{activeSort.text}}<i class="icon" :class="recClass"></i></li>
  7 + <li class="type-item" @click="toggleFilter">筛选<i class="icon" :class="filterClass"></i></li>
11 </ul> 8 </ul>
12 - </div>  
13 - <div class="filter-detail" v-show="!filterDown">  
14 - <filter-item v-for="item in filterItems" :name="item.name" :choices="item.choices"></filter-item>  
15 - <div class="action">  
16 - <p class="tip">您可以选择一个或多个筛选项进行筛选</p>  
17 - <a class="action-btn filter-btn">筛选</a>  
18 - <a class="action-btn clear-btn">清空</a> 9 + <div class="rec-detail" v-show="!recDown">
  10 + <ul class="re-items">
  11 + <li v-for="item in recItems" class="re-item"
  12 + :class="{active: activeSort.text === item.text}" @click="sortChange(item)">{{item.text}}</li>
  13 + </ul>
  14 + </div>
  15 + <div class="filter-detail" v-show="!filterDown">
  16 + <filter-item v-for="item in filterItems" :name="item.name" :choices="item.choices"></filter-item>
  17 + <div class="action">
  18 + <p class="tip">您可以选择一个或多个筛选项进行筛选</p>
  19 + <a class="action-btn filter-btn" @click="filterSearch">筛选</a>
  20 + <a class="action-btn clear-btn" @click="clearFilter">清空</a>
  21 + </div>
19 </div> 22 </div>
20 </div> 23 </div>
21 </div> 24 </div>
@@ -51,34 +54,29 @@ module.exports = { @@ -51,34 +54,29 @@ module.exports = {
51 filterItems: [ 54 filterItems: [
52 { 55 {
53 name: '品牌', 56 name: '品牌',
54 - val: '',  
55 choices: this.filter.brand 57 choices: this.filter.brand
56 }, { 58 }, {
57 name: '品类', 59 name: '品类',
58 - val: '',  
59 choices: [] 60 choices: []
60 }, { 61 }, {
61 name: '颜色', 62 name: '颜色',
62 - val: '',  
63 choices: this.filter.color 63 choices: this.filter.color
64 }, { 64 }, {
65 name: '尺寸', 65 name: '尺寸',
66 - val: '',  
67 choices: this.filter.size 66 choices: this.filter.size
68 }, { 67 }, {
69 name: '价格', 68 name: '价格',
70 - val: '',  
71 choices: this.filter.priceRange 69 choices: this.filter.priceRange
72 }, { 70 }, {
73 name: '折扣', 71 name: '折扣',
74 - val: '',  
75 choices: this.filter.discount 72 choices: this.filter.discount
76 } 73 }
77 ], 74 ],
78 activeSort: { 75 activeSort: {
79 text: '推荐', 76 text: '推荐',
80 order: '' 77 order: ''
81 - } 78 + },
  79 + layFlag: false
82 } 80 }
83 }, 81 },
84 computed: { 82 computed: {
@@ -101,7 +99,6 @@ module.exports = { @@ -101,7 +99,6 @@ module.exports = {
101 toggleRec(){ 99 toggleRec(){
102 this.filterDown = true; 100 this.filterDown = true;
103 this.recDown = !this.recDown; 101 this.recDown = !this.recDown;
104 -  
105 }, 102 },
106 toggleFilter(){ 103 toggleFilter(){
107 this.recDown = true; 104 this.recDown = true;
@@ -121,6 +118,45 @@ module.exports = { @@ -121,6 +118,45 @@ module.exports = {
121 ref: this._uid 118 ref: this._uid
122 }); 119 });
123 this.recDown = true; 120 this.recDown = true;
  121 + },
  122 + showLay() {
  123 + this.bodyElStyle = document.querySelector('body').style;
  124 + this.bodyElStyle.position = 'absolute';
  125 + this.bodyElStyle.top = 0;
  126 + this.bodyElStyle.left = 0;
  127 + this.bodyElStyle.right = 0;
  128 + this.bodyElStyle.bottom = 0;
  129 + this.bodyElStyle.overflow = 'hidden';
  130 + this.layFlag = true;
  131 + },
  132 + hideLay() {
  133 + this.bodyElStyle.position = 'static';
  134 + this.bodyElStyle.overflow = 'auto';
  135 + this.layFlag = false;
  136 + },
  137 + filterSearch(){
  138 +
  139 + },
  140 + clearFilter(){
  141 +
  142 + }
  143 + },
  144 + watch: {
  145 + recDown(val){
  146 + if (val) {
  147 + this.hideLay();
  148 + return;
  149 + } else {
  150 + this.showLay();
  151 + }
  152 +
  153 + },
  154 + filterDown(val){
  155 + if (val) {
  156 + return this.hideLay();
  157 + }
  158 +
  159 + this.showLay();
124 } 160 }
125 }, 161 },
126 components: { 162 components: {
@@ -134,7 +170,9 @@ module.exports = { @@ -134,7 +170,9 @@ module.exports = {
134 170
135 this.filterItems[1].choices = temp; 171 this.filterItems[1].choices = temp;
136 172
137 - console.log(temp) 173 + bus.$on('filter.choice.change', choice => {
  174 +
  175 + })
138 } 176 }
139 }; 177 };
140 </script> 178 </script>
@@ -144,12 +182,29 @@ module.exports = { @@ -144,12 +182,29 @@ module.exports = {
144 .top-filter { 182 .top-filter {
145 position: relative; 183 position: relative;
146 height: 81px; 184 height: 81px;
147 - border-bottom: 1px solid #eee; 185 +
  186 + .filter-overlay {
  187 + position: fixed;
  188 + top: 0;
  189 + left: 0;
  190 + right: 0;
  191 + bottom: 0;
  192 + opacity: .5;
  193 + background-color: #000;
  194 + }
  195 +
  196 + .filter-content {
  197 + position: relative;
  198 + background-color: #fff;
  199 + }
148 200
149 .filter-type { 201 .filter-type {
150 font-size: 0; 202 font-size: 0;
151 list-style: none; 203 list-style: none;
  204 + height: 79px;
  205 + background-color: #fff;
152 padding: 16px 30px 0; 206 padding: 16px 30px 0;
  207 + border-bottom: 1px solid #eee;
153 208
154 .type-item { 209 .type-item {
155 display: inline-block; 210 display: inline-block;
@@ -179,7 +234,7 @@ module.exports = { @@ -179,7 +234,7 @@ module.exports = {
179 234
180 .rec-detail { 235 .rec-detail {
181 position: absolute; 236 position: absolute;
182 - top: 81px; 237 + top: 79px;
183 left: 0; 238 left: 0;
184 right: 0; 239 right: 0;
185 240
@@ -192,6 +247,10 @@ module.exports = { @@ -192,6 +247,10 @@ module.exports = {
192 background-color: #fff; 247 background-color: #fff;
193 border-bottom: 1px solid #eee; 248 border-bottom: 1px solid #eee;
194 249
  250 + &:last-child {
  251 + border-bottom: none;
  252 + }
  253 +
195 &.active { 254 &.active {
196 background: $grey; 255 background: $grey;
197 } 256 }
@@ -200,7 +259,7 @@ module.exports = { @@ -200,7 +259,7 @@ module.exports = {
200 259
201 .filter-detail { 260 .filter-detail {
202 position: absolute; 261 position: absolute;
203 - top: 81px; 262 + top: 79px;
204 left: 0; 263 left: 0;
205 right: 0; 264 right: 0;
206 height: 950px; 265 height: 950px;
@@ -286,7 +286,7 @@ @@ -286,7 +286,7 @@
286 entity: {}, 286 entity: {},
287 showFeatureSelector: false, 287 showFeatureSelector: false,
288 cartCount: 0, 288 cartCount: 0,
289 - isApp: true, // TODO yoho.isApp, 289 + isApp: yoho.isApp,
290 isSoldOut: false, 290 isSoldOut: false,
291 isReady: false, 291 isReady: false,
292 preferTitle: 'You Might Also Like', 292 preferTitle: 'You Might Also Like',