Authored by zhangxiaoru

guang二级导航

... ... @@ -157,6 +157,7 @@ const _getLeftNav = (choosed) => {
return api.get('operations/api/v6/category/getCategory', {}, {
cache: true
}).then(result => {
//console.log(result)
if (result && result.code === 200) {
return _processSideBar(result.data, choosed);
} else {
... ...
... ... @@ -254,7 +254,8 @@ const index = (req, res, next) => {
isApp = req.query.app_version || req.query.appVersion || false, // 标识是不是APP访问的
parameter = {},
title = '逛',
isWeixin = req.yoho.isWechat;
isWeixin = req.yoho.isWechat,
channel = req.cookies._Channel;
// pagecache 前端做
// userAgent = req.get('User-Agent'),
... ... @@ -285,18 +286,25 @@ const index = (req, res, next) => {
// }
// 获取详情内容信息, 异常则跳到错误页面
return infoModel.packageData(id, isApp).then(detail => {
return infoModel.packageData(id, isApp, isWeixin, channel).then(detail => {
let data = {
guangDetail: true,
guang: {}
};
data.guang.isWeixin = isWeixin;
data.guang.channel = channel;
if (detail.code !== 400) {
if (!detail.getArticle) {
// TODO 跳转到逛首页
return;
}
if (isWeixin && detail && detail.sideNav) {
data.sideNav = detail.sideNav;
}
// 作者信息数据
if (detail && detail.getAuthor && (typeof detail.getAuthor.name !== 'undefined')) {
data.guang.author = {
... ...
... ... @@ -6,17 +6,79 @@
'use strict';
const serviceAPI = global.yoho.ServiceAPI;
const api = global.yoho.API;
const _ = require('lodash');
const URI_PACKAGE_ARTICLE = 'guang/service/v2/article/';
const URI_PACKAGE_AUTHOR = 'guang/service/v1/author/';
/**
* 获取二级菜单顶部颜色
* @param {[string]} choosed
* @return {[string]}
*/
const _getSidebarColor = (choosed) => {
let color = false;
if (choosed === 'girls') {
color = '#FF88AE';
} else if (choosed === 'kids') {
color = '#7ad9f9';
} else if (choosed === 'lifestyle') {
color = '#4f4138';
}
return color;
};
//微信侧边栏导航数据
const _processSideBar = (list, choosed) => {
const formatData = [];
let offset = 0; // 分割数组用到的游标
list = list || [];
_.forEach(list, (item, i) => {
if (item.sub) {
item.sub.unshift({
sort_name: item.sort_name,
sort_name_en: item.sort_name_en,
back: true,
isSelect: false,
bgColor: _getSidebarColor(choosed)
});
}
// 如果有分隔符,分割数组
if (item.separative_sign === 'Y') {
formatData.push(list.slice(offset, i));
offset = i;
}
});
// 数组被分割剩余的部分
formatData.push(list.slice(offset));
return formatData;
};
const _getLeftNav = (choosed) => {
choosed = choosed || 'all';
return serviceAPI.get('operations/api/v6/category/getCategory', {}, {
cache: true
}).then(result => {
if (result && result.code === 200) {
return _processSideBar(result.data, choosed);
}
});
};
/**
* [逛资讯详情页数据封装]
* @param {[int]} id [内容ID]
* @param {Boolean} isApp [标识是否是APP访问]
* @return {[array]}
*/
const packageData = (id, isApp) => {
const packageData = (id, isApp, isWeixin, channel) => {
let result = {
getAuthor: {},
getArticle: {},
... ... @@ -112,6 +174,13 @@ const packageData = (id, isApp) => {
}));
}
if (isWeixin) {
let navGender = _.cloneDeep(channel);
promises.push(_getLeftNav(navGender));
}
return Promise.all(promises).then(datas => {
let getArticleContent = {};
... ... @@ -140,6 +209,7 @@ const packageData = (id, isApp) => {
weixinPublic: datas[4].data
});
}
if (datas[0]) {
result.getAuthor = datas[0].data;
}
... ... @@ -148,7 +218,12 @@ const packageData = (id, isApp) => {
if (datas[2]) {
result.getBrand = datas[2].data;
}
if (datas.length === 5 && isApp || datas.length === 4 && !isApp) {
if (isWeixin && datas[4]) {
result.sideNav = datas[4];
}
if (datas.length === 5 && isApp || datas.length === 4 && !isApp || datas.length === 5 && isWeixin) {
if (datas[3]) {
result.getOtherArticle = datas[3].data;
}
... ...
<div class="guang-detail-page guang-page yoho-page {{#if guangDetail}}guang-detail{{/if}} {{#if guangEzine}}guang-ezine{{/if}}">
{{# guang}}
<div id="wrapper">
<div id="scroller">
<div id="wrapper" >
<div id="scroller" class="{{channel}}">
{{#if isWeixin}}
{{> wei-guang/guang-header}}
{{/if}}
{{# author}}
<div class="author" data-id={{id}}>
<a class="clearfix" href={{url}}>
... ... @@ -192,5 +195,10 @@
{{/if}}
{{> common/suspend-home}}
<div class="overlay"></div>
</div>
{{#if isWeixin}}
{{> wei-guang/side-nav}}
{{/if}}
... ...
<div class="guang-header clearfix">
<span class="nav-btn iconfont">&#xe60b;</span>
<span class="logo"></span>
</div>
... ...
<div class="side-nav">
{{#sideNav}}
<ul {{#if @first}}class="first"{{/if}}>
{{#this}}
<li class="{{lowerCase sort_name_en}}">
{{#if sort_url}}
<a href="{{sort_url}}" style="{{#if sort_name_color}}color:{{sort_name_color}};{{/if}}">
{{else}}
<a href="javascript:;" style="{{#if sort_name_color}}color:{{sort_name_color}};{{/if}}">
{{/if}}
{{# sort_ico}}
<span class="nav-img" style="background-image: url({{image . 60 60}})"></span>
{{/ sort_ico}}
{{^ sort_ico}}
<i class="nav-icon"></i>
{{/ sort_ico}}
<em>{{sort_name}}</em>
<span class="title">{{sort_name_en}}</span>
{{# sub}}
<span class="enter-subnav iconfont">&#xe614;</span>
{{/ sub}}
</a>
{{#if sub}}
<ul class="sub-nav">
{{# sub}}
<li class="{{# isSelect}}current{{/ isSelect}}" style="background-color:{{bgColor}};">
{{#if sort_url}}
<a href="{{sort_url}}" style="{{#if sort_name_color}}color:{{sort_name_color}};{{/if}}">
{{else}}
<a href="javascript:;" style="{{#if sort_name_color}}color:{{sort_name_color}};{{/if}}">
{{/if}}
{{# back}}
<i class="nav-back iconfont">&#xe610;</i>
{{/ back}}
<em>{{sort_name}}</em>
<span class="title">{{sort_name_en}}</span>
</a>
</li>
{{/ sub}}
</ul>
{{/if}}
</li>
{{/this}}
</ul>
{{/sideNav}}
</div>
\ No newline at end of file
... ...
... ... @@ -16,15 +16,15 @@ module.exports = {
siteUrl: '//m.yohobuy.com',
assetUrl: '//localhost:5001',
domains: {
// api: 'http://api.yoho.cn/',
// service: 'http://service.yoho.cn/',
// liveApi: 'http://api.live.yoho.cn/',
// singleApi: 'http://single.yoho.cn/'
api: 'http://api.yoho.cn/',
service: 'http://service.yoho.cn/',
liveApi: 'http://api.live.yoho.cn/',
singleApi: 'http://single.yoho.cn/'
api: 'http://api-test3.yohops.com:9999/',
service: 'http://service-test3.yohops.com:9999/',
liveApi: 'http://testapi.live.yohops.com:9999/',
singleApi: 'http://api-test3.yohops.com:9999/'
// api: 'http://api-test3.yohops.com:9999/',
// service: 'http://service-test3.yohops.com:9999/',
// liveApi: 'http://testapi.live.yohops.com:9999/',
// singleApi: 'http://api-test3.yohops.com:9999/'
// favApi: 'http://192.168.102.31:8092/brower',
// api: 'http://192.168.102.205:8080/gateway/',
... ...
... ... @@ -23,6 +23,11 @@ var thumbWidth = 0,
myScroll,
winW = $(window).width();
var $sideNav = $('.side-nav'),
$guangPage = $('.guang-detail-page'),
$overlay = $('.overlay');
scrollToEl = document.querySelector('#wrapper .collocation-block');
... ... @@ -187,6 +192,34 @@ $('img').on('load', function() {
myScroll && myScroll.refresh();
});
//微信导航
$('.nav-btn').on('touchstart', function() {
$sideNav.css('pointer-events', 'none');
$guangPage.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 ($guangPage.hasClass('menu-open')) {
$guangPage.removeClass('menu-open');
$overlay.hide();
$('.sub-nav').removeClass('show');
$sideNav.removeClass('on');
}
}
$overlay.on('touchstart', function() {
hideSideBar();
return false;
});
// 初始化页面,包括是否使用iscorll初始化页面
// 接口暴露在HTML中,使用压缩名
(function() {
... ... @@ -308,4 +341,5 @@ $('img').on('load', function() {
$('#float-layer-app').hide();
}
}
}());
... ...
... ... @@ -10,6 +10,7 @@
}
.guang-detail-page {
#wrapper {
background: #f0f0f0;
}
... ... @@ -520,4 +521,77 @@
line-height: 22PX;
}
}
.guang-header {
height: 90px;
line-height: 90px;
background-image: linear-gradient(#323232, #414141);
overflow: hidden;
.iconfont {
color: #fff;
}
.nav-btn {
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 2;
width: 40px;
margin: 0 30px;
text-align: center;
}
.logo {
display: block;
margin: 0 auto;
width: 208px;
height: 87px;
background: resolve("channel/yohologo02.png") no-repeat center center;
background-size: 100%;
}
}
.girls .guang-header {
background: rgb(255,136,174);
}
.kids .guang-header {
background: rgb(122,217,249);
}
.lifestyle .guang-header {
background: rgb(79,65,56);
}
.kids .logo {
font-style: italic;
font-family: "helvetica", "Arial", "榛戜綋";
font-weight: bold;
color: #fff;
}
.overlay {
display: none;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
z-index: 4;
transition: opacity 1s;
height: 1000px;
}
.overlay.show {
display: block;
opacity: 0.3;
}
}
.guang-detail-page.menu-open {
transform: translateX(540px);
}
... ...