fe / yohobuywap-node · Commits

Go to a project

Authored by 郝肖肖
Commit f1dd16561065514fea3b918462a27c1b4afe6b69 1 parent 16b02ab0

经典店铺默认、最新

Inline Side-by-side
Showing 4 changed files with 116 additions and 229 deletions
@@ -119,11 +119,14 @@ @@ -119,11 +119,14 @@
119 119
120 <div class="discount-area first" id="navlist2"> 120 <div class="discount-area first" id="navlist2">
121 <ul id="list-nav" class="home-sub-nav list-nav pos-list clearfix"> 121 <ul id="list-nav" class="home-sub-nav list-nav pos-list clearfix">
122 - <li class="default active buriedpoint first-li-more" data-bp-id="shop_listnav_default_1"> 122 + <li class="default active buriedpoint" data-bp-id="shop_listnav_default_1">
123 <a href="javascript:void(0);"> 123 <a href="javascript:void(0);">
124 <span class="nav-txt">默认</span> 124 <span class="nav-txt">默认</span>
125 - <span class="iconfont up cur hide">&#xe615;</span>  
126 - <span class="iconfont down cur">&#xe616;</span> 125 + </a>
  126 + </li>
  127 + <li class="new buriedpoint" data-bp-id="shop_listnav_new_1">
  128 + <a href="javascript:void(0);">
  129 + <span class="nav-txt">最新</span>
127 </a> 130 </a>
128 </li> 131 </li>
129 <li class="price buriedpoint" data-bp-id="shop_listnav_price_1"> 132 <li class="price buriedpoint" data-bp-id="shop_listnav_price_1">
@@ -151,12 +154,6 @@ @@ -151,12 +154,6 @@
151 </a> 154 </a>
152 </li> 155 </li>
153 </ul> 156 </ul>
154 - <div class='new-list classics hide'>  
155 - <ul>  
156 - <li class='active default' data-bp-id='shop_listnav_default_1'>默认</li>  
157 - <li class='new' data-bp-id='shop_listnav_new_1'>最新</li>  
158 - </ul>  
159 - </div>  
160 </div> 157 </div>
161 158
162 <div class="discount-area first"> 159 <div class="discount-area first">
@@ -189,11 +186,14 @@ @@ -189,11 +186,14 @@
189 </ul> 186 </ul>
190 187
191 <ul id="pos-list" class="home-sub-nav pos-list hide"> 188 <ul id="pos-list" class="home-sub-nav pos-list hide">
192 - <li class="default active buriedpoint first-li-more" data-bp-id="shop_listnav_default_1"> 189 + <li class="default active buriedpoint" data-bp-id="shop_listnav_default_1">
193 <a href="javascript:void(0);"> 190 <a href="javascript:void(0);">
194 <span class="nav-txt">默认</span> 191 <span class="nav-txt">默认</span>
195 - <span class="iconfont up cur hide">&#xe615;</span>  
196 - <span class="iconfont down cur">&#xe616;</span> 192 + </a>
  193 + </li>
  194 + <li class="new buriedpoint" data-bp-id="shop_listnav_new_1">
  195 + <a href="javascript:void(0);">
  196 + <span class="nav-txt">最新</span>
197 </a> 197 </a>
198 </li> 198 </li>
199 <li class="price buriedpoint" data-bp-id="shop_poslist_price_1"> 199 <li class="price buriedpoint" data-bp-id="shop_poslist_price_1">
@@ -222,7 +222,7 @@ @@ -222,7 +222,7 @@
222 </a> 222 </a>
223 </li> 223 </li>
224 </ul> 224 </ul>
225 - 225 +
226 <!--搜索默认排序列表--> 226 <!--搜索默认排序列表-->
227 {{> product/search-default-sort-list}} 227 {{> product/search-default-sort-list}}
228 </div> 228 </div>
@@ -151,7 +151,7 @@ var $listNav = $('#list-nav'), @@ -151,7 +151,7 @@ var $listNav = $('#list-nav'),
151 default: { 151 default: {
152 order: 0, 152 order: 0,
153 reload: true, 153 reload: true,
154 - page: 1, 154 + page: 0,
155 end: false 155 end: false
156 }, 156 },
157 hot: { 157 hot: {
@@ -187,11 +187,6 @@ var viewType = 1, // 1-首页,2-上新,3-人气 @@ -187,11 +187,6 @@ var viewType = 1, // 1-首页,2-上新,3-人气
187 listModValue = 4 - listCount % 4, 187 listModValue = 4 - listCount % 4,
188 listIndex; 188 listIndex;
189 189
190 -  
191 -// $('.main-wrap').css({  
192 -// position: 'static'  
193 -// });  
194 -  
195 // 焦点效果 190 // 焦点效果
196 if ($('.banner-swiper').find('li').size() > 1) { 191 if ($('.banner-swiper').find('li').size() > 1) {
197 bannerSwiper = new Swiper('.banner-swiper', { 192 bannerSwiper = new Swiper('.banner-swiper', {
@@ -445,22 +440,6 @@ function scrollHandler(e) { @@ -445,22 +440,6 @@ function scrollHandler(e) {
445 } 440 }
446 } 441 }
447 442
448 -document.addEventListener('touchmove', function(e) {  
449 - // sub classify不阻止默认事件  
450 - if ($(e.target).closest('.sub-classify').length === 0) {  
451 - // e.preventDefault();  
452 - }  
453 - if ($('.filter-mask').length && !$('.filter-mask').hasClass('hide')) {  
454 - // e.preventDefault();  
455 - // e.stopPropagation();  
456 - }  
457 -}, false);  
458 -  
459 -/* if (!isIphone) {  
460 - return;  
461 - }*/  
462 -  
463 -  
464 // window ready 后重新refresh iscroll 443 // window ready 后重新refresh iscroll
465 $(window).ready(function() { 444 $(window).ready(function() {
466 // myScroll && myScroll.refresh(); 445 // myScroll && myScroll.refresh();
@@ -683,20 +662,9 @@ function search(opt, callback) { @@ -683,20 +662,9 @@ function search(opt, callback) {
683 $listNav.bind('contextmenu', function(e) { 662 $listNav.bind('contextmenu', function(e) {
684 return false; 663 return false;
685 }); 664 });
686 -function newListHide() {  
687 - var $firstLi = $listNav.find('li.first-li-more');  
688 665
689 - if ($newList.hasClass('hide')) {  
690 - $firstLi.find('span.up').addClass('hide');  
691 - $firstLi.find('span.down').removeClass('hide');  
692 - } else {  
693 - $firstLi.find('span.down').addClass('hide');  
694 - $firstLi.find('span.up').removeClass('hide');  
695 - }  
696 -}  
697 $newList.on('touchstart', 'li', function(e) { 666 $newList.on('touchstart', 'li', function(e) {
698 var navType, bpIdData = $(this).attr('data-bp-id') || '', 667 var navType, bpIdData = $(this).attr('data-bp-id') || '',
699 - $firstLiDom = $subNav.find('li.first-li-more'),  
700 cls = ''; 668 cls = '';
701 669
702 e.preventDefault(); 670 e.preventDefault();
@@ -711,14 +679,7 @@ $newList.on('touchstart', 'li', function(e) { @@ -711,14 +679,7 @@ $newList.on('touchstart', 'li', function(e) {
711 cls = 'sale'; 679 cls = 'sale';
712 } 680 }
713 681
714 - $newList.addClass('hide');  
715 - $('#pos-list').addClass('hide');  
716 - $firstLiDom.find('.nav-txt').text($(this).text());  
717 - $firstLiDom.attr('data-bp-id', bpIdData).addClass('active').siblings().removeClass('active');  
718 - $subNav.find('.first-li-more').removeClass('new default sale').addClass(cls);  
719 -  
720 $(document).trigger('shouldSendBpData', [bpIdData]); 682 $(document).trigger('shouldSendBpData', [bpIdData]);
721 - newListHide();  
722 683
723 // 切换container显示 684 // 切换container显示
724 $goodsContainer.children('.container:not(.hide)').addClass('hide'); 685 $goodsContainer.children('.container:not(.hide)').addClass('hide');
@@ -746,7 +707,7 @@ $newList.on('touchstart', 'li', function(e) { @@ -746,7 +707,7 @@ $newList.on('touchstart', 'li', function(e) {
746 default: 707 default:
747 break; 708 break;
748 } 709 }
749 - $pre = $('.first-li-more'); 710 +
750 var nav = navInfo[navType]; 711 var nav = navInfo[navType];
751 712
752 if (nav.reload) { 713 if (nav.reload) {
@@ -765,13 +726,6 @@ $newList.on('touchstart', 'li', function(e) { @@ -765,13 +726,6 @@ $newList.on('touchstart', 'li', function(e) {
765 726
766 }); 727 });
767 728
768 -$(document).on('touchstart', function(e) {  
769 - if (!$newList.hasClass('hide') &&  
770 - $(e.target).closest('.new-list, li.first-li-more').length <= 0) {  
771 - $newList.addClass('hide');  
772 - newListHide();  
773 - }  
774 -});  
775 function subNavScrollTo() { 729 function subNavScrollTo() {
776 setTimeout(function() { 730 setTimeout(function() {
777 window.scrollTo(0, $('#list-nav').offset().top + 5); 731 window.scrollTo(0, $('#list-nav').offset().top + 5);
@@ -791,145 +745,119 @@ $subNav.on('touchend touchcancel', function(e) { @@ -791,145 +745,119 @@ $subNav.on('touchend touchcancel', function(e) {
791 if (typeof $this === 'undefined' || $this.length === 0) { 745 if (typeof $this === 'undefined' || $this.length === 0) {
792 return; 746 return;
793 } 747 }
794 - if ($this.hasClass('first-li-more')) {  
795 - filter.hideFilter();  
796 - $newList.toggleClass('hide');  
797 - if ($('#pos-list').hasClass('hide')) {  
798 - $newList.removeClass('classics');  
799 - } else {  
800 - $newList.addClass('classics');  
801 - }  
802 - if ($this.hasClass('default')) {  
803 - $newList.find('li.default').addClass('active').siblings().removeClass('active');  
804 - } else if ($this.hasClass('new')) {  
805 - $newList.find('li.new').addClass('active').siblings().removeClass('active');  
806 - } else if ($this.hasClass('sale')) {  
807 - $newList.find('li.sale').addClass('active').siblings().removeClass('active');  
808 - }  
809 - newListHide();  
810 748
811 - } else {  
812 - // 最新li 列表  
813 - $newList.addClass('hide'); 749 + // 最新li 列表
  750 + $newList.addClass('hide');
814 751
815 - if ($this.hasClass('filter')) { 752 + if ($this.hasClass('filter')) {
816 753
817 - // 筛选面板切换状态  
818 - if ($this.hasClass('active') && !$('.filter-mask').hasClass('hide')) {  
819 - $('.home-sub-nav>li.filter').removeClass('active');  
820 - $this.removeClass('active');  
821 - filter.hideFilter(); 754 + // 筛选面板切换状态
  755 + if ($this.hasClass('active') && !$('.filter-mask').hasClass('hide')) {
  756 + $('.home-sub-nav>li.filter').removeClass('active');
  757 + $this.removeClass('active');
  758 + filter.hideFilter();
822 759
823 - } else {  
824 - $('.home-sub-nav>li.filter').addClass('active');  
825 - $this.addClass('active'); 760 + } else {
  761 + $('.home-sub-nav>li.filter').addClass('active');
  762 + $this.addClass('active');
826 763
827 - filter.showFilter();  
828 -  
829 - if ($this.closest('.pos-list').length > 0) {  
830 - $('.filter-mask').addClass('call-by-fix').css('top', '');  
831 - } else {  
832 - $('.filter-mask').removeClass('call-by-fix').css('top', $this.offset().top + nav1H);  
833 - }  
834 - if ($('#pos-list').hasClass('hide')) {  
835 - $('#pos-list').removeClass('hide');  
836 - } 764 + filter.showFilter();
837 765
  766 + if ($this.closest('.pos-list').length > 0) {
  767 + $('.filter-mask').addClass('call-by-fix').css('top', '');
  768 + } else {
  769 + $('.filter-mask').removeClass('call-by-fix').css('top', $this.offset().top + nav1H);
  770 + }
  771 + if ($('#pos-list').hasClass('hide')) {
  772 + $('#pos-list').removeClass('hide');
838 } 773 }
839 - } else {  
840 774
841 - filter.hideFilter();// 隐藏面板 775 + }
  776 + } else {
842 777
843 - if ($this.hasClass('new')) {  
844 - cname = '.new';  
845 - navType = 'newest';  
846 - } else if ($this.hasClass('price')) {  
847 - cname = '.price';  
848 - navType = 'price';  
849 - } else if ($this.hasClass('discount')) {  
850 - cname = '.discount';  
851 - navType = 'discount';  
852 - } else if ($this.hasClass('default')) {  
853 - cname = '.default';  
854 - navType = 'default';  
855 - } 778 + filter.hideFilter();// 隐藏面板
  779 +
  780 + if ($this.hasClass('new')) {
  781 + cname = '.new';
  782 + navType = 'newest';
  783 + } else if ($this.hasClass('price')) {
  784 + cname = '.price';
  785 + navType = 'price';
  786 + } else if ($this.hasClass('discount')) {
  787 + cname = '.discount';
  788 + navType = 'discount';
  789 + } else if ($this.hasClass('default')) {
  790 + cname = '.default';
  791 + navType = 'default';
  792 + }
856 793
857 - nav = navInfo[navType];  
858 - var reloadCb = function() {  
859 - $goodsContainer.children('.container:not(.hide)').addClass('hide');  
860 - switch (navType) {  
861 - case 'newest':  
862 - $ngc.removeClass('hide');  
863 - break;  
864 -  
865 - case 'price':  
866 - $pgc.removeClass('hide');  
867 - break;  
868 -  
869 - case 'discount':  
870 - $dgc.removeClass('hide');  
871 - break;  
872 - case 'default':  
873 - $defaultgc.removeClass('hide');  
874 - break;  
875 - default:  
876 - break;  
877 - }  
878 - }; 794 + nav = navInfo[navType];
  795 + var reloadCb = function() {
  796 + $goodsContainer.children('.container:not(.hide)').addClass('hide');
  797 + switch (navType) {
  798 + case 'newest':
  799 + $ngc.removeClass('hide');
  800 + break;
879 801
880 - if ($this.hasClass('active')) { 802 + case 'price':
  803 + $pgc.removeClass('hide');
  804 + break;
881 805
882 - // 最新无排序切换  
883 - if ($this.hasClass('new')) {  
884 - return;  
885 - } 806 + case 'discount':
  807 + $dgc.removeClass('hide');
  808 + break;
  809 + case 'default':
  810 + $defaultgc.removeClass('hide');
  811 + break;
  812 + default:
  813 + break;
  814 + }
  815 + };
886 816
887 - if ($this.hasClass('price') || $this.hasClass('discount')) {  
888 - $this = $subNav.find(cname); 817 + if ($this.hasClass('active')) {
889 818
890 - // 价格/折扣切换排序状态  
891 - $this.find('.icon > .iconfont').toggleClass('cur');  
892 - nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML  
893 - nav.order = nav.order === 0 ? 1 : 0; // 切换排序 819 + // 最新无排序切换
  820 + if ($this.hasClass('new')) {
  821 + return;
  822 + }
894 823
895 - }  
896 - } else {  
897 - $active = $subNav.find('.active'); 824 + if ($this.hasClass('price') || $this.hasClass('discount')) {
  825 + $this = $subNav.find(cname);
898 826
899 - if ($active.hasClass('filter')) { 827 + // 价格/折扣切换排序状态
  828 + $this.find('.icon > .iconfont').toggleClass('cur');
  829 + nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML
  830 + nav.order = nav.order === 0 ? 1 : 0; // 切换排序
900 831
901 - // 若之前active项为筛选，则隐藏筛选面板  
902 - filter.hideFilter();  
903 - }  
904 - $subNav.children().removeClass('active');  
905 - $subNav.find(cname).addClass('active');  
906 - }  
907 - if (!$('#pos-list').hasClass('hide')) {  
908 - subNavScrollTo();  
909 } 832 }
910 - if (nav.reload) {  
911 - search({  
912 - type: 'shop_id',  
913 - id: shopId,  
914 - brand: brand,  
915 - appVersion: appVersion,  
916 - url: '/product/search/search',  
917 - nextPage: false  
918 - }, reloadCb); 833 + } else {
  834 + $active = $subNav.find('.active');
  835 +
  836 + if ($active.hasClass('filter')) {
  837 +
  838 + // 若之前active项为筛选，则隐藏筛选面板
  839 + filter.hideFilter();
919 } 840 }
  841 + $subNav.children().removeClass('active');
  842 + $subNav.find(cname).addClass('active');
  843 + }
  844 + if (!$('#pos-list').hasClass('hide')) {
  845 + subNavScrollTo();
  846 + }
  847 + if (nav.reload) {
  848 + search({
  849 + type: 'shop_id',
  850 + id: shopId,
  851 + brand: brand,
  852 + appVersion: appVersion,
  853 + url: '/product/search/search',
  854 + nextPage: false
  855 + }, reloadCb);
920 } 856 }
921 } 857 }
  858 +
922 if ($('#list-nav').offset().top > $(document).scrollTop() && $('.filter-mask').hasClass('hide')) { 859 if ($('#list-nav').offset().top > $(document).scrollTop() && $('.filter-mask').hasClass('hide')) {
923 - if ($this.hasClass('first-li-more') && !$('#pos-list').hasClass('hide')) {  
924 - if ($('.new-list').hasClass('hide')) {  
925 - $('.new-list').removeClass('full-height');  
926 - $('#pos-list').addClass('hide');  
927 - } else {  
928 - $('.new-list').addClass('full-height');  
929 - }  
930 - } else {  
931 - $('#pos-list').addClass('hide');  
932 - } 860 + $('#pos-list').addClass('hide');
933 } else { 861 } else {
934 $('.new-list').removeClass('full-height'); 862 $('.new-list').removeClass('full-height');
935 } 863 }
@@ -942,7 +870,6 @@ $listNav.on('touchstart', 'li', function(e) { @@ -942,7 +870,6 @@ $listNav.on('touchstart', 'li', function(e) {
942 $(this).addClass('bytouch'); 870 $(this).addClass('bytouch');
943 }).on('touchend touchcancel', function() { 871 }).on('touchend touchcancel', function() {
944 $listNav.find('li').removeClass('bytouch'); 872 $listNav.find('li').removeClass('bytouch');
945 -  
946 }); 873 });
947 874
948 $nav2.on('touchstart', 'li', function(e) { 875 $nav2.on('touchstart', 'li', function(e) {
@@ -41,11 +41,11 @@ @@ -41,11 +41,11 @@
41 font-size: 14PX; 41 font-size: 14PX;
42 line-height: 14PX; 42 line-height: 14PX;
43 } 43 }
  44 + }
44 45
45 - &:first-child {  
46 - .text {  
47 - border-left: none;  
48 - } 46 + li:first-child {
  47 + .text {
  48 + border-left: none;
49 } 49 }
50 } 50 }
51 } 51 }
@@ -363,7 +363,6 @@ @@ -363,7 +363,6 @@
363 .goods-container { 363 .goods-container {
364 position: relative; 364 position: relative;
365 min-height: 440px; 365 min-height: 440px;
366 - /* padding-left: 15px; */  
367 padding-top: 20px; 366 padding-top: 20px;
368 border-bottom: 1px solid #e0e0e0; 367 border-bottom: 1px solid #e0e0e0;
369 } 368 }
@@ -383,19 +382,6 @@ @@ -383,19 +382,6 @@
383 -webkit-transform: scale(0.8); 382 -webkit-transform: scale(0.8);
384 font-weight: bold; 383 font-weight: bold;
385 } 384 }
386 -  
387 - .default:after,  
388 - .newest:after,  
389 - .new:after,  
390 - .price:after,  
391 - .discount:after {  
392 - height: 28px;  
393 - content: "";  
394 - border-left: 1px solid #e0e0e0;  
395 - position: absolute;  
396 - top: 25px;  
397 - left: 163px;  
398 - }  
399 } 385 }
400 386
401 .discount-area { 387 .discount-area {
@@ -411,7 +397,7 @@ @@ -411,7 +397,7 @@
411 height: 40PX; 397 height: 40PX;
412 float: left; 398 float: left;
413 line-height: 40PX; 399 line-height: 40PX;
414 - width: 24.8%; 400 + width: 20%;
415 text-align: center; 401 text-align: center;
416 border-sizing: border-box; 402 border-sizing: border-box;
417 position: relative; 403 position: relative;
@@ -420,33 +406,12 @@ @@ -420,33 +406,12 @@
420 padding-top: 0; 406 padding-top: 0;
421 font-size: 14PX; 407 font-size: 14PX;
422 } 408 }
423 -  
424 - &.default:after,  
425 - &.newest:after,  
426 - &.new:after,  
427 - &.price:after,  
428 - &.discount:after {  
429 - height: 28px;  
430 - content: "";  
431 - border-left: 1px solid #e0e0e0;  
432 - position: absolute;  
433 - top: 25px;  
434 - left: 163px;  
435 - }  
436 } 409 }
437 410
438 .active .cur { 411 .active .cur {
439 color: #444; 412 color: #444;
440 } 413 }
441 414
442 - .list-nav .icon .up {  
443 - top: -14PX;  
444 - }  
445 -  
446 - .list-nav .icon .down {  
447 - top: -7PX;  
448 - }  
449 -  
450 .goods-container { 415 .goods-container {
451 padding-top: 30px; 416 padding-top: 30px;
452 padding-bottom: 100px; 417 padding-bottom: 100px;
@@ -567,7 +532,7 @@ @@ -567,7 +532,7 @@
567 height: 40PX; 532 height: 40PX;
568 float: left; 533 float: left;
569 line-height: 40PX; 534 line-height: 40PX;
570 - width: 24.8%; 535 + width: 20%;
571 text-align: center; 536 text-align: center;
572 border-sizing: border-box; 537 border-sizing: border-box;
573 538
@@ -580,8 +545,11 @@ @@ -580,8 +545,11 @@
580 box-sizing: border-box; 545 box-sizing: border-box;
581 text-align: center; 546 text-align: center;
582 width: 100%; 547 width: 100%;
583 - height: 100%;  
584 color: #b0b0b0; 548 color: #b0b0b0;
  549 + border-left: 1px solid #e0e0e0;
  550 + height: 14PX;
  551 + line-height: 14PX;
  552 + margin-top: 14PX;
585 } 553 }
586 } 554 }
587 555
@@ -613,14 +581,6 @@ @@ -613,14 +581,6 @@
613 } 581 }
614 } 582 }
615 583
616 - .pos-list .icon .up {  
617 - top: -14PX;  
618 - }  
619 -  
620 - .pos-list .icon .down {  
621 - top: -7PX;  
622 - }  
623 -  
624 .category-list-top-board { 584 .category-list-top-board {
625 border-top: 1px solid #e0e0e0; 585 border-top: 1px solid #e0e0e0;
626 } 586 }