maybe-like.js 7.84 KB
/**
 * “你可能喜欢”模块JS
 * @author: liangzhifeng<zhifeng.liang@yoho.cn>
 * @date: 2015/10/12
 */

module.exports = function(specificGender) {
    var $ = require('jquery'),
        Hammer = require('yoho.hammer'),
        tip = require('../plugin/tip'),
        loading = require('../plugin/loading'),
        ellipsis = require('yoho.mlellipsis'),
        lazyLoad = require('yoho.lazyload');

    var navHammer,
        winH = $(window).height(),
        $goodList = $('#goods-list'),
        searching = false,
        page = 0,
        gender = null,
        num,
        url,
        RECPOSE = '110001';

    //The kidsType can be specified by the parameter. Add by @ZhaoBiao
    var kidsType = specificGender === 'kids' || $('.mobile-wrap').hasClass('kids-wrap') ? true : false,
        lifestyleType = specificGender === 'lifestyle' ||
                                            $('.mobile-wrap').hasClass('lifestyle-wrap') ? true : false,
        yohoCoinType = $('.coin').length ? true : false,
        logisticType = $('.logistic-page').length ? true : false;
    var $curNav,
        index,
        $navList = $('#maybe-like-nav');

    var $footer;

    ellipsis.init();

    //ajax url
    if (kidsType) {
        
        url = '/product/recom/maylikekids';
    } else if (lifestyleType) {

        //有货币页面加载男生首页的数据
        url = specificGender === 'lifestyle' ? '/product/recom/maylike?gender=1,3&rec_pos=100001' : '/product/recom/maylikelife';
    } else if (yohoCoinType) {

        gender = (specificGender === 'boys' || $('.mobile-wrap').hasClass('boys-wrap')) ?
                 '1,3&rec_pos=100009' : '2,3&rec_pos=100009',
        url = '/product/recom/maylike?gender=' + gender;
        RECPOSE = 110009;

    } else if (logisticType) { //物流页面
        gender = (specificGender === 'boys' || $('.mobile-wrap').hasClass('boys-wrap')) ?
                 '1,3&rec_pos=100006' : '2,3&rec_pos=100006',
        url = '/product/recom/maylike?gender=' + gender;
        RECPOSE = 110006;

    } else {
        gender = (specificGender === 'boys' || $('.mobile-wrap').hasClass('boys-wrap')) ?
                 '1,3&rec_pos=100001' : '2,3&rec_pos=100002',
        url = '/product/recom/maylike?gender=' + gender;
    }

    //日韩馆-你可能喜欢的
    if ($('.mobile-wrap').hasClass('yoho-channel-page')) {
        url = '/product/recom/newPreference?template_id=' + $.queryString().template_id;
    }

    //首页男生和女生,推荐位ID,埋点
    if (window.location.pathname === '/boys') {
        RECPOSE = 110001;
    } else if (window.location.pathname === '/girls') {
        RECPOSE = 110002;
    }

    $curNav = $navList.children('.focus');

    if (lifestyleType) {
        navHammer = $navList[0] ? new Hammer($navList[0]) : undefined;
        if (navHammer) {
            navHammer.on('tap', function(e) {
                var $this = $(e.target).closest('li'),
                    $goods = $('.goods-list'),
                    $content;

                e.preventDefault();
                if ($this.hasClass('focus')) {
                    return;
                }

                index = $this.index();

                $this.addClass('focus');
                $curNav.removeClass('focus');

                $goods.not('.hide').addClass('hide');
                $content = $goods.eq(index);
                $content.removeClass('hide');

                $curNav = $this;

                $(document).trigger('scroll'); //Trigger lazyLoad
                e.srcEvent.stopPropagation();
            });
        }
    }

    loading.init($('.maybe-like'));

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

        loading.showLoadingMask();

        //num = $goodList.find('.good-info').length;
        $.ajax({
            type: 'GET',
            url: url,
            data: {
                page: page + 1
            },
            success: function(data) {
                var PRDID = [];
                if (data === ' ') {
                    searching = false;
                    loading.hideLoadingMask();

                    // 有货币页面不加载底部
                    if (gender && !specificGender) {
                        if (gender === '1,3') {
                            url = '/boys/bottomBanner';
                        } else {
                            url = '/girls/bottomBanner';
                        }
                        $.ajax({
                            type: 'GET',
                            url: url,
                            success: function(data) {
                                if (data && data.img) {
                                    $('#load-more-img').show();
                                    $('#load-more-img a').attr('href', data.url);
                                    $('#load-more-img a > img').attr('src', data.img);
                                }
                            },
                            error: function() {
                            }
                        });

                    }
                    return;
                }

                //加载到数据后,去除bottom样式,使得footer能够随着页面长度的增加改变位置
                if (data.length > 1) {
                    $footer ? null : $footer = $('#yoho-footer');
                    $footer.hasClass('bottom') ? $footer.removeClass('bottom') : null;
                }

                num = $goodList.find('.good-info').length;

                $goodList.append(data);

                // 2015/10/31 fei.hong: 修复第一页分页不显示图片的问题
                if (num === 0) {
                    lazyLoad($goodList.find('.good-info').find('img.lazy'));
                } else {
                    lazyLoad($goodList.find('.good-info:gt(' + (num - 1) + ')').find('img.lazy'));
                }

                searching = false;
                loading.hideLoadingMask();
                page++;

                $('.good-detail-text .name').each(function() {
                    var $this = $(this),
                        $title = $this.find('a');

                    $title[0].mlellipsis(2);
                });

                //为您优选埋点 start
                $(data).closest('.good-info').each(function() {
                    PRDID.push($(this).data('id'));
                });
                window.givePoint({
                    'REC_POSE': RECPOSE,
                    'PRD_ID': PRDID.join(','),
                    'PRD_NUM': $(data).closest('.good-info').length,
                    'ACTION_ID': 0,
                    'page_num': RECPOSE === 110009 ? 1 : page
                });
                //为您优选埋点 end
            },
            error: function() {
                tip.show('网络断开连接了~');
                searching = false;
                loading.hideLoadingMask();
            }
        });
    }

    $('.maybe-like p').on('touchstart', function(e) {
        search();
    });

    function scrollHandler() {
        if ($(window).scrollTop() + winH >= $(document).height() - 200) {
            search();
        }
    }

    // 优惠券页面直接加载你可能喜欢。add by @zhaobiao
    if (specificGender) {
        search();
    }

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

    //为您优选埋点 http://redmine.yoho.cn/issues/10116
    $('.maybe-like .goods-list').on('click', 'a', function() {
        var index = $(this).closest('.good-info').index() + 1,
            pageNum = 50;
        window.givePoint({
            'REC_POSE': RECPOSE,
            'PRD_ID': $(this).closest('.good-info').data('id'),
            'PRD_NUM': index % pageNum === 0 ? pageNum : index % pageNum,
            'ACTION_ID': 1,
            'page_num': Math.ceil(index / pageNum)
        });
        return true;
    });
};