fe / yohobuy-node · Commits

Go to a project

Authored by yyq
Commit 075eb800e5223369cc1a01d9bc82973ed5a18783 1 parent ad1e78bb

global detail

Inline Side-by-side
Showing 9 changed files with 433 additions and 33 deletions
@@ -18,18 +18,8 @@ const globalModel = require(`${mRoot}/global`); // global model @@ -18,18 +18,8 @@ const globalModel = require(`${mRoot}/global`); // global model
18 exports.list = (req, res, next) => { 18 exports.list = (req, res, next) => {
19 globalModel.getGlobalProductListData(req.query, req.yoho).then(result => { 19 globalModel.getGlobalProductListData(req.query, req.yoho).then(result => {
20 res.render('list/index', Object.assign({ 20 res.render('list/index', Object.assign({
21 - module: 'product',  
22 - page: 'sale' 21 + page: 'list'
23 }, result)); 22 }, result));
24 -  
25 - // res.send(result);  
26 - // res.render('sale/index', Object.assign({  
27 - // module: 'product',  
28 - // page: 'sale'  
29 - // }, {  
30 - // result: result,  
31 - // headerData: result.headerData  
32 - // }));  
33 }).catch(next); 23 }).catch(next);
34 }; 24 };
35 25
@@ -39,17 +29,11 @@ exports.list = (req, res, next) => { @@ -39,17 +29,11 @@ exports.list = (req, res, next) => {
39 * @param {[type]} res [description] 29 * @param {[type]} res [description]
40 * @return {[type]} [description] 30 * @return {[type]} [description]
41 */ 31 */
42 -// exports.detail = (req, res, next) => {  
43 -// let channel = req.yoho.channel;  
44 -  
45 - // // 真实数据输出  
46 - // globalModel.getGlobalProductDetailData(channel).then(result => {  
47 - // res.render('sale/index', Object.assign({  
48 - // module: 'product',  
49 - // page: 'sale'  
50 - // }, {  
51 - // result: result,  
52 - // headerData: result.headerData  
53 - // }));  
54 - // }).catch(next);  
55 -// }; 32 +exports.detail = (req, res, next) => {
  33 + globalModel.getGlobalProductDetailData(req.params[0], req.yoho.channelNum,
  34 + req.yoho.channel).then(result => {
  35 + res.render('global/detail', Object.assign({
  36 + page: 'detail'
  37 + }, result));
  38 + }).catch(next);
  39 +};
@@ -26,7 +26,8 @@ const getGlobalProductListAsync = (params, from) => { @@ -26,7 +26,8 @@ const getGlobalProductListAsync = (params, from) => {
26 const getGlobalProductDetailAsync = (skn, channelNum) => { 26 const getGlobalProductDetailAsync = (skn, channelNum) => {
27 return globalApi.get('api/v2/detail/get', { 27 return globalApi.get('api/v2/detail/get', {
28 physical_channel: channelNum, 28 physical_channel: channelNum,
29 - product_skn: skn 29 + product_skn: skn,
  30 + client_type: 'iphone'
30 }, config.apiCache); 31 }, config.apiCache);
31 }; 32 };
32 33
@@ -34,7 +35,8 @@ const getGlobalProductHtmlAsync = (skn, channelNum) => { @@ -34,7 +35,8 @@ const getGlobalProductHtmlAsync = (skn, channelNum) => {
34 return globalApi.get('api/v1/detail/gethtml', { 35 return globalApi.get('api/v1/detail/gethtml', {
35 physical_channel: channelNum, 36 physical_channel: channelNum,
36 product_skn: skn, 37 product_skn: skn,
37 - return_type: 'html' 38 + return_type: 'html',
  39 + client_type: 'iphone'
38 }, config.apiCache); 40 }, config.apiCache);
39 }; 41 };
40 42
@@ -14,13 +14,11 @@ const pager = require(`${global.utils}/pager`).setPager; @@ -14,13 +14,11 @@ const pager = require(`${global.utils}/pager`).setPager;
14 const productProcess = require(`${global.utils}/product-process`); 14 const productProcess = require(`${global.utils}/product-process`);
15 15
16 const getGlobalProductListData = (params, yoho) => { 16 const getGlobalProductListData = (params, yoho) => {
17 - params.limit = params.limit ? params.limit - 1 : 59;  
18 -  
19 return Promise.props({ 17 return Promise.props({
20 header: headerModel.requestHeaderData(yoho.channel), 18 header: headerModel.requestHeaderData(yoho.channel),
21 list: globalApi.getGlobalProductListAsync(Object.assign({ 19 list: globalApi.getGlobalProductListAsync(Object.assign({
22 physical_channel: yoho.channelNum 20 physical_channel: yoho.channelNum
23 - }, params)) 21 + }, params, {limit: params.limit ? params.limit - 1 : 59}))
24 }).then(result => { 22 }).then(result => {
25 let resData = {}; 23 let resData = {};
26 24
@@ -50,12 +48,77 @@ const getGlobalProductListData = (params, yoho) => { @@ -50,12 +48,77 @@ const getGlobalProductListData = (params, yoho) => {
50 }); 48 });
51 }; 49 };
52 50
53 -const getGlobalProductDetailData = () => { 51 +const getGlobalProductDetailData = (skn, channelNum, channel) => {
  52 + return Promise.props({
  53 + header: headerModel.requestHeaderData(channel),
  54 + detail: globalApi.getGlobalProductDetailAsync(skn, channelNum),
  55 + html: globalApi.getGlobalProductHtmlAsync(skn, channelNum)
  56 + }).then(result => {
  57 + let resData = {};
  58 + let detailInfo, html = '';
  59 +
  60 + if (+result.detail.code === 200) {
  61 + detailInfo = _.get(result, 'detail.data', {});
  62 +
  63 + if (!_.isEmpty(detailInfo.goods_list)) {
  64 + let colors = [];
  65 +
  66 + _.forEach(detailInfo.goods_list, (value, index) => {
  67 + let size = [];
  68 +
  69 +
  70 + _.forEach(value.size_list || [], subVal => {
  71 + size.push({
  72 + sku: subVal.product_sku,
  73 + name: subVal.size_name,
  74 + soldOut: subVal.storage_number * 1 <= 0
  75 + });
  76 + });
  77 +
  78 +
  79 + if (_.isEmpty(value.images_list)) {
  80 + value.images_list = [{
  81 + image_url: value.color_image
  82 + }];
  83 + }
54 84
  85 + if (index === 0 && !detailInfo.mainThumb) {
  86 + value.focus = true;
  87 + detailInfo.mainThumb = _.get(value, 'images_list[0].image_url', value.color_image);
  88 + }
  89 +
  90 + colors.push({
  91 + src: value.color_image,
  92 + name: value.color_name,
  93 + title: value.color_name,
  94 + imgList: value.images_list,
  95 + focus: value.focus,
  96 + size: size
  97 + });
  98 + });
  99 +
  100 + detailInfo.colors = colors;
  101 + }
  102 + }
  103 +
  104 + if (result.html) {
  105 + let regContent = /<body[^>]*>([\s\S]*)<\/body>/.exec(result.html);
  106 +
  107 + html = regContent[1] || '';
  108 + html = html.replace(/<script.*?>.*?<\/script>/ig, '');
  109 + }
  110 +
  111 +// console.log(result.detail.code);
  112 + Object.assign(resData, result.header, {
  113 + goodsInfo: detailInfo,
  114 + detailHtml: html || ''
  115 + });
  116 +
  117 + return resData;
  118 + });
55 }; 119 };
56 120
57 module.exports = { 121 module.exports = {
58 getGlobalProductListData, 122 getGlobalProductListData,
59 getGlobalProductDetailData 123 getGlobalProductDetailData
60 }; 124 };
61 -  
@@ -88,7 +88,10 @@ router.post('/detail/notify/cancel', auth, notify.cancel); // 删 @@ -88,7 +88,10 @@ router.post('/detail/notify/cancel', auth, notify.cancel); // 删
88 88
89 // 全球购routers 89 // 全球购routers
90 router.get('/global/list', globalCtrl.list); // 全球购列表页 90 router.get('/global/list', globalCtrl.list); // 全球购列表页
91 -router.get('/\/global\/p([\d]+)(.*)/', detail.showMain); // 全球购商品详情页 91 +router.get('/global/detail', globalCtrl.detail);
  92 +router.get(/\/global\/([\d]+)(.*)/, globalCtrl.detail);
  93 +
  94 +// router.get(/\/global\/([\d]+)(.*)/, globalCtrl.detail); // 全球购商品详情页
92 95
93 // 搜索 96 // 搜索
94 router.get('/search/index', gbk2utf, search.index); 97 router.get('/search/index', gbk2utf, search.index);
  1 +<div class="global-detail-page yoho-page">
  2 + {{>product/brand-banner}}
  3 +
  4 + <div class="center-content product-detail-page">
  5 + <div class="main">
  6 + {{# goodsInfo}}
  7 + <div class="pull-left imgs clearfix">
  8 + <div class="pull-left img">
  9 + <div class="tags clearfix">
  10 + <span class="good-tag global-tag">{{country_name}}</span>
  11 + </div>
  12 +
  13 + <div id="min-img">
  14 + <img id="img-show" class="img-show" src="{{image2 mainThumb w=420 h=560}}">
  15 + <div class="magnifier move-object hide"></div>
  16 + <div class="magnifier move-over"></div>
  17 + <div id="max" class="magnifier max hide">
  18 + <img id='big' src="{{image2 mainThumb w=750 h=1000}}">
  19 + </div>
  20 + </div>
  21 +
  22 + <div class="share-row">
  23 + <span class="title pull-left">分享：</span> {{> common/share }}
  24 + </div>
  25 + </div>
  26 + <div id="thumbs" class="pull-right thumbs">
  27 + {{log goods_list}}
  28 + {{# goods_list}}
  29 + <div class="thumb-wrap{{#unless focus}} hide{{/unless}}">
  30 + {{#if focus}}
  31 + {{# images_list}}
  32 + <img class="thumb {{#if @first}}active{{/if}}" src="{{image2 image_url w=75 h=100}}"
  33 + data-shower="{{image2 image_url w=420 h=560}}"
  34 + data-origin="{{image2 image_url w=750 h=1000}}">
  35 + {{/ images_list}}
  36 + {{^}}
  37 + {{# images_list}}
  38 + <img class="thumb lazy"
  39 + data-original="{{image2 image_url w=75 h=100}}"
  40 + data-shower="{{image2 image_url w=420 h=560}}"
  41 + data-origin="{{image2 image_url w=750 h=1000}}">
  42 + {{/ images_list}}
  43 + {{/if}}
  44 + </div>
  45 + {{/ goods_list}}
  46 + </div>
  47 + </div>
  48 + <div class="pull-right infos">
  49 + <h1 class="name">{{product_name}}</h1>
  50 +
  51 + <div class="line"></div>
  52 +
  53 + {{> product/price-list}}
  54 +
  55 + <div class="line"></div>
  56 +
  57 + <div class="trade-content">
  58 + <div id="type-chose" class="type-chose">
  59 + {{> product/color-list}}
  60 + {{> product/size-list}}
  61 +
  62 + <div class="chose-count row clearfix">
  63 + <span class="title pull-left">数&nbsp;&nbsp;量：</span>
  64 + <div class="num-wraper pull-left clearfix">
  65 + {{> product/num}}
  66 + </div>
  67 + </div>
  68 +
  69 + <div class="line"></div>
  70 +
  71 + <span id="code-buy" class="code-buy" skn="{{product_skn}}">
  72 + <i class="iconfont">&#xe703;</i>
  73 + <em>扫一扫购买</em>
  74 + <div class="code-box">
  75 + <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>
  76 + </div>
  77 + </span>
  78 +
  79 + </div>
  80 + </div>
  81 + </div>
  82 + {{/ goodsInfo}}
  83 +
  84 + </div>
  85 + <div class="global-detail-wrap">{{{detailHtml}}}</div>
  86 + </div>
  87 +</div>

1.96 KB | W: | H:

2.22 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -11,6 +11,7 @@ @@ -11,6 +11,7 @@
11 @import "outlets/index"; 11 @import "outlets/index";
12 @import "shop-index"; 12 @import "shop-index";
13 @import "students/index"; 13 @import "students/index";
  14 +@import "global/index";
14 @import "top-coupon"; 15 @import "top-coupon";
15 @import "new-arrive"; 16 @import "new-arrive";
16 @import "good-slide"; 17 @import "good-slide";
  1 +.global-detail-page {
  2 + .tags > .global-tag {
  3 + background-color: #482d3d;
  4 + font-weight: 300;
  5 +
  6 + &:before {
  7 + content: "";
  8 + width: 16px;
  9 + height: 14px;
  10 + margin-right: 4px;
  11 + background-image: url("/product/airplane-tag.png");
  12 + display: inline-block;
  13 + vertical-align: sub;
  14 + }
  15 + }
  16 +
  17 + .global-detail-wrap {
  18 + padding: 30px 0;
  19 + }
  20 +
  21 + .good-detail-page {
  22 + background-color: transparent;
  23 + position: relative;
  24 + width: 100%;
  25 + overflow: hidden;
  26 + border: 1px solid #e0e0e0;
  27 + box-sizing: border-box;
  28 +
  29 + .good-sure {
  30 + text-align: center;
  31 + margin-top: 30px;
  32 + margin-bottom: 20px;
  33 + padding-top: 10px;
  34 + padding-bottom: 10px;
  35 + border: 1px #e0e0e0 solid;
  36 +
  37 + img {
  38 + width: 517px;
  39 + max-width: 100%;
  40 + display: block;
  41 + border: 0;
  42 + margin: 0 auto;
  43 + }
  44 + }
  45 +
  46 + .info {
  47 + margin-top: 39px;
  48 + margin-left: 175px;
  49 + margin-right: 175px;
  50 + color: #999;
  51 + border-top: 1px solid #e0e0e0;
  52 + font-size: 12px;
  53 + text-align: center;
  54 +
  55 + h2 {
  56 + color: #444;
  57 + border: 1px solid #444;
  58 + padding: 7px 28px 6px;
  59 + text-align: center;
  60 + background-color: #fff;
  61 + display: inline-block;
  62 + font-size: 16px;
  63 + margin: 30px auto;
  64 +
  65 + span {
  66 + display: none;
  67 + }
  68 + }
  69 + }
  70 +
  71 + .description {
  72 + table {
  73 + background: #fff;
  74 + width: 100%;
  75 + border-collapse: collapse;
  76 + border-spacing: 0;
  77 + text-align: center;
  78 + margin: 0 auto 20px;
  79 + font-size: 14px;
  80 + color: #666;
  81 + }
  82 +
  83 + td {
  84 + float: left;
  85 + width: 25%;
  86 + font-size: 14px;
  87 + line-height: 22px;
  88 + color: #444;
  89 + }
  90 + }
  91 +
  92 + .table-wrap {
  93 + text-align: center;
  94 + margin: 0 auto 20px;
  95 + width: 100%;
  96 + font-size: 14px;
  97 + color: #666;
  98 + border: 1px solid #e0e0e0;
  99 +
  100 + table {
  101 + width: 100%;
  102 + }
  103 +
  104 + thead {
  105 + background-color: #f5f5f5;
  106 + color: #666;
  107 + font-size: 14px;
  108 + border-bottom: 1px solid #e0e0e0;
  109 + }
  110 +
  111 + tr {
  112 + text-align: center;
  113 + height: 30px;
  114 + }
  115 +
  116 + th,
  117 + td {
  118 + text-align: center;
  119 + }
  120 +
  121 + tbody {
  122 + color: #222;
  123 +
  124 + tr:nth-child(2n) {
  125 + background-color: rgb(249, 249, 249);
  126 + }
  127 + }
  128 + }
  129 +
  130 + .details {
  131 + font-size: 14px;
  132 + line-height: 1.5;
  133 +
  134 + table {
  135 + text-align: center;
  136 + margin: 0 auto 20px;
  137 + width: 100%;
  138 + font-size: 14px;
  139 + color: #666;
  140 + border: 1px solid #e0e0e0;
  141 +
  142 + thead {
  143 + background-color: #f5f5f5;
  144 + color: #666;
  145 + font-size: 14px;
  146 + border-bottom: 1px solid #e0e0e0;
  147 + }
  148 +
  149 + tbody {
  150 + color: #222;
  151 + }
  152 +
  153 + tr {
  154 + text-align: center;
  155 + height: 30px;
  156 + }
  157 +
  158 + th,
  159 + td {
  160 + text-align: center;
  161 + height: 30px;
  162 + }
  163 +
  164 + tr:nth-child(2n) {
  165 + background-color: rgb(249, 249, 249);
  166 + }
  167 +
  168 + & + p {
  169 + color: #999;
  170 + font-size: 14px;
  171 + line-height: 20px;
  172 + text-align: center;
  173 + margin-top: 20px;
  174 + margin-bottom: 30px;
  175 + }
  176 + }
  177 +
  178 + img {
  179 + width: 100%;
  180 + }
  181 + }
  182 +
  183 + .brand-intro {
  184 + p {
  185 + font-size: 14px;
  186 + color: #444;
  187 + display: inline-block;
  188 + margin-bottom: 0;
  189 + line-height: 25px;
  190 + }
  191 +
  192 + img {
  193 + display: block;
  194 + width: 100%;
  195 + margin-bottom: 20px;
  196 + }
  197 + }
  198 +
  199 + .service-info {
  200 + img {
  201 + width: 517px;
  202 + display: block;
  203 + margin: 0 auto 20px;
  204 + }
  205 +
  206 + .service-prob {
  207 + display: block;
  208 + width: 100%;
  209 + margin-bottom: 10px;
  210 + line-height: 20px;
  211 + color: #000;
  212 + font-size: 14px;
  213 + text-align: left;
  214 +
  215 + &:before {
  216 + display: inline-block;
  217 + content: "\e695";
  218 + line-height: 18px;
  219 + margin-right: 10px;
  220 + font-style: normal;
  221 + font-family: "iconfont";
  222 + font-size: 18px;
  223 + text-decoration: none;
  224 + -webkit-font-smoothing: antialiased;
  225 + -webkit-text-stroke-width: 0.2px;
  226 + }
  227 + }
  228 +
  229 + .service-answer {
  230 + display: block;
  231 + float: left;
  232 + margin-top: 0;
  233 + margin-bottom: 30px;
  234 + line-height: 20px;
  235 + font-size: 14px;
  236 + font-family: initial;
  237 + text-align: justify;
  238 +
  239 + &:before {
  240 + display: inline-block;
  241 + content: "\e696";
  242 + line-height: 18px;
  243 + margin-right: 10px;
  244 + font-style: normal;
  245 + font-family: "iconfont";
  246 + font-size: 18px;
  247 + text-decoration: none;
  248 + -webkit-font-smoothing: antialiased;
  249 + -webkit-text-stroke-width: 0.2px;
  250 + }
  251 + }
  252 + }
  253 +
  254 + .service-operation,
  255 + .recommend-for-you {
  256 + display: none;
  257 + }
  258 + }
  259 +}