fe / yohobuywap-node · Commits

Go to a project

Authored by 李靖
Commit 43178fb59c3721f6ae7a6f19dd5877664f3e1c57 1 parent c1d263d7

联调

Inline Side-by-side
Showing 5 changed files with 142 additions and 185 deletions
1 1
2 'use strict'; 2 'use strict';
3 3
  4 +const mRoot = '../models';
  5 +const newGuangModel = require(`${mRoot}/guang-new`);
4 const headerModel = require('../../../doraemon/models/header'); // 头部model 6 const headerModel = require('../../../doraemon/models/header'); // 头部model
5 7
6 -exports.index = (req, res) => { 8 +const typeLib = require('../../../config/type-lib');
  9 +const channels = {
  10 + boys: 1,
  11 + girl: 2,
  12 + kids: 3,
  13 + lifestyle: 4
  14 +};
  15 +
  16 +exports.index = (req, res, next) => {
7 let responseData = { 17 let responseData = {
8 pageHeader: headerModel.setNav({ 18 pageHeader: headerModel.setNav({
9 navTitle: '逛' 19 navTitle: '逛'
@@ -15,7 +25,14 @@ exports.index = (req, res) => { @@ -15,7 +25,14 @@ exports.index = (req, res) => {
15 localCss: true 25 localCss: true
16 }; 26 };
17 27
18 - let params = {}; 28 + let params = {
  29 + gender: req.query.gender ||
  30 + req.query.channel && typeLib.channels[req.query.channel] ||
  31 + req.cookies._Channel && channels[req.cookies._Channel] ||
  32 + '1,3',
  33 + };
19 34
20 - res.render('guang-new', Object.assign(responseData, params)); 35 + req.ctx(newGuangModel).index(params).then(result => {
  36 + res.render('guang-new', Object.assign(responseData, result));
  37 + }).catch(next);
21 }; 38 };
  1 +'use strict';
  2 +
  3 +const _ = require('lodash');
  4 +
  5 +class newGuang extends global.yoho.BaseModel {
  6 + constructor(ctx) {
  7 + super(ctx);
  8 + }
  9 +
  10 + _indexRes(params) {
  11 + let options = {
  12 + url: '/operations/api/v5/resource/get',
  13 + data: {
  14 + content_code: '44153d54effebaf803a2deee06b3ea5a',
  15 + gender: params.gender
  16 + },
  17 + api: global.yoho.ServiceAPI
  18 + };
  19 +
  20 + return this.get(options).then(result => {
  21 + return result;
  22 + });
  23 + }
  24 +
  25 + index(params) {
  26 + return Promise.all([
  27 + this._indexRes(params)
  28 + ]).then((result) => {
  29 + let resu = {
  30 + floorRes: {}
  31 + };
  32 +
  33 + if (_.get(result, '[0].data')) {
  34 + _.forEach(result[0].data, (val) => {
  35 + if (val.template_name === 'focus') {
  36 + resu.floorRes.focus = _.get(val, 'data');
  37 + }
  38 + if (val.template_name === '3:4ImageListFloor') {
  39 + resu.floorRes.type = _.get(val, 'data.list');
  40 + }
  41 + if (val.template_name === 'GuangRqFloor') {
  42 + resu.floorRes.renQi = _.get(val, 'data.list');
  43 + }
  44 + if (val.template_name === 'GuangRqFloor') {
  45 + resu.floorRes.daPei = _.get(val, 'data.list');
  46 + }
  47 + if (val.template_name === 'GuangRqFloor') {
  48 + resu.floorRes.haoHuo = _.get(val, 'data.list');
  49 + }
  50 + });
  51 + }
  52 +
  53 + return resu;
  54 + });
  55 + }
  56 +}
  57 +
  58 +module.exports = newGuang;
1 <div class="guang-new-page yoho-page"> 1 <div class="guang-new-page yoho-page">
  2 + {{#if floorRes.focus}}
2 <div class="swiper-top"> 3 <div class="swiper-top">
3 <div class="swiper-container"> 4 <div class="swiper-container">
4 <div class="swiper-wrapper"> 5 <div class="swiper-wrapper">
  6 + {{# floorRes.focus}}
5 <div class="swiper-slide"> 7 <div class="swiper-slide">
6 - <img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />  
7 - </div>  
8 - <div class="swiper-slide">  
9 - <img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />  
10 - </div>  
11 - <div class="swiper-slide">  
12 - <img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />  
13 - </div>  
14 - <div class="swiper-slide">  
15 - <img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />  
16 - </div>  
17 - <div class="swiper-slide">  
18 - <img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />  
19 - </div>  
20 - <div class="swiper-slide">  
21 - <img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" /> 8 + <a href="{{url}}">
  9 + <img src="{{image2 src w=750 h=322 q=60}}" alt="{{title}}" />
  10 + </a>
22 </div> 11 </div>
  12 + {{/ floorRes.focus}}
23 </div> 13 </div>
24 <div class="swiper-pagination"> 14 <div class="swiper-pagination">
25 <div class="wiper-pagination-bullets"></div> 15 <div class="wiper-pagination-bullets"></div>
26 </div> 16 </div>
27 </div> 17 </div>
28 </div> 18 </div>
  19 + {{/if}}
  20 + {{#if floorRes.type}}
29 <div class="swiper-tab"> 21 <div class="swiper-tab">
30 <div class="swiper-container"> 22 <div class="swiper-container">
31 <div class="swiper-wrapper"> 23 <div class="swiper-wrapper">
  24 + {{#floorRes.type}}
32 <div class="swiper-slide"> 25 <div class="swiper-slide">
33 - <a href="https://www.baidu.com/">  
34 - <div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)">  
35 - <div class="cover"></div>  
36 - <div class="title">11</div>  
37 - </div>  
38 - </a>  
39 - </div>  
40 - <div class="swiper-slide">  
41 - <a href="https://www.baidu.com/">  
42 - <div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)">  
43 - <div class="cover"></div>  
44 - <div class="title">22</div>  
45 - </div>  
46 - </a>  
47 - </div>  
48 - <div class="swiper-slide">  
49 - <a href="https://www.baidu.com/">  
50 - <div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)">  
51 - <div class="cover"></div>  
52 - <div class="title">33</div>  
53 - </div>  
54 - </a>  
55 - </div>  
56 - <div class="swiper-slide">  
57 - <a href="https://www.baidu.com/">  
58 - <div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)">  
59 - <div class="cover"></div>  
60 - <div class="title">44</div>  
61 - </div>  
62 - </a>  
63 - </div>  
64 - <div class="swiper-slide">  
65 - <a href="https://www.baidu.com/">  
66 - <div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)">  
67 - <div class="cover"></div>  
68 - <div class="title">55</div>  
69 - </div>  
70 - </a>  
71 - </div>  
72 - <div class="swiper-slide">  
73 - <a href="https://www.baidu.com/">  
74 - <div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)">  
75 - <div class="cover"></div>  
76 - <div class="title">66</div>  
77 - </div>  
78 - </a>  
79 - </div>  
80 - <div class="swiper-slide">  
81 - <a href="https://www.baidu.com/">  
82 - <div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/goodsimg/2017/09/11/14/02402a9298765b8042740b7df2ee541e27.jpg)"> 26 + <a href="{{url}}">
  27 + <div class="tab-item" style="background-image: url({{image2 src w=100 h=320 q=60}})">
83 <div class="cover"></div> 28 <div class="cover"></div>
84 - <div class="title">77</div> 29 + <div class="title">{{alt}}</div>
85 </div> 30 </div>
86 </a> 31 </a>
87 </div> 32 </div>
  33 + {{/floorRes.type}}
88 </div> 34 </div>
89 </div> 35 </div>
90 </div> 36 </div>
  37 + {{/if}}
  38 + {{#if floorRes.renQi}}
91 <div class="big-title"> 39 <div class="big-title">
92 人气 40 人气
93 - <span class="iconfont">MORE&nbsp;&#xe604;</span> 41 + <a class="iconfont" href="//guang.m.yohobuy.com/?type=1001">MORE&nbsp;&#xe604;</a>
94 </div> 42 </div>
95 <div class="swiper-page"> 43 <div class="swiper-page">
96 <div class="swiper-container"> 44 <div class="swiper-container">
97 <div class="swiper-wrapper"> 45 <div class="swiper-wrapper">
98 - <div class="swiper-slide">  
99 - <div class="page-c">  
100 - <img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />  
101 - <div class="info">  
102 - <p class="name eps">DICKIES从诞生之日起就旨在出品高品质DICKIES从诞生之日起就旨在出品高品质</p>  
103 - <p class="type">1潮流</p>  
104 - </div>  
105 - </div>  
106 - </div>  
107 - <div class="swiper-slide">  
108 - <div class="page-c">  
109 - <img src="http://img10.static.yhbimg.com/yhb-img01/2017/10/27/11/01351c47cc94b9cdbf401ea243f5e16086.jpg" />  
110 - <div class="info">  
111 - <p class="name eps">DICKIES从诞生之日起就旨在出品高品质DICKIES从诞生之日起就旨在出品高品质</p>  
112 - <p class="type">2潮流</p> 46 + {{# floorRes.renQi}}
  47 + <div class="swiper-slide">
  48 + <a href="//guang.m.yohobuy.com/info/index?id={{id}}">
  49 + <div class="page-c">
  50 + <img src="{{image2 src w=690 h=430 q=60}}" />
  51 + <div class="info">
  52 + <p class="name eps">{{title}}</p>
  53 + <p class="type eps">{{intro}}</p>
  54 + </div>
113 </div> 55 </div>
114 - </div>  
115 - </div>  
116 - <div class="swiper-slide">  
117 - <div class="page-c">  
118 - <img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" />  
119 - <div class="info">  
120 - <p class="name eps">DICKIES从诞生之日起就旨在出品高品质DICKIES从诞生之日起就旨在出品高品质</p>  
121 - <p class="type">3潮流</p>  
122 - </div>  
123 - </div>  
124 - </div>  
125 - <div class="swiper-slide">  
126 - <div class="page-c">  
127 - <img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01f86a6951f771405d8034ec75ef990714.jpg" />  
128 - <div class="info">  
129 - <p class="name eps">DICKIES从诞生之日起就旨在出品高品质DICKIES从诞生之日起就旨在出品高品质</p>  
130 - <p class="type">4潮流</p>  
131 - </div>  
132 - </div>  
133 - </div>  
134 - <div class="swiper-slide">  
135 - <div class="page-c">  
136 - <img src="http://img10.static.yhbimg.com/yhb-img01/2017/10/27/12/01fee21a2b9808e42f02ad2217b59a1491.jpg" />  
137 - <div class="info">  
138 - <p class="name eps">DICKIES从诞生之日起就旨在出品高品质DICKIES从诞生之日起就旨在出品高品质</p>  
139 - <p class="type">5潮流</p>  
140 - </div>  
141 - </div> 56 + </a>
142 </div> 57 </div>
  58 + {{/ floorRes.renQi}}
143 </div> 59 </div>
144 </div> 60 </div>
145 </div> 61 </div>
  62 + {{/if}}
  63 + {{#if floorRes.daPei}}
146 <div class="big-title"> 64 <div class="big-title">
147 搭配 65 搭配
148 - <span class="iconfont">MORE&nbsp;&#xe604;</span> 66 + <a class="iconfont" href="//guang.m.yohobuy.com/?type=2">MORE&nbsp;&#xe604;</a>
149 </div> 67 </div>
150 <div class="swiper-collocation"> 68 <div class="swiper-collocation">
151 <div class="swiper-container"> 69 <div class="swiper-container">
152 <div class="swiper-wrapper"> 70 <div class="swiper-wrapper">
  71 + {{# floorRes.daPei}}
153 <div class="swiper-slide"> 72 <div class="swiper-slide">
154 - <img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />  
155 - <p class="eps-2">把自己的星座穿在身上，这样的高街风你喜欢吗？</p>  
156 - </div>  
157 - <div class="swiper-slide">  
158 - <img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />  
159 - <p class="eps-2">把自己的星座穿在身上，这样的高街风你喜欢吗？</p>  
160 - </div>  
161 - <div class="swiper-slide">  
162 - <img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />  
163 - <p class="eps-2">把自己的星座穿在身上，这样的高街风你喜欢吗？</p>  
164 - </div>  
165 - <div class="swiper-slide">  
166 - <img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />  
167 - <p class="eps-2">把自己的星座穿在身上，这样的高街风你喜欢吗？</p>  
168 - </div>  
169 - <div class="swiper-slide">  
170 - <img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />  
171 - <p class="eps-2">把自己的星座穿在身上，这样的高街风你喜欢吗？</p> 73 + <a href="//guang.m.yohobuy.com/info/index?id={{id}}">
  74 + <img src="{{image2 src w=590 h=370 q=60}}" />
  75 + <p class="eps-2">{{title}}</p>
  76 + </a>
172 </div> 77 </div>
  78 + {{/ floorRes.daPei}}
173 </div> 79 </div>
174 </div> 80 </div>
175 </div> 81 </div>
  82 + {{/if}}
176 <div class="big-title"> 83 <div class="big-title">
177 限定 84 限定
178 <span class="iconfont">MORE&nbsp;&#xe604;</span> 85 <span class="iconfont">MORE&nbsp;&#xe604;</span>
@@ -234,33 +141,25 @@ @@ -234,33 +141,25 @@
234 <div class="swiper-pagination"></div> 141 <div class="swiper-pagination"></div>
235 </div> 142 </div>
236 </div> 143 </div>
  144 + {{#if floorRes.haoHuo}}
237 <div class="big-title"> 145 <div class="big-title">
238 好货 146 好货
239 <span class="iconfont">MORE&nbsp;&#xe604;</span> 147 <span class="iconfont">MORE&nbsp;&#xe604;</span>
240 </div> 148 </div>
241 <div class="goods-list clearfix"> 149 <div class="goods-list clearfix">
  150 + {{# floorRes.haoHuo}}
242 <div class="goods-item"> 151 <div class="goods-item">
243 - <img src="http://img10.static.yhbimg.com/yhb-img01/2017/10/27/12/01fee21a2b9808e42f02ad2217b59a1491.jpg" />  
244 - <div class="info">  
245 - <p class="name eps-2 eps-3">DICKES从1922年诞生之日起就旨在出品高品质的穿着体验！</p>  
246 - <p class="tips">#潮流行动#</p>  
247 - </div>  
248 - </div>  
249 - <div class="goods-item">  
250 - <img src="http://img10.static.yhbimg.com/yhb-img01/2017/10/27/12/01fee21a2b9808e42f02ad2217b59a1491.jpg" />  
251 - <div class="info">  
252 - <p class="name eps-2 eps-3">DICKES从1922年诞生之日起就旨在出品高品质的穿着体验！</p>  
253 - <p class="tips">#潮流行动#</p>  
254 - </div>  
255 - </div>  
256 - <div class="goods-item">  
257 - <img src="http://img10.static.yhbimg.com/yhb-img01/2017/10/27/12/01fee21a2b9808e42f02ad2217b59a1491.jpg" />  
258 - <div class="info">  
259 - <p class="name eps-2 eps-3">DICKES从1922年诞生之日起就旨在出品高品质的穿着体验！</p>  
260 - <p class="tips">#潮流行动#</p>  
261 - </div> 152 + <a href="//guang.m.yohobuy.com/info/index?id={{id}}">
  153 + <img src="{{image2 src w=360 h=224 q=60}}" />
  154 + <div class="info">
  155 + <p class="name eps-2 eps-3">{{title}}</p>
  156 + <p class="tips">#潮流行动#</p>
  157 + </div>
  158 + </a>
262 </div> 159 </div>
  160 + {{/ floorRes.haoHuo}}
263 </div> 161 </div>
  162 + {{/if}}
264 <div class="big-title"> 163 <div class="big-title">
265 人物 164 人物
266 <span class="iconfont">MORE&nbsp;&#xe604;</span> 165 <span class="iconfont">MORE&nbsp;&#xe604;</span>
@@ -317,11 +216,11 @@ @@ -317,11 +216,11 @@
317 </div> 216 </div>
318 </div> 217 </div>
319 </div> 218 </div>
320 - <div class="big-title"> 219 + <div class="big-title hide">
321 逛 220 逛
322 <span class="iconfont">MORE&nbsp;&#xe604;</span> 221 <span class="iconfont">MORE&nbsp;&#xe604;</span>
323 </div> 222 </div>
324 - <div class="guang-list"> 223 + <div class="guang-list hide">
325 <div class="guang-item"> 224 <div class="guang-item">
326 <div class="page-c"> 225 <div class="page-c">
327 <img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" /> 226 <img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" />
@@ -331,33 +230,8 @@ @@ -331,33 +230,8 @@
331 </div> 230 </div>
332 </div> 231 </div>
333 </div> 232 </div>
334 - <div class="guang-item">  
335 - <div class="page-c">  
336 - <img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" />  
337 - <div class="info">  
338 - <p class="name eps-2">DICKIES从诞生之日起就旨在出品高品质DICKIES从诞生之日起就旨在出品高品质</p>  
339 - <p class="type">3潮流</p>  
340 - </div>  
341 - </div>  
342 - </div>  
343 </div> 233 </div>
344 - <div class="trend-list">  
345 - <div class="trend-item">  
346 - <img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" />  
347 - <p class="intro eps-2">虽然每一年说流行这个那个颜色，但是相信很多潮人穿上身的还是逃不开黑白灰，真是无趣的要...</p>  
348 - <div class="auther">  
349 - <div class="pic" style="background-image:url(http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg)"></div>  
350 - <div class="name">川本小一</div>  
351 - </div>  
352 - </div>  
353 - <div class="trend-item">  
354 - <img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" />  
355 - <p class="intro eps-2">虽然每一年说流行这个那个颜色，但是相信很多潮人穿上身的还是逃不开黑白灰，真是无趣的要...</p>  
356 - <div class="auther">  
357 - <div class="pic" style="background-image:url(http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg)"></div>  
358 - <div class="name">川本小一</div>  
359 - </div>  
360 - </div> 234 + <div class="trend-list hide">
361 <div class="trend-item"> 235 <div class="trend-item">
362 <img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" /> 236 <img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" />
363 <p class="intro eps-2">虽然每一年说流行这个那个颜色，但是相信很多潮人穿上身的还是逃不开黑白灰，真是无趣的要...</p> 237 <p class="intro eps-2">虽然每一年说流行这个那个颜色，但是相信很多潮人穿上身的还是逃不开黑白灰，真是无趣的要...</p>
@@ -51,7 +51,8 @@ class GuangNew extends Page { @@ -51,7 +51,8 @@ class GuangNew extends Page {
51 depth: 0, 51 depth: 0,
52 modifier: 1, 52 modifier: 1,
53 slideShadows: false 53 slideShadows: false
54 - } 54 + },
  55 + touchRatio: 0.01,
55 }); 56 });
56 } 57 }
57 } 58 }
@@ -68,9 +68,14 @@ html { @@ -68,9 +68,14 @@ html {
68 68
69 .swiper-top { 69 .swiper-top {
70 width: 750px; 70 width: 750px;
71 - height: 469px; 71 + height: 322px;
72 margin-bottom: 20px; 72 margin-bottom: 20px;
73 73
  74 + img {
  75 + width: 100%;
  76 + height: 100%;
  77 + }
  78 +
74 .swiper-slide { 79 .swiper-slide {
75 width: 750px; 80 width: 750px;
76 height: 100%; 81 height: 100%;
@@ -220,7 +225,8 @@ html { @@ -220,7 +225,8 @@ html {
220 .swiper-slide-prev { 225 .swiper-slide-prev {
221 .page-c { 226 .page-c {
222 height: auto !important; 227 height: auto !important;
223 - opacity: 1 !important; 228 + opacity: 0 !important;
  229 + transition: all 1s;
224 } 230 }
225 } 231 }
226 232
@@ -230,7 +236,8 @@ html { @@ -230,7 +236,8 @@ html {
230 236
231 .page-c { 237 .page-c {
232 height: auto !important; 238 height: auto !important;
233 - opacity: 1 !important; 239 + opacity: 0 !important;
  240 + transition: all 1s;
234 } 241 }
235 } 242 }
236 243
@@ -249,7 +256,7 @@ html { @@ -249,7 +256,7 @@ html {
249 .swiper-slide { 256 .swiper-slide {
250 width: 590px; 257 width: 590px;
251 height: 100%; 258 height: 100%;
252 - margin-right: 30px; 259 + margin: 0 15px;
253 260
254 img { 261 img {
255 width: 590px; 262 width: 590px;