Authored by 郝肖肖

品牌和基础店铺最新列表

@@ -87,49 +87,63 @@ @@ -87,49 +87,63 @@
87 {{/ baseShopHome}} 87 {{/ baseShopHome}}
88 <!-- /基础店铺页面 --> 88 <!-- /基础店铺页面 -->
89 89
90 - <ul id="list-nav" class="list-nav clearfix">  
91 - {{#if isSearch}}  
92 - <li class="new active buriedpoint" data-bp-id="">  
93 - <a href="javascript:void(0);">  
94 - <span class="nav-txt">默认</span>  
95 - <span class="iconfont cur">&#xe616;</span>  
96 - </a>  
97 - </li>  
98 - {{else}}  
99 - <li class="new active buriedpoint" data-bp-id="shop_listnav_new_1">  
100 - <a href="javascript:void(0);">  
101 - <span class="nav-txt">最新</span>  
102 - <span class="iconfont cur">&#xe616;</span>  
103 - </a>  
104 - </li>  
105 - {{/if}}  
106 - <li class="price buriedpoint" data-bp-id="shop_listnav_price_1">  
107 - <a href="javascript:void(0);">  
108 - <span class="nav-txt">价格</span>  
109 - <span class="icon">  
110 - <i class="iconfont up cur">&#xe615;</i>  
111 - <i class="iconfont down">&#xe616;</i>  
112 - </span>  
113 - </a>  
114 - </li>  
115 - <li class="discount buriedpoint" data-bp-id="shop_listnav_discount_1">  
116 - <a href="javascript:void(0);">  
117 - <span class="nav-txt">折扣</span>  
118 - <span class="icon">  
119 - <i class="iconfont up cur">&#xe615;</i>  
120 - <i class="iconfont down">&#xe616;</i>  
121 - </span>  
122 - </a>  
123 - </li>  
124 - <li class="filter buriedpoint" data-bp-id="shop_listnav_filter_1">  
125 - <a href="javascript:void(0);">  
126 - <span class="nav-txt">筛选</span>  
127 - <span class="iconfont cur">&#xe613;</span>  
128 - </a>  
129 - </li>  
130 - </ul> 90 + <div>
  91 + <ul id="list-nav" class="list-nav clearfix">
  92 + {{#if isSearch}}
  93 + <li class="default active buriedpoint first-li-more" data-bp-id="shop_listnav_default_1">
  94 + <a href="javascript:void(0);">
  95 + <span class="nav-txt">默认</span>
  96 + <span class="iconfont up cur hide">&#xe615;</span>
  97 + <span class="iconfont down cur">&#xe616;</span>
  98 + </a>
  99 + </li>
  100 + {{else}}
  101 + <li class="new active buriedpoint first-li-more" data-bp-id="shop_listnav_new_1">
  102 + <a href="javascript:void(0);">
  103 + <span class="nav-txt">最新</span>
  104 + <span class="iconfont up cur hide">&#xe615;</span>
  105 + <span class="iconfont down cur">&#xe616;</span>
  106 + </a>
  107 + </li>
  108 + {{/if}}
  109 + <li class="price buriedpoint" data-bp-id="shop_listnav_price_1">
  110 + <a href="javascript:void(0);">
  111 + <span class="nav-txt">价格</span>
  112 + <span class="icon">
  113 + <i class="iconfont up cur">&#xe615;</i>
  114 + <i class="iconfont down">&#xe616;</i>
  115 + </span>
  116 + </a>
  117 + </li>
  118 + <li class="discount buriedpoint" data-bp-id="shop_listnav_discount_1">
  119 + <a href="javascript:void(0);">
  120 + <span class="nav-txt">折扣</span>
  121 + <span class="icon">
  122 + <i class="iconfont up cur">&#xe615;</i>
  123 + <i class="iconfont down">&#xe616;</i>
  124 + </span>
  125 + </a>
  126 + </li>
  127 + <li class="filter buriedpoint" data-bp-id="shop_listnav_filter_1">
  128 + <a href="javascript:void(0);">
  129 + <span class="nav-txt">筛选</span>
  130 + <span class="iconfont cur">&#xe613;</span>
  131 + </a>
  132 + </li>
  133 + </ul>
  134 + <div class='new-list hide'>
  135 + <ul>
  136 + <li class='active default' data-bp-id='shop_listnav_default_1'>默认</li>
  137 + <li class='new' data-bp-id='shop_listnav_new_1'>最新</li>
  138 + <li class='sale' data-bp-id='shop_listnav_sale_1'>销量</li>
  139 + </ul>
  140 + </div>
  141 + </div>
  142 +
131 <div id="goods-container" class="goods-container"> 143 <div id="goods-container" class="goods-container">
  144 + <div class="default-goods container clearfix"></div>
132 <div class="new-goods container clearfix"></div> 145 <div class="new-goods container clearfix"></div>
  146 + <div class="sale-goods container clearfix"></div>
133 <div class="price-goods container clearfix hide"></div> 147 <div class="price-goods container clearfix hide"></div>
134 <div class="discount-goods container clearfix hide"></div> 148 <div class="discount-goods container clearfix hide"></div>
135 149
@@ -22,9 +22,12 @@ var tip = require('../../plugin/tip'); @@ -22,9 +22,12 @@ var tip = require('../../plugin/tip');
22 var loading = require('../../plugin/loading'); 22 var loading = require('../../plugin/loading');
23 23
24 var $goodsContainer = $('#goods-container'), 24 var $goodsContainer = $('#goods-container'),
  25 + $defaultgc = $goodsContainer.children('.default-goods'),
25 $ngc = $goodsContainer.children('.new-goods'), 26 $ngc = $goodsContainer.children('.new-goods'),
  27 + $sgc = $goodsContainer.children('.sale-goods'),
26 $pgc = $goodsContainer.children('.price-goods'), 28 $pgc = $goodsContainer.children('.price-goods'),
27 - $dgc = $goodsContainer.children('.discount-goods'); 29 + $dgc = $goodsContainer.children('.discount-goods'),
  30 + $newList = $('.new-list');
28 31
29 var winH = $(window).height(); 32 var winH = $(window).height();
30 33
@@ -42,22 +45,34 @@ var $listNav = $('#list-nav'), @@ -42,22 +45,34 @@ var $listNav = $('#list-nav'),
42 45
43 // 导航数据信息 46 // 导航数据信息
44 navInfo = { 47 navInfo = {
45 - newest: { 48 + price: {
46 order: 1, 49 order: 1,
47 reload: true, 50 reload: true,
48 page: 0, 51 page: 0,
49 end: false 52 end: false
50 }, 53 },
51 - price: { 54 + discount: {
52 order: 1, 55 order: 1,
53 reload: true, 56 reload: true,
54 page: 0, 57 page: 0,
55 end: false 58 end: false
56 }, 59 },
57 - discount: {  
58 - order: 1, 60 + default: {
  61 + order: 0,
59 reload: true, 62 reload: true,
60 - page: 0, 63 + page: 1,
  64 + end: false
  65 + },
  66 + new: {
  67 + order: 0,
  68 + reload: true,
  69 + page: 1,
  70 + end: false
  71 + },
  72 + sale: {
  73 + order: 0,
  74 + reload: true,
  75 + page: 1,
61 end: false 76 end: false
62 } 77 }
63 }, 78 },
@@ -290,11 +305,15 @@ function search(opt) { @@ -290,11 +305,15 @@ function search(opt) {
290 305
291 // 导航类别 306 // 导航类别
292 if ($pre.hasClass('new')) { 307 if ($pre.hasClass('new')) {
293 - navType = 'newest'; 308 + navType = 'new';
294 } else if ($pre.hasClass('price')) { 309 } else if ($pre.hasClass('price')) {
295 navType = 'price'; 310 navType = 'price';
296 } else if ($pre.hasClass('discount')) { 311 } else if ($pre.hasClass('discount')) {
297 navType = 'discount'; 312 navType = 'discount';
  313 + } else if ($pre.hasClass('default')) {
  314 + navType = 'default';
  315 + } else if ($pre.hasClass('sale')) {
  316 + navType = 'sale';
298 } 317 }
299 318
300 nav = navInfo[navType]; 319 nav = navInfo[navType];
@@ -368,7 +387,7 @@ function search(opt) { @@ -368,7 +387,7 @@ function search(opt) {
368 $container; 387 $container;
369 388
370 switch (navType) { 389 switch (navType) {
371 - case 'newest': 390 + case 'new':
372 $container = $ngc; 391 $container = $ngc;
373 break; 392 break;
374 case 'price': 393 case 'price':
@@ -377,6 +396,12 @@ function search(opt) { @@ -377,6 +396,12 @@ function search(opt) {
377 case 'discount': 396 case 'discount':
378 $container = $dgc; 397 $container = $dgc;
379 break; 398 break;
  399 + case 'default':
  400 + $container = $defaultgc;
  401 + break;
  402 + case 'sale':
  403 + $container = $sgc;
  404 + break;
380 default: 405 default:
381 break; 406 break;
382 } 407 }
@@ -419,7 +444,7 @@ function search(opt) { @@ -419,7 +444,7 @@ function search(opt) {
419 // 用于统计点击了商品列表的第几个商品,序号从1开始计算。 444 // 用于统计点击了商品列表的第几个商品,序号从1开始计算。
420 if (window._yas) { 445 if (window._yas) {
421 switch (navType) { 446 switch (navType) {
422 - case 'newest': 447 + case 'new':
423 window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid, 448 window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid,
424 '', $('.new-goods .good-info .good-detail-img .good-thumb')); 449 '', $('.new-goods .good-info .good-detail-img .good-thumb'));
425 break; 450 break;
@@ -431,6 +456,14 @@ function search(opt) { @@ -431,6 +456,14 @@ function search(opt) {
431 window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid, 456 window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid,
432 '', $('.discount-goods .good-info .good-detail-img .good-thumb')); 457 '', $('.discount-goods .good-info .good-detail-img .good-thumb'));
433 break; 458 break;
  459 + case 'default':
  460 + window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid,
  461 + '', $('.default-goods .good-info .good-detail-img .good-thumb'));
  462 + break;
  463 + case 'sale':
  464 + window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid,
  465 + '', $('.sale-goods .good-info .good-detail-img .good-thumb'));
  466 + break;
434 default: 467 default:
435 break; 468 break;
436 } 469 }
@@ -482,6 +515,77 @@ $listNav.bind('contextmenu', function() { @@ -482,6 +515,77 @@ $listNav.bind('contextmenu', function() {
482 return false; 515 return false;
483 }); 516 });
484 517
  518 +function newListHide() {
  519 + var $firstLi = $listNav.find('li.first-li-more');
  520 +
  521 + if ($newList.hasClass('hide')) {
  522 + $firstLi.find('span.up').addClass('hide');
  523 + $firstLi.find('span.down').removeClass('hide');
  524 + } else {
  525 + $firstLi.find('span.down').addClass('hide');
  526 + $firstLi.find('span.up').removeClass('hide');
  527 + }
  528 +}
  529 +
  530 +$newList.on('touchstart', 'li', function(e) {
  531 + var navType, bpIdData = $(this).attr('data-bp-id') || '',
  532 + $firstLiDom = $listNav.find('li.first-li-more');
  533 +
  534 + e.preventDefault();
  535 + if ($(this).hasClass('new')) {
  536 + navType = 'new';
  537 + } else if ($(this).hasClass('default')) {
  538 + navType = 'default';
  539 + } else if ($(this).hasClass('sale')) {
  540 + navType = 'sale';
  541 + }
  542 +
  543 + $newList.addClass('hide');
  544 + $firstLiDom.find('.nav-txt').text($(this).text());
  545 + $firstLiDom.attr('data-bp-id', bpIdData).addClass('active').siblings().removeClass('active');
  546 + $listNav.find('.first-li-more').removeClass('new default sale').addClass(navType);
  547 +
  548 + $(document).trigger('shouldSendBpData', [bpIdData]);
  549 + newListHide();
  550 +
  551 + // 切换container显示
  552 + $goodsContainer.children('.container:not(.hide)').addClass('hide');
  553 +
  554 + switch (navType) {
  555 + case 'new':
  556 + $ngc.removeClass('hide');
  557 + break;
  558 +
  559 + case 'price':
  560 + $pgc.removeClass('hide');
  561 + break;
  562 +
  563 + case 'discount':
  564 + $dgc.removeClass('hide');
  565 + break;
  566 +
  567 + case 'default':
  568 + $defaultgc.removeClass('hide');
  569 + break;
  570 +
  571 + case 'sale':
  572 + $sgc.removeClass('hide');
  573 + break;
  574 + default:
  575 + break;
  576 + }
  577 +
  578 + search();
  579 +});
  580 +
  581 +$(document).on('touchstart', function(e) {
  582 + if (!$newList.hasClass('hide') &&
  583 + $(e.target).closest('.new-list, li.first-li-more').length <= 0) {
  584 + $newList.addClass('hide');
  585 + newListHide();
  586 + }
  587 +});
  588 +
485 $listNav.on('touchend touchcancel', function(e) { 589 $listNav.on('touchend touchcancel', function(e) {
486 var $this = $(e.target).closest('li'), 590 var $this = $(e.target).closest('li'),
487 nav, 591 nav,
@@ -489,6 +593,23 @@ $listNav.on('touchend touchcancel', function(e) { @@ -489,6 +593,23 @@ $listNav.on('touchend touchcancel', function(e) {
489 $active; 593 $active;
490 var bpIdData = $(this).find('.buriedpoint').attr('data-bp-id') || ''; 594 var bpIdData = $(this).find('.buriedpoint').attr('data-bp-id') || '';
491 595
  596 + if ($this.hasClass('first-li-more')) {
  597 + filter.hideFilter();
  598 + $newList.removeClass('hide');
  599 + if ($this.hasClass('default')) {
  600 + $newList.find('li.default').addClass('active').siblings().removeClass('active');
  601 + } else if ($this.hasClass('new')) {
  602 + $newList.find('li.new').addClass('active').siblings().removeClass('active');
  603 + } else if ($this.hasClass('sale')) {
  604 + $newList.find('li.sale').addClass('active').siblings().removeClass('active');
  605 + }
  606 + newListHide();
  607 + return true;
  608 + }
  609 +
  610 + // 最新li 列表
  611 + $newList.addClass('hide');
  612 +
492 if ($this.hasClass('filter')) { 613 if ($this.hasClass('filter')) {
493 614
494 // 筛选面板切换状态 615 // 筛选面板切换状态
@@ -509,11 +630,15 @@ $listNav.on('touchend touchcancel', function(e) { @@ -509,11 +630,15 @@ $listNav.on('touchend touchcancel', function(e) {
509 } else { 630 } else {
510 631
511 if ($this.hasClass('new')) { 632 if ($this.hasClass('new')) {
512 - navType = 'newest'; 633 + navType = 'new';
513 } else if ($this.hasClass('price')) { 634 } else if ($this.hasClass('price')) {
514 navType = 'price'; 635 navType = 'price';
515 } else if ($this.hasClass('discount')) { 636 } else if ($this.hasClass('discount')) {
516 navType = 'discount'; 637 navType = 'discount';
  638 + } else if ($this.hasClass('default')) {
  639 + navType = 'default';
  640 + } else if ($this.hasClass('sale')) {
  641 + navType = 'sale';
517 } 642 }
518 643
519 nav = navInfo[navType]; 644 nav = navInfo[navType];
@@ -548,7 +673,7 @@ $listNav.on('touchend touchcancel', function(e) { @@ -548,7 +673,7 @@ $listNav.on('touchend touchcancel', function(e) {
548 $goodsContainer.children('.container:not(.hide)').addClass('hide'); 673 $goodsContainer.children('.container:not(.hide)').addClass('hide');
549 674
550 switch (navType) { 675 switch (navType) {
551 - case 'newest': 676 + case 'new':
552 $ngc.removeClass('hide'); 677 $ngc.removeClass('hide');
553 break; 678 break;
554 679
@@ -559,6 +684,14 @@ $listNav.on('touchend touchcancel', function(e) { @@ -559,6 +684,14 @@ $listNav.on('touchend touchcancel', function(e) {
559 case 'discount': 684 case 'discount':
560 $dgc.removeClass('hide'); 685 $dgc.removeClass('hide');
561 break; 686 break;
  687 +
  688 + case 'default':
  689 + $defaultgc.removeClass('hide');
  690 + break;
  691 +
  692 + case 'sale':
  693 + $sgc.removeClass('hide');
  694 + break;
562 default: 695 default:
563 break; 696 break;
564 } 697 }
@@ -103,12 +103,6 @@ var $listNav = $('#list-nav'), @@ -103,12 +103,6 @@ var $listNav = $('#list-nav'),
103 page: 0, 103 page: 0,
104 end: false 104 end: false
105 }, 105 },
106 - newest: {  
107 - order: 0,  
108 - reload: true,  
109 - page: 1,  
110 - end: false  
111 - },  
112 price: { 106 price: {
113 order: 1, 107 order: 1,
114 reload: true, 108 reload: true,
@@ -631,7 +625,7 @@ function search(opt) { @@ -631,7 +625,7 @@ function search(opt) {
631 625
632 // 导航类别 626 // 导航类别
633 if ($pre.hasClass('new')) { 627 if ($pre.hasClass('new')) {
634 - navType = 'newest'; 628 + navType = 'new';
635 } else if ($pre.hasClass('price')) { 629 } else if ($pre.hasClass('price')) {
636 navType = 'price'; 630 navType = 'price';
637 } else if ($pre.hasClass('discount')) { 631 } else if ($pre.hasClass('discount')) {
@@ -683,7 +677,7 @@ function search(opt) { @@ -683,7 +677,7 @@ function search(opt) {
683 num; 677 num;
684 678
685 switch (navType) { 679 switch (navType) {
686 - case 'newest': 680 + case 'new':
687 $container = $ngc; 681 $container = $ngc;
688 break; 682 break;
689 case 'price': 683 case 'price':
@@ -784,7 +778,6 @@ $newList.on('touchstart', 'li', function(e) { @@ -784,7 +778,6 @@ $newList.on('touchstart', 'li', function(e) {
784 $goodsContainer.children('.container:not(.hide)').addClass('hide'); 778 $goodsContainer.children('.container:not(.hide)').addClass('hide');
785 779
786 switch (navType) { 780 switch (navType) {
787 - case 'newest':  
788 case 'new': 781 case 'new':
789 $ngc.removeClass('hide'); 782 $ngc.removeClass('hide');
790 break; 783 break;
@@ -890,7 +883,7 @@ $subNav.on('touchend touchcancel', function(e) { @@ -890,7 +883,7 @@ $subNav.on('touchend touchcancel', function(e) {
890 883
891 if ($this.hasClass('new')) { 884 if ($this.hasClass('new')) {
892 cname = '.new'; 885 cname = '.new';
893 - navType = 'newest'; 886 + navType = 'new';
894 } else if ($this.hasClass('price')) { 887 } else if ($this.hasClass('price')) {
895 cname = '.price'; 888 cname = '.price';
896 navType = 'price'; 889 navType = 'price';
@@ -927,7 +920,7 @@ $subNav.on('touchend touchcancel', function(e) { @@ -927,7 +920,7 @@ $subNav.on('touchend touchcancel', function(e) {
927 $goodsContainer.children('.container:not(.hide)').addClass('hide'); 920 $goodsContainer.children('.container:not(.hide)').addClass('hide');
928 921
929 switch (navType) { 922 switch (navType) {
930 - case 'newest': 923 + case 'new':
931 $ngc.removeClass('hide'); 924 $ngc.removeClass('hide');
932 break; 925 break;
933 926
@@ -964,7 +957,7 @@ $subNav.on('touchend touchcancel', function(e) { @@ -964,7 +957,7 @@ $subNav.on('touchend touchcancel', function(e) {
964 $goodsContainer.children('.container:not(.hide)').addClass('hide'); 957 $goodsContainer.children('.container:not(.hide)').addClass('hide');
965 958
966 switch (navType) { 959 switch (navType) {
967 - case 'newest': 960 + case 'new':
968 $ngc.removeClass('hide'); 961 $ngc.removeClass('hide');
969 break; 962 break;
970 963
@@ -114,7 +114,6 @@ @@ -114,7 +114,6 @@
114 text-align: center; 114 text-align: center;
115 border: 1px solid #fff; 115 border: 1px solid #fff;
116 color: #fff; 116 color: #fff;
117 -  
118 top: 50%; 117 top: 50%;
119 margin-top: -24px; 118 margin-top: -24px;
120 } 119 }
@@ -286,4 +285,30 @@ @@ -286,4 +285,30 @@
286 padding-left: 0.375rem; 285 padding-left: 0.375rem;
287 padding-top: 0.2rem; 286 padding-top: 0.2rem;
288 } 287 }
  288 +
  289 + .new-list {
  290 + width: 100%;
  291 + background-color: #fff;
  292 + font-size: 28px;
  293 + color: #444;
  294 + position: absolute;
  295 + z-index: 5;
  296 +
  297 + li {
  298 + margin-left: 35px;
  299 + height: 88px;
  300 + line-height: 88px;
  301 + border-bottom: 1px solid #e0e0e0;
  302 + padding-right: 38px;
  303 +
  304 + &:last-child {
  305 + border-bottom: none;
  306 + }
  307 +
  308 + &.active {
  309 + background: resolve('product/shop/check.png') no-repeat 94% center;
  310 + background-size: 36px 26px;
  311 + }
  312 + }
  313 + }
289 } 314 }
@@ -59,6 +59,8 @@ const getTypeCont = (type, order) => { @@ -59,6 +59,8 @@ const getTypeCont = (type, order) => {
59 return order === '0' ? 's_t_desc' : 's_t_asc'; 59 return order === '0' ? 's_t_desc' : 's_t_asc';
60 case 'hot': 60 case 'hot':
61 return order === '0' ? 's_n_desc' : 's_n_asc'; 61 return order === '0' ? 's_n_desc' : 's_n_asc';
  62 + case 'default':
  63 + return order === '0' ? 's_n_desc' : 's_n_asc';
62 default: 64 default:
63 return order === '0' ? 's_t_desc' : 's_t_asc'; 65 return order === '0' ? 's_t_desc' : 's_t_asc';
64 } 66 }