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

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

var $listBox = $('.list-box'),
    $brandContent = $('.brand-content'),
    $tabBox = $('.tab-box'),
    $contentIndex = $('.content-index'),
    $categoryNav = $('.category-nav'),
    $channelTab = $('.channel-tab'),
    $categoryContent = $('.category-content'),
    $brandCha = $('.brand-cha');

require('../common');
require('./brand-cate/cate-all');

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

    return channel[key];
}

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

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

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

    $.ajax({
        method: 'get',
        url: '/guang/plusstar/brandList',
        data: {
            gender: channel
        },
        success: function(data) {
            $brandContent.html(data);

            initialize();

            $('html,body').animate({
                scrollTop: 0
            }, 100, function() {
                $tabBox.removeClass('fastening');
                $contentIndex.removeClass('distance');
            });

            reference();
        }
    });
}

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

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

    loadData(channels(gender));
});

reference();

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

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

    if ($(this).hasClass('brand')) {
        $brandContent.removeClass('hide').siblings().addClass('hide');
        $channelTab.removeClass('hide');
        $brandCha.removeClass('hide').siblings().addClass('hide');
    } else {
        $categoryContent.removeClass('hide').siblings().addClass('hide');
        $('.channel-tab').addClass('hide');
    }

    initialize();

    // 页面切换回到头部
    $('html,body').animate({
        scrollTop: 0
    }, 100, function() {
        if (!$brandContent.hasClass('hide')) {
            $tabBox.removeClass('fastening');
            $contentIndex.removeClass('distance');
        } else {
            $tabBox.removeClass('fastening');
            $categoryNav.removeClass('loca');
            $('.blk-cate-all .content').removeClass('living');
            $contentIndex.removeClass('distance');
        }
    });
});

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

$(window).scroll(function() {
    var totalHeight = $('#yoho-header').height() + $('.tab-box').height();

    if (!$brandContent.hasClass('hide')) {
        if ($(this).scrollTop() >= $('#yoho-header').height()) {
            $tabBox.addClass('fastening');
            $contentIndex.addClass('distance');
            $('.list-box').css('top', $('.tab-box').height());
        } else {
            $tabBox.removeClass('fastening');
            $contentIndex.removeClass('distance');
            $('.list-box').css('top', totalHeight - $(this).scrollTop());
        }
    } else {
        if ($(this).scrollTop() >= $('#yoho-header').height()) {
            $tabBox.addClass('fastening');
            $categoryNav.addClass('loca');
            $('.blk-cate-all .content').addClass('living');
        } else {
            $tabBox.removeClass('fastening');
            $categoryNav.removeClass('loca');
            $('.blk-cate-all .content').removeClass('living');
        }
    }
});

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