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

var $ = require('jquery'),
    Hammer = require('yoho.hammer'),
    tip = require('../plugin/tip'),
    loading = require('../plugin/loading'),
    lazyLoad = require('yoho.lazyload');

var navHammer,
    winH = $(window).height(),
    loadMoreH = $('#load-more').height(),
    $goodList = $('#goods-list'),
    searching = false,
    page = 0,
    gender = null,
    kidsType = $('.mobile-wrap').hasClass('kids-wrap') ? true : false,
    lifestyleType = $('.mobile-wrap').hasClass('lifestyle-wrap') ? true : false,
    num,
    url;

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

//ajax url
if (kidsType) {
    url = '/product/recom/maylikekids';
} else if (lifestyleType) {
    url = '/product/recom/maylikelife';
} else {
    gender = $('.mobile-wrap').hasClass('boys-wrap') ? '1,3' : '2,3',
    url = '/product/recom/maylike?gender=' + gender;
}

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

if (lifestyleType) {
    navHammer = new Hammer($navList[0]);
    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 === ' ') {
                searching = false;

                //loading.hideLoadingMask();
                if (gender) {
                    if (gender === '1,3') {
                        url = '/boys/bottomBanner';
                    } else {
                        url = '/girls/bottomBanner';
                    }
                    $.ajax({
                        type: 'GET',
                        url: url,
                        success: function(data) {
                            if (data) {
                                $('#load-more-img').show();
                                $('#load-more-img a').attr('href', data.url);
                                $('#load-more-img a > img').attr('src', data.img);
                            }
                        },
                        error: function() {
                        }
                    });

                }
                return;
            }

            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++;
        },
        error: function() {
            tip.show('网络断开连接了~');
            searching = false;
            loading.hideLoadingMask();
        }
    });
}

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

//srcoll to load more
$(window).scroll(function () {
    if ($(window).scrollTop() + winH >= $(document).height() - loadMoreH - 50) {
        search();
    }
});