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

module.exports = function(specificGender) {
    var $ = require('yoho-jquery'),
        Hammer = require('yoho-hammer'),
        ellipsis = require('yoho-mlellipsis'),
        tip = require('../plugin/tip'),
        loading = require('../plugin/loading'),
        lazyLoad = require('yoho-jquery-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;

    var bottomBannerLoaded,
        channel;

    require('../common');

    channel = window.cookie('_Channel');

    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') ||
            $('.yoho-header').hasClass('boys')) ? '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]) : null;

        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'));

    // 如果对象不存在,就不须要执行
    if (!$goodList.length) {
        searching = true;
        console.warn('maybe like required object is not existent!');
        return false;
    }

    function search() {

        if (searching) {
            return;
        }

        searching = true;

        loading.showLoadingMask();

        $.ajax({
            type: 'GET',
            url: url,
            data: {
                page: page + 1
            },
            success: function(data) {
                var PRDID = [];

                if (data === ' ' || data === '') {
                    searching = true;

                    loading.hideLoadingMask();

                    // 有货币页面不加载底部
                    if (gender && !specificGender) {
                        if (bottomBannerLoaded) {
                            return;
                        }

                        url = '/' + channel + '/bottomBanner';

                        $.ajax({
                            type: 'GET',
                            url: url,
                            data: {
                                gender: channel
                            },
                            success: function(result) {
                                bottomBannerLoaded = true;

                                if (result && result.img) {
                                    $('#load-more-img').show();
                                    $('#load-more-img a').attr('href', result.url);
                                    $('#load-more-img a > img').attr('src', result.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() {
        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 pageNum = 50;

        index = $(this).closest('.good-info').index() + 1;

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