newarrival.js 8.22 KB
/**
 *  新品到着
 * @author: liangzhifeng<zhifeng.liang@yoho.cn>
 * @date: 2015/10/24
 */

var $ = require('jquery'),
    Swiper = require('yoho.iswiper'),
    lazyLoad = require('yoho.lazyload');

var swiper;

var filter = require('../../plugin/filter');
var loading = require('../../plugin/loading');

var $goodsContainer = $('#goods-container'),
    $ngc = $($goodsContainer.children().get(0)),
    $pgc = $($goodsContainer.children().get(1)),
    $dgc = $($goodsContainer.children().get(2));

var winH = $(window).height(),
    noResult = '<p class="no-result">未找到相关搜索结果</p>';

//默认筛选条件
var defaultOpt = {
    gender: $('#gender').val(),
    brand: $('#brand').val(),
    sort: $('#sort').val(),
    color: $('#color').val(),
    size: $('#size').val(),
    price: $('#price').val(),
    discount: $('#discount').val(),
    limit: $('#limit').val(),
    channel: $('#channel').val(),
    p_d: $('#p_d').val()
};

var now = new Date(),
    month = now.getMonth() + 1,
    date = now.getDate();

var $listNav = $('#list-nav'),

    //导航数据信息
    navInfo = {
        today: {
            reload: true,
            page: 0,
            end: false
        },
        week: {
            reload: true,
            page: 0,
            end: false
        },
        sale: {
            reload: true,
            page: 0,
            end: false
        }
    },
    $pre = $listNav.find('.active'), //纪录进入筛选前的active项,初始为选中项
    searching;

$pgc.addClass('hide');
$dgc.addClass('hide');

$('#today a').text(month + '月' + date + '号');

if ($('.swiper-container .swiper-slide').length > 1) {
    swiper = new Swiper('.swiper-container', {
        lazyLoading: true,
        lazyLoadingInPrevNext: true,
        loop: true,
        autoplay: 3000,
        autoplayDisableOnInteraction: false,
        paginationClickable: true,
        pagination: '.swiper-pagination'
    });
}

/**
 * 筛选注册的回调,筛选子项点击后逻辑
 * 需要执行search的场景:1.点选筛选项;2.relaod为true时切换导航;3.下拉加载
 * @param opt {type, id}
 */
function search(opt) {
    var setting = {},
        ext,
        att,
        nav, navType,
        dayLimit,
        page;

    if (opt) {

        //筛选项变更则重置reload为true
        for (att in navInfo) {
            if (navInfo.hasOwnProperty(att)) {
                navInfo[att].reload = true;
            }
        }

        //处理active状态
        $listNav.children('.active').removeClass('active');
        $pre.addClass('active');

        switch (opt.type) {
            case 'gender':
                ext = {
                    gender: opt.id
                };
                break;
            case 'brand':
                ext = {
                    brand: opt.id
                };
                break;
            case 'sort':
                ext = {
                    sort: opt.id
                };
                break;
            case 'color':
                ext = {
                    color: opt.id
                };
                break;
            case 'size':
                ext = {
                    size: opt.id
                };
                break;
            case 'price':
                ext = {
                    price: opt.id
                };
                break;
            case 'discount':
                ext = {
                    discount: opt.id
                };
                break;
            case 'limit':
                ext = {
                    limit: opt.id
                };
                break;
            case 'channel':
                ext = {
                    channel: opt.id
                };
                break;
            case 'p_d':
                ext = {
                    p_d: opt.id
                };
                break;
        }

        $.extend(defaultOpt, ext); //扩展筛选项
    }

    if (searching) {
        return;
    }

    //导航类别
    if ($pre.hasClass('today')) {
        navType = 'today';
        dayLimit = 1;
    } else if ($pre.hasClass('week')) {
        navType = 'week';
        dayLimit = 2;
    } else if ($pre.hasClass('sale')) {
        navType = 'sale';
        dayLimit = 3;
    }

    nav = navInfo[navType];

    page = nav.page + 1;
    if (nav.reload) {
        page = 1;
    } else if (nav.end) {

        //不需要重新加载并且数据请求结束
        return;
    }

    $.extend(setting, defaultOpt, {
        dayLimit: dayLimit,
        page: page
    });

    searching = true;
    loading.showLoadingMask();

    $.ajax({
        type: 'GET',
        url: '/product/newsale/selectNewSale',
        data: setting,
        success: function(data) {
            var $container;

            switch (navType) {
                case 'today':
                    $container = $ngc;
                    break;
                case 'week':
                    $container = $pgc;
                    break;
                case 'sale':
                    $container = $dgc;
                    break;
            }

            if (data === ' ') {
                nav.end = true;

                if (nav.reload) {
                    $container.html(noResult);
                }
            } else {
                if (nav.reload) {
                    $container.html(data);
                } else {
                    $container.append(data);
                }

                lazyLoad($container.find('.lazy'));
            }

            nav.reload = false;
            nav.page = page;

            searching = false;
            loading.hideLoadingMask();
        }
    });

}

lazyLoad($('.lazy'));

filter.registerCbFn(search);

//导航栏点击逻辑说明:
//1.点击非active项时切换active状态
//2.价格和折扣active状态时继续点击切换排序
//3.筛选无active时点击展开筛选面板
//4.筛选有active时点击隐藏筛选面板并恢复点击筛选前active项的active状态
//5.当前active为筛选并且点击其他项时,隐藏筛选面板

$listNav.delegate('li', 'touchstart', function() {
    var $this = $(this),
        nav,
        navType,
        $active;

    if ($this.hasClass('filter')) {

        //筛选面板切换状态
        if ($this.hasClass('active')) {
            filter.hideFilter();

            //点击筛选钱的active项回复active
            $pre.addClass('active');
            $this.removeClass('active');
        } else {
            $pre = $this.siblings('.active');

            $pre.removeClass('active');
            $this.addClass('active');
            filter.showFilter();
        }
    } else {

        if ($this.hasClass('today')) {
            navType = 'today';
        } else if ($this.hasClass('week')) {
            navType = 'week';
        } else if ($this.hasClass('sale')) {
            navType = 'sale';
        }

        nav = navInfo[navType];

        if (!($this.hasClass('active'))) {

            $active = $this.siblings('.active');

            $pre = $this; //$pre为除筛选导航的其他导航项,若当前active的为筛选,则把$pre置为当前点击项

            if ($active.hasClass('filter')) {

                //若之前active项为筛选,则隐藏筛选面板
                filter.hideFilter();
            } else {

                //切换container显示
                $goodsContainer.children('.container:not(.hide)').addClass('hide');

                switch (navType) {
                    case 'today':
                        $ngc.removeClass('hide');
                        break;

                    case 'week':
                        $pgc.removeClass('hide');
                        break;

                    case 'sale':
                        $dgc.removeClass('hide');
                        break;
                }
            }

            $active.removeClass('active');
            $this.addClass('active');
        }

        if (nav.reload) {
            search();
        }
    }
});

$(window).scroll(function() {

    //当scroll到1/4$goodsContainer高度后继续请求下一页数据
    if ($(window).scrollTop() + winH >
        $(document).height() - 0.25 * $goodsContainer.height()) {
        if ($pre !== undefined) {
            search();
        }
    }
});

//初始请求最新第一页数据
search();