Authored by 郝肖肖

sale home search default list

@@ -93,7 +93,8 @@ @@ -93,7 +93,8 @@
93 <div class="default-goods container clearfix"> 93 <div class="default-goods container clearfix">
94 {{#newGoods}} 94 {{#newGoods}}
95 {{> common/goods}} 95 {{> common/goods}}
96 - {{/newGoods}}</div> 96 + {{/newGoods}}
  97 + </div>
97 <div class="new-goods container clearfix hide"></div> 98 <div class="new-goods container clearfix hide"></div>
98 <div class="price-goods container clearfix hide"></div> 99 <div class="price-goods container clearfix hide"></div>
99 <div class="discount-goods container clearfix hide"></div> 100 <div class="discount-goods container clearfix hide"></div>
1 <div id="goods-container" class="goods-container"> 1 <div id="goods-container" class="goods-container">
2 - <div class="new-goods container clearfix"> 2 + <div class="default-goods container clearfix">
3 {{# goods}} 3 {{# goods}}
4 {{> common/goods}} 4 {{> common/goods}}
5 {{/ goods}} 5 {{/ goods}}
6 </div> 6 </div>
  7 + <div class="new-goods container hide clearfix"></div>
7 <div class="price-goods container hide clearfix"></div> 8 <div class="price-goods container hide clearfix"></div>
8 <div class="discount-goods container hide clearfix"></div> 9 <div class="discount-goods container hide clearfix"></div>
9 <div class="all-goods container hide clearfix"></div> 10 <div class="all-goods container hide clearfix"></div>
1 -<ul id="list-nav" class="list-nav clearfix">  
2 - <li class="new active">  
3 - <a href="javascript:void(0);">  
4 - <span class="span-test">最新</span>  
5 - </a>  
6 - </li>  
7 - <li class="price">  
8 - <a href="javascript:void(0);">  
9 - <span class="span-test">价格</span>  
10 - <span class="icon">  
11 - <i class="iconfont up cur">&#xe615;</i>  
12 - <i class="iconfont down">&#xe616;</i>  
13 - </span>  
14 - </a>  
15 - </li>  
16 - <li class="discount">  
17 - <a href="javascript:void(0);">  
18 - <span class="span-test">折扣</span>  
19 - <span class="icon">  
20 - <i class="iconfont up cur">&#xe615;</i>  
21 - <i class="iconfont down">&#xe616;</i>  
22 - </span>  
23 - </a>  
24 - </li>  
25 - <li class="filter">  
26 - <a href="javascript:void(0);">  
27 - <span class="span-test">筛选</span>  
28 - <span class="iconfont cur">&#xe613;</span>  
29 - </a>  
30 - </li>  
31 -</ul> 1 +<div class='list-nav-layer'>
  2 + <ul id="list-nav" class="list-nav clearfix">
  3 + <li class="default active first-li-more">
  4 + <a href="javascript:void(0);">
  5 + <span class="span-test">默认</span>
  6 + <span class="iconfont up cur hide">&#xe615;</span>
  7 + <span class="iconfont down cur">&#xe616;</span>
  8 + </a>
  9 + </li>
  10 + <li class="price">
  11 + <a href="javascript:void(0);">
  12 + <span class="span-test">价格</span>
  13 + <span class="icon">
  14 + <i class="iconfont up cur">&#xe615;</i>
  15 + <i class="iconfont down">&#xe616;</i>
  16 + </span>
  17 + </a>
  18 + </li>
  19 + <li class="discount">
  20 + <a href="javascript:void(0);">
  21 + <span class="span-test">折扣</span>
  22 + <span class="icon">
  23 + <i class="iconfont up cur">&#xe615;</i>
  24 + <i class="iconfont down">&#xe616;</i>
  25 + </span>
  26 + </a>
  27 + </li>
  28 + <li class="filter">
  29 + <a href="javascript:void(0);">
  30 + <span class="span-test">筛选</span>
  31 + <span class="iconfont cur">&#xe613;</span>
  32 + </a>
  33 + </li>
  34 + </ul>
  35 + <!--搜索默认排序列表-->
  36 + {{> product/search-default-sort-list}}
  37 +</div>
32 38
33 39
@@ -39,7 +39,7 @@ $(function() { @@ -39,7 +39,7 @@ $(function() {
39 var $saleNavSelect = $('.sale-nav-select'); 39 var $saleNavSelect = $('.sale-nav-select');
40 var $vipFloor = $('.vip-floor'); 40 var $vipFloor = $('.vip-floor');
41 var $saleNavWrap = $('.sale-nav-wrap'); 41 var $saleNavWrap = $('.sale-nav-wrap');
42 - var $listNav = $saleNavWrap.find('#list-nav'); 42 + var $listNavLayer = $saleNavWrap.find('.list-nav-layer');
43 var $filterMask = $('.filter-mask'); 43 var $filterMask = $('.filter-mask');
44 44
45 fastclick.attach(document.body); 45 fastclick.attach(document.body);
@@ -83,10 +83,10 @@ $(function() { @@ -83,10 +83,10 @@ $(function() {
83 } 83 }
84 84
85 if ($body.scrollTop() > $saleNavWrap.offset().top) { 85 if ($body.scrollTop() > $saleNavWrap.offset().top) {
86 - $listNav.addClass('fixed'); 86 + $listNavLayer.addClass('fixed');
87 $filterMask.addClass('fixed'); 87 $filterMask.addClass('fixed');
88 } else { 88 } else {
89 - $listNav.removeClass('fixed'); 89 + $listNavLayer.removeClass('fixed');
90 $filterMask.removeClass('fixed'); 90 $filterMask.removeClass('fixed');
91 } 91 }
92 }).trigger('scroll'); 92 }).trigger('scroll');
@@ -11,12 +11,14 @@ var $ = require('yoho-jquery'), @@ -11,12 +11,14 @@ var $ = require('yoho-jquery'),
11 loading = require('../../plugin/loading'); 11 loading = require('../../plugin/loading');
12 12
13 var $goodsContainer = $('#goods-container'), 13 var $goodsContainer = $('#goods-container'),
  14 + $defaultgc = $goodsContainer.find('.default-goods'),
14 $ngc = $goodsContainer.find('.new-goods'), 15 $ngc = $goodsContainer.find('.new-goods'),
15 $dgc = $goodsContainer.find('.discount-goods'), 16 $dgc = $goodsContainer.find('.discount-goods'),
16 $pgc = $goodsContainer.find('.price-goods'), 17 $pgc = $goodsContainer.find('.price-goods'),
17 $agc = $goodsContainer.find('.all-goods'), 18 $agc = $goodsContainer.find('.all-goods'),
18 $cgc = $goodsContainer.find('.category-goods'), 19 $cgc = $goodsContainer.find('.category-goods'),
19 - $sgc = $goodsContainer.find('.sale-goods'); 20 + $sgc = $goodsContainer.find('.sale-goods'),
  21 + $newList = $('.new-list');
20 22
21 var winH = $(window).height(), 23 var winH = $(window).height(),
22 noResult = '<p class="no-result">未找到相关搜索结果</p>'; 24 noResult = '<p class="no-result">未找到相关搜索结果</p>';
@@ -37,7 +39,7 @@ var $listNav = $('#list-nav'), @@ -37,7 +39,7 @@ var $listNav = $('#list-nav'),
37 page: 0, 39 page: 0,
38 end: false 40 end: false
39 }, 41 },
40 - newest: { 42 + new: {
41 order: 0, 43 order: 0,
42 reload: true, 44 reload: true,
43 page: 0, 45 page: 0,
@@ -66,6 +68,12 @@ var $listNav = $('#list-nav'), @@ -66,6 +68,12 @@ var $listNav = $('#list-nav'),
66 reload: true, 68 reload: true,
67 page: 0, 69 page: 0,
68 end: false 70 end: false
  71 + },
  72 + default: {
  73 + order: 0,
  74 + reload: true,
  75 + page: 0,
  76 + end: false
69 } 77 }
70 }, 78 },
71 $pre = $listNav.find('.active'), // 纪录进入筛选前的active项,初始为选中项 79 $pre = $listNav.find('.active'), // 纪录进入筛选前的active项,初始为选中项
@@ -106,7 +114,7 @@ function judgeType(dom) { @@ -106,7 +114,7 @@ function judgeType(dom) {
106 var navType = 'category'; 114 var navType = 'category';
107 115
108 if (dom.hasClass('new')) { 116 if (dom.hasClass('new')) {
109 - navType = 'newest'; 117 + navType = 'new';
110 } else if (dom.hasClass('price')) { 118 } else if (dom.hasClass('price')) {
111 navType = 'price'; 119 navType = 'price';
112 } else if (dom.hasClass('discount')) { 120 } else if (dom.hasClass('discount')) {
@@ -117,6 +125,8 @@ function judgeType(dom) { @@ -117,6 +125,8 @@ function judgeType(dom) {
117 navType = 'all'; 125 navType = 'all';
118 } else if (dom.hasClass('category')) { 126 } else if (dom.hasClass('category')) {
119 navType = 'category'; 127 navType = 'category';
  128 + } else if (dom.hasClass('default')) {
  129 + navType = 'default';
120 } 130 }
121 131
122 return navType; 132 return navType;
@@ -256,7 +266,7 @@ function search(opt, params, isScroll) { @@ -256,7 +266,7 @@ function search(opt, params, isScroll) {
256 num; 266 num;
257 267
258 switch (navType) { 268 switch (navType) {
259 - case 'newest': 269 + case 'new':
260 $container = $ngc; 270 $container = $ngc;
261 break; 271 break;
262 case 'price': 272 case 'price':
@@ -274,14 +284,16 @@ function search(opt, params, isScroll) { @@ -274,14 +284,16 @@ function search(opt, params, isScroll) {
274 case 'categroy': 284 case 'categroy':
275 $container = $cgc; 285 $container = $cgc;
276 break; 286 break;
  287 + case 'default':
  288 + $container = $defaultgc;
  289 + break;
277 default: 290 default:
278 $container = $agc; 291 $container = $agc;
279 break; 292 break;
280 } 293 }
281 294
282 if ($container.hasClass('hide')) { 295 if ($container.hasClass('hide')) {
283 - $container.siblings().addClass('hide');  
284 - $container.removeClass('hide'); 296 + $container.removeClass('hide').siblings().addClass('hide');
285 } 297 }
286 298
287 if (data === '' || (data.list && data.list.length <= 0)) { 299 if (data === '' || (data.list && data.list.length <= 0)) {
@@ -372,6 +384,18 @@ $listNav.bind('contextmenu', function() { @@ -372,6 +384,18 @@ $listNav.bind('contextmenu', function() {
372 return false; 384 return false;
373 }); 385 });
374 386
  387 +function newListHide() {
  388 + var $firstLi = $listNav.find('li.first-li-more');
  389 +
  390 + if ($newList.hasClass('hide')) {
  391 + $firstLi.find('span.up').addClass('hide');
  392 + $firstLi.find('span.down').removeClass('hide');
  393 + } else {
  394 + $firstLi.find('span.down').addClass('hide');
  395 + $firstLi.find('span.up').removeClass('hide');
  396 + }
  397 +}
  398 +
375 $listNav.on('touchend touchcancel', function(e) { 399 $listNav.on('touchend touchcancel', function(e) {
376 var $this = $(e.target).closest('li'), 400 var $this = $(e.target).closest('li'),
377 nav, 401 nav,
@@ -384,6 +408,23 @@ $listNav.on('touchend touchcancel', function(e) { @@ -384,6 +408,23 @@ $listNav.on('touchend touchcancel', function(e) {
384 return; 408 return;
385 } 409 }
386 410
  411 + if ($this.hasClass('first-li-more')) {
  412 + filter.hideFilter();
  413 + $newList.toggleClass('hide');
  414 + if ($this.hasClass('default')) {
  415 + $newList.find('li.default').addClass('active').siblings().removeClass('active');
  416 + } else if ($this.hasClass('new')) {
  417 + $newList.find('li.new').addClass('active').siblings().removeClass('active');
  418 + } else if ($this.hasClass('sale')) {
  419 + $newList.find('li.sale').addClass('active').siblings().removeClass('active');
  420 + }
  421 + newListHide();
  422 + return true;
  423 + }
  424 +
  425 + // 最新li 列表
  426 + $newList.addClass('hide');
  427 +
387 if ($this.hasClass('filter')) { 428 if ($this.hasClass('filter')) {
388 429
389 // 筛选面板切换状态 430 // 筛选面板切换状态
@@ -438,7 +479,7 @@ $listNav.on('touchend touchcancel', function(e) { @@ -438,7 +479,7 @@ $listNav.on('touchend touchcancel', function(e) {
438 $goodsContainer.children('.container:not(.hide)').addClass('hide'); 479 $goodsContainer.children('.container:not(.hide)').addClass('hide');
439 480
440 switch (navType) { 481 switch (navType) {
441 - case 'newest': 482 + case 'new':
442 $ngc.removeClass('hide'); 483 $ngc.removeClass('hide');
443 break; 484 break;
444 485
@@ -457,6 +498,10 @@ $listNav.on('touchend touchcancel', function(e) { @@ -457,6 +498,10 @@ $listNav.on('touchend touchcancel', function(e) {
457 case 'all': 498 case 'all':
458 $agc.removeClass('hide'); 499 $agc.removeClass('hide');
459 break; 500 break;
  501 +
  502 + case 'default':
  503 + $defaultgc.removeClass('hide');
  504 + break;
460 default: 505 default:
461 break; 506 break;
462 } 507 }
@@ -506,6 +551,69 @@ $listNav.on('touchstart', 'li', function() { @@ -506,6 +551,69 @@ $listNav.on('touchstart', 'li', function() {
506 $listNav.find('li').removeClass('bytouch'); 551 $listNav.find('li').removeClass('bytouch');
507 }); 552 });
508 553
  554 +$newList.on('touchstart', 'li', function(e) {
  555 + var navType,
  556 + $firstLiDom = $listNav.find('li.first-li-more');
  557 +
  558 + e.preventDefault();
  559 +
  560 + if ($(this).hasClass('new')) {
  561 + navType = 'new';
  562 + } else if ($(this).hasClass('default')) {
  563 + navType = 'default';
  564 + } else if ($(this).hasClass('sale')) {
  565 + navType = 'sale';
  566 + }
  567 +
  568 + $newList.addClass('hide');
  569 + $firstLiDom.find('.span-test').text($(this).text());
  570 + $firstLiDom.addClass('active').siblings().removeClass('active');
  571 + $listNav.find('.first-li-more').removeClass('new default sale').addClass(navType);
  572 +
  573 + newListHide();
  574 +
  575 + if ($(this).hasClass('active')) {
  576 + return;
  577 + }
  578 +
  579 + // 切换container显示
  580 + $goodsContainer.children('.container:not(.hide)').addClass('hide');
  581 +
  582 + switch (navType) {
  583 + case 'new':
  584 + $ngc.removeClass('hide');
  585 + break;
  586 +
  587 + case 'price':
  588 + $pgc.removeClass('hide');
  589 + break;
  590 +
  591 + case 'discount':
  592 + $dgc.removeClass('hide');
  593 + break;
  594 +
  595 + case 'default':
  596 + $defaultgc.removeClass('hide');
  597 + break;
  598 +
  599 + case 'sale':
  600 + $sgc.removeClass('hide');
  601 + break;
  602 + default:
  603 + break;
  604 + }
  605 + $pre = $firstLiDom;
  606 + search({filtering: true});
  607 +});
  608 +
  609 +$(document).on('touchstart', function(e) {
  610 + if (!$newList.hasClass('hide') &&
  611 + $(e.target).closest('.new-list, li.first-li-more').length <= 0) {
  612 + $newList.addClass('hide');
  613 + newListHide();
  614 + }
  615 +});
  616 +
509 module.exports = { 617 module.exports = {
510 start: search 618 start: search
511 }; 619 };
@@ -90,4 +90,30 @@ @@ -90,4 +90,30 @@
90 padding-left: 15px; 90 padding-left: 15px;
91 min-height: 640px; 91 min-height: 640px;
92 } 92 }
  93 +
  94 + .new-list {
  95 + width: 100%;
  96 + background-color: #fff;
  97 + font-size: 28px;
  98 + color: #444;
  99 + position: absolute;
  100 + z-index: 5;
  101 +
  102 + li {
  103 + margin-left: 35px;
  104 + height: 88px;
  105 + line-height: 88px;
  106 + border-bottom: 1px solid #e0e0e0;
  107 + padding-right: 38px;
  108 +
  109 + &:last-child {
  110 + border-bottom: none;
  111 + }
  112 +
  113 + &.active {
  114 + background: resolve("product/shop/check.png") no-repeat 94% center;
  115 + background-size: 36px 26px;
  116 + }
  117 + }
  118 + }
93 } 119 }
@@ -91,7 +91,8 @@ @@ -91,7 +91,8 @@
91 } 91 }
92 } 92 }
93 93
94 - .list-nav { 94 + .list-nav,
  95 + .list-nav-layer {
95 width: 100%; 96 width: 100%;
96 z-index: 1; 97 z-index: 1;
97 background: #fff; 98 background: #fff;