Authored by htoooth

optimize product detail

@@ -285,8 +285,19 @@ const getPackage = (req, res, next) => { @@ -285,8 +285,19 @@ const getPackage = (req, res, next) => {
285 .catch(next); 285 .catch(next);
286 }; 286 };
287 287
288 -const redirectNewRouter = (req, res) => {  
289 - return res.redirect(301, helpers.urlFormat(`/p${req.params[0]}.html${req.params[3]}`, null, 'item')); 288 +const getProductIntro = (req, res, next) => {
  289 + let skn = req.query.skn || '';
  290 +
  291 + if (!skn) {
  292 + return res.json({
  293 + code: 500,
  294 + message: '服务器错误'
  295 + });
  296 + }
  297 +
  298 + service.getIntro(skn)
  299 + .then(result => res.json(result))
  300 + .catch(next);
290 }; 301 };
291 302
292 module.exports = { 303 module.exports = {
@@ -302,5 +313,5 @@ module.exports = { @@ -302,5 +313,5 @@ module.exports = {
302 getPackage, 313 getPackage,
303 likeConsult, 314 likeConsult,
304 usefulConsult, 315 usefulConsult,
305 - redirectNewRouter 316 + getProductIntro
306 }; 317 };
@@ -1005,7 +1005,7 @@ const _getIntroInfo = (productSkn, maxSortId, additionalData)=> { @@ -1005,7 +1005,7 @@ const _getIntroInfo = (productSkn, maxSortId, additionalData)=> {
1005 result.material = _getMaterialDataBySizeInfo(sizeInfo); 1005 result.material = _getMaterialDataBySizeInfo(sizeInfo);
1006 1006
1007 // 商品详情页介绍 1007 // 商品详情页介绍
1008 - result.details = _getDetailDataBySizeInfo(sizeInfo); 1008 + // result.details = _getDetailDataBySizeInfo(sizeInfo);
1009 1009
1010 return result; 1010 return result;
1011 }; 1011 };
@@ -1776,6 +1776,20 @@ const getPackage = co(function * (skn) { @@ -1776,6 +1776,20 @@ const getPackage = co(function * (skn) {
1776 return resData; 1776 return resData;
1777 }); 1777 });
1778 1778
  1779 +/**
  1780 + * 获取商品详细介绍信息
  1781 + */
  1782 +const getIntro = co(function * (skn) {
  1783 + let sizeInfo = yield productAPI.sizeInfoAsync(skn);
  1784 +
  1785 + let result = _getDetailDataBySizeInfo(sizeInfo);
  1786 +
  1787 + return {
  1788 + code: 200,
  1789 + data: result
  1790 + };
  1791 +});
  1792 +
1779 module.exports = { 1793 module.exports = {
1780 getShareOrderListAsync: commentService.getShareOrderListAsync, // 获取评论列表 1794 getShareOrderListAsync: commentService.getShareOrderListAsync, // 获取评论列表
1781 indexConsultAsync: consultService.indexAsync, // 获取咨询列表 1795 indexConsultAsync: consultService.indexAsync, // 获取咨询列表
@@ -1789,5 +1803,6 @@ module.exports = { @@ -1789,5 +1803,6 @@ module.exports = {
1789 getDetailHeader, 1803 getDetailHeader,
1790 saleReturn, 1804 saleReturn,
1791 recommendAsync, 1805 recommendAsync,
1792 - getPackage 1806 + getPackage,
  1807 + getIntro
1793 }; 1808 };
@@ -65,10 +65,13 @@ router.get('/outlets/special/detail', outlets.special); // 憟亥瘣餃憿 @@ -65,10 +65,13 @@ router.get('/outlets/special/detail', outlets.special); // 憟亥瘣餃憿
65 router.get('/outlets/list', outlets.list); // 奥莱品类页 65 router.get('/outlets/list', outlets.list); // 奥莱品类页
66 router.get('/outlets/:channel', outlets.channel); // 奥莱频道页 66 router.get('/outlets/:channel', outlets.channel); // 奥莱频道页
67 67
68 -// 商品分类列表页 68 +// 品详情
69 router.get('/list', outletsList.index); 69 router.get('/list', outletsList.index);
70 -router.get(/^\/([\d]+)(.*)/, detail.showMain); // 新的商品详情routers  
71 -router.get(/\/p([\d]+)(.*)/, detail.showMainBack); // 新的商品详情routers 70 +router.get(/^\/([\d]+)(.*)/, detail.showMain); // 新的商品详情routers
  71 +router.get(/\/p([\d]+)(.*)/, detail.showMainBack); // 老的商品详情routers
  72 +
  73 +router.get('/detail/header', detail.productHeader); // 价格数据重新获取接口
  74 +router.get('/detail/intro', detail.getProductIntro); // 商品详细介绍
72 router.get('/detail/comment', detail.indexComment); // 商品评论 75 router.get('/detail/comment', detail.indexComment); // 商品评论
73 router.get('/detail/consult', detail.indexConsult); // 商品咨询 76 router.get('/detail/consult', detail.indexConsult); // 商品咨询
74 router.post('/detail/consult', auth, detail.createConsult); // 创建咨询 77 router.post('/detail/consult', auth, detail.createConsult); // 创建咨询
@@ -77,7 +80,6 @@ router.get('/detail/consult/useful/:id', auth, detail.usefulConsult); // 霂 @@ -77,7 +80,6 @@ router.get('/detail/consult/useful/:id', auth, detail.usefulConsult); // 霂
77 router.get('/detail/hotarea', detail.indexHotArea); // 商品热区 80 router.get('/detail/hotarea', detail.indexHotArea); // 商品热区
78 router.post('/index/favoriteBrand', favorite.changeFavoriteBrand); // 收藏品牌 81 router.post('/index/favoriteBrand', favorite.changeFavoriteBrand); // 收藏品牌
79 router.post('/item/togglecollect', favorite.collectProduct); // 收藏商品 82 router.post('/item/togglecollect', favorite.collectProduct); // 收藏商品
80 -router.get('/detail/header', detail.productHeader); // 价格数据重新获取接口  
81 router.get('/detail/return', detail.detailReturn); // 特殊商品退换货 83 router.get('/detail/return', detail.detailReturn); // 特殊商品退换货
82 router.get('/detail/recommend', detail.recommend); // 推荐商品 84 router.get('/detail/recommend', detail.recommend); // 推荐商品
83 router.get('/index/isfav', favorite.isFavoriteBrand); // 品牌收藏状态 85 router.get('/index/isfav', favorite.isFavoriteBrand); // 品牌收藏状态
@@ -7,12 +7,15 @@ @@ -7,12 +7,15 @@
7 <div class="lazy-load-object"> 7 <div class="lazy-load-object">
8 <textarea class="datalazyload" style="visibility: hidden;"> 8 <textarea class="datalazyload" style="visibility: hidden;">
9 <script> 9 <script>
10 - fetchHotArea(); 10 + loadProductIntro();
11 </script> 11 </script>
12 </textarea> 12 </textarea>
13 13
14 </div> 14 </div>
15 - {{{details}}} 15 +
  16 + <div id="details-intro-holder">
  17 + {{{details}}}
  18 + </div>
16 19
17 {{#if goodsInfo.imageBanner.url}} 20 {{#if goodsInfo.imageBanner.url}}
18 <a class="img-link" href="{{goodsInfo.imageBanner.url}}"> 21 <a class="img-link" href="{{goodsInfo.imageBanner.url}}">
@@ -18,6 +18,7 @@ var dataLazyLoad = require('../plugins/lazy-load')(document); @@ -18,6 +18,7 @@ var dataLazyLoad = require('../plugins/lazy-load')(document);
18 var setPager = require('./detail/pager'); 18 var setPager = require('./detail/pager');
19 var notify = require('./detail/notify'); 19 var notify = require('./detail/notify');
20 var favorite = require('./detail/brand-fav'); 20 var favorite = require('./detail/brand-fav');
  21 +var intro = require('./detail/intro');
21 22
22 var bindEvent = $.Callbacks(); // eslint-disable-line 23 var bindEvent = $.Callbacks(); // eslint-disable-line
23 var cartEvent = new EventProxy(); 24 var cartEvent = new EventProxy();
@@ -1101,7 +1102,7 @@ $('.after-service-switch').click(function() { @@ -1101,7 +1102,7 @@ $('.after-service-switch').click(function() {
1101 1102
1102 // 商品详情区的热点 1103 // 商品详情区的热点
1103 function loadHotArea() { 1104 function loadHotArea() {
1104 - $.ajax({ 1105 + return $.ajax({
1105 type: 'GET', 1106 type: 'GET',
1106 url: '/product/detail/hotarea', 1107 url: '/product/detail/hotarea',
1107 data: { 1108 data: {
@@ -1124,12 +1125,26 @@ function loadHotArea() { @@ -1124,12 +1125,26 @@ function loadHotArea() {
1124 }); 1125 });
1125 } 1126 }
1126 1127
1127 -window.fetchHotArea = window.once(loadHotArea); 1128 +// 商品详情区图片懒加载
  1129 +function introLazyLoad() {
  1130 + lazyLoad($('#details-html img'), {
  1131 + threshold: 1000
  1132 + });
  1133 +}
  1134 +
  1135 +// 商品详情区
  1136 +function loadProductIntro() {
  1137 + return intro.getHtml(skn).then(function(result) {
  1138 + $(result).replaceAll('#details-intro-holder');
  1139 + }).then(function() {
  1140 + introLazyLoad();
  1141 +
  1142 + return loadHotArea();
  1143 + });
  1144 +}
  1145 +
  1146 +window.loadProductIntro = window.once(loadProductIntro);
1128 1147
1129 -// 商品详情图片懒加载  
1130 -lazyLoad($('#details-html img'), {  
1131 - threshold: 1000  
1132 -});  
1133 1148
1134 // 咨询和评价 1149 // 咨询和评价
1135 function loadComment() { 1150 function loadComment() {
  1 +var $ = require('yoho-jquery');
  2 +
  3 +exports.getHtml = function(skn) {
  4 + return $.get('/product/detail/intro', {skn: skn}).then(function(result) {
  5 + if (result.code !== 200) {
  6 + return '';
  7 + }
  8 +
  9 + return result.data;
  10 + });
  11 +};
@@ -1441,6 +1441,12 @@ @@ -1441,6 +1441,12 @@
1441 .img-responsive { 1441 .img-responsive {
1442 width: 100%; 1442 width: 100%;
1443 } 1443 }
  1444 +
  1445 + #details-intro-holder {
  1446 + display: block;
  1447 + width: 100%;
  1448 + height: 500px;
  1449 + }
1444 } 1450 }
1445 1451
1446 .consult-comment .title { 1452 .consult-comment .title {