reds-shop.page.js 7.12 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 $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; // 默认参数

/**
 * 处理筛选参数
 */
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();
    $.ajax({
        type: 'GET',
        url: location.protocol + '//m.yohobuy.com/product/search/search',
        data: defaultOpt,
        xhrFields: {
            withCredentials: true
        },
        success: function(result) {
            let $container = $defaultgc;

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

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

/**
 * 加载筛选数据
 */
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.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) {
    let $this = $(e.target).closest('li'); // 被点击的 Tab
    let $active;
    let nav;
    let bpIdData = $(this).find('.buriedpoint').attr('data-bp-id') || '';

    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) {
            $(document).trigger('shouldSendBpData', [bpIdData]);
            getGoodsList({filtering: true});
        }
    }
});
getFilter();