fe / yoho-blk · Commits

Go to a project

Authored by yyq
Commit 7073a6054a5aafc6b298747a6265d00a9424d216 1 parent b1007fed

头部菜单数据

Inline Side-by-side
Showing 4 changed files with 252 additions and 52 deletions
... ... @@ -7,30 +7,12 @@
'use strict';
// const _ = require('lodash');
const headerModel = require('../../../doraemon/models/header');
let index = (req, res) => {
let data = {};
data.pageHeader = {
yohoGroup: [
{
link: '#',
en: 'YOHO!BLK',
cn: '有货BLK'
},
{
link: '#',
en: 'YOHO!BOYS',
cn: '潮流男生'
},
{
link: '#',
en: 'YOHO!GIRLS',
cn: '潮流女生'
}
]
};
res.render('channel', data);
let index = (req, res, next) => {
headerModel.requestHeaderData('boys').then(result => {
res.render('channel', result);
}).catch(next);
};
module.exports = {
... ...
/**
* header model
* @author: yyq<yanqing.yang@yoho.cn>
* @date: 2016/06/30
*/
'use strict';
const _ = require('lodash');
const serviceApi = global.yoho.ServiceAPI;
/**
* 获取菜单
* @param undefined
* @return {array} 菜单数组
*/
const getMenuData = () => (
{
yohoGroup: [{
link: '/',
cn: '有货BLACK',
en: 'YOHO!BLK'
}, {
link: 'http://www.yohoboys.com',
cn: '男生潮流',
en: 'YOHO!BOYS'
}, {
link: 'http://www.yohogirls.com',
cn: '女生潮流',
en: 'YOHO!GIRLS'
}, {
link: 'http://app.yohoshow.com',
cn: '物趣分享',
en: 'YOHO!SHOW'
}, {
link: 'http://www.yohood.cn',
cn: '潮流嘉年华',
en: 'YO\'HOOD'
}, {
link: '//www.yohobuy.com',
cn: '有货',
en: 'YOHO!BUY'
}]
}
);
/**
* 获取导航
* @param {Object} data 要处理的数据
* @param {String} type 频道类型
* @return {array} 导航数组
*/
const getNavBar = (data, type) => {
let navBars = [];
_.forEach(data, item => {
let obj = {},
lowEn = _.camelCase(item.sort_name_en).toLowerCase();
obj.link = item.sort_url;
obj.cn = item.sort_name;
obj.en = item.sort_name_en;
obj.isNewPage = item.is_new_page === 'Y' ? true : false;
if (type === lowEn) {
obj.cur = true;
}
// 奥莱频道显示图片，特殊处理
if (lowEn === 'outlets') {
obj.ico = item.sort_ico;
}
navBars.push(obj);
});
return navBars;
};
/**
* 获取品牌名字
* @param {Object} data 要处理数据
* @return {array} 品牌数组
*/
const getBrandItems = (data) => {
let brandItems = [];
_.forEach(data, item => {
let obj = {
link: '',
hot: false,
brandName: ''
};
obj.link = item.sort_url;
obj.hot = item.is_hot === 'Y' ? true : false;
obj.brandName = item.sort_name;
brandItems.push(obj);
});
return brandItems;
};
/**
* 获取三级菜单
* @param {Object} data 要处理数据
* @return {array} 三级菜单数组
*/
const getThirdNav = (data) => {
let thirdNav = [];
_.forEach(data, item => {
let obj = {
link: '',
title: '',
brandItems: false
};
obj.link = item.sort_url;
obj.title = item.sort_name;
if (item.sub) {
obj.brandItems = getBrandItems(item.sub);
}
thirdNav.push(obj);
});
return thirdNav;
};
/**
* 获取子菜单
* @param {Object} data 要处理数据
* @param {String} type 频道类型
* @return {array} 子菜单数组
*/
const getSubNav = (data, type) => {
let subNav = [];
_.forEach(data, it => {
if (type === _.camelCase(it.sort_name_en).toLowerCase()) {
_.forEach(it.sub, item => {
let obj = {};
obj.link = item.sort_url;
obj.cn = item.sort_name;
obj.en = item.sort_name_en;
obj.isHot = item.is_hot === 'Y' ? true : false;
obj.isNew = item.is_new === 'Y' ? true : false;
if (item.sub) {
obj.thirdNav = getThirdNav(item.sub);
obj.imgCode = item.content_code;
}
subNav.push(obj);
});
}
});
return subNav;
};
/**
* 处理接口返回的数据
* @param {object} 接口返回的对象
* @param {String} 指定页面类型
* @return {object} 头部数据
*/
const setHeaderData = (resData, type) => (
{
navMenu: {
type: type,
navbars: resData ? getNavBar(resData, type) : [],
subNav: resData ? getSubNav(resData, type) : []
}
}
);
const requestNavBar = (type) => {
return serviceApi.get('operations/api/v6/category/getCategory', {
client_type: 'web'
}, {
cache: true,
code: 200
}).then(res => {
return setHeaderData(res.data, type);
});
}
/**
* 请求头部数据
* @param {String} 频道类型
* @return {promise}
*/
exports.requestHeaderData = (type) => {
let data = {};
let arr = [
getMenuData(),
];
if (type) {
arr.push(requestNavBar(type));
}
return Promise.all(arr).then(result => {
return Object.assign(data, {
pageHeader: result[0]
}, result[1]);
});
};
... ...
{{!-- {{# navMenu}} --}}
{{# navMenu}}
<div class="yoho-nav">
<div class="main-nav">
<div class="center-content">
<ul class="main-nav-list">
{{!-- {{# navbars}} --}}
{{# navbars}}
<li class="nav-item{{#if cur}} cur{{/if}}">
<span class="nav-en">MEN</span>
<span class="nav-cn">男士</span>
<a href="{{link}}">
<span class="nav-en">{{en}}</span>
<span class="nav-cn">{{cn}}</span>
</a>
</li>
<li class="nav-item cur">
<span class="nav-en">WOMEN</span>
<span class="nav-cn">女士</span>
</li>
{{!-- {{/ navbars}} --}}
{{/ navbars}}
</ul>
<div class="main-logo"></div>
</div>
</div>
<div class="sub-nav">
<div class="center-content">
<ul class="sub-nav-list">
{{!-- {{# subNav}} --}}
<ul class="sub-nav-list clearfix">
{{log subNav}}
{{# subNav}}
<li{{#if thirdNav}} class="contain-third"{{/if}}>
<a href="{{link}}">
<span class="nav-en">New</span>
<span class="nav-cn">新品</span>
</a>
</li>
<li>
<a href="{{link}}">
<span class="nav-en">Brand</span>
<span class="nav-cn">品牌</span>
</a>
</li>
<li>
<a href="{{link}}">
<span class="nav-en">Clothing</span>
<span class="nav-cn">服饰</span>
<span class="nav-en">{{en}}</span>
<span class="nav-cn">{{cn}}</span>
</a>
</li>
{{!-- {{/ subNav}} --}}
{{/ subNav}}
</ul>
<div class="search-entry">
<span class="iconfont">&#xe605;</span>
... ... @@ -82,4 +69,4 @@
</div>
</div>
</div>
{{!-- {{/ navMenu}} --}}
\ No newline at end of file
{{/ navMenu}}
\ No newline at end of file
... ...
... ... @@ -169,14 +169,20 @@
height: 21px;
margin-top: 38px;
margin-right: 30px;
color: #999;
font-weight: bold;
}
li > a {
color: #999;
}
.cur {
color: #1d1d1d;
border-bottom: 2px solid #1d1d1d;
}
.cur > a {
color: #1d1d1d;
}
}
.main-logo {
... ... @@ -195,7 +201,9 @@
background: #1d1d1d;
.sub-nav-list {
max-width: 94%;
line-height: 50px;
display: inline-block;
li {
float: left;
... ...