all-product.js 9.93 KB
/*
 * @Author: Targaryen
 * @Date: 2017-03-24 13:43:55
 * @Last Modified by: Targaryen
 * @Last Modified time: 2017-06-20 09:50:01
 */

/** *****************************
 * 红人店铺使用的全部商品页面碎片
 *******************************/

const filter = require('../../plugin/filter');
const lazyLoad = require('yoho-jquery-lazyload');

let noResultHbs = require('product/search/no-result-new.hbs');

let $goodsContainer = $('#goods-container');
let $container = $goodsContainer.children('.default-goods'); // 承载商品列表的容器
let $listNav = $('#list-nav'); // 筛选项列表
let $pre = $listNav.find('.active'); // 记录进入筛选前的active项,初始为选中项
let $allGoodsTabPage = $(document.getElementById('all-goods'));
let $filterBody = $('.filter-body');
let $dropList = $('.drop-list');

const shopId = $('#shopId').val();

let navInfo = {
    price: {
        order: 1,
        end: false
    },
    discount: {
        order: 1,
        end: false
    },
    default: {
        order: 0,
        end: false,
        type: 'default'
    },
    new: {
        order: 0,
        end: false
    },
    sale: {
        order: 0,
        end: false
    },
    popularity: {
        order: 0,
        end: false
    }
};

let beforeScroll = document.body.scrollTop; // 滚动前位置记录
let navType = 'default'; // 目前激活的导航页面
let defaultOpt = Object.assign({}, navInfo.default, {shop_id: shopId}); // 默认参数
let onSearching = false; // 是否正在搜索
let isScrollLoad = false; // 是否是滚动加载
let page = 1; // 页码
let nav;
let $firstText = $('.first-li-more').find('.nav-txt');
let $thisLi = '';

// 物料商品列表标记
if ($('#material-flag').val() === 'material') {
    let material = true;

    if ($('.first-li-more').hasClass('active')) {
        page = 2; // 已在服务端渲染第一页
    }
    Object.assign(defaultOpt, {
        material: material,
        unionType: window.queryString.union_type
    });
}

/**
 * 处理筛选参数
 */
const handleChoseFilter = function() {
    $.each($filterBody.find('.chosed'), function(index, elem) {
        let choseOpt = {};

        choseOpt[$(elem).parent().data('type')] = $(elem).data('id');
        Object.assign(defaultOpt, choseOpt);
    });
};

/**
 * 获取商品列表
 */
const getGoodsList = params => {
    handleChoseFilter();

    if (!onSearching) {
        Object.assign(defaultOpt, {
            page: page++
        });
    }

    // 有参数,参数优先,滚动加载相关参数重置
    if (params && !params.filtering) {
        Object.assign(defaultOpt, params);
        if (params.page) {
            page = params.page + 1;
        }
        isScrollLoad = false;
        beforeScroll = document.body.scrollTop;
    }

    if (nav && nav.end) {
        return false;
    }

    if (!onSearching) {
        onSearching = true;

        $.ajax({
            type: 'GET',
            url: location.protocol + '//m.yohobuy.com/product/search/search',
            data: defaultOpt,
            xhrFields: {
                withCredentials: true
            },
            beforeSend: function() {
                if ($('.no-result-new').length > 0) {
                    $('.no-result-new').remove();
                }
                $container.append('<div class="search-divide">正在加载...</div>');
            },
            success: function(result) {
                // 去掉正在加载
                $('.search-divide').remove();

                let noResult = !result || result.length < 1 || (result.list && result.list.length < 1);


                // 没有结果输出没有结果页面
                if (noResult) {
                    if (isScrollLoad) {
                        $container.append('<div class="search-divide">没有更多内容了...</div>');
                    } else {
                        $container.html(noResultHbs());
                    }

                    if (nav) {
                        nav.end = true;
                    }

                    onSearching = false;
                    return false;
                }

                if (isScrollLoad) {
                    $container.append(result);
                } else {
                    $container.html(result);
                }

                lazyLoad($container.find('img[class=lazy]').not('img[src]'));

                onSearching = false;
            },
            error: function() {
                let $divide = $('.search-divide');

                $divide.text('加载失败,点击重试');
                $divide.one('click', function() {
                    $divide.text('正在加载...');
                    getGoodsList();
                });
                onSearching = false;
            }
        });
    }
};

/**
 * 加载筛选数据
 */
const getFilter = function() {
    $.ajax({
        type: 'GET',
        url: location.protocol + '//m.yohobuy.com/product/search/filter',
        data: defaultOpt,
        success: function(data) {
            if (!data) {
                return false;
            }

            $goodsContainer.append(data);

            // 初始化filter&注册filter回调
            filter.initFilter({
                fCbFn: getGoodsList,
                hCbFn: function() {

                    // 切换active状态到$pre上
                    $pre.addClass('active');
                    $pre.siblings('.filter').removeClass('active');
                }
            });

            $filterBody = $('.filter-body');
        }
    });
};

$listNav.bind('contextmenu', function() {
    return false;
});

const popularityFilter = function(thisLi, type) {
    if (thisLi.hasClass('active')) {
        $dropList.hide();
        return false;
    }
    $thisLi.addClass('active').siblings('li').removeClass('active');

    defaultOpt.type = type;

    nav = navInfo[type];

    if (thisLi.hasClass('asc')) {
        nav.order = 1;
    } else {
        nav.order = 0;
    }

    Object.assign(defaultOpt, nav);
    getGoodsList();
    $dropList.hide();
};

$listNav.on('touchend touchcancel', function(e) {
    page = 1;
    beforeScroll = $(window).scrollTop();
    isScrollLoad = false;

    let $this = $(e.target).closest('li'); // 被点击的 Tab
    let $active;

    // 默认列表增加人气筛选
    if ($this.hasClass('first-li-more') && $this.hasClass('active')) {
        $this.siblings('.active').removeClass('active');
        $this.addClass('active');
        $dropList.toggle();
        $dropList.find('.default').on('touchend touchcancel', function() {
            $thisLi = $(this);
            $firstText.html('默认');
            popularityFilter($thisLi, 'default');
            return false;
        });
        $dropList.find('.discount').on('touchend touchcancel', function() {
            $thisLi = $(this);
            $firstText.html($(this).data('text'));
            popularityFilter($thisLi, 'discount');
            $('.first-li-more').removeClass('new default sale discount').addClass('discount');
            return false;
        });
    } else if ($this.hasClass('filter')) { // 筛选面板
        $dropList.css('display', 'none');

        // 筛选面板切换状态
        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 { // 排序改变
        $dropList.css('display', 'none');
        if ($this.hasClass('new')) {
            navType = 'new';
        } else if ($this.hasClass('price')) {
            navType = 'price';
        } else if ($this.hasClass('discount')) {
            navType = 'discount';
        } else if ($this.hasClass('default')) {
            navType = 'default';
        } else if ($this.hasClass('sale')) {
            navType = 'sale';
        } else if ($this.hasClass('popularity')) {
            navType = 'popularity';
        }

        // 更新当前排序:默认、最新、价格、折扣
        nav = navInfo[navType];

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

            // 默认、最新无排序切换
            if ($this.hasClass('default') || $this.hasClass('new') || $this.hasClass('popularity')) {
                return false;
            }

            if ($this.hasClass('price') || $this.hasClass('discount')) {

                // 价格或折扣切换排序状态
                $this.find('.icon > .iconfont').toggleClass('cur');
                $pre = $this; // 更新 pre 为当前项
                nav.order = nav.order === 0 ? 1 : 0; // 切换排序
            }
        } else {
            $active = $this.siblings('.active');

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

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

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

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

        /* 排序条件更新 */
        defaultOpt.type = navType;
        Object.assign(defaultOpt, nav);

        getGoodsList();
    }
});


/**
 * 当scroll到1/2$goodsContainer高度后继续请求下一页数据
 */
const scrollHandler = function() {
    if ($allGoodsTabPage.hasClass('active') && $(window).scrollTop() > $goodsContainer.height() * 0.6) {
        isScrollLoad = true;
        getGoodsList();
    }
};

/**
 * 滚动加载
 */
$(window).scroll(function() {
    setTimeout(function() {
        let afterScroll = document.body.scrollTop;

        if (afterScroll - beforeScroll > 0) {
            window.requestAnimationFrame(scrollHandler);
            beforeScroll = afterScroll;
        } else {
            return false;
        }
    }, 5);
});

module.exports = {
    getGoodsList,
    getFilter
};