Authored by biao

update for render channel with data from Java API

const model = require('../models');
exports.index = (req, res) => {
const channelType = req.path.substring(1) || 'men';
model.getContent(channelType).then(result => {
res.display('index', Object.assign({
module: 'channel',
page: 'home'
}, model.getContent()));
}, result));
});
};
... ...
/**
* 频道页
* @author: 赵彪<bill.zhao@yoho.cn>
* @date: 2016/7/26
*/
'use strict';
// const api = global.yoho.API;
const api = global.yoho.ServiceAPI;
const channelMap = require('../../../config/channel-type').channelMap;
const getChannelDataAsync = type => {
const data = {
client_type: 'web',
content_code: channelMap[type].code,
gender: channelMap[type].gender,
page: 1,
limit: 1000
};
return api.get('operations/api/v5/resource/home', data, {
cache: true,
code: 200
});
};
module.exports = {
getChannelDataAsync
};
... ...
const getContent = () => {
const content = {
/**
* 频道页 model
* @author: 赵彪<bill.zhao@yoho.cn>
* @date: 2016/07/26
*/
'use strict';
const channelApi = require('./channel-api');
const camelCase = global.yoho.camelCase;
const _ = require('lodash');
/**
* 获取slider楼层数据
* @param {Object} d 接口返回的楼层数据
* @return {Object} 处理之后的数据
*/
const _getSliderData = d => {
return {
slider: d
};
};
/**
* 获取BrandsAd楼层数据
* @param {Object} d 接口返回的楼层数据
* @return {Object} 处理之后的数据
*/
const _getBrandAdFloor = d => {
_.forEach(d, data => {
data.btnText = 'shop now';
});
return {
brandsAd: d
};
};
/**
* 获取new arrivals楼层数据
* @param {Object} d 接口返回的楼层数据
* @return {Object} 处理之后的数据
*/
const _getNewArrivals = d => {
_.forEach(d, (data, index) => {
if (index === 0 || index === d.length - 1) {
data.smallImg = true;
}
if (index % 2 === 0) {
data.even = true;
}
});
return {
floorZh: '新品抢鲜看',
floorEn: 'NEW ARRIVALS',
newArrivals: d
};
};
/**
* 获取classic brands楼层数据
* @param {Object} d 接口返回的楼层数据
* @return {Object} 处理之后的数据
*/
const _getClassicBrands = d => {
let brands = [];
let subArr;
let i = 0;
_.forEach(d, (data, index) => {
if (index === 0 || index === 1 || index === 6 || index === 7) {
brands.push({
big: [d[index]]
});
} else if ((index > 1 && index < 6 || index > 7 && index < 12) && index % 2 === 0) {
if (i < 4) {
subArr = d.slice(index, index + 2);
brands[i].small = subArr;
i += 1;
}
}
});
_.forEach(brands, (data, index) => {
if (index < 2) {
data.bottomSpace = true;
}
if (index === 1 || index === 3) {
data.right = true;
}
});
return {
floorZh: '经典品牌',
floorEn: 'CLASSIC BRANDS',
classicBrands: brands
};
};
/**
* 获取潮流标志楼层数据
* @param {Object} d 接口返回的楼层数据
* @return {Object} 处理之后的数据
*/
const _getStyleIcon = d => {
_.forEach(d, data => {
data.btnText = '去看看';
});
return {
floorZh: '潮流标志',
floorEn: 'STYLE ICON',
styleIcon: d
};
};
/**
* 获取咨询楼层数据
* @param {Object} d 接口返回的楼层数据
* @return {Object} 处理之后的数据
*/
const _getEditorial = d => {
console.log(d);
return {
floorZh: '资讯',
floorEn: 'EDITORIAL',
editorial: d
};
};
const floorMap = {
slider: _getSliderData,
标题: _getBrandAdFloor,
新品抢先看: _getNewArrivals,
CLASSIC: _getClassicBrands,
潮流标识: _getStyleIcon,
EDITORIAL: _getEditorial
};
/**
* 获取floorMap中对应的key
* @param {String} d 含有key的字符串
* @return {String} 得到的key值
*/
const _getKey = d => {
let k = d.split(' ')[0];
return k;
};
/**
* 判断title类型是否为对象
* @param {Object} t title
* @return {Boolen}
*/
const _isObjectTitle = t => {
return _.isObject(t);
};
/**
* 判断是否为Banner焦点图楼层
* @param {Object} d 楼层数据
* @return {Boolen}
*/
const _isBannerFloor = d => {
return d.templateName === 'focus' && d.templateIntro === '焦点图';
};
/**
* 获取用于渲染模板的数据
* @param {Object} d 接口返回的数据
* @return {Array} 模板数据数组
*/
const _processFloorData = d => {
let floorList = [];
_.forEach(d, data => {
let floorTitle;
let floorData;
// 处理banner
if (_isBannerFloor(data)) {
floorData = floorMap.slider(data.data);
// 判断标题类型
} else if (_isObjectTitle(data.data.title)) {
floorTitle = _getKey(data.data.title.title);
floorData = floorMap[floorTitle](data.data.list);
} else {
floorTitle = _getKey(data.data.title);
floorData = floorMap[floorTitle](data.data.list);
}
floorList.push(floorData);
});
return floorList;
};
const getContent = type => {
return channelApi.getChannelDataAsync(type).then(result => {
const l = camelCase(result.data.list);
const floor = {
content: _processFloorData(l)
};
return floor;
});
/* eslint-disable */
const content = {
content: [
{
slider: [
... ... @@ -250,7 +463,7 @@ const getContent = () => {
};
/* eslint-enable */
return content;
// return content;
};
module.exports = {
... ...
<div class="ad-banner">
{{#adBanner}}
<a href="{{link}}">
<a href="{{url}}">
<img class="lazy-img" data-original="{{image img 1150 160}}" alt="">
</a>
{{/adBanner}}
... ...
<div class="ad-container clearfix">
{{# brandsAd}}
<div class="ad {{#if @first}}first{{/if}}">
<img class="lazy-img" data-original="{{image img 240 240}}" alt="">
<img class="lazy-img" data-original="{{image src 240 240}}" alt="">
{{> brand-text-box}}
</div>
{{/ brandsAd}}
... ...
{{# classicBrands}}
<div class="brand-img-box {{#if right}}right{{/if}} {{#if bottomSpace}}mb10{{/if}}">
<a href="{{link}}">
<a href="{{url}}">
{{# big}}
<img class="big-img lazy-img" data-original="{{image img 556 333}}" alt="big-img">
<img class="big-img lazy-img" data-original="{{image src 556 333}}" alt="big-img">
{{/ big}}
{{# small}}
<img class="small-img lazy-img {{#if @first}}first{{/if}}" data-original="{{image img 283 283}}" alt="big-img">
<img class="small-img lazy-img {{#if @first}}first{{/if}}" data-original="{{image src 283 283}}" alt="big-img">
{{/ small}}
</a>
</div>
... ...
<div class="brand-text-box">
<h4>{{name}}</h4>
<p>{{des}}</p>
<h4>{{productName}}</h4>
<p>{{productDesc}}</p>
<a href="{{url}}">
<button>{{btnText}}</button>
</a>
</div>
... ...
... ... @@ -4,15 +4,15 @@
{{# editorial}}
<div class="news left">
{{# big}}
<a href="{{link}}">
<img class="lazy-img" data-original="{{image img 395 495}}" alt="">
<a href="{{url}}">
<img class="lazy-img" data-original="{{image src 395 495}}" alt="">
</a>
{{/ big}}
</div>
<div class="news right">
{{# small}}
<a href="{{link}}">
<img class="lazy-img {{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" data-original="{{image img 360 240}}" alt="">
<a href="{{url}}">
<img class="lazy-img {{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" data-original="{{image src 360 240}}" alt="">
</a>
{{/ small}}
</div>
... ...
... ... @@ -4,22 +4,22 @@
{{# newArrivals}}
<div class="arrival-item {{#if smallImg}}small-img{{/if}} {{#if @last}}last{{^}}normal{{/if}}">
{{#if even}}
<a href="{{link}}">
<img class="lazy-img" data-original="{{#if smallImg}}{{image img 223 490}}{{^}}{{image img 325 490}}{{/if}}" alt="">
<a href="{{url}}">
<img class="lazy-img" data-original="{{#if smallImg}}{{image src 223 490}}{{^}}{{image src 325 490}}{{/if}}" alt="">
</a>
<div class="brand-name">
<a href="{{link}}">
<a href="{{url}}">
<span class="bottom">{{name}}</span>
</a>
</div>
{{^}}
<div class="brand-name">
<a href="{{link}}">
<a href="{{url}}">
<span class="top">{{name}}</span>
</a>
</div>
<a href="{{link}}">
<img class="lazy-img" data-original="{{#if smallImg}}{{image img 223 490}}{{^}}{{image img 325 490}}{{/if}}" alt="">
<a href="{{url}}">
<img class="lazy-img" data-original="{{#if smallImg}}{{image src 223 490}}{{^}}{{image src 325 490}}{{/if}}" alt="">
</a>
{{/if}}
</div>
... ...
... ... @@ -4,7 +4,7 @@
{{# slider}}
<li style="{{#if bgColor}}background:{{bgColor}}{{/if}}">
<a href="{{url}}" target= "_blank">
<img class="lazy" data-original="{{image img 1920 645}}" alt="">
<img class="lazy" data-original="{{image src 1920 645}}" alt="">
</a>
{{# tips}}
<div class="slide-tips">
... ... @@ -23,7 +23,7 @@
{{# pagination}}
<li>
<a href="{{url}}" target="_blank"></a>
<img src="{{image img 138 54}}" alt="">
<img src="{{image src 138 54}}" alt="">
</li>
{{/ pagination}}
</ul>
... ...
... ... @@ -3,7 +3,7 @@
<div class="smooth-card-container">
{{# styleIcon}}
<div class="card {{#if @first}}active{{/if}} {{#if @last}}last{{/if}}">
<img class="img lazy-img" data-original="{{image img 221 320}}" />
<img class="img lazy-img" data-original="{{image src 221 320}}" />
{{> brand-text-box}}
</div>
{{/ styleIcon}}
... ...
/**
* 共用的map数据常量定义
* @author: 赵彪<bill.zhao@yoho.cn>
* @date: 2016/07/26
*/
'use strict';
const channelMap = {
men: {
code: '39c103615558890846e56749af040228',
gender: '1,3'
},
women: {
code: '527079e6c46d0f125eb46b835968971b',
gender: '2,3'
},
lifestyle: {
code: '94b5ed607b6d565ffc29c2c04be121dc',
gender: ''
}
};
const meCode = '02889429674251b93f2add429008e1f8';
module.exports = {
channelMap,
meCode
};
... ...
... ... @@ -29,10 +29,12 @@
&.top {
line-height: 30px;
position: static !important;
}
&.bottom {
line-height: 56px;
position: static !important;
}
}
}
... ...