fe / YOHOBUYPC · Commits

Go to a project

Authored by 梁志锋
Commit 5e8bac1e1a49e0008a0108a0953c7f7ad7da2905 1 parent d1670334

update

Inline Side-by-side
Showing 4 changed files with 63 additions and 92 deletions
1 /** 1 /**
2 - * 折扣专区  
3 - * @author: liangzhifeng<zhifeng.liang@yoho.cn>  
4 - * @date: 2015/10/23 2 + * 商品列表页
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/20
5 */ 5 */
6 6
7 var $ = require('yoho.zepto'), 7 var $ = require('yoho.zepto'),
  8 + Swiper = require('yoho.iswiper'),
8 lazyLoad = require('yoho.zeptolazyload'); 9 lazyLoad = require('yoho.zeptolazyload');
9 10
  11 +var swiper;
  12 +
10 var filter = require('../../plugin/filter'); 13 var filter = require('../../plugin/filter');
11 14
12 var $goodsContainer = $('#goods-container'), 15 var $goodsContainer = $('#goods-container'),
13 - $ngc = $($goodsContainer.children().get(0)),  
14 - $pgc = $($goodsContainer.children().get(1)),  
15 - $dgc = $($goodsContainer.children().get(2)),  
16 - $all = $($goodsContainer.children().get(3)); 16 + $ngc = $goodsContainer.children('.new-goods'),
  17 + $pgc = $goodsContainer.children('.price-goods'),
  18 + $dgc = $goodsContainer.children('.discount-goods');
17 19
18 var winH = $(window).height(); 20 var winH = $(window).height();
19 21
@@ -25,35 +27,26 @@ var defaultOpt = { @@ -25,35 +27,26 @@ var defaultOpt = {
25 color: $('#color').val(), 27 color: $('#color').val(),
26 size: $('#size').val(), 28 size: $('#size').val(),
27 price: $('#price').val(), 29 price: $('#price').val(),
28 - discount: $('#discount').val(),  
29 - limit: $('#limit').val(),  
30 - channel: $('#channel').val(),  
31 - p_d: $('#p_d').val() 30 + discount: $('#discount').val()
32 }; 31 };
33 32
34 var $listNav = $('#list-nav'), 33 var $listNav = $('#list-nav'),
35 34
36 //导航数据信息 35 //导航数据信息
37 navInfo = { 36 navInfo = {
38 - discount13: {  
39 - order: 0,  
40 - reload: true,  
41 - page: 0,  
42 - end: false  
43 - },  
44 - discount46: {  
45 - order: 0, 37 + newest: {
  38 + order: 1,
46 reload: true, 39 reload: true,
47 page: 0, 40 page: 0,
48 end: false 41 end: false
49 }, 42 },
50 - discount79: { 43 + price: {
51 order: 0, 44 order: 0,
52 reload: true, 45 reload: true,
53 page: 0, 46 page: 0,
54 end: false 47 end: false
55 }, 48 },
56 - all: { 49 + discount: {
57 order: 0, 50 order: 0,
58 reload: true, 51 reload: true,
59 page: 0, 52 page: 0,
@@ -63,9 +56,10 @@ var $listNav = $('#list-nav'), @@ -63,9 +56,10 @@ var $listNav = $('#list-nav'),
63 $pre, //纪录进入筛选前的active项 56 $pre, //纪录进入筛选前的active项
64 searching; 57 searching;
65 58
66 -$pgc.addClass('hide');  
67 -$dgc.addClass('hide');  
68 -$all.addClass('hide'); 59 +swiper = new Swiper('.swiper-container', {
  60 + lazyLoading: true,
  61 + pagination: '.swiper-pagination'
  62 +});
69 63
70 /** 64 /**
71 * 筛选注册的回调，筛选子项点击后逻辑 65 * 筛选注册的回调，筛选子项点击后逻辑
@@ -128,21 +122,6 @@ function search(opt) { @@ -128,21 +122,6 @@ function search(opt) {
128 discount: opt.id 122 discount: opt.id
129 }; 123 };
130 break; 124 break;
131 - case 'limit':  
132 - ext = {  
133 - limit: opt.id  
134 - };  
135 - break;  
136 - case 'channel':  
137 - ext = {  
138 - channel: opt.id  
139 - };  
140 - break;  
141 - case 'p_d':  
142 - ext = {  
143 - p_d: opt.id  
144 - };  
145 - break;  
146 } 125 }
147 126
148 $.extend(defaultOpt, ext); //扩展筛选项 127 $.extend(defaultOpt, ext); //扩展筛选项
@@ -153,14 +132,12 @@ function search(opt) { @@ -153,14 +132,12 @@ function search(opt) {
153 } 132 }
154 133
155 //导航类别 134 //导航类别
156 - if ($pre === undefined || $pre.hasClass('discount13')) {  
157 - navType = 'discount13';  
158 - } else if ($pre.hasClass('discount46')) {  
159 - navType = 'discount46';  
160 - } else if ($pre.hasClass('discount79')) {  
161 - navType = 'discount79';  
162 - } else if ($pre.hasClass('all')) {  
163 - navType = 'all'; 135 + if ($pre === undefined || $pre.hasClass('new')) {
  136 + navType = 'newest';
  137 + } else if ($pre.hasClass('price')) {
  138 + navType = 'price';
  139 + } else if ($pre.hasClass('discount')) {
  140 + navType = 'discount';
164 } 141 }
165 142
166 nav = navInfo[navType]; 143 nav = navInfo[navType];
@@ -175,6 +152,7 @@ function search(opt) { @@ -175,6 +152,7 @@ function search(opt) {
175 } 152 }
176 153
177 $.extend(setting, defaultOpt, { 154 $.extend(setting, defaultOpt, {
  155 + type: navType,
178 order: nav.order, 156 order: nav.order,
179 page: page 157 page: page
180 }); 158 });
@@ -190,18 +168,15 @@ function search(opt) { @@ -190,18 +168,15 @@ function search(opt) {
190 $container; 168 $container;
191 169
192 switch (navType) { 170 switch (navType) {
193 - case 'discount13': 171 + case 'newest':
194 $container = $ngc; 172 $container = $ngc;
195 break; 173 break;
196 - case 'discount46': 174 + case 'price':
197 $container = $pgc; 175 $container = $pgc;
198 break; 176 break;
199 - case 'discount79': 177 + case 'discount':
200 $container = $dgc; 178 $container = $dgc;
201 break; 179 break;
202 - case 'all':  
203 - $container = $all;  
204 - break;  
205 } 180 }
206 181
207 if (data === ' ') { 182 if (data === ' ') {
@@ -264,26 +239,31 @@ $listNav.delegate('li', 'touchstart', function() { @@ -264,26 +239,31 @@ $listNav.delegate('li', 'touchstart', function() {
264 } 239 }
265 } else { 240 } else {
266 241
267 - if ($this.hasClass('discount13')) {  
268 - navType = 'discount13';  
269 - } else if ($this.hasClass('discount46')) {  
270 - navType = 'discount46';  
271 - } else if ($this.hasClass('discount79')) {  
272 - navType = 'discount79';  
273 - } else if ($this.hasClass('all')) {  
274 - navType = 'all'; 242 + if ($this.hasClass('new')) {
  243 + navType = 'newest';
  244 + } else if ($this.hasClass('price')) {
  245 + navType = 'price';
  246 + } else if ($this.hasClass('discount')) {
  247 + navType = 'discount';
275 } 248 }
276 249
277 nav = navInfo[navType]; 250 nav = navInfo[navType];
278 251
279 if ($this.hasClass('active')) { 252 if ($this.hasClass('active')) {
280 253
281 - // 折扣切换排序状态 254 + //最新无排序切换
  255 + if ($this.hasClass('new')) {
  256 + return;
  257 + }
  258 +
  259 + if ($this.hasClass('price') || $this.hasClass('discount')) {
  260 +
  261 + // 价格/折扣切换排序状态
282 $this.find('.icon > .iconfont').toggleClass('cur'); 262 $this.find('.icon > .iconfont').toggleClass('cur');
283 - $pre = $this; 263 + $pre = $this; //更新pre为当前项
284 nav.reload = true; //重置reload,HTML会被替换为逆序的HTML 264 nav.reload = true; //重置reload,HTML会被替换为逆序的HTML
285 nav.order = nav.order === 0 ? 1 : 0; //切换排序 265 nav.order = nav.order === 0 ? 1 : 0; //切换排序
286 - 266 + }
287 } else { 267 } else {
288 $active = $this.siblings('.active'); 268 $active = $this.siblings('.active');
289 269
@@ -299,19 +279,15 @@ $listNav.delegate('li', 'touchstart', function() { @@ -299,19 +279,15 @@ $listNav.delegate('li', 'touchstart', function() {
299 $goodsContainer.children('.container:not(.hide)').addClass('hide'); 279 $goodsContainer.children('.container:not(.hide)').addClass('hide');
300 280
301 switch (navType) { 281 switch (navType) {
302 - case 'discount13': 282 + case 'newest':
303 $ngc.removeClass('hide'); 283 $ngc.removeClass('hide');
304 break; 284 break;
305 285
306 - case 'discount46': 286 + case 'price':
307 $pgc.removeClass('hide'); 287 $pgc.removeClass('hide');
308 break; 288 break;
309 289
310 - case 'discount79':  
311 - $dgc.removeClass('hide');  
312 - break;  
313 -  
314 - case 'all': 290 + case 'discount':
315 $dgc.removeClass('hide'); 291 $dgc.removeClass('hide');
316 break; 292 break;
317 } 293 }
@@ -335,3 +311,4 @@ $(window).scroll(function() { @@ -335,3 +311,4 @@ $(window).scroll(function() {
335 search(); 311 search();
336 } 312 }
337 }); 313 });
  314 +
@@ -5,8 +5,11 @@ @@ -5,8 +5,11 @@
5 */ 5 */
6 6
7 var $ = require('yoho.zepto'), 7 var $ = require('yoho.zepto'),
  8 + Swiper = require('yoho.iswiper'),
8 lazyLoad = require('yoho.zeptolazyload'); 9 lazyLoad = require('yoho.zeptolazyload');
9 10
  11 +var swiper;
  12 +
10 var filter = require('../../plugin/filter'); 13 var filter = require('../../plugin/filter');
11 14
12 var $goodsContainer = $('#goods-container'), 15 var $goodsContainer = $('#goods-container'),
@@ -26,7 +29,6 @@ var defaultOpt = { @@ -26,7 +29,6 @@ var defaultOpt = {
26 price: $('#price').val(), 29 price: $('#price').val(),
27 discount: $('#discount').val(), 30 discount: $('#discount').val(),
28 limit: $('#limit').val(), 31 limit: $('#limit').val(),
29 - dayLimit: $('#dayLimit').val(),  
30 channel: $('#channel').val(), 32 channel: $('#channel').val(),
31 p_d: $('#p_d').val() 33 p_d: $('#p_d').val()
32 }; 34 };
@@ -57,6 +59,11 @@ var $listNav = $('#list-nav'), @@ -57,6 +59,11 @@ var $listNav = $('#list-nav'),
57 $pgc.addClass('hide'); 59 $pgc.addClass('hide');
58 $dgc.addClass('hide'); 60 $dgc.addClass('hide');
59 61
  62 +swiper = new Swiper('.swiper-container', {
  63 + lazyLoading: true,
  64 + pagination: '.swiper-pagination'
  65 +});
  66 +
60 /** 67 /**
61 * 筛选注册的回调，筛选子项点击后逻辑 68 * 筛选注册的回调，筛选子项点击后逻辑
62 * 需要执行search的场景：1.点选筛选项；2.relaod为true时切换导航；3.下拉加载 69 * 需要执行search的场景：1.点选筛选项；2.relaod为true时切换导航；3.下拉加载
@@ -46,7 +46,7 @@ @@ -46,7 +46,7 @@
46 .list-nav { 46 .list-nav {
47 > li { 47 > li {
48 float: left; 48 float: left;
49 - width: 20%; 49 + width: 25%;
50 height: 33px; 50 height: 33px;
51 line-height: 33px; 51 line-height: 33px;
52 text-align: center; 52 text-align: center;
@@ -5,33 +5,24 @@ @@ -5,33 +5,24 @@
5 {{/ headerBanner}} 5 {{/ headerBanner}}
6 6
7 <ul id="list-nav" class="list-nav clearfix"> 7 <ul id="list-nav" class="list-nav clearfix">
8 - <li class="discount13 active"> 8 + <li class="new active">
9 <a href="javascript:void(0);"> 9 <a href="javascript:void(0);">
10 - 1-3折 10 + 最新
11 <span class="iconfont cur">&#xe616;</span> 11 <span class="iconfont cur">&#xe616;</span>
12 </a> 12 </a>
13 </li> 13 </li>
14 - <li class="discount46"> 14 + <li class="price">
15 <a href="javascript:void(0);"> 15 <a href="javascript:void(0);">
16 - 4-6折 16 + 价格
17 <span class="icon"> 17 <span class="icon">
18 <i class="iconfont up">&#xe615;</i> 18 <i class="iconfont up">&#xe615;</i>
19 <i class="iconfont down cur">&#xe616;</i> 19 <i class="iconfont down cur">&#xe616;</i>
20 </span> 20 </span>
21 </a> 21 </a>
22 </li> 22 </li>
23 - <li class="discount79"> 23 + <li class="discount">
24 <a href="javascript:void(0);"> 24 <a href="javascript:void(0);">
25 - 7-9折  
26 - <span class="icon">  
27 - <i class="iconfont up">&#xe615;</i>  
28 - <i class="iconfont down cur">&#xe616;</i>  
29 - </span>  
30 - </a>  
31 - </li>  
32 - <li class="all">  
33 - <a href="javascript:void(0);">  
34 - All 25 + 折扣
35 <span class="icon"> 26 <span class="icon">
36 <i class="iconfont up">&#xe615;</i> 27 <i class="iconfont up">&#xe615;</i>
37 <i class="iconfont down cur">&#xe616;</i> 28 <i class="iconfont down cur">&#xe616;</i>
@@ -90,10 +81,6 @@ @@ -90,10 +81,6 @@
90 <input id="channel" type="hidden" value={{channel}}> 81 <input id="channel" type="hidden" value={{channel}}>
91 {{/if}} 82 {{/if}}
92 83
93 - {{#if dayLimit}}  
94 - <input id="dayLimit" type="hidden" value={{dayLimit}}>  
95 - {{/if}}  
96 -  
97 {{#if limit}} 84 {{#if limit}}
98 <input id="limit" type="hidden" value={{limit}}> 85 <input id="limit" type="hidden" value={{limit}}>
99 {{/if}} 86 {{/if}}