fe / yohobuywap-node · Commits

Go to a project

Authored by 陈峰
Commit 6399256cd23aad816929ad12e5284854ac2f902d 1 parent 19917ba3

经典店铺改造完成

Inline Side-by-side
Showing 3 changed files with 156 additions and 15 deletions
@@ -121,10 +121,11 @@ @@ -121,10 +121,11 @@
121 121
122 <div class="discount-area first" id="navlist2"> 122 <div class="discount-area first" id="navlist2">
123 <ul id="list-nav" class="home-sub-nav list-nav pos-list clearfix"> 123 <ul id="list-nav" class="home-sub-nav list-nav pos-list clearfix">
124 - <li data-bp-id="shop_listnav_new_1" class="new active buriedpoint"> 124 + <li class="default active buriedpoint first-li-more" data-bp-id="shop_listnav_default_1">
125 <a href="javascript:void(0);"> 125 <a href="javascript:void(0);">
126 - <span class="spanTest">最新</span>  
127 - <span class="iconfont cur">&#xe616;</span> 126 + <span class="nav-txt">默认</span>
  127 + <span class="iconfont up cur hide">&#xe615;</span>
  128 + <span class="iconfont down cur">&#xe616;</span>
128 </a> 129 </a>
129 </li> 130 </li>
130 <li class="price buriedpoint" data-bp-id="shop_listnav_price_1"> 131 <li class="price buriedpoint" data-bp-id="shop_listnav_price_1">
@@ -156,11 +157,11 @@ @@ -156,11 +157,11 @@
156 157
157 <div class="discount-area first"> 158 <div class="discount-area first">
158 <div id="goods-container" class="goods-container"> 159 <div id="goods-container" class="goods-container">
159 - <div class="new-goods container clearfix">  
160 - {{# goods}} 160 + <div class="default-goods container clearfix">
  161 + {{#newGoods}}
161 {{> common/goods}} 162 {{> common/goods}}
162 - {{/ goods}}  
163 - </div> 163 + {{/newGoods}}</div>
  164 + <div class="new-goods container clearfix hide"></div>
164 <div class="price-goods container hide clearfix"></div> 165 <div class="price-goods container hide clearfix"></div>
165 <div class="discount-goods container hide clearfix"></div> 166 <div class="discount-goods container hide clearfix"></div>
166 167
@@ -184,11 +185,11 @@ @@ -184,11 +185,11 @@
184 </ul> 185 </ul>
185 186
186 <ul id="pos-list" class="home-sub-nav pos-list hide"> 187 <ul id="pos-list" class="home-sub-nav pos-list hide">
187 - <li class="new active buriedpoint" data-bp-id="shop_poslist_new_1"> 188 + <li class="default active buriedpoint first-li-more" data-bp-id="shop_listnav_default_1">
188 <a href="javascript:void(0);"> 189 <a href="javascript:void(0);">
189 - <span class="spanTest">最新</span>  
190 - <span class="iconfont cur">&#xe616;</span>  
191 - <b></b> 190 + <span class="nav-txt">默认</span>
  191 + <span class="iconfont up cur hide">&#xe615;</span>
  192 + <span class="iconfont down cur">&#xe616;</span>
192 </a> 193 </a>
193 </li> 194 </li>
194 <li class="price buriedpoint" data-bp-id="shop_poslist_price_1"> 195 <li class="price buriedpoint" data-bp-id="shop_poslist_price_1">
@@ -218,6 +219,12 @@ @@ -218,6 +219,12 @@
218 </a> 219 </a>
219 </li> 220 </li>
220 </ul> 221 </ul>
  222 + <div class='new-list classics hide'>
  223 + <ul>
  224 + <li class='active default' data-bp-id='shop_listnav_default_1'>默认</li>
  225 + <li class='new' data-bp-id='shop_listnav_new_1'>最新</li>
  226 + </ul>
  227 + </div>
221 </div> 228 </div>
222 {{> common/filter}} 229 {{> common/filter}}
223 {{/ shopIndex}} 230 {{/ shopIndex}}
@@ -29,9 +29,11 @@ var $subNav = $('.home-sub-nav'), @@ -29,9 +29,11 @@ var $subNav = $('.home-sub-nav'),
29 $collect = $('#collect'), 29 $collect = $('#collect'),
30 $goodsContainer = $('#goods-container'), 30 $goodsContainer = $('#goods-container'),
31 $goodsChildren = $goodsContainer.children(), 31 $goodsChildren = $goodsContainer.children(),
  32 + $defaultgc = $goodsContainer.children('.default-goods'),
32 $ngc = $($goodsChildren.get(0)), 33 $ngc = $($goodsChildren.get(0)),
33 $pgc = $($goodsChildren.get(1)), 34 $pgc = $($goodsChildren.get(1)),
34 $dgc = $($goodsChildren.get(2)), 35 $dgc = $($goodsChildren.get(2)),
  36 + $newList = $('.new-list'),
35 shopId = $('input[name="shop_id"]').val(), 37 shopId = $('input[name="shop_id"]').val(),
36 appVersion = $('input[name="app_version"]').val(), 38 appVersion = $('input[name="app_version"]').val(),
37 brand = $('input[name="brand"]').val(), 39 brand = $('input[name="brand"]').val(),
@@ -141,6 +143,12 @@ var $listNav = $('#list-nav'), @@ -141,6 +143,12 @@ var $listNav = $('#list-nav'),
141 page: 1, 143 page: 1,
142 end: false 144 end: false
143 }, 145 },
  146 + default: {
  147 + order: 0,
  148 + reload: true,
  149 + page: 1,
  150 + end: false
  151 + },
144 hot: { 152 hot: {
145 order: 1, 153 order: 1,
146 reload: true, 154 reload: true,
@@ -544,6 +552,8 @@ function search(opt, callback) { @@ -544,6 +552,8 @@ function search(opt, callback) {
544 navType = 'price'; 552 navType = 'price';
545 } else if ($pre.hasClass('discount')) { 553 } else if ($pre.hasClass('discount')) {
546 navType = 'discount'; 554 navType = 'discount';
  555 + } else if ($pre.hasClass('default')) {
  556 + navType = 'default';
547 } 557 }
548 nav = navInfo[navType]; 558 nav = navInfo[navType];
549 559
@@ -596,6 +606,9 @@ function search(opt, callback) { @@ -596,6 +606,9 @@ function search(opt, callback) {
596 case 'discount': 606 case 'discount':
597 $container = $dgc; 607 $container = $dgc;
598 break; 608 break;
  609 + case 'default':
  610 + $container = $defaultgc;
  611 + break;
599 default: 612 default:
600 break; 613 break;
601 } 614 }
@@ -646,7 +659,94 @@ function search(opt, callback) { @@ -646,7 +659,94 @@ function search(opt, callback) {
646 $listNav.bind('contextmenu', function(e) { 659 $listNav.bind('contextmenu', function(e) {
647 return false; 660 return false;
648 }); 661 });
  662 +function newListHide() {
  663 + var $firstLi = $listNav.find('li.first-li-more');
  664 +
  665 + if ($newList.hasClass('hide')) {
  666 + $firstLi.find('span.up').addClass('hide');
  667 + $firstLi.find('span.down').removeClass('hide');
  668 + } else {
  669 + $firstLi.find('span.down').addClass('hide');
  670 + $firstLi.find('span.up').removeClass('hide');
  671 + }
  672 +}
  673 +$newList.on('touchstart', 'li', function(e) {
  674 + var navType, bpIdData = $(this).attr('data-bp-id') || '',
  675 + $firstLiDom = $subNav.find('li.first-li-more'),
  676 + cls = '';
  677 +
  678 + e.preventDefault();
  679 + if ($(this).hasClass('new')) {
  680 + navType = 'newest';
  681 + cls = 'new';
  682 + } else if ($(this).hasClass('default')) {
  683 + navType = 'default';
  684 + cls = 'default';
  685 + } else if ($(this).hasClass('sale')) {
  686 + navType = 'sale';
  687 + cls = 'sale';
  688 + }
  689 +
  690 + $newList.addClass('hide');
  691 + $firstLiDom.find('.nav-txt').text($(this).text());
  692 + $firstLiDom.attr('data-bp-id', bpIdData).addClass('active').siblings().removeClass('active');
  693 + $subNav.find('.first-li-more').removeClass('new default sale').addClass(cls);
  694 +
  695 + $(document).trigger('shouldSendBpData', [bpIdData]);
  696 + newListHide();
  697 +
  698 + // 切换container显示
  699 + $goodsContainer.children('.container:not(.hide)').addClass('hide');
  700 +
  701 + switch (navType) {
  702 + case 'newest':
  703 + $ngc.removeClass('hide');
  704 + break;
  705 +
  706 + case 'price':
  707 + $pgc.removeClass('hide');
  708 + break;
  709 +
  710 + case 'discount':
  711 + $dgc.removeClass('hide');
  712 + break;
  713 +
  714 + case 'default':
  715 + $defaultgc.removeClass('hide');
  716 + break;
  717 +
  718 + case 'sale':
  719 + $sgc.removeClass('hide');
  720 + break;
  721 + default:
  722 + break;
  723 + }
  724 + $pre = $('.first-li-more');
  725 + var nav = navInfo[navType];
  726 + if (nav.reload) {
  727 + search({
  728 + type: 'shop_id',
  729 + id: shopId,
  730 + brand: brand,
  731 + appVersion: appVersion,
  732 + url: '/product/search/search',
  733 + nextPage: false
  734 + }, function() {
  735 + });
  736 + }
  737 +
  738 +});
649 739
  740 +$(document).on('touchstart', function(e) {
  741 + if (!$newList.hasClass('hide') &&
  742 + $(e.target).closest('.new-list, li.first-li-more').length <= 0) {
  743 + $newList.addClass('hide');
  744 + newListHide();
  745 + }
  746 +});
  747 +function subNavScrollTo() {
  748 + window.scrollTo(0, $('#list-nav').offset().top + 5)
  749 +}
650 $subNav.on('touchend touchcancel', function(e) { 750 $subNav.on('touchend touchcancel', function(e) {
651 var $this = $(e.target).closest('li'), 751 var $this = $(e.target).closest('li'),
652 cname, 752 cname,
@@ -661,6 +761,22 @@ $subNav.on('touchend touchcancel', function(e) { @@ -661,6 +761,22 @@ $subNav.on('touchend touchcancel', function(e) {
661 if (typeof $this === 'undefined' || $this.length === 0) { 761 if (typeof $this === 'undefined' || $this.length === 0) {
662 return; 762 return;
663 } 763 }
  764 + if ($this.hasClass('first-li-more')) {
  765 + filter.hideFilter();
  766 + $newList.toggleClass('hide');
  767 + if ($this.hasClass('default')) {
  768 + $newList.find('li.default').addClass('active').siblings().removeClass('active');
  769 + } else if ($this.hasClass('new')) {
  770 + $newList.find('li.new').addClass('active').siblings().removeClass('active');
  771 + } else if ($this.hasClass('sale')) {
  772 + $newList.find('li.sale').addClass('active').siblings().removeClass('active');
  773 + }
  774 + newListHide();
  775 + subNavScrollTo();
  776 + return true;
  777 + }
  778 + // 最新li 列表
  779 + $newList.addClass('hide');
664 780
665 if ($this.hasClass('filter')) { 781 if ($this.hasClass('filter')) {
666 782
@@ -682,7 +798,7 @@ $subNav.on('touchend touchcancel', function(e) { @@ -682,7 +798,7 @@ $subNav.on('touchend touchcancel', function(e) {
682 } 798 }
683 799
684 } 800 }
685 - window.scrollTo(0, $('#list-nav').offset().top + 5) 801 + subNavScrollTo();
686 } else { 802 } else {
687 803
688 filter.hideFilter();// 隐藏面板 804 filter.hideFilter();// 隐藏面板
@@ -696,7 +812,10 @@ $subNav.on('touchend touchcancel', function(e) { @@ -696,7 +812,10 @@ $subNav.on('touchend touchcancel', function(e) {
696 } else if ($this.hasClass('discount')) { 812 } else if ($this.hasClass('discount')) {
697 cname = '.discount'; 813 cname = '.discount';
698 navType = 'discount'; 814 navType = 'discount';
699 - } 815 + } else if ($this.hasClass('default')) {
  816 + cname = '.default';
  817 + navType = 'default';
  818 + }
700 819
701 nav = navInfo[navType]; 820 nav = navInfo[navType];
702 821
@@ -729,6 +848,10 @@ $subNav.on('touchend touchcancel', function(e) { @@ -729,6 +848,10 @@ $subNav.on('touchend touchcancel', function(e) {
729 case 'discount': 848 case 'discount':
730 $dgc.removeClass('hide'); 849 $dgc.removeClass('hide');
731 break; 850 break;
  851 +
  852 + case 'default':
  853 + $defaultgc.removeClass('hide');
  854 + break;
732 default: 855 default:
733 break; 856 break;
734 } 857 }
@@ -758,6 +881,10 @@ $subNav.on('touchend touchcancel', function(e) { @@ -758,6 +881,10 @@ $subNav.on('touchend touchcancel', function(e) {
758 case 'discount': 881 case 'discount':
759 $dgc.removeClass('hide'); 882 $dgc.removeClass('hide');
760 break; 883 break;
  884 +
  885 + case 'default':
  886 + $defaultgc.removeClass('hide');
  887 + break;
761 default: 888 default:
762 break; 889 break;
763 } 890 }
@@ -776,7 +903,7 @@ $subNav.on('touchend touchcancel', function(e) { @@ -776,7 +903,7 @@ $subNav.on('touchend touchcancel', function(e) {
776 url: '/product/search/search', 903 url: '/product/search/search',
777 nextPage: false 904 nextPage: false
778 }, function() { 905 }, function() {
779 - window.scrollTo(0, $('#list-nav').offset().top + 5) 906 + subNavScrollTo();
780 }); 907 });
781 } 908 }
782 } 909 }
@@ -106,6 +106,9 @@ @@ -106,6 +106,9 @@
106 } 106 }
107 &:first-child { 107 &:first-child {
108 border-left: none; 108 border-left: none;
  109 + .text {
  110 + border-left: none;
  111 + }
109 } 112 }
110 113
111 a { 114 a {
@@ -595,7 +598,11 @@ @@ -595,7 +598,11 @@
595 color: #444; 598 color: #444;
596 position: absolute; 599 position: absolute;
597 z-index: 5; 600 z-index: 5;
598 - 601 + &.classics {
  602 + position: fixed;
  603 + top: 90px;
  604 + left: 0px;
  605 + }
599 li { 606 li {
600 margin-left: 35px; 607 margin-left: 35px;
601 height: 88px; 608 height: 88px;