|
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
|
- // 折扣切换排序状态
|
|
|
|
282
|
- $this.find('.icon > .iconfont').toggleClass('cur');
|
|
|
|
283
|
- $pre = $this;
|
|
|
|
284
|
- nav.reload = true; //重置reload,HTML会被替换为逆序的HTML
|
|
|
|
285
|
- nav.order = nav.order === 0 ? 1 : 0; //切换排序
|
254
|
+ //最新无排序切换
|
|
|
|
255
|
+ if ($this.hasClass('new')) {
|
|
|
|
256
|
+ return;
|
|
|
|
257
|
+ }
|
|
|
|
258
|
+
|
|
|
|
259
|
+ if ($this.hasClass('price') || $this.hasClass('discount')) {
|
|
286
|
|
260
|
|
|
|
|
261
|
+ // 价格/折扣切换排序状态
|
|
|
|
262
|
+ $this.find('.icon > .iconfont').toggleClass('cur');
|
|
|
|
263
|
+ $pre = $this; //更新pre为当前项
|
|
|
|
264
|
+ nav.reload = true; //重置reload,HTML会被替换为逆序的HTML
|
|
|
|
265
|
+ nav.order = nav.order === 0 ? 1 : 0; //切换排序
|
|
|
|
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
|
}
|
|
@@ -334,4 +310,5 @@ $(window).scroll(function() { |
|
@@ -334,4 +310,5 @@ $(window).scroll(function() { |
|
334
|
$(document).height() - 0.25 * $goodsContainer.height()) {
|
310
|
$(document).height() - 0.25 * $goodsContainer.height()) {
|
|
335
|
search();
|
311
|
search();
|
|
336
|
}
|
312
|
}
|
|
337
|
-}); |
|
|
|
|
|
313
|
+}); |
|
|
|
314
|
+ |
