Authored by yyq

global detail

... ... @@ -18,18 +18,8 @@ const globalModel = require(`${mRoot}/global`); // global model
exports.list = (req, res, next) => {
globalModel.getGlobalProductListData(req.query, req.yoho).then(result => {
res.render('list/index', Object.assign({
module: 'product',
page: 'sale'
page: 'list'
}, result));
// res.send(result);
// res.render('sale/index', Object.assign({
// module: 'product',
// page: 'sale'
// }, {
// result: result,
// headerData: result.headerData
// }));
}).catch(next);
};
... ... @@ -39,17 +29,11 @@ exports.list = (req, res, next) => {
* @param {[type]} res [description]
* @return {[type]} [description]
*/
// exports.detail = (req, res, next) => {
// let channel = req.yoho.channel;
// // 真实数据输出
// globalModel.getGlobalProductDetailData(channel).then(result => {
// res.render('sale/index', Object.assign({
// module: 'product',
// page: 'sale'
// }, {
// result: result,
// headerData: result.headerData
// }));
// }).catch(next);
// };
exports.detail = (req, res, next) => {
globalModel.getGlobalProductDetailData(req.params[0], req.yoho.channelNum,
req.yoho.channel).then(result => {
res.render('global/detail', Object.assign({
page: 'detail'
}, result));
}).catch(next);
};
... ...
... ... @@ -26,7 +26,8 @@ const getGlobalProductListAsync = (params, from) => {
const getGlobalProductDetailAsync = (skn, channelNum) => {
return globalApi.get('api/v2/detail/get', {
physical_channel: channelNum,
product_skn: skn
product_skn: skn,
client_type: 'iphone'
}, config.apiCache);
};
... ... @@ -34,7 +35,8 @@ const getGlobalProductHtmlAsync = (skn, channelNum) => {
return globalApi.get('api/v1/detail/gethtml', {
physical_channel: channelNum,
product_skn: skn,
return_type: 'html'
return_type: 'html',
client_type: 'iphone'
}, config.apiCache);
};
... ...
... ... @@ -14,13 +14,11 @@ const pager = require(`${global.utils}/pager`).setPager;
const productProcess = require(`${global.utils}/product-process`);
const getGlobalProductListData = (params, yoho) => {
params.limit = params.limit ? params.limit - 1 : 59;
return Promise.props({
header: headerModel.requestHeaderData(yoho.channel),
list: globalApi.getGlobalProductListAsync(Object.assign({
physical_channel: yoho.channelNum
}, params))
}, params, {limit: params.limit ? params.limit - 1 : 59}))
}).then(result => {
let resData = {};
... ... @@ -50,12 +48,77 @@ const getGlobalProductListData = (params, yoho) => {
});
};
const getGlobalProductDetailData = () => {
const getGlobalProductDetailData = (skn, channelNum, channel) => {
return Promise.props({
header: headerModel.requestHeaderData(channel),
detail: globalApi.getGlobalProductDetailAsync(skn, channelNum),
html: globalApi.getGlobalProductHtmlAsync(skn, channelNum)
}).then(result => {
let resData = {};
let detailInfo, html = '';
if (+result.detail.code === 200) {
detailInfo = _.get(result, 'detail.data', {});
if (!_.isEmpty(detailInfo.goods_list)) {
let colors = [];
_.forEach(detailInfo.goods_list, (value, index) => {
let size = [];
_.forEach(value.size_list || [], subVal => {
size.push({
sku: subVal.product_sku,
name: subVal.size_name,
soldOut: subVal.storage_number * 1 <= 0
});
});
if (_.isEmpty(value.images_list)) {
value.images_list = [{
image_url: value.color_image
}];
}
if (index === 0 && !detailInfo.mainThumb) {
value.focus = true;
detailInfo.mainThumb = _.get(value, 'images_list[0].image_url', value.color_image);
}
colors.push({
src: value.color_image,
name: value.color_name,
title: value.color_name,
imgList: value.images_list,
focus: value.focus,
size: size
});
});
detailInfo.colors = colors;
}
}
if (result.html) {
let regContent = /<body[^>]*>([\s\S]*)<\/body>/.exec(result.html);
html = regContent[1] || '';
html = html.replace(/<script.*?>.*?<\/script>/ig, '');
}
// console.log(result.detail.code);
Object.assign(resData, result.header, {
goodsInfo: detailInfo,
detailHtml: html || ''
});
return resData;
});
};
module.exports = {
getGlobalProductListData,
getGlobalProductDetailData
};
... ...
... ... @@ -88,7 +88,10 @@ router.post('/detail/notify/cancel', auth, notify.cancel); // 删
// 全球购routers
router.get('/global/list', globalCtrl.list); // 全球购列表页
router.get('/\/global\/p([\d]+)(.*)/', detail.showMain); // 全球购商品详情页
router.get('/global/detail', globalCtrl.detail);
router.get(/\/global\/([\d]+)(.*)/, globalCtrl.detail);
// router.get(/\/global\/([\d]+)(.*)/, globalCtrl.detail); // 全球购商品详情页
// 搜索
router.get('/search/index', gbk2utf, search.index);
... ...
<div class="global-detail-page yoho-page">
{{>product/brand-banner}}
<div class="center-content product-detail-page">
<div class="main">
{{# goodsInfo}}
<div class="pull-left imgs clearfix">
<div class="pull-left img">
<div class="tags clearfix">
<span class="good-tag global-tag">{{country_name}}</span>
</div>
<div id="min-img">
<img id="img-show" class="img-show" src="{{image2 mainThumb w=420 h=560}}">
<div class="magnifier move-object hide"></div>
<div class="magnifier move-over"></div>
<div id="max" class="magnifier max hide">
<img id='big' src="{{image2 mainThumb w=750 h=1000}}">
</div>
</div>
<div class="share-row">
<span class="title pull-left">分享:</span> {{> common/share }}
</div>
</div>
<div id="thumbs" class="pull-right thumbs">
{{log goods_list}}
{{# goods_list}}
<div class="thumb-wrap{{#unless focus}} hide{{/unless}}">
{{#if focus}}
{{# images_list}}
<img class="thumb {{#if @first}}active{{/if}}" src="{{image2 image_url w=75 h=100}}"
data-shower="{{image2 image_url w=420 h=560}}"
data-origin="{{image2 image_url w=750 h=1000}}">
{{/ images_list}}
{{^}}
{{# images_list}}
<img class="thumb lazy"
data-original="{{image2 image_url w=75 h=100}}"
data-shower="{{image2 image_url w=420 h=560}}"
data-origin="{{image2 image_url w=750 h=1000}}">
{{/ images_list}}
{{/if}}
</div>
{{/ goods_list}}
</div>
</div>
<div class="pull-right infos">
<h1 class="name">{{product_name}}</h1>
<div class="line"></div>
{{> product/price-list}}
<div class="line"></div>
<div class="trade-content">
<div id="type-chose" class="type-chose">
{{> product/color-list}}
{{> product/size-list}}
<div class="chose-count row clearfix">
<span class="title pull-left">&nbsp;&nbsp;量:</span>
<div class="num-wraper pull-left clearfix">
{{> product/num}}
</div>
</div>
<div class="line"></div>
<span id="code-buy" class="code-buy" skn="{{product_skn}}">
<i class="iconfont">&#xe703;</i>
<em>扫一扫购买</em>
<div class="code-box">
<div id="qrcode-img" class="code-img" data-url='http://union.yoho.cn/union/app-downloads.html?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"{{product_skn}}"}}'></div>
</div>
</span>
</div>
</div>
</div>
{{/ goodsInfo}}
</div>
<div class="global-detail-wrap">{{{detailHtml}}}</div>
</div>
</div>
... ...

1.96 KB | W: | H:

2.22 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -11,6 +11,7 @@
@import "outlets/index";
@import "shop-index";
@import "students/index";
@import "global/index";
@import "top-coupon";
@import "new-arrive";
@import "good-slide";
... ...
.global-detail-page {
.tags > .global-tag {
background-color: #482d3d;
font-weight: 300;
&:before {
content: "";
width: 16px;
height: 14px;
margin-right: 4px;
background-image: url("/product/airplane-tag.png");
display: inline-block;
vertical-align: sub;
}
}
.global-detail-wrap {
padding: 30px 0;
}
.good-detail-page {
background-color: transparent;
position: relative;
width: 100%;
overflow: hidden;
border: 1px solid #e0e0e0;
box-sizing: border-box;
.good-sure {
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px #e0e0e0 solid;
img {
width: 517px;
max-width: 100%;
display: block;
border: 0;
margin: 0 auto;
}
}
.info {
margin-top: 39px;
margin-left: 175px;
margin-right: 175px;
color: #999;
border-top: 1px solid #e0e0e0;
font-size: 12px;
text-align: center;
h2 {
color: #444;
border: 1px solid #444;
padding: 7px 28px 6px;
text-align: center;
background-color: #fff;
display: inline-block;
font-size: 16px;
margin: 30px auto;
span {
display: none;
}
}
}
.description {
table {
background: #fff;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
text-align: center;
margin: 0 auto 20px;
font-size: 14px;
color: #666;
}
td {
float: left;
width: 25%;
font-size: 14px;
line-height: 22px;
color: #444;
}
}
.table-wrap {
text-align: center;
margin: 0 auto 20px;
width: 100%;
font-size: 14px;
color: #666;
border: 1px solid #e0e0e0;
table {
width: 100%;
}
thead {
background-color: #f5f5f5;
color: #666;
font-size: 14px;
border-bottom: 1px solid #e0e0e0;
}
tr {
text-align: center;
height: 30px;
}
th,
td {
text-align: center;
}
tbody {
color: #222;
tr:nth-child(2n) {
background-color: rgb(249, 249, 249);
}
}
}
.details {
font-size: 14px;
line-height: 1.5;
table {
text-align: center;
margin: 0 auto 20px;
width: 100%;
font-size: 14px;
color: #666;
border: 1px solid #e0e0e0;
thead {
background-color: #f5f5f5;
color: #666;
font-size: 14px;
border-bottom: 1px solid #e0e0e0;
}
tbody {
color: #222;
}
tr {
text-align: center;
height: 30px;
}
th,
td {
text-align: center;
height: 30px;
}
tr:nth-child(2n) {
background-color: rgb(249, 249, 249);
}
& + p {
color: #999;
font-size: 14px;
line-height: 20px;
text-align: center;
margin-top: 20px;
margin-bottom: 30px;
}
}
img {
width: 100%;
}
}
.brand-intro {
p {
font-size: 14px;
color: #444;
display: inline-block;
margin-bottom: 0;
line-height: 25px;
}
img {
display: block;
width: 100%;
margin-bottom: 20px;
}
}
.service-info {
img {
width: 517px;
display: block;
margin: 0 auto 20px;
}
.service-prob {
display: block;
width: 100%;
margin-bottom: 10px;
line-height: 20px;
color: #000;
font-size: 14px;
text-align: left;
&:before {
display: inline-block;
content: "\e695";
line-height: 18px;
margin-right: 10px;
font-style: normal;
font-family: "iconfont";
font-size: 18px;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
}
}
.service-answer {
display: block;
float: left;
margin-top: 0;
margin-bottom: 30px;
line-height: 20px;
font-size: 14px;
font-family: initial;
text-align: justify;
&:before {
display: inline-block;
content: "\e696";
line-height: 18px;
margin-right: 10px;
font-style: normal;
font-family: "iconfont";
font-size: 18px;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
}
}
}
.service-operation,
.recommend-for-you {
display: none;
}
}
}
... ...
@import "detail";
... ...