Authored by ccbikai

channel 优化

... ... @@ -34,11 +34,7 @@ let _renderData = {
* @return {[type]}
*/
let _channelPage = (req, res, data) => {
res.cookie('_Channel', data.gender, {
maxAge: 2592000000,
domain: 'yohobuy.com'
});
return channelModel.getChannelData({ // TODO 内部的Promise方法必须 return 出来
return channelModel.getChannelData({
gender: data.gender,
uid: _.toString(req.user.uid)
}).then(result => {
... ...
<div class="mobile-container">
<div class="mobile-wrap {{#if boysHomePage}}boys-wrap{{/if}} {{#if girlsHomePage}}girls-wrap{{/if}} {{#if kidsHomePage}}kids-wrap{{/if}} {{#if lifestyleHomePage}}lifestyle-wrap{{/if}} yoho-page">
<div class="mobile-wrap {{#if boysHomePage}}boys-wrap{{/if}} {{#if girlsHomePage}}girls-wrap{{/if}} {{#if kidsHomePage}}kids-wrap{{/if}} {{#if lifestyleHomePage}}lifestyle-wrap{{/if}} yoho-page" data-channel="{{gender}}">
{{! 首页header}}
{{#homeHeader}}
{{> channel/home-header}}
... ...
/**
* 首页
* @author: liangzhifeng<zhifeng.liang@yoho.cn>
* @date: 2015/10/12
*/
var $ = require('yoho-jquery'),
Swiper = require('yoho-swiper'),
lazyLoad = require('yoho-jquery-lazyload'),
fastclick = require('yoho-fastclick'),
noticeScroll = require('../plugin/notice-scroll');
var $mobileWrap = $('.mobile-wrap'),
$overlay = $('.overlay'),
$sideNav = $('.side-nav'),
$subNav = $('.sub-nav'),
$logotrans = $('.home-header .logo'),
start = 0,
swiperClass,
isen = true;
require('../common');
fastclick.attach(document.body);
lazyLoad($('img.lazy'));
noticeScroll('.notice', $('.notice').data('time') * 1000);
$('.nav-btn').on('touchstart', function() {
$sideNav.css('pointer-events', 'none');
$mobileWrap.addClass('menu-open');
$overlay.show().css('opacity', 0.3);
$sideNav.addClass('on');
setTimeout(function() {
$sideNav.css('pointer-events', 'auto');
}, 400);
return false;
});
function hideSideBar() {
if ($mobileWrap.hasClass('menu-open')) {
$mobileWrap.removeClass('menu-open');
$overlay.hide();
$('.sub-nav').removeClass('show');
$sideNav.removeClass('on');
}
}
$overlay.on('touchstart', function() {
hideSideBar();
return false;
});
$sideNav.on('touchmove scroll', function() {
return false;
});
// 点击一级导航,弹出二级导航
$sideNav.on('touchend', 'li', function(e) {
if ($(this).find('.sub-nav').size() > 0) {
$('.sub-nav').removeClass('show');
$(this).find('.sub-nav').addClass('show');
$(this).find('.highlight').removeClass('highlight');
}
if (e.target.pathname === location.pathname) {
hideSideBar();
return false;
}
});
// 返回一级导航,收起二级导航
$subNav.each(function() {
$(this).find('li').eq(0).on('click', function() {
$('.sub-nav').removeClass('show');
return false;
});
}).on('touchstart', function(e) {
if (e.currentTarget !== e.target) {
$subNav.find('li').removeClass('current');
}
});
// 侧边栏点击背景色变化
function highlight($elem) {
$elem.find('li').on('touchstart', function() {
$elem.find('.highlight').removeClass('highlight');
$(this).addClass('highlight');
}).on('touchend touchcancel', function() {
$(this).removeClass('highlight');
});
}
highlight($sideNav);
highlight($subNav);
// 头部banner轮播
if ($('.banner-swiper').find('li').size() > 1) {
new Swiper('.banner-swiper', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.banner-top .pagination-inner'
});
}
// 热门品牌滑动
new Swiper('.brands-swiper', {
grabCursor: true,
slidesPerView: 'auto',
wrapperClass: 'brands-list',
slideElement: 'li'
});
// 推荐搭配滑动
new Swiper('.recommend-swiper', {
grabCursor: true,
slidesPerView: 'auto',
wrapperClass: 'recommend-list',
slideElement: 'li'
});
// 潮品话题轮播
if ($('.trend-topic-swiper').find('li').size() > 1) {
new Swiper('.trend-topic-swiper', {
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.trend-topic-content .pagination-inner'
});
}
// 新人专享轮播
if ($('.fresh-list-swiper').find('li').size() > 1) {
new Swiper('.fresh-list-swiper', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
grabCursor: true,
slidesPerView: 'auto',
slideElement: 'li',
watchSlidesVisibility: true
});
}
// 潮流上装/经典裤装等轮播
$('.category-swiper').each(function(i) {
swiperClass = 'category-swiper' + i;
$(this).addClass(swiperClass);
if ($('.' + swiperClass).find('.swiper-slide').size() > 1) {
new Swiper('.' + swiperClass, {
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.' + swiperClass + ' .pagination-inner'
});
}
});
// logo动画
function tsAnimate() {
start = start + 10;
$logotrans.css({
transform: 'rotateX(' + start + 'deg)',
'-webkit-transform': 'rotateX(' + start + 'deg)',
'-moz-transform': 'rotateX(' + start + 'deg)'
});
if (start / 90 % 2 === 1) {
if (isen) {
$logotrans.addClass('animate');
isen = false;
} else {
$logotrans.removeClass('animate');
isen = true;
}
}
if (start / 90 % 2 === 0 && start % 360 !== 0) {
window.setTimeout(tsAnimate, 3000);
} else {
if (start % 360 === 0) {
window.setTimeout(tsAnimate, 60 * 1000);
} else {
window.requestAnimationFrame(tsAnimate);
}
}
}
setTimeout(tsAnimate, 3000);
$('.home-header .iconfont').on('touchstart', function() {
$(this).addClass('highlight');
}).on('touchend touchcancel', function() {
$(this).removeClass('highlight');
});
// 底部留出tab 的高度
window.reMarginFooter('.footer-tab');
require('./maybe-like')();
require('./home');
/**
* 首页
* @author: liangzhifeng<zhifeng.liang@yoho.cn>
* @date: 2015/10/12
*/
var $ = require('yoho-jquery'),
Swiper = require('yoho-swiper'),
lazyLoad = require('yoho-jquery-lazyload'),
fastclick = require('yoho-fastclick'),
noticeScroll = require('../plugin/notice-scroll');
var $mobileWrap = $('.mobile-wrap'),
$overlay = $('.overlay'),
$sideNav = $('.side-nav'),
$subNav = $('.sub-nav'),
$logotrans = $('.home-header .logo'),
start = 0,
swiperClass,
isen = true;
require('../common');
fastclick.attach(document.body);
lazyLoad($('img.lazy'));
noticeScroll('.notice', $('.notice').data('time') * 1000);
$('.nav-btn').on('touchstart', function() {
$sideNav.css('pointer-events', 'none');
$mobileWrap.addClass('menu-open');
$overlay.show().css('opacity', 0.3);
$sideNav.addClass('on');
setTimeout(function() {
$sideNav.css('pointer-events', 'auto');
}, 400);
return false;
});
function hideSideBar() {
if ($mobileWrap.hasClass('menu-open')) {
$mobileWrap.removeClass('menu-open');
$overlay.hide();
$('.sub-nav').removeClass('show');
$sideNav.removeClass('on');
}
}
$overlay.on('touchstart', function() {
hideSideBar();
return false;
});
$sideNav.on('touchmove scroll', function() {
return false;
});
// 点击一级导航,弹出二级导航
$sideNav.on('touchend', 'li', function(e) {
if ($(this).find('.sub-nav').size() > 0) {
$('.sub-nav').removeClass('show');
$(this).find('.sub-nav').addClass('show');
$(this).find('.highlight').removeClass('highlight');
}
if (e.target.pathname === location.pathname) {
hideSideBar();
return false;
}
});
// 返回一级导航,收起二级导航
$subNav.each(function() {
$(this).find('li').eq(0).on('click', function() {
$('.sub-nav').removeClass('show');
return false;
});
}).on('touchstart', function(e) {
if (e.currentTarget !== e.target) {
$subNav.find('li').removeClass('current');
}
});
// 侧边栏点击背景色变化
function highlight($elem) {
$elem.find('li').on('touchstart', function() {
$elem.find('.highlight').removeClass('highlight');
$(this).addClass('highlight');
}).on('touchend touchcancel', function() {
$(this).removeClass('highlight');
});
}
highlight($sideNav);
highlight($subNav);
// 头部banner轮播
if ($('.banner-swiper').find('li').size() > 1) {
new Swiper('.banner-swiper', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.banner-top .pagination-inner'
});
}
// 热门品牌滑动
new Swiper('.brands-swiper', {
grabCursor: true,
slidesPerView: 'auto',
wrapperClass: 'brands-list',
slideElement: 'li'
});
// 推荐搭配滑动
new Swiper('.recommend-swiper', {
grabCursor: true,
slidesPerView: 'auto',
wrapperClass: 'recommend-list',
slideElement: 'li'
});
// 潮品话题轮播
if ($('.trend-topic-swiper').find('li').size() > 1) {
new Swiper('.trend-topic-swiper', {
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.trend-topic-content .pagination-inner'
});
}
// 新人专享轮播
if ($('.fresh-list-swiper').find('li').size() > 1) {
new Swiper('.fresh-list-swiper', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
grabCursor: true,
slidesPerView: 'auto',
slideElement: 'li',
watchSlidesVisibility: true
});
}
// 潮流上装/经典裤装等轮播
$('.category-swiper').each(function(i) {
swiperClass = 'category-swiper' + i;
$(this).addClass(swiperClass);
if ($('.' + swiperClass).find('.swiper-slide').size() > 1) {
new Swiper('.' + swiperClass, {
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.' + swiperClass + ' .pagination-inner'
});
}
});
// logo动画
function tsAnimate() {
start = start + 10;
$logotrans.css({
transform: 'rotateX(' + start + 'deg)',
'-webkit-transform': 'rotateX(' + start + 'deg)',
'-moz-transform': 'rotateX(' + start + 'deg)'
});
if (start / 90 % 2 === 1) {
if (isen) {
$logotrans.addClass('animate');
isen = false;
} else {
$logotrans.removeClass('animate');
isen = true;
}
}
if (start / 90 % 2 === 0 && start % 360 !== 0) {
window.setTimeout(tsAnimate, 3000);
} else {
if (start % 360 === 0) {
window.setTimeout(tsAnimate, 60 * 1000);
} else {
window.requestAnimationFrame(tsAnimate);
}
}
}
setTimeout(tsAnimate, 3000);
$('.home-header .iconfont').on('touchstart', function() {
$(this).addClass('highlight');
}).on('touchend touchcancel', function() {
$(this).removeClass('highlight');
});
// 底部留出tab 的高度
window.reMarginFooter('.footer-tab');
window.setCookie('_Channel', $mobileWrap.data('channel'), {
expires: 30,
domain: '.yohobuy.com'
});
require('./maybe-like')();
... ...