shop

@@ -26,7 +26,10 @@ const singleDay = (req, res) => {
 };
 
 const getSingleData = (req, res) => {
-    Promise.all([singleDayModel.getResourceData(req.query.contCode), singleDayModel.getTabData(req.query.channelId)]).then((result) => {
+    Promise.all([
+        singleDayModel.getResourceData(req.query.contCode),
+        singleDayModel.getTabData(req.query.channel_id)
+    ]).then((result) => {
         _.forEach(result[0], (item) => {
             if (item.focus) {
                 _.forEach(item.data, (banner) => {
@@ -39,10 +42,7 @@ const getSingleData = (req, res) => {
 };
 
 const getProductData = (req, res) => {
-    let params = {
-        tabName: req.query.tab_name,
-        channelId: req.query.channelId
-    };
+    let params = req.query || {};
 
     singleDayModel.getProductData(params).then(result => {
         res.json(result);

@@ -29,23 +29,26 @@ const getResourceData = (contCode) => {
 };
 
 const getProductData = (params) => {
-    return api.get('', {
+    return api.get('', _.assign({
         method: 'app.product.singleDay',
-        tab_name: params.tabName,
-        channel_id: params.channelId
-    }, {
+        limit: '20'
+    }, params), {
         cache: true
     }).then((result) => {
         if (result && result.code === 200) {
             result.data = result.data || [];
 
-            _.forEach(result.data, (item) => {
-                item.url = helpers.urlFormat(`/product/pro_${item.productId}_${item.goodsId}/${item.cnAlphabet}.html`); // eslint-disable-line
-                item.url = helpers.appUrlFormat(item.url, 'go.productDetail', {
-                    product_skn: item.productSkn
+            if (result.data.length === 0) {
+                return '';
+            } else {
+                _.forEach(result.data, (item) => {
+                    item.url = helpers.urlFormat(`/product/pro_${item.productId}_${item.goodsId}/${item.cnAlphabet}.html`); // eslint-disable-line
+                    item.url = helpers.appUrlFormat(item.url, 'go.productDetail', {
+                        product_skn: item.productSkn
+                    });
                 });
-            });
-            return result.data;
+                return result.data;
+            }
         } else {
             logger.error('get product data code no 200');
             return [];

@@ -3,3 +3,4 @@
         <li class="swiper-slide">{{.}}</li>
     {{/each}}
 </ul>
+

@@ -12,128 +12,187 @@ var $ = require('yoho-jquery'),
     tab = require('../../hbs/activity/single-day/tab.hbs'),
     product = require('../../hbs/activity/single-day/product-list.hbs');
 
-var $productList = $('.product-list');
-var getFlag = false;
-
-var getProductData = function(index, channelId, tabName) {
-    if (getFlag) {
-        return;
-    }
-    getFlag = true;
-    loading.showLoadingMask();
-    $.ajax({
-        type: 'GET',
-        url: '/activity/single-day/getProductData',
-        data: {
-            tab_name: tabName,
-            channelId: channelId
-        },
-        success: function(data) {
-            var $productTab = $('.product-tab');
-
-            if (data) {
-                $productTab.eq(index).append(product(data));
+var singleDay = {
+    initParams: function() {
+        var self = this,
+            opt = {
+                $productList: $('.product-list'),
+                $swiper: $('.swiper-tab'),
+                getFlag: false,
+                previousScrollTop: 0,
+                winH: $(window).height(),
+                noResult: '<p class="no-result">未找到相关商品</p>',
+                page: 0,
+                contCode: window.queryString.content_code || '',
+                channelId: window.queryString.channel_id
+            };
+
+        self.swiperOTop = opt.$swiper[0].offsetTop;
+
+        $.extend(self, opt);
+    },
+    getInitData: function() {
+        var self = this;
+        var _scrollHandler;
+
+        self.initParams();
+
+        _scrollHandler = function() {
+            var curScrollTop = $(window).scrollTop(),
+                index = $('.swiper-tab .active').index(),
+                curHeight = self.$productList.find('ul').eq(index).height();
+
+            // 当scroll到1/4$goodsContainer高度后继续请求下一页数据
+            if (curScrollTop > self.previousScrollTop &&
+                (curScrollTop + self.winH >
+                $(document).height() - 0.25 * curHeight - 50)) {
+                self.getProductData({
+                    index: index,
+                    tabName: self.tabName(index),
+                    isScroll: true
+                });
             }
 
-            $productTab.hide().eq(index).show();
-
-            $('img.lazy').lazyload({
-                effect: 'fadeIn'
-            });
-            getFlag = false;
-            loading.hideLoadingMask();
-        },
-        error: function() {
-            tip.show('网络断开连接了~');
-            loading.hideLoadingMask();
-            getFlag = false;
-        }
-    });
-};
+            self.previousScrollTop = curScrollTop;
+        };
 
-var tabName = function(index) {
-    return $('.swiper-tab li').eq(index).html();
-};
+        $(window).on('scroll', function() {
+            if ($(window).scrollTop() > self.swiperOTop) {
+                self.$swiper.addClass('fixer');
+            } else {
+                self.$swiper.removeClass('fixer');
+            }
 
-var getInitData = function() {
-    var channelId = window.queryString.channel_id,
-        contCode = window.queryString.content_code || '',
-        $swiper = $('.swiper-tab'),
-        swiperOTop = $swiper[0].offsetTop;
-
-    $(window).on('scroll', function() {
-        if ($(window).scrollTop() > swiperOTop) {
-            $swiper.addClass('fixer');
-        } else {
-            $swiper.removeClass('fixer');
-        }
-    });
-
-    $.ajax({
-        type: 'GET',
-        url: '/activity/single-day/getSingleData',
-        data: {
-            channelId: channelId,
-            contCode: contCode
-        },
-        success: function(data) {
-            var i = 0, $swiperTab, $productTab;
-            var tabNum = window.queryString.tabNum ? window.queryString.tabNum - 1 : 0;
-
-            if (data[0]) {
-                $('.banner').append(banner(data[0][0]));
-
-                if ($('.banner-swiper').find('li').size() > 1) {
-                    new Swiper('.banner-swiper', {
-                        lazyLoading: true,
-                        lazyLoadingInPrevNext: true,
-                        loop: true,
-                        autoplay: 3000,
-                        autoplayDisableOnInteraction: false,
-                        paginationClickable: true,
-                        slideElement: 'li',
-                        pagination: '.banner-top .pagination-inner'
-                    });
+            window.requestAnimationFrame(_scrollHandler.bind(self));
+        });
+
+        $.ajax({
+            type: 'GET',
+            url: '/activity/single-day/getSingleData',
+            data: {
+                channel_id: self.channelId,
+                contCode: self.contCode
+            },
+            success: function(data) {
+                var i = 0, $swiperTab;
+                var tabNum = window.queryString.tabNum ? window.queryString.tabNum - 1 : 0;
+
+                if (data[0]) {
+                    $('.banner').append(banner(data[0][0]));
+
+                    if ($('.banner-swiper').find('li').size() > 1) {
+                        new Swiper('.banner-swiper', {
+                            lazyLoading: true,
+                            lazyLoadingInPrevNext: true,
+                            loop: true,
+                            autoplay: 3000,
+                            autoplayDisableOnInteraction: false,
+                            paginationClickable: true,
+                            slideElement: 'li',
+                            pagination: '.banner-top .pagination-inner'
+                        });
+                    }
                 }
-            }
 
-            if (data[1]) {
-                $('.swiper-tab').append(tab(data[1]));
+                if (data[1]) {
+                    $('.swiper-tab').append(tab(data[1]));
 
-                $swiperTab = $('.swiper-tab li');
+                    $swiperTab = $('.swiper-tab li');
 
-                new Swiper('.swiper-tab', {
-                    slidesPerView: 'auto'
-                });
+                    new Swiper('.swiper-tab', {
+                        slidesPerView: 'auto'
+                    });
 
-                for (i; i < data[1].length; i++) {
-                    $productList.append('<ul class="product-tab"></ul>');
-                }
+                    for (i; i < data[1].length; i++) {
+                        self.$productList.append('<ul class="product-tab" data-page="0"></ul>');
+                    }
+
+                    self.$productTab = $('.product-tab');
+
+                    self.getProductData({
+                        index: tabNum,
+                        tabName: self.tabName(tabNum)
+                    });
+                    $swiperTab.eq(tabNum).addClass('active');
 
-                $productTab = $('.product-tab');
+                    $swiperTab.on('click', function() {
+                        var index = $(this).index();
 
-                getProductData(tabNum, channelId, tabName(tabNum));
-                $swiperTab.eq(tabNum).addClass('active');
+                        $swiperTab.removeClass('active').eq(index).addClass('active');
 
-                $swiperTab.on('click', function() {
-                    var index = $(this).index();
+                        if (self.$productTab.eq(index).find('li').length > 0) {
+                            self.$productTab.hide().eq(index).fadeIn();
+                        } else {
+                            self.getProductData({
+                                index: index,
+                                tabName: self.tabName(index)
+                            });
+                        }
+                    });
+                }
 
-                    $swiperTab.removeClass('active').eq(index).addClass('active');
+                loading.hideLoadingMask();
+            },
+            error: function() {
+                tip.show('网络断开连接了~');
+            }
+        });
+    },
+    tabName: function(index) {
+        return $('.swiper-tab li').eq(index).html();
+    },
+    getProductData: function(params) {
+        var self = this;
+        var page;
+        var curProductTab = self.$productTab.eq(params.index);
+
+        if (self.getFlag) {
+            return false;
+        }
 
-                    if ($productTab.eq(index).find('li').length > 0) {
-                        $productTab.hide().eq(index).show();
+        page = +curProductTab.attr('data-page') + 1;
+        self.getFlag = true;
+        loading.showLoadingMask();
+
+        $.ajax({
+            type: 'GET',
+            url: '/activity/single-day/getProductData',
+            data: {
+                tab_name: params.tabName || '',
+                channel_id: self.channelId,
+                page: page
+            },
+            success: function(data) {
+                if (data) {
+                    curProductTab.find('.no-result').hide();
+                    curProductTab.append(product(data));
+                    curProductTab.attr('data-page', page);
+                    self.getFlag = false;
+                } else {
+                    if (page === 1) {
+                        curProductTab.append(self.noResult);
+                        self.getFlag = false;
                     } else {
-                        getProductData(index, channelId, tabName(index));
+                        self.getFlag = true;
                     }
+                }
+
+                if (!params.isScroll) {
+                    self.$productTab.hide().eq(params.index).fadeIn();
+                }
+
+                $('img.lazy').lazyload({
+                    effect: 'fadeIn'
                 });
+                loading.hideLoadingMask();
+            },
+            error: function() {
+                tip.show('网络断开连接了~');
+                loading.hideLoadingMask();
+                self.getFlag = false;
             }
-
-            loading.hideLoadingMask();
-        },
-        error: function() {
-            tip.show('网络断开连接了~');
-        }
-    });
+        });
+    }
 };
 
 require('../common');
@@ -142,5 +201,5 @@ require('yoho-jquery-lazyload');
 
 $(function() {
     loading.showLoadingMask();
-    getInitData();
+    singleDay.getInitData();
 });

@@ -23,23 +23,29 @@
         border-top: 1px solid #e0e0e0;
         background: #fff;
 
-        ul {
-            margin-top: 28px;
-        }
-
         li {
             float: left;
             padding: 0 50px;
-            border-right: 1px solid #e0e0e0;
-            height: 30px;
-            line-height: 30px;
+            height: 82px;
+            line-height: 82px;
             color: #b0b0b0;
             width: auto;
             font-size: 28px;
+            background: #fff;
+        }
+
+        li:after {
+            content: "";
+            height: 30px;
+            width: 2px;
+            border-left: 1px solid #e0e0e0;
+            position: absolute;
+            right: 0;
+            top: 28px;
         }
 
-        li:last-child {
-            border-right: none;
+        li:last-child:after {
+            border-left: none;
         }
 
         .active {
@@ -72,7 +78,7 @@
         .product-info {
             width: 370px;
             height: 445px;
-            float: left;
+            float: right;
             position: relative;
             border-bottom: 1px solid #e8e8e8;
             padding-right: 30px;
@@ -87,6 +93,15 @@
             width: 340px;
         }
 
+        .no-result {
+            width: 100%;
+            text-align: center;
+            vertical-align: middle;
+            color: #ccc;
+            font-size: 1.2em;
+            margin-top: 320px;
+        }
+
         h3 {
             margin-top: 50px;
             font-size: 28px;