reds-shop.page.js 8.46 KB
// const tip = require('../plugin/tip');
const filter = require('../plugin/filter');
const lazyLoad = require('yoho-jquery-lazyload');

// const loading = require('../plugin/loading');

require('product/search/list.page.css');
require('product/shop/redshop.page.css');

require('plugin/sticky');
require('./shop/coupon');

let Tab = require('plugin/tab');

let $goodsContainer = $('#goods-container');
let $fsgc = $goodsContainer.children('.firstscreen-goods');
let $defaultgc = $goodsContainer.children('.default-goods');
let $ngc = $goodsContainer.children('.new-goods');
let $sgc = $goodsContainer.children('.sale-goods');
let $pgc = $goodsContainer.children('.price-goods');
let $dgc = $goodsContainer.children('.discount-goods');
let $container = $defaultgc; // 承载商品列表的容器
let $listNav = $('#list-nav'); // 筛选项列表
let $pre = $listNav.find('.active'); // 记录进入筛选前的active项,初始为选中项
let $filterBox = $('.filter-box');
let $filterBody = $('.filter-body');

let navInfo = {
    price: {
        order: 1,
        reload: true,
        page: 0,
        end: false
    },
    discount: {
        order: 1,
        reload: true,
        page: 0,
        end: false
    },
    default: {
        order: 0,
        reload: true,
        page: 0,
        end: false
    },
    new: {
        order: 0,
        reload: true,
        page: 0,
        end: false
    },
    sale: {
        order: 0,
        reload: true,
        page: 0,
        end: false
    }
};

let navType = 'default'; // 目前激活的导航页面
let defaultOpt = navInfo.default; // 默认参数
let onSearching = false; // 是否正在搜索
let isScrollLoad = false; // 是否是滚动加载
let page = 0; // 页码

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

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

/**
 * 获取商品列表
 */
function getGoodsList() {
    handleChoseFilter();

    if (!onSearching) {
        onSearching = true;

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

                switch (navType) {
                    case 'new':
                        $container = $ngc;
                        break;
                    case 'price':
                        $container = $pgc;
                        break;
                    case 'discount':
                        $container = $dgc;
                        break;
                    case 'default':
                        $container = $defaultgc;
                        break;
                    case 'sale':
                        $container = $sgc;
                        break;
                    default:
                        break;
                }

                $('.search-divide').remove();
                if (isScrollLoad) {
                    $container.append(result);
                } else {
                    $container.html(result);
                }
                lazyLoad($container.find('.lazy'));
                onSearching = false;
            },
            error: function() {
                let $divide = $('.search-divide');

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

/**
 * 当scroll到1/2$goodsContainer高度后继续请求下一页数据
 */
function scrollHandler() {
    if ($filterBox.is(':visible') && $(window).scrollTop() > $goodsContainer.height() * 0.5) {
        isScrollLoad = true;
        Object.assign(defaultOpt, {page: page++});
        getGoodsList();
    }
}

/**
 * 加载筛选数据
 */
function getFilter() {
    $.ajax({
        type: 'GET',
        url: location.protocol + '//m.yohobuy.com/product/search/filter',
        data: defaultOpt,
        success: function(data) {
            $goodsContainer.append(data);

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

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

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

Tab.prototype.getgoodslist = getGoodsList; // 获取商品列表,点击全部商品 Tab 时获取
Tab.prototype.filterhide = function() { // 隐藏筛选 TAB
    $filterBox.css('display', 'none');
};
Tab.prototype.filtershow = function() { // 显示筛选 TAB
    $filterBox.css('display', 'block');
};

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

$listNav.on('touchend touchcancel', function(e) {
    isScrollLoad = false;

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

    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('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';
        }

        nav = navInfo[navType];

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

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

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

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

                // 价格/折扣切换排序状态
                $this.find('.icon > .iconfont').toggleClass('cur');
                $pre = $this; // 更新pre为当前项
                nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML
                nav.order = nav.order === 0 ? 1 : 0; // 切换排序
            }
        } else {
            $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 'new':
                        $ngc.removeClass('hide');
                        break;

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

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

                    case 'default':
                        $defaultgc.removeClass('hide');
                        $fsgc.removeClass('hide');
                        break;

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

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

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

// 页面打开直接加载筛选项
getFilter();

// srcoll to load more
$(window).scroll(function() {
    scrollHandler();
});