首页

zhangxiaoru
Commit 1d0989c683bb5b444c36fcab608feb861ae1a803 1 parent 62b58e1f
Showing 4 changed files with 172 additions and 52 deletions
static/js/product/shop.js
static/sass/product/_shop-index.css
template/m.yohobuy.com/actions/product/index/shop.phtml
template/m.yohobuy.com/partials/product/goods-nav-top.phtml
--- a/static/js/product/shop.js
View file @1d0989c
+++ b/static/js/product/shop.js
View file @1d0989c
@@ -24,7 +24,8 @@ var tip = require('../plugin/tip'),
     filter = require('../plugin/filter'),
     loading = require('../plugin/loading');
-var $goodsContainer = $('#goods-container'),
+var $subNav = $('.home-sub-nav'),
+    $goodsContainer = $('#goods-container'),
     $goodsChildren = $goodsContainer.children(),
     $ngc = $($goodsChildren.get(0)),
     $pgc = $($goodsChildren.get(1)),
@@ -37,9 +38,22 @@ var winH = $(window).height(),
 var defaultOpt = require('./query-param');
 var $listNav = $('#list-nav'),
+    $posList = $('#pos-list'),
     //导航数据信息
     navInfo = {
+        new: {
+            order: 1,
+            reload: true,
+            page: 0,
+            end: false
+        },
+        hot: {
+            order: 1,
+            reload: true,
+            page: 0,
+            end: false
+        },
         newest: {
             order: 1,
             reload: true,
@@ -60,6 +74,7 @@ var $listNav = $('#list-nav'),
         }
     },
     $pre = $listNav.find('.active'), //纪录进入筛选前的active项，初始为选中项
+    $lie = $posList.find('.active'),
     searching;
 var viewType = 1; // 1-首页,2-上新,3-人气
@@ -105,8 +120,11 @@ function tabChange(dom, index) {
 $.jqtab = function(nav, posNav, main) {
     $(nav + ' li, ' + posNav + ' li').on('touchstart', function() {
+
         var index = $(this).index(),
             activeTab = $(this).attr('tab');
+
+        $nav1.removeClass('fixed-top');
         tabChange($(nav + ' li'), index);
         tabChange($(posNav + ' li'), index);
@@ -114,6 +132,12 @@ $.jqtab = function(nav, posNav, main) {
         $(main).hide();
         $('#' + activeTab).fadeIn();
+        if(activeTab == 'new-arrival'){
+            newData();
+        }else if(activeTab == 'popularity'){
+            hotData();
+        }
+
         return false;
     });
 };
@@ -140,8 +164,11 @@ function getPageGoods(info) {
         data: info.data,
         success: function(data) {
             info.callBack(data);
-            myScroll && myScroll.refresh();
-            scH = $('#scroller').outerHeight();
+            setTimeout(function () {
+                myScroll.refresh();
+                scH = $('#scroller').outerHeight();
+            }, 1000);
+            
             searching = false;
         },
         error: function() {
@@ -151,22 +178,39 @@ function getPageGoods(info) {
     });
 }
-function homeData() {
+function newData() {
     var req = {};
-    req.url = '/product/newsale/selectNewSale';
+    req.url = '/index/search/search';
+    req.data = {
+        type: 'newest',
+        order: '1',
+        page: '1',
+        shop_id: '102'
+
+    };
     req.callBack = function(data) {
-        $ngc.html(data);
+        $('#new-arrival').append(data);
+        navInfo.new.page++;
     }
     getPageGoods(req);
 }
-function newData() {
-    console.log('newData');
-}
-
 function hotData() {
-    console.log('hotData');
+    var req = {};
+
+    req.url = '/index/search/search';
+    req.data = {
+        type: 'sales',
+        order: '1',
+        page: '1',
+        shop_id: '102'
+    };
+    req.callBack = function(data) {
+        $('#popularity').append(data);
+        navInfo.hot.page++;
+    }
+    getPageGoods(req);
 }
 myScroll.on('scroll', function() {
@@ -174,9 +218,7 @@ myScroll.on('scroll', function() {
     if (sTop + winH * 2 > scH) {
         switch(viewType) {
-            case 1:
-                homeData();
-                break;
+            
             case 2:
                 newData();
                 break;
@@ -185,6 +227,7 @@ myScroll.on('scroll', function() {
                 break;
         }
     }
+    
     if (sTop < imgH) {
         if (!$nav1.hasClass('hide')) {
             $nav1.addClass('hide');
@@ -234,16 +277,7 @@ myScroll.on('scroll', function() {
                     });
             }
         }
-        // else {
-        //      if (!$nav2.hasClass('absolute')) {
-        //         $nav1.addClass('absolute')
-        //             .removeClass('fixed-top');
-        //     }
-        //     $nav2.css({
-        //             transform: 'translate(0, ' + (imgH + nav1H + main1oH + main2oH -sTop  - scH) + 'px)'
-        //         });
-        // }
-    }
+    }//
     $("#scroller").trigger('scroll');
 });
@@ -270,7 +304,6 @@ $(window).load(function() {
     main2oH = $('#goods-container').outerHeight();
     setTimeout(function(){
         scH = $('#scroller').outerHeight();
-        console.log(scH)
     },2000);
 });
@@ -282,7 +315,6 @@ function search(opt) {
         nav, navType,
         page;
-return;
     if (searching) {
         return;
     }
@@ -296,11 +328,12 @@ return;
             }
         }
-        //处理active状态
-        $listNav.children('.active').removeClass('active');
-        $pre.addClass('active');
-
         switch (opt.type) {
+            case 'shop_id': 
+                ext = {
+                    shop_id: opt.id
+                };
+                break;
             case 'gender':
                 ext = {
                     gender: opt.id
@@ -373,7 +406,7 @@ return;
     $.ajax({
         type: 'GET',
-        url: '/product/newsale/selectNewSale',
+        url: opt.url ? opt.url : '',
         data: setting,
         success: function(data) {
             var $container,
@@ -418,16 +451,17 @@ return;
             window.rePosFooter();
-            scH = $('#scroller').outerHeight();
-            console.log(scH)
-        },
+            setTimeout(function () {
+                myScroll.refresh();
+                scH = $('#scroller').outerHeight();
+            }, 1000);
+        },           
         error: function() {
             tip.show('网络断开连接了~');
             searching = false;
             loading.hideLoadingMask();
         }
     });
-
 }
 $.ajax({
@@ -437,6 +471,13 @@ $.ajax({
     success: function(data) {
         $goodsContainer.append(data);
+            setTimeout(function () {
+                myScroll.refresh();
+                scH = $('#scroller').outerHeight();
+            }, 1000);
+           
+            
+
         //初始化filter&注册filter回调
         filter.initFilter({
             fCbFn: search,
@@ -455,8 +496,13 @@ $listNav.bind('contextmenu', function(e) {
     return false;
 });
-$listNav.on('touchend touchcancel', function(e) {
+$posList.bind('contextmenu', function(e) {
+    return false;
+});
+
+$subNav.on('touchend touchcancel', function(e) {
     var $this = $(e.target).closest('li'),
+        cname,
         nav,
         navType,
         $active;
@@ -485,12 +531,14 @@ $listNav.on('touchend touchcancel', function(e) {
             filter.showFilter();
         }
     } else {
-
         if ($this.hasClass('new')) {
+            cname = '.new';
             navType = 'newest';
         } else if ($this.hasClass('price')) {
+            cname = '.price';
             navType = 'price';
         } else if ($this.hasClass('discount')) {
+            cname = '.discount';
             navType = 'discount';
         }
@@ -504,6 +552,7 @@ $listNav.on('touchend touchcancel', function(e) {
             }
             if ($this.hasClass('price') || $this.hasClass('discount')) {
+                $this = $subNav.find(cname);
                 // 价格/折扣切换排序状态
                 $this.find('.icon > .iconfont').toggleClass('cur');
@@ -512,7 +561,7 @@ $listNav.on('touchend touchcancel', function(e) {
                 nav.order = nav.order === 0 ? 1 : 0; //切换排序
             }
         } else {
-            $active = $this.siblings('.active');
+            $active = $subNav.find('.active');
             $pre = $this; //$pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
@@ -540,25 +589,36 @@ $listNav.on('touchend touchcancel', function(e) {
                 }
             }
-            $active.removeClass('active');
-            $this.addClass('active');
+            $subNav.children().removeClass('active');
+            $subNav.find(cname).addClass('active');
         }
         if (nav.reload) {
-            search();
+            search({
+                type: 'shop_id',
+                id: '111',
+                url: '/index/search/search'
+            });
         }
     }
     e.stopPropagation();
 });
+
 function scrollHandler() {
     //当scroll到1/4$goodsContainer高度后继续请求下一页数据
     myScroll && myScroll.refresh();
-    if (sTop + winH >  $('#scroller').height() - 0.25 * $goodsContainer.height() - 50){
+    if (sTop + winH >  $('#scroller').height() - 0.25 * 
+
+$goodsContainer.height() - 50){
         if ($pre !== undefined) {
-            search();        
+            search({
+                type: 'shop_id',
+                id: '1111',
+                url: '/index/search/search'
+            });        
         }
     }
 }
@@ -569,7 +629,12 @@ $(window).scroll(function() {
 });
 //初始请求最新第一页数据
-search();
+search({
+    type: 'shop_id',
+    id: '1111',
+    url: '/index/search/search'
+    }
+);
 $listNav.on('touchstart', 'li', function(e) {
     $(this).addClass('bytouch');
@@ -577,6 +642,13 @@ $listNav.on('touchstart', 'li', function(e) {
     $listNav.find('li').removeClass('bytouch');
 });
+$posList.on('touchstart', 'li', function(e) {
+    $(this).addClass('bytouch');
+}).on('touchend touchcancel', function() {
+    $posList.find('li').removeClass('bytouch');
+});
+
+
 //底部导航点击
 function fotterClick(group) {
@@ -604,4 +676,3 @@ $(document).bind('touchstart',function(){
 $('.shop-foot-wrapper').bind('touchstart',function(e){ 
     stopPropagation(e); 
 }); 
-
--- a/static/sass/product/_shop-index.css
View file @1d0989c
+++ b/static/sass/product/_shop-index.css
View file @1d0989c
@@ -411,4 +411,53 @@
         background:#eee;
     }
+    .new-arrival {
+        padding-top: 30px;
+        overflow: hidden;
+        padding-left: 15px;
+    }
+
+    .popularity {
+        padding-top: 30px;
+        overflow: hidden;
+        padding-left: 15px;
+    }
+
+    .pos-list {
+        @extend .discount-page;
+
+        li {
+            display: block;
+            height: 28px;
+            float: left;
+            line-height: 28px;
+            width: 24%;
+            text-align: center;
+            border-left: 1px solid #e1e1e1;
+            margin-top: 30px;
+            margin-bottom: 30px;
+            border-sizing: border-box;
+
+            span {
+                font-size: 28px;
+            }
+
+            &:first-child {
+                border-left: none;
+            }
+        }
+        .active .cur {
+            color: #000;
+        }
+        
+        .active a {
+            color: #000;
+        }
+        
+        .iconfont {
+            font-weight: bold;
+        }
+    }
+
+ 
 }
--- a/template/m.yohobuy.com/actions/product/index/shop.phtml
View file @1d0989c
+++ b/template/m.yohobuy.com/actions/product/index/shop.phtml
View file @1d0989c
@@ -104,20 +104,20 @@
                     {{> product/goods-nav-top}}
                 </div>
             </div>       
-            <div id="new-arrival" class=""></div>
-            <div id="popularity" class=""></div>
+            <div id="new-arrival" class="new-arrival"></div>
+            <div id="popularity" class="popularity"></div>
         </div>
         {{> product/shop-footer}}
         <ul id="pos-nav" class="nav hide">
-            <li class="active color">首页</li>
-            <li>上新</li>
-            <li>人气</li>
+            <li class="active color homeData">首页</li>
+            <li class="newData">上新</li>
+            <li class='hotData'>人气</li>
             <li>
                 <a href="#" target="_blank">全部商品</a>
             </li>
         </ul>
-        <ul id="pos-list" class="nav hide">
+        <ul id="pos-list" class="home-sub-nav pos-list nav hide">
             <li class="new active">
                 <a href="javascript:void(0);">
                     <span class="spanTest">最新</span>
--- a/template/m.yohobuy.com/partials/product/goods-nav-top.phtml
View file @1d0989c
+++ b/template/m.yohobuy.com/partials/product/goods-nav-top.phtml
View file @1d0989c
-<ul id="list-nav" class="list-nav clearfix">
+<ul id="list-nav" class="home-sub-nav list-nav clearfix">
     <li class="new active">
         <a href="javascript:void(0);">
             <span class="spanTest">最新</span>