列表排序

陈峰
Commit be4d111c163d15122c0cc7c867f25d1043e3f69b 1 parent 15022131
Showing 7 changed files with 170 additions and 51 deletions
apps/product/views/action/newshop/brand.hbs
apps/product/views/action/newshop/shop-base.hbs
apps/product/views/action/newshop/shop-classics.hbs
doraemon/middleware/devtools.js
public/js/product/shop.classics.page.js
public/js/product/shop/shop-base.js
public/scss/product/shop/_shop-index.css
--- a/apps/product/views/action/newshop/brand.hbs
View file @be4d111
+++ b/apps/product/views/action/newshop/brand.hbs
View file @be4d111
@@ -51,21 +51,13 @@
     {{/ brandHome}}
     <!-- /品牌页面 -->
     <ul id="list-nav" class="list-nav clearfix">
-        {{#if isSearch}}
-        <li class="new active buriedpoint" data-bp-id="">
+        <li class="default active buriedpoint first-li-more" data-bp-id="shop_listnav_default_1">
             <a href="javascript:void(0);">
                 <span class="nav-txt">默认</span>
-                <span class="iconfont cur">&#xe616;</span>
+                <span class="iconfont up cur hide">&#xe615;</span>
+                <span class="iconfont down cur">&#xe616;</span>
             </a>
         </li>
-        {{else}}
-        <li class="new active buriedpoint" data-bp-id="shop_listnav_new_1">
-            <a href="javascript:void(0);">
-                <span class="nav-txt">最新</span>
-                <span class="iconfont cur">&#xe616;</span>
-            </a>
-        </li>
-        {{/if}}
         <li class="price buriedpoint" data-bp-id="shop_listnav_price_1">
             <a href="javascript:void(0);">
                 <span class="nav-txt">价格</span>
@@ -91,12 +83,18 @@
             </a>
         </li>
     </ul>
+    <div class='new-list hide'>
+        <ul>
+            <li class='active default' data-bp-id='shop_listnav_default_1'>默认</li>
+            <li class='new' data-bp-id='shop_listnav_new_1'>最新</li>
+        </ul>
+    </div>
     <div id="goods-container" class="goods-container">
-        <div class="new-goods container clearfix">
+        <div class="default-goods container clearfix">
             {{#newGoods}}
                 {{> common/goods}}
-            {{/newGoods}}
-        </div>
+            {{/newGoods}}</div>
+        <div class="new-goods container clearfix hide"></div>
         <div class="price-goods container clearfix hide"></div>
         <div class="discount-goods container clearfix hide"></div>
--- a/apps/product/views/action/newshop/shop-base.hbs
View file @be4d111
+++ b/apps/product/views/action/newshop/shop-base.hbs
View file @be4d111
@@ -29,21 +29,13 @@
     {{/ baseShopHome}}
     <!-- /基础店铺页面 -->
     <ul id="list-nav" class="list-nav clearfix">
-        {{#if isSearch}}
-        <li class="new active buriedpoint" data-bp-id="">
+        <li class="default active buriedpoint first-li-more" data-bp-id="shop_listnav_default_1">
             <a href="javascript:void(0);">
                 <span class="nav-txt">默认</span>
-                <span class="iconfont cur">&#xe616;</span>
+                <span class="iconfont up cur hide">&#xe615;</span>
+                <span class="iconfont down cur">&#xe616;</span>
             </a>
         </li>
-        {{else}}
-        <li class="new active buriedpoint" data-bp-id="shop_listnav_new_1">
-            <a href="javascript:void(0);">
-                <span class="nav-txt">最新</span>
-                <span class="iconfont cur">&#xe616;</span>
-            </a>
-        </li>
-        {{/if}}
         <li class="price buriedpoint" data-bp-id="shop_listnav_price_1">
             <a href="javascript:void(0);">
                 <span class="nav-txt">价格</span>
@@ -69,12 +61,18 @@
             </a>
         </li>
     </ul>
+    <div class='new-list hide'>
+        <ul>
+            <li class='active default' data-bp-id='shop_listnav_default_1'>默认</li>
+            <li class='new' data-bp-id='shop_listnav_new_1'>最新</li>
+        </ul>
+    </div>
     <div id="goods-container" class="goods-container">
-        <div class="new-goods container clearfix">
+        <div class="default-goods container clearfix">
             {{#newGoods}}
                 {{> common/goods}}
-            {{/newGoods}}
-        </div>
+            {{/newGoods}}</div>
+        <div class="new-goods container clearfix hide"></div>
         <div class="price-goods container clearfix hide"></div>
         <div class="discount-goods container clearfix hide"></div>
--- a/apps/product/views/action/newshop/shop-classics.hbs
View file @be4d111
+++ b/apps/product/views/action/newshop/shop-classics.hbs
View file @be4d111
@@ -43,11 +43,11 @@
             </div>
             <ul id="nav" class="nav">
-                <li class="active color buriedpoint" tab="home-page" data-bp-id="shop_nav_index_1">首页</li>
-                <li tab="new-arrival" data-bp-id="shop_nav_new_1" class="buriedpoint">上新</li>
-                <li tab="popularity" data-bp-id="shop_nav_populary_1" class="buriedpoint">人气</li>
+                <li class="active color buriedpoint" tab="home-page" data-bp-id="shop_nav_index_1"><div class="text">首页</div></li>
+                <li tab="new-arrival" data-bp-id="shop_nav_new_1" class="buriedpoint"><div class="text">上新</div></li>
+                <li tab="popularity" data-bp-id="shop_nav_populary_1" class="buriedpoint"><div class="text">人气</div></li>
                 <li data-bp-id="shop_nav_all_1" class="all-goods buriedpoint">
-                    <a href="{{allGoods}}" target="_blank">全部商品</a>
+                    <div class="text"><a href="{{allGoods}}" target="_blank">全部商品</a></div>
                 </li>
             </ul>
@@ -175,11 +175,11 @@
             {{> shop/shop-footer}}
         {{/unless}}
         <ul id="pos-nav" class="nav hide">
-            <li class="active color buriedpoint" tab="home-page" data-bp-id="shop_posnav_index_1">首页</li>
-            <li tab="new-arrival" class="buriedpoint" data-bp-id="shop_posnav_new_1">上新</li>
-            <li tab="popularity" class="buriedpoint" data-bp-id="shop_posnav_populary_1">人气</li>
+            <li class="active color buriedpoint" tab="home-page" data-bp-id="shop_posnav_index_1"><div class="text">首页</div></li>
+            <li tab="new-arrival" class="buriedpoint" data-bp-id="shop_posnav_new_1"><div class="text">上新</div></li>
+            <li tab="popularity" class="buriedpoint" data-bp-id="shop_posnav_populary_1"><div class="text">人气</div></li>
             <li class="all-goods buriedpoint" data-bp-id="shop_posnav_all_1">
-                <a href="{{allGoods}}" target="_blank">全部商品</a>
+                <div class="text"><a href="{{allGoods}}" target="_blank">全部商品</a></div>
             </li>
         </ul>
--- a/doraemon/middleware/devtools.js
View file @be4d111
+++ b/doraemon/middleware/devtools.js
View file @be4d111
 'use strict';
 const fs = require('fs');
-let devHost = '127.0.0.1';
+let devHost = '172.16.9.195';
 fs.readFile('.devhost', (err, buf)=> {
     if (!err) {
--- a/public/js/product/shop.classics.page.js
View file @be4d111
+++ b/public/js/product/shop.classics.page.js
View file @be4d111
 /**
  * 品牌店铺首页
  */
-
+require('./shop/coupon');
 var $ = require('yoho-jquery'),
     IScroll = require('yoho-iscroll/build/iscroll-probe'),
     lazyLoad = require('yoho-jquery-lazyload'),
@@ -358,6 +358,7 @@ function tabChange(dom, index) {
         } else if (activeTab === 'home-page') {
             $nav1.removeClass('fixed-top absolute');
             $nav2.removeClass('fixed-top absolute');
+            viewType = 1;
             scrollToNav1();
         }
         scH = $('#scroller').outerHeight();
@@ -370,13 +371,13 @@ function tabChange(dom, index) {
 function scrollHandler() {
     var scrollCall,
         sTop = $(document).scrollTop(),
+        scH = $('#scroller').outerHeight(),
         nav1OffsetTop = $('#nav').length ? $('#nav').offset().top : 0,
         nav2OffsetTop = $('#list-nav').length ? $('#list-nav').offset().top : 0;
     var tra;
-
     //分页加载店铺商品列表
-    if (sTop + winH > scH - 0.25 * $goodsContainer.height() - 50) {
+    if (sTop > scH - winH * 2 && viewType === 1) {
         if ($pre !== undefined) {
             search({
                 type: 'shop_id',
@@ -867,3 +868,4 @@ $collect.on('touchstart', function() {
         }
     });
 });
+
--- a/public/js/product/shop/shop-base.js
View file @be4d111
+++ b/public/js/product/shop/shop-base.js
View file @be4d111
@@ -23,9 +23,11 @@ var tip = require('../../plugin/tip');
 var loading = require('../../plugin/loading');
 var $goodsContainer = $('#goods-container'),
+    $defaultgc = $goodsContainer.children('.default-goods'),
     $ngc = $goodsContainer.children('.new-goods'),
     $pgc = $goodsContainer.children('.price-goods'),
-    $dgc = $goodsContainer.children('.discount-goods');
+    $dgc = $goodsContainer.children('.discount-goods'),
+    $newList = $('.new-list');
 var winH = $(window).height();
@@ -46,7 +48,13 @@ var $listNav = $('#list-nav'),
         newest: {
             order: 1,
             reload: true,
-            page: 0,
+            page: 1,
+            end: false
+        },
+        default: {
+            order: 0,
+            reload: true,
+            page: 1,
             end: false
         },
         price: {
@@ -298,8 +306,9 @@ function search(opt) {
         navType = 'price';
     } else if ($pre.hasClass('discount')) {
         navType = 'discount';
+    } else if ($pre.hasClass('default')) {
+        navType = 'default';
     }
-
     nav = navInfo[navType];
     page = nav.page + 1;
@@ -383,6 +392,9 @@ function search(opt) {
                 case 'discount':
                     $container = $dgc;
                     break;
+                case 'default':
+                    $container = $defaultgc;
+                    break;
                 default:
                     break;
             }
@@ -405,8 +417,10 @@ function search(opt) {
                         first_load = false;
                         //移除头四个
                         goodList.splice(0, 4);
+                        $container.append(goodList);
+                    } else {
+                        $container.html(goodList);
                     }
-                    $container.append(goodList);
                     lazyLoad($container.find('.lazy'));
                 } else {
                     num = $container.find('.good-info').length;
@@ -417,7 +431,6 @@ function search(opt) {
                 }
             }
-
             nav.reload = false;
             nav.page = page;
@@ -448,6 +461,10 @@ function search(opt) {
                         window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid,
                             '', $('.discount-goods .good-info .good-detail-img .good-thumb'));
                         break;
+                    case 'default':
+                        window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid,
+                            '', $('.default-goods .good-info .good-detail-img .good-thumb'));
+                        break;
                     default:
                         break;
                 }
@@ -498,7 +515,84 @@ writeSearch.bindWirteLocal($('#search-form'));
 $listNav.bind('contextmenu', function() {
     return false;
 });
+function newListHide() {
+    var $firstLi = $listNav.find('li.first-li-more');
+
+    if ($newList.hasClass('hide')) {
+        $firstLi.find('span.up').addClass('hide');
+        $firstLi.find('span.down').removeClass('hide');
+    } else {
+        $firstLi.find('span.down').addClass('hide');
+        $firstLi.find('span.up').removeClass('hide');
+    }
+}
+
+$newList.on('touchstart', 'li', function(e) {
+    var navType, bpIdData = $(this).attr('data-bp-id') || '',
+        $firstLiDom = $listNav.find('li.first-li-more'),
+        cls = '';
+
+    e.preventDefault();
+    if ($(this).hasClass('new')) {
+        navType = 'newest';
+        cls = 'new';
+    } else if ($(this).hasClass('default')) {
+        navType = 'default';
+        cls = 'default';
+    } else if ($(this).hasClass('sale')) {
+        navType = 'sale';
+        cls = 'sale';
+    }
+
+    $newList.addClass('hide');
+    $firstLiDom.find('.nav-txt').text($(this).text());
+    $firstLiDom.attr('data-bp-id', bpIdData).addClass('active').siblings().removeClass('active');
+    $listNav.find('.first-li-more').removeClass('new default sale').addClass(cls);
+
+    $(document).trigger('shouldSendBpData', [bpIdData]);
+    newListHide();
+
+    // 切换container显示
+    $goodsContainer.children('.container:not(.hide)').addClass('hide');
+
+    switch (navType) {
+        case 'newest':
+            $ngc.removeClass('hide');
+            break;
+
+        case 'price':
+            $pgc.removeClass('hide');
+            break;
+
+        case 'discount':
+            $dgc.removeClass('hide');
+            break;
+
+        case 'default':
+            $defaultgc.removeClass('hide');
+            break;
+
+        case 'sale':
+            $sgc.removeClass('hide');
+            break;
+        default:
+            break;
+    }
+    $pre = $('.first-li-more');
+    var nav = navInfo[navType];
+    if (nav.reload) {
+        search();
+    }
+    
+});
+$(document).on('touchstart', function(e) {
+    if (!$newList.hasClass('hide') &&
+        $(e.target).closest('.new-list, li.first-li-more').length <= 0) {
+        $newList.addClass('hide');
+        newListHide();
+    }
+});
 $listNav.on('touchend touchcancel', function(e) {
     var $this = $(e.target).closest('li'),
         nav,
@@ -506,6 +600,22 @@ $listNav.on('touchend touchcancel', function(e) {
         $active;
     var bpIdData = $(this).find('.buriedpoint').attr('data-bp-id') || '';
+    if ($this.hasClass('first-li-more')) {
+        filter.hideFilter();
+        $newList.toggleClass('hide');
+        if ($this.hasClass('default')) {
+            $newList.find('li.default').addClass('active').siblings().removeClass('active');
+        } else if ($this.hasClass('new')) {
+            $newList.find('li.new').addClass('active').siblings().removeClass('active');
+        } else if ($this.hasClass('sale')) {
+            $newList.find('li.sale').addClass('active').siblings().removeClass('active');
+        }
+        newListHide();
+        return true;
+    }
+    // 最新li 列表
+    $newList.addClass('hide');
+
     if ($this.hasClass('filter')) {
         // 筛选面板切换状态
@@ -531,7 +641,9 @@ $listNav.on('touchend touchcancel', function(e) {
             navType = 'price';
         } else if ($this.hasClass('discount')) {
             navType = 'discount';
-        }
+        } else if ($pre.hasClass('default')) {
+            navType = 'default';
+        } 
         nav = navInfo[navType];
@@ -576,6 +688,10 @@ $listNav.on('touchend touchcancel', function(e) {
                     case 'discount':
                         $dgc.removeClass('hide');
                         break;
+
+                    case 'default':
+                        $defaultgc.removeClass('hide');
+                        break;
                     default:
                         break;
                 }
@@ -689,3 +805,4 @@ $listNav.on('touchstart', 'li', function() {
 });
 require('../../common/footer');
+require('./coupon');
--- a/public/scss/product/shop/_shop-index.css
View file @be4d111
+++ b/public/scss/product/shop/_shop-index.css
View file @be4d111
@@ -90,16 +90,20 @@
         li{
             display: block;
-            height: 28px;
+            height: 100%;
+            line-height: 100%;
             float: left;
-            line-height: 28px;
             width: 24.7%;
             text-align: center;
-            border-left: 1px solid #e0e0e0;
-            margin-top: 30px;
             border-sizing: border-box;
             color: #b0b0b0;
-
+            .text {
+                display: block;
+                width: 100%;
+                border-left: 1px solid #e0e0e0;
+                margin-top: 30px;
+                height: 28px;
+            }
             &:first-child {
                 border-left: none;
             }