Authored by 陈峰

完成pagecache重构

... ... @@ -6,6 +6,8 @@
'use strict';
const mRoot = '../models';
const express = require('express');
const app = express();
const plustarModel = require(`${mRoot}/plustar`);
const htmlProcess = require(`${global.utils}/html-process`);
const headerModel = require('../../../doraemon/models/header'); // 头部model
... ... @@ -57,9 +59,10 @@ const getDetailData = (req, res, next) => {
} else {
clientType = 'h5';
}
plustarModel.getDetailData(id, uid, udid, gender, isApp, clientType).then((result) => {
result.brand_intro = htmlProcess.removeHtml(result.brand_intro);
result.clientType = clientType;
result.brandId = result.brand_id;
res.render('plustar/detail', {
module: 'guang',
page: 'plustar-detail',
... ... @@ -71,8 +74,28 @@ const getDetailData = (req, res, next) => {
});
}).catch(next);
};
/**
* [品牌详情异步数据]
*/
const getDetailDataAsync = (req, res, next) => {
let uid = req.user.uid;
let udid = req.sessionID || 'yoho';
let clientType = req.body.client_type || '';
let brandId = req.body.brand_id || 0;
if (!brandId) {
return res.json({code: 400, message: '参数错误'});
}
plustarModel.getDetailDataAsync(brandId, uid, udid, clientType).then((result) => {
res.json({
isLike: result.isLike,
infos: result.infos
});
});
}
module.exports = {
getListData,
getDetailData
getDetailData,
getDetailDataAsync
};
... ...
... ... @@ -232,7 +232,6 @@ const getDetailData = (id, uid, udid, gender, isApp, clientType) => {
client_type: clientType
}).then((result) => {
if (result && result.code === 200) {
let list = result.data || [];
let url;
... ... @@ -247,12 +246,12 @@ const getDetailData = (id, uid, udid, gender, isApp, clientType) => {
url = '//' + brandDomain + '.m.yohobuy.com';
}
return Promise.all([isCollection(uid, brandId, clientType), getRelatedEditorial(brandId, uid, udid, clientType), getNewProduct(brandId, gender, url)]).then((result) => {
// return Promise.all([isCollection(uid, brandId, clientType), getRelatedEditorial(brandId, uid, udid, clientType), getNewProduct(brandId, gender, url)]).then((result) => { //pagecache重构
return getNewProduct(brandId, gender, url).then((result) => {
list = _.assign(list, {
isLike: result[0],
infos: result[1],
newArrival: result[2]
// isLike: result[0], //pagecache重构
// infos: result[1], //pagecache重构
newArrival: result
});
return list;
... ... @@ -265,8 +264,21 @@ const getDetailData = (id, uid, udid, gender, isApp, clientType) => {
});
};
/**
* [品牌详情异步数据]
*/
const getDetailDataAsync = (brandId, uid, udid, clientType) => {
return Promise.all([isCollection(uid, brandId, clientType), getRelatedEditorial(brandId, uid, udid, clientType)]).then((result) => {
return {
isLike: result[0],
infos: result[1]
}
});
}
module.exports = {
getListData,
getContentData,
getDetailData
getDetailData,
getDetailDataAsync
};
... ...
... ... @@ -46,6 +46,7 @@ router.get('/info/foryoho', info.foryoho); // 逛foryoho内容页
router.get('/plustar', plustar.getListData); // 国际优选列表页
router.get('/plustar/brandinfo', plustar.getDetailData); // 国际优选详情页
router.post('/plustar/brandinfoAsync', plustar.getDetailDataAsync); // 国际优选详情页异步数据
router.get('/rss', rss.index); // 订阅资讯
... ...
... ... @@ -6,7 +6,7 @@
<div class="header-content clearfix">
<p class="name-islike-container">
<span class="name">{{brand_name}}</span>
<a id="brand-like" class="brand-islike iconfont {{# isLike}}like{{/ isLike}}" href="{{likeUrl}}">
<a id="brand-like" class="brand-islike iconfont" href="{{likeUrl}}">
&#xe605;
</a>
</p>
... ... @@ -42,20 +42,64 @@
</div>
</div>
{{/ newArrival}}
{{#if infos}}
<div class="related-infos ps-block">
<div>
<h2 class="related-info-title">相关资讯</h2>
</div>
<div id="related-infos-container" class="related-infos-container">
{{# infos}}
{{> info}}
{{/ infos}}
<div class="related-infos data-bind ps-block">
<div>
<h2 class="related-info-title">相关资讯</h2>
</div>
<div id="related-infos-container" class="related-infos-container">
<div class="guang-info" data-id="">
<a class="info-author clearfix data-bind" href="">
<img class="lazy avatar" data-original="">
<span class="name"></span>
</a>
<div class="info-img">
<a href="javascript:;" class="info-match data-bind">
<span class="is-tips data-bind">小贴士</span>
<div class="is-tips info-tag tip data-bind"></div>
<span class="is-collocation data-bind">搭配</span>
<div class="is-collocation info-tag collocation data-bind"></div>
<span class="is-fashionMan data-bind">潮人</span>
<div class="is-fashionMan info-tag fashion-man data-bind"></div>
<span class="is-fashion-good data-bind">潮品</span>
<div class="is-fashion-good info-tag fashion-good data-bind"></div>
<span class="is-topic data-bind">话题</span>
<div class="is-topic info-tag topic data-bind"></div>
<span class="is-special-topic data-bind">专题</span>
<div class="is-special-topic info-tag special-topic data-bind"></div>
</a>
<a href="" class="info-img-link">
<img class="lazy" data-original="" alt="">
</a>
</div>
<div class="info-deps">
<a class="info-title-container" href="">
<h2 class="info-title"></h2>
</a>
<p class="info-text"></p>
<div class="time-view-like-share clearfix">
<i class="iconfont">&#xe603;</i>
<span class="publish-time"></span>&nbsp;&nbsp;&nbsp;&nbsp;
<i class="iconfont">&#xe602;</i>
<span class="page-view"></span>
<div class="like-share-container">
<i class="iconfont data-bind like-btn">&#xe601;</i>
<span class="like-count data-bind"></span>
<a href="" class="collect-link data-bind">
<i class="iconfont collect-btn">&#xe605;</i>
</a>
<a href="" class="iconfont share-btn data-bind">&#xe600;</a>
</div>
</div>
</div>
</div>
</div>
{{/if}}
</div>
<input id="jump-to-app" type="hidden" value="{{jumpToApp}}">
<input id="brandId" type="hidden" value="{{brandId}}">
<input id="clientType" type="hidden" value="{{clientType}}">
{{!-- wx-share --}}
<input id="shareLink" type="hidden" value="{{shareLink}}">
... ...
... ... @@ -5,6 +5,8 @@
*/
'use strict';
const helpers = global.yoho.helpers;
module.exports = () => {
return (req, res, next) => {
if (req.subdomains.length) {
... ... @@ -13,6 +15,9 @@ module.exports = () => {
req.url = req.url.replace('/guang', '');
req.url = `/guang${req.url}`;
break;
case 'new':
res.redirect(helpers.urlFormat(req.path, req.query, 'default'));
return;
default: // 其它(识别为品牌)
req.url = `/product/brand/${req.subdomains[0]}`;
break;
... ...
var $ = require('yoho-jquery'),
dbClass = 'data-bind';
module.exports = function(callback) {
var brandId = $('#brandId').val();
var clientType = $('#clientType').val();
if (brandId) {
$.ajax({
type: 'POST',
url: '/guang/plustar/brandinfoAsync',
data: {
client_type: clientType,
brand_id: brandId
},
success: function(data) {
render(data);
callback && callback(data);
}
});
}
};
function render(data) {
if (data.isLike) {
$('.brand-islike').addClass('like');
}
if (data.infos && data.infos.length) {
var guangInfoEl = $('#related-infos-container>.guang-info').remove();
for (var i = 0; i < data.infos.length; i++) {
var info = data.infos[i];
var item = guangInfoEl.clone().attr('data-id', info.id);
item.find('.info-img-link')
.attr('href', info.url)
.find('img')
.attr('data-original', info.img)
.attr('alt', info.alt);
var depsEl = item.find('.info-deps');
depsEl.find('.info-title-container').attr('href', info.url).find('.info-title').text(info.title);
depsEl.find('.info-text').text(info.text);
var timeEl = item.find('.time-view-like-share');
timeEl.find('.publish-time').text(info.publishTime);
timeEl.find('.page-view').text(info.pageView);
var likeEl = timeEl.find('.like-share-container');
if (info.like) {
likeEl.find('.like-btn').removeClass(dbClass);
if (info.like.isLiked) {
likeEl.find('.like-btn').addClass('like');
}
likeEl.find('.like-count').text(info.like.count).removeClass(dbClass);
}
if (info.collect) {
likeEl.find('.collect-link').attr('href', info.collect.url).removeClass(dbClass);
if (info.collect.isCollected) {
likeEl.find('.collect-link').find('.collect-btn').addClass('collected');
}
}
if (info.share) {
likeEl.find('.share-btn').attr('href', info.share).removeClass(dbClass);
}
if (info.author) {
item.find('.info-author')
.attr('href', info.author.url)
.find('.avatar')
.attr('data-original', info.author.avatar)
.parent()
.find('.name')
.text(info.author.name)
.removeClass(dbClass);
}
var infoImgEl = item.find('.info-img');
if (info.showTags) {
infoImgEl.find('.data-bind').removeClass(dbClass);
if (info.isTip) {
infoImgEl.find('.is-tips').removeClass(dbClass);
}
if (info.isCollocation) {
infoImgEl.find('.is-collocation').removeClass(dbClass);
}
if (info.isFashionMan) {
infoImgEl.find('.is-fashionMan').removeClass(dbClass);
}
if (info.isFashionGood) {
infoImgEl.find('.is-fashion-good').removeClass(dbClass);
}
if (info.isTopic) {
infoImgEl.find('.is-topic').removeClass(dbClass);
}
if (info.isSpecialTopic) {
infoImgEl.find('.is-special-topic').removeClass(dbClass);
}
}
$('#related-infos-container').append(item)
}
$('.related-infos').removeClass(dbClass);
}
$('.' + dbClass).remove();
}
... ...
... ... @@ -29,6 +29,9 @@ var saveImage = require('../home/save-image');
require('../plugin/wx-share');
require('../common');
require('./plustar-detail-render')(function() {
lazyLoad($('img.lazy'));
});
ellipsis.init();
... ...
.data-bind {
display: none;
}
\ No newline at end of file
... ...