plusstar-index.page.js 10.5 KB
var $ = require('yoho-jquery'),
    tip = require('../plugin/tip'),
    Swiper = require('yoho-swiper'),
    loading = require('../plugin/loading'),
    debounce = require('lodash/debounce');

var plusstar = {},
    $footer = $('#yoho-footer');

var windowHeight = $(window).height();
var scrollFn,
    scrollTop,
    RECPOSE,
    isApp,
    searching = false,
    speckParamApp = {
        udid: '',
        apt: '',
        sid: ''
    };

require('yoho-jquery-lazyload');
require('../common');

plusstar = {
    common: {
        codeDefault: '',
        page: 1,
        pagesize: 20,
        pageTotal: 1,
        productSkns: []
    },
    init: function() {
        var that = this,
            $liDom,
            $tabUlDom;

        $tabUlDom = $('.plusstar-page .tab-nav ul');

        $tabUlDom.find('li').css({
            width: 100 / $tabUlDom.find('li').length + '%'
        });

        $tabUlDom.find('li').each(function() {
            // 重新进入滑动位置清除
            window.setCookie($(this).data('code'), 0);
        });

        // 事情委托机制
        $tabUlDom.bind('click', function(event) {
            $liDom = $(event.target).closest('li');

            if ($liDom.hasClass('focus')) {
                return true;
            }

            $(this).find('li').removeClass('focus');
            $liDom.addClass('focus');
            that.ParentLiDom = $liDom;// 保留当前tab先中的对象
            that.tabNav($liDom.data('code'));

            // 点击潮流优选上方的TAB按钮时
            if (window._yas && window._yas.sendCustomInfo) {
                window._yas.sendCustomInfo({
                    op: 'YB_FASHION_TAB_C',
                    param: JSON.stringify($.extend({
                        TAB_ID: $liDom.index() + 1
                    }, speckParamApp))
                }, true);

                window._yas.sendCustomInfo({
                    op: 'YB_FASHION_HOME_L',
                    param: JSON.stringify($.extend({
                        TAB_ID: that.ParentLiDom.index() + 1
                    }, speckParamApp))
                }, true);
            }
        });

        // start -- 默认选中
        $liDom = $tabUlDom.find('li.focus');
        if ($liDom.length <= 0) {
            // 默认第一个
            $liDom = $('.plusstar-page .tab-nav ul li:eq(0)');
        }
        $tabUlDom.find('li').removeClass('focus');
        $liDom.addClass('focus');
        that.ParentLiDom = $liDom;// 保留当前tab先中的对象
        that.tabNav($liDom.data('code'));

        // ent -- 默认选中
        setTimeout(function() {
            that._yas();
        }, 1000);
    },
    _yas: function() {
        // http://redmine.yoho.cn/issues/12224
        var that = this;

        if (!window._yas || !window._yas.sendCustomInfo) {
            return false;
        }

        RECPOSE = that.ParentLiDom.index() !== 0 ? 100015 : 100014;
        $('.plusstar-resources').bind('click', function(event) {
            var $dom, $domA, index;

            if ($(event.target).closest('.good-info').length > 0) {
                // 商品单击埋点
                $dom = $(event.target).closest('.good-info');
                index = $dom.index() + 1;
                window.givePoint($.extend({
                    REC_POSE: RECPOSE,
                    PRD_ID: $dom.data('good-id'),
                    ORDER_CODE: '',
                    PRD_NUM: index % that.common.pagesize === 0 ? that.common.pagesize : index % that.common.pagesize,
                    ACTION_ID: 1,
                    page_num: Math.ceil(index / that.common.pagesize)
                }, speckParamApp));
            } else if ($(event.target).closest('.banner-top').length > 0) {
                // 头部banner楼层埋点
                $dom = $(event.target).closest('li');
                index = $dom.index() + 1;
                window._yas.sendCustomInfo({
                    op: 'YB_FASHION_FLR_C',
                    param: JSON.stringify($.extend({
                        TAB_ID: that.ParentLiDom.index() + 1,
                        F_ID: $dom.closest('ul').data('id'),
                        F_NAME: '焦点图',
                        F_URL: encodeURIComponent($dom.find('a').attr('href').replace(/\"/g, '\\"')),
                        F_INDEX: 1,
                        I_INDEX: index % 2 + 1// banner,li是双倍的
                    }, speckParamApp))
                }, true);
            } else if ($(event.target).closest('.speck-title-image a').length > 0) {
                // 各楼层埋点
                $dom = $(event.target).closest('.speck-title-image');
                $domA = $(event.target).closest('.speck-title-image a');

                window._yas.sendCustomInfo({
                    op: 'YB_FASHION_FLR_C',
                    param: JSON.stringify($.extend({
                        TAB_ID: that.ParentLiDom.index() + 1,
                        F_ID: $dom.data('fid'),
                        F_NAME: $dom.data('name'),
                        F_URL: encodeURIComponent($domA.attr('href').replace(/\"/g, '\\"')),
                        F_INDEX: $dom.index() + 1,
                        I_INDEX: $domA.hasClass('more') ? 0 : ($domA.index() + 1)
                    }, speckParamApp))
                }, true);
            }
        });

        // 潮流优选首页加载时
        window._yas.sendCustomInfo({
            op: 'YB_FASHION_HOME_L',
            param: JSON.stringify($.extend({
                TAB_ID: that.ParentLiDom.index() + 1
            }, speckParamApp))
        }, true);
    },
    tabNav: function(code) {
        var that = this;

        this.common.codeDefault = code;// 记住最后一次的tab code
        this.common.page = 1;// 商品列表从第一页开始
        searching = false;// 初始化翻页

        $.ajax({
            type: 'GET',
            url: '/guang/plusstar/resources-template',
            data: {
                code: code,
                uid: window.queryString.uid,
                app_version: isApp,
                yh_channel: that.ParentLiDom.index() + 1
            },
            dataType: 'html',
            success: function(data) {
                var productSkns = '';

                $('.plusstar-resources').html(data);

                if (data === '') {
                    tip.show('没有更多内容了');
                    return true;
                }

                // 记录切换tab位置
                $(document).scrollTop(window.cookie(code) || 0);

                that.resInit();

                $('.plusstar-resources').find('img.lazy').lazyload();

                productSkns = $(data).find('.product-skns').val();
                if (productSkns) {
                    that.common.productSkns = productSkns.split(',');
                }

                that.common.pageTotal = Math.ceil(that.common.productSkns.length / that.common.pagesize);
            },
            error: function() {
                tip.show('网络断开连接了~');
            }
        });
    },
    resInit: function() {
        // 头部banner轮播
        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'
            });
        }
    },
    goodsList: function() {
        var that = this,
            skn = [];

        if (searching) {
            return;
        }
        searching = true;

        if (that.common.page > that.common.pageTotal) {
            return false;
        }

        loading.showLoadingMask();
        skn = that.common.productSkns.slice((that.common.page - 1) * that.common.pagesize, that.common.page * that.common.pagesize);
        $.ajax({
            type: 'POST',
            url: '/guang/plusstar/resources-goodsList',
            timeout: 5000,
            data: {
                productSkn: skn.join(','),
                app_version: isApp
            },
            dataType: 'html',
            success: function(data) {
                skn = [];
                loading.hideLoadingMask();
                searching = false;
                that.common.page++;

                if (data === '') {
                    return true;
                }

                $.each($(data).siblings('.good-info'), function() {
                    skn.push($(this).data('good-id'));
                });

                window.givePoint($.extend({
                    REC_POSE: RECPOSE,
                    PRD_ID: skn.join(','),
                    ORDER_CODE: '',
                    PRD_NUM: that.common.pagesize,
                    ACTION_ID: 0,
                    page_num: that.common.page - 1
                }, speckParamApp));

                $('.plusstar-resources .goods').append(data);

                $('.plusstar-resources .goods').find('img.lazy:not([src])').lazyload();
                $('.resources .goods .page-total').remove();
            },
            error: function() {
                searching = false;
                tip.show('网络断开连接了~');
                loading.hideLoadingMask();
            }
        });
    }
};

scrollFn = debounce(function() {
    scrollTop = $(document).scrollTop();

    // 保留滑动位置,产品要求
    window.setCookie(plusstar.common.codeDefault, $(this).scrollTop());

    // 当scroll到最后一列商品的高度后继续请求下一页数据
    if (400 + scrollTop >= $(document).height() - windowHeight) {
        plusstar.goodsList();
    }

}, 200);

$(function() {
    isApp = window.queryString.app_version || window.queryString.appVersion;

    if (isApp) {
        speckParamApp = {
            udid: window.queryString.udid || '',
            apt: window.queryString.client_type || '',
            sid: window.queryString.session_id || '',
        };
    }

    // 男:1,女:2,潮童:3,创意生活:4
    speckParamApp.CID = window.queryString.yh_channel || window._ChannelVary[window.cookie('_Channel')] || 1;

    if (!isApp) {
        $('.tab-nav').css({
            position: 'relative'
        });

        $footer.css({
            'max-width': '650px'
        }).before(
            '<div style="height: ' + parseInt($footer.css('height'), 0) + 'px"></div>'
        );
    }

    plusstar.init();

    // 滚动翻页
    $(window).scroll(function() {
        scrollFn();
    });
});