brand-list.page.js 3.29 KB
var $ = require('yoho-jquery'),
    Swiper = require('yoho-swiper2');

var categoryHeight = $('.tab-box').height(),
    gender,
    isBrand;

var $intercept = $('.no-intercept'),
    $list = $('.brand-list-box'),
    $listBox = $('.list-box');

function channels(key) {
    var channel = {
        men: 1,
        women: 2,
        lifestyle: 4
    };

    return channel[key];
}

function initialize() {
    $('.banner-swiper').each(function() {
        if (!$(this).parents('.content').hasClass('hide') && $(this).hasClass('swiper-container-horizontal') === false && $(this).find('li').length > 1) {
            new Swiper(this, {
                preloadImages: false,
                lazyLoading: true,
                lazyLoadingInPrevNext: true,
                lazyLoadingOnTransitionStart: true,
                loop: true,
                autoplay: 3000,
                autoplayDisableOnInteraction: false,
                paginationClickable: true,
                slideElement: 'li'
            });
        }
    });
}

function loadData(channel, isBrand) {
    var preUrl;

    if (isBrand) {
        preUrl = '/guang/brandList';
    } else {
        preUrl = '/guang/category';
    }

    $.ajax({
        method: 'get',
        url: preUrl,
        data: {
            gender: channel
        },
        success: function(data) {
            if (isBrand) {
                $('.brand-content').html(data);
            } else {
                $('.category-content').html(data);
            }

            initialize();
        }
    });
}

$('.channel-tab').find('li').click(function() {
    gender = $(this).find('span').text().replace(/[^A-Za-z]+/g, '').toLowerCase();
    isBrand = $('.brand-tab').find('.brand').hasClass('active');

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

    loadData(channels(gender), isBrand);
});

// 点击字母,页面滚动到相关区域
$intercept.click(function() {
    var name = $(this).attr('href').split('#')[1],
        targetTop = $list.find('[name=' + name + ']').offset().top - categoryHeight;

    $('html,body').animate({
        scrollTop: targetTop
    }, 200);
    return false;
});

$('.brand-tab').find('li').click(function() {

    $(this).addClass('active').siblings().removeClass('active');

    if ($(this).hasClass('brand')) {
        $('.brand-content').removeClass('hide').siblings().addClass('hide');
        $('.brand-cha').removeClass('hide').siblings().addClass('hide');
    } else {
        $('.category-content').removeClass('hide').siblings().addClass('hide');
        $('.cate-cha').removeClass('hide').siblings().addClass('hide');
    }

    initialize();
});

if ($listBox.find('li').length <= 0) {
    $listBox.hide();
}

$(function() {
    $('.banner-swiper').each(function() {
        if (!$(this).parents('.content').hasClass('hide') && $(this).hasClass('swiper-container-horizontal') === false && $(this).find('li').length > 1) {
            new Swiper(this, {
                preloadImages: false,
                lazyLoading: true,
                lazyLoadingInPrevNext: true,
                lazyLoadingOnTransitionStart: true,
                loop: true,
                autoplay: 3000,
                autoplayDisableOnInteraction: false,
                paginationClickable: true,
                slideElement: 'li'
            });
        }
    });
});