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

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

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

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

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

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

            initialize();
        }
    });
}

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

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

    loadData(channels(gender));
});

// 点击字母,页面滚动到相关区域
$intercept.click(function() {
    var name = $(this).attr('href').split('#')[1] === '0_9' ? '0~9' : $(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');
        $('.channel-tab').removeClass('hide');
        $('.brand-cha').removeClass('hide').siblings().addClass('hide');
    } else {
        $('.category-content').removeClass('hide').siblings().addClass('hide');
        $('.channel-tab').addClass('hide');
    }

    initialize();
});

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

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

    if (!$('.brand-content').hasClass('hide')) {
        if ($(this).scrollTop() >= $('#yoho-header').height()) {
            $('.tab-box').addClass('fastening');
            $('.content-index').addClass('distance');
            $('.list-box').css('top', $('.tab-box').height());
        } else {
            $('.tab-box').removeClass('fastening');
            $('.content-index').removeClass('distance');
            $('.list-box').css('top', totalHeight - $(this).scrollTop());
        }
    } else {
        if ($(this).scrollTop() >= $('#yoho-header').height()) {
            $('.tab-box').addClass('fastening');
            $('.category-nav').addClass('loca');
            $('.blk-cate-all .content').addClass('living');
        } else {
            $('.tab-box').removeClass('fastening');
            $('.category-nav').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'
            });
        }
    });
});