Authored by yyq

header nav

'use strict';
const headerModel = require('../../../doraemon/models/header');
const headerNav = (req, res, next) => {
let channel = req.query.channel || req.yoho.channel;
headerModel.getHeaderSubNav(channel).then(result => {
let resData = {code: 400};
if (result && result.length) {
Object.assign(resData, {
code: 200,
data: result[0]
});
}
res.send(resData);
}).catch(next);
};
module.exports = {
headerNav
};
... ...
... ... @@ -19,6 +19,8 @@ const getBanner = require(`${cRoot}/getBanner`);
const passport = require(`${cRoot}/passport`);
const suggestFeedBack = require(`${cRoot}/suggestFeedBack`);
const main = require(`${cRoot}/index`);
router.get('/recentReview', rvCtrl.index); // 最近浏览
router.post('/getRecommend', rvCtrl.getRecommend); // 为你优选
... ... @@ -32,6 +34,8 @@ router.get('/passport', passport.index);
router.get('/suggestfeedback', suggestFeedBack.getFeedBack);
router.get('/header/nav', main.headerNav);
module.exports = router;
... ...
... ... @@ -16,6 +16,7 @@ const path = require('path');
const headerHtml = require('fs').readFileSync(path.resolve(__dirname, '../views/partial/headerNew.hbs')).toString();
const template = Handlebars.compile(headerHtml);
const logger = global.yoho.logger;
/**
* 获取菜单
* @param undefined
... ... @@ -225,6 +226,8 @@ const cacheHeaderHtml = {
lifestyle: []
};
let cacheNavData;
const THIRTY_MINUTES = 1000 * 60 * 10;
async function requestHeaderData(type) {
... ... @@ -262,6 +265,8 @@ async function requestHeaderData(type) {
if (res[0] && res[0].data) {
Object.assign(resData.headerData, setHeaderData(res[0].data, type));
cacheNavData = _.get(resData, 'headerData.subNavGroup', '');
} else {
logger.error('header api data empty');
}
... ... @@ -294,6 +299,20 @@ async function requestHeaderData(type) {
return Promise.resolve({headerData: _html});
}
async function getHeaderSubNav(type) {
if (_.isEmpty(cacheNavData)) {
let res = await getHeaderNavAsync();
cacheNavData = _.get(setHeaderData(res.data, type), 'subNavGroup', []);
}
return Promise.resolve(_.takeWhile(cacheNavData, o => {
return o.subType === type;
}));
}
module.exports = {
requestHeaderData
requestHeaderData,
getHeaderSubNav
};
... ...
... ... @@ -168,29 +168,6 @@
<span class="newlogo"></span>
{{/if}}
</a>
{{#if thirdNav}}
<div class="third-nav-wrapper">
<div class="center-content">
<dl class="hide-list hide">
{{# thirdNav}}
<dt>
<h3 class=""><a href="{{link}}"{{#if @root.pageNoFollow}} rel="nofollow"{{/if}}>{{title}}</a></h3>
</dt>
{{#brandItems}}
<dd>
<a href="{{link}}"{{#if hot}}
class="hot"{{/if}}{{#if @root.pageNoFollow}} rel="nofollow"{{/if}}>{{brandName}}</a>
</dd>
{{/brandItems}}
{{/thirdNav}}
</dl>
<div class="show-detail" data-code="{{imgCode}}">
<a{{#if @root.pageNoFollow}} rel="nofollow"{{/if}}><img src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="></a>
<a class="title">热门小物优选</a>
</div>
</div>
</div>
{{/if}}
</li>
{{/ subNav}}
</ul>
... ... @@ -290,4 +267,4 @@
<h5 class="code-title">下载手机客户端</h5>
<i class="iconfont icon-del"></i>
</div>
{{/ headerData}}
\ No newline at end of file
{{/ headerData}}
... ...
{{# subNav}}
<li {{#if thirdNav}}class="contain-third"{{/if}}>
<a href="{{link}}"{{#if @root.pageNoFollow}} rel="nofollow"{{/if}}>{{name}}
{{#if isNew}}
<span class="newlogo"></span>
{{/if}}
</a>
{{#if thirdNav}}
<div class="third-nav-wrapper">
<div class="center-content">
<dl class="hide-list hide">
{{# thirdNav}}
<dt>
<h3 class=""><a href="{{link}}"{{#if @root.pageNoFollow}} rel="nofollow"{{/if}}>{{title}}</a></h3>
</dt>
{{#brandItems}}
<dd>
<a href="{{link}}"{{#if hot}}
class="hot"{{/if}}{{#if @root.pageNoFollow}} rel="nofollow"{{/if}}>{{brandName}}</a>
</dd>
{{/brandItems}}
{{/thirdNav}}
</dl>
<div class="show-detail" data-code="{{imgCode}}">
<a{{#if @root.pageNoFollow}} rel="nofollow"{{/if}}><img src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="></a>
<a class="title">热门小物优选</a>
</div>
</div>
</div>
{{/if}}
</li>
{{/ subNav}}
... ...
... ... @@ -23,7 +23,7 @@ var $head = $('.head-wrapper'),
$miniCart = $head.find('.mini-cart-wrapper'),
$dropDown = $tool.find('.nav-drop-down-container');
var $subNav = $('.sub-nav-list.cure .contain-third');
var subNavFn;
var fetchUserInfoEvent = $.Callbacks('once'); // eslint-disable-line
... ... @@ -100,6 +100,7 @@ $('.we-chat').mouseenter(function() {
centerFn = handlebars.compile($('#simple-account-info-tpl').html() || '');
loginFn = handlebars.compile($('#header-login-info-tpl').html() || '');
cartFn = require('hbs/header/mini-cart-tpl.hbs'); // handlebars.compile($('#mini-cart-tpl').html() || '');
subNavFn = require('mix/common/header-nav.hbs');
// handlebars helper
handlebars.registerHelper('notzero', function(v1, options) {
... ... @@ -284,32 +285,6 @@ function getBannerAndNotice() {
});
}
// 格式化三级菜单
function formatThirdMenu() {
$subNav.each(function() {
var $thirdList = $(this).find('.hide-list'),
list = [],
i = 0;
if ($thirdList.length) {
$thirdList.children().each(function() {
if (i % thirdLineNum === 0) {
list.push('');
}
list[list.length - 1] += this.outerHTML + '';
i++;
});
for (i = 0; i < 3; i++) {
if (!list[i]) {
return;
}
$thirdList.before('<dl class="category-list">' + list[i] + '</dl>');
}
$thirdList.remove();
}
});
}
// 更新头部登陆信息
function updateLoginInfo(data) {
if (data.curLevel * 1 === 3) {
... ... @@ -590,43 +565,139 @@ function isSupportCss3Animation() {
}
}
// 处理pageCache频道显示异常问题
function syncPageChannel() {
var $header = $('#yoho-header'),
$navs;
var channel = window.homePage || window.cookie('_Channel') || 'boys',
qs = window.queryString();
if (isSupportCss3Animation()) {
requestFrame = requestFrameAct();
window.setTimeout(tsAnimate, 3000);
} else {
window.setTimeout(fadeAnimate, 3000);
}
channel = qs.channel ? qs.channel : channel;
// 菜单设置
(function() {
var headerNav = {
init() {
var that = this;
if ($header && $header.length) {
$navs = $header.find('.' + channel);
this.syncPageChannel();
if (!$navs.length) {
channel = 'boys';
$navs = $header.find('.' + channel);
}
this.$base = $('.sub-nav-list.cure');
// 更新频道菜单选中状态
$navs.siblings('.cure').removeClass('cure');
$navs.addClass('cure');
$('.contain-third', this.$base).mouseenter(function() {
that.getThirdNavs();
});
},
syncPageChannel() {
var $header = $('#yoho-header'),
$navs;
var channel = window.homePage || window.cookie('_Channel') || 'boys',
qs = window.queryString();
// 更新频道颜色
$header.addClass(channel).find('.func-area').removeClass('hide');
channel = qs.channel ? qs.channel : channel;
// 更新三级菜单jq对象
$subNav = $('.sub-nav-list.cure .contain-third');
}
}
if ($header && $header.length) {
$navs = $header.find('.' + channel);
if (isSupportCss3Animation()) {
requestFrame = requestFrameAct();
window.setTimeout(tsAnimate, 3000);
} else {
window.setTimeout(fadeAnimate, 3000);
}
syncPageChannel();
formatThirdMenu(); // 格式化三级菜单
if (!$navs.length) {
channel = 'boys';
$navs = $header.find('.' + channel);
}
// 更新频道菜单选中状态
$navs.siblings('.cure').removeClass('cure');
$navs.addClass('cure');
// 更新频道颜色
$header.addClass(channel).find('.func-area').removeClass('hide');
}
this.channel = channel;
},
getThirdNavs() {
var that = this;
if (this.loaded || this.loading) {
return;
}
this.loading = true;
$.ajax({
url: '/common/header/nav',
type: 'GET',
data: {channel: this.channel},
}).done(function(res) {
if (res.code === 200) {
that.loaded = true;
that.$base.html(subNavFn(res.data));
that.reseatThirdMenu();
}
}).always(function() {
that.loading = false;
});
},
reseatThirdMenu() {
$('.contain-third', this.$base).each(function() {
var $thirdList = $(this).find('.hide-list'),
list = [],
i = 0;
if ($thirdList.length) {
$thirdList.children().each(function() {
if (i % thirdLineNum === 0) {
list.push('');
}
list[list.length - 1] += this.outerHTML + '';
i++;
});
for (i = 0; i < 3; i++) {
if (!list[i]) {
return;
}
$thirdList.before('<dl class="category-list">' + list[i] + '</dl>');
}
$thirdList.remove();
}
}).on({
mouseenter: function() {
var $thirdNav = $(this).children('.third-nav-wrapper'),
$show = $thirdNav.find('.show-detail'),
param = {};
delayer = setTimeout(function() {
$thirdNav.show();
}, 200);
if (!$show.length || $show.hasClass('show')) {
return;
}
param.content_code = $show.data().code;
param.client_type = 'web';
param.width = 337;
param.height = 250;
param._ = new Date();
$.getJSON('//new.yohobuy.com/common/getbanner?callback=?', param, function(JsonData) {
if (JsonData.code === 200) {
$show.addClass('show');
$show.find('img').attr('src', JsonData.data.src);
$show.find('a').attr('href', JsonData.data.url);
$show.find('.title').text(JsonData.data.title);
}
});
},
mouseleave: function() {
var $thirdNav = $(this).children('.third-nav-wrapper');
if (delayer) {
clearTimeout(delayer);
}
$thirdNav.hide();
}
});
}
};
headerNav.init();
}());
(function() {
if (document.all && !document.querySelector) {
... ... @@ -809,43 +880,6 @@ if ($miniCart && $miniCart.length) {
});
}
$subNav.on({
mouseenter: function() {
var $thirdNav = $(this).children('.third-nav-wrapper'),
$show = $thirdNav.find('.show-detail'),
param = {};
delayer = setTimeout(function() {
$thirdNav.show();
}, 200);
if (!$show.length || $show.hasClass('show')) {
return;
}
param.content_code = $show.data().code;
param.client_type = 'web';
param.width = 337;
param.height = 250;
param._ = new Date();
$.getJSON('//new.yohobuy.com/common/getbanner?callback=?', param, function(JsonData) {
if (JsonData.code === 200) {
$show.addClass('show');
$show.find('img').attr('src', JsonData.data.src);
$show.find('a').attr('href', JsonData.data.url);
$show.find('.title').text(JsonData.data.title);
}
});
},
mouseleave: function() {
var $thirdNav = $(this).children('.third-nav-wrapper');
if (delayer) {
clearTimeout(delayer);
}
$thirdNav.hide();
}
});
/**
* 首次进入有弹窗
* @return {[type]} [description]
... ...