maybe-like.js 5.75 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;

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

    var $curNav,
        index,
        $navList = $('#maybe-like-nav');

    var $footer;

    var bottomBannerLoaded;

    ellipsis.init();

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

        // 有货币页面加载男生首页的数据
        url = specificGender === 'lifestyle' ? '/product/recom/maylike?gender=1,3' : '/product/recom/maylikelife';
    } else {
        gender = (specificGender === 'boys' || $('.mobile-wrap').hasClass('boys-wrap')) ?
                 'boys' : 'girls';
        url = '/product/recom/maylike?gender=' + gender;
    }

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

    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) {

                if (data === ' ') {
                    loading.hideLoadingMask();

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

                    }
                    return;
                } else {
                    searching = false;
                }

                // 加载到数据后,去除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'));
                }

                loading.hideLoadingMask();
                page++;

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

                    $title[0].mlellipsis(2);
                });
            },
            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);
    });
};