Authored by yyq

商品咨询

@@ -11,6 +11,7 @@ const headerModel = require('../../../doraemon/models/header'); // 头部model @@ -11,6 +11,7 @@ const headerModel = require('../../../doraemon/models/header'); // 头部model
11 const detail = require(`${mRoot}/detail`); // 商品详情 model 11 const detail = require(`${mRoot}/detail`); // 商品详情 model
12 const intro = require(`${mRoot}/intro`); // 商品尺码信息 model 12 const intro = require(`${mRoot}/intro`); // 商品尺码信息 model
13 const preference = require(`${mRoot}/preference`); // 商品偏好 model 13 const preference = require(`${mRoot}/preference`); // 商品偏好 model
  14 +const ccModel = require(`${mRoot}/consult-comment`); // 商品评论咨询 model
14 const _ = require('lodash'); 15 const _ = require('lodash');
15 16
16 /** 17 /**
@@ -61,6 +62,14 @@ exports.intro = (req, res) => { @@ -61,6 +62,14 @@ exports.intro = (req, res) => {
61 }); 62 });
62 }; 63 };
63 64
  65 +exports.consults = (req, res, next) => {
  66 + ccModel.consults(req.query).then((result) => {
  67 + res.render('detail/consults', Object.assign({
  68 + pageFooter: true
  69 + }, result));
  70 + }).catch(next);
  71 +};
  72 +
64 /** 73 /**
65 * 为你优选 74 * 为你优选
66 * @param {[type]} req [description] 75 * @param {[type]} req [description]
  1 +/**
  2 + * 商品详情相关models
  3 + * @author: yyq<yanqing.yang@yoho.cn>
  4 + * @date: 2016/6/27
  5 + */
  6 +
  7 +'use strict';
  8 +
  9 +const api = global.yoho.API;
  10 +const helpers = global.yoho.helpers;
  11 +const headerModel = require('../../../doraemon/models/header'); // 头部model
  12 +const _ = require('lodash');
  13 +
  14 +const _getCommonConsult = () => {
  15 + let params = {
  16 + method: 'app.consult.common'
  17 + };
  18 +
  19 + return api.get('', params, {
  20 + code: 200
  21 + }).then(result => {
  22 + let data = {};
  23 +
  24 + if (result.data) {
  25 + data.faq = result.data;
  26 + }
  27 +
  28 + return data;
  29 + });
  30 +};
  31 +
  32 +const _formatConsultsList = (data) => {
  33 + let list = [];
  34 +
  35 + if (data.length) {
  36 + _.forEach(data, (value) => {
  37 + list.push({
  38 + question: value.ask,
  39 + time: value.ask_time,
  40 + answer: value.answer,
  41 + id: value.id,
  42 + isLike: value.is_like === 'Y',
  43 + like: _.toNumber(value.like),
  44 + isUseful: value.is_useful === 'Y',
  45 + useful: _.toNumber(value.useful)
  46 + });
  47 + });
  48 + }
  49 +
  50 + return list;
  51 +};
  52 +
  53 +const _getConsults = (id, page, limit) => {
  54 + let params = {
  55 + method: 'app.consult.li',
  56 + product_id: id,
  57 + page: page ? page : 1,
  58 + limit: limit ? limit : 10
  59 + };
  60 +
  61 + return api.get('', params, {
  62 + code: 200
  63 + }).then(result => {
  64 + let data = {};
  65 +
  66 + if (result.data && result.data.list) {
  67 + Object.assign(data, {
  68 + list: _formatConsultsList(result.data.list),
  69 + pageTotal: result.data.page_total,
  70 + total: result.data.total
  71 + });
  72 + }
  73 +
  74 + return data;
  75 + });
  76 +};
  77 +
  78 +let consults = (params) => {
  79 + let title = '购买咨询';
  80 +
  81 + return api.all([
  82 + headerModel.setNav({
  83 + navTitle: title
  84 + }),
  85 + _getCommonConsult(),
  86 + _getConsults(params.product_id, 1, 10)
  87 + ]).then(result => {
  88 + let data = {
  89 + pageHeader: result[0],
  90 + link: helpers.urlFormat('/product/detail/consultform', {
  91 + product_id: params.product_id
  92 + })
  93 + };
  94 +
  95 + Object.assign(data, result[1]);
  96 +
  97 + if (result[2].list && result[2].list.length) {
  98 + if (result[2].total) {
  99 + data.pageHeader.navTitle += `(${result[2].total})`;
  100 + }
  101 + data.consults = result[2].list;
  102 + }
  103 +
  104 + return data;
  105 + });
  106 +};
  107 +
  108 +module.exports = {
  109 + consults // 商品详情相关-购买咨询
  110 +};
@@ -24,6 +24,8 @@ const outlet = require(`${cRoot}/outlet`); @@ -24,6 +24,8 @@ const outlet = require(`${cRoot}/outlet`);
24 router.get(/\/pro_([\d]+)_([\d]+)\/(.*)/, detail.index); 24 router.get(/\/pro_([\d]+)_([\d]+)\/(.*)/, detail.index);
25 router.get('/detail/intro/:productskn', detail.intro); 25 router.get('/detail/intro/:productskn', detail.intro);
26 router.get('/detail/preference', detail.preference); 26 router.get('/detail/preference', detail.preference);
  27 +router.get('/detail/consults', detail.consults);
  28 +router.get('/detail/comments', detail.preference);
27 29
28 router.get('/sale', sale.index); 30 router.get('/sale', sale.index);
29 router.get('/sale/discount', sale.discount); 31 router.get('/sale/discount', sale.discount);
  1 +<div class="goods-consults-page yoho-page">
  2 + <div class="goto-consult tap-hightlight" id="goto-consult" data-href="{{link}}">
  3 + <i class="iconfont consult-logo">&#xe643;</i>
  4 + <span>我要咨询</span>
  5 + <a href="{{link}}" class="iconfont enter-consult-page">&#xe604;</a>
  6 + </div>
  7 +
  8 + <div class="goods-consults customer-consults" id="goods-consults">
  9 + {{# consults}}
  10 + <div class="consult-item hide" data-id="{{id}}">
  11 + <div class="question">
  12 + <span class="iconfont">&#xe644;</span>
  13 + <p>
  14 + {{question}}<br>
  15 + <span class="time">{{time}}</span>
  16 + </p>
  17 + </div>
  18 +
  19 + <div class="answer">
  20 + <span class="iconfont">&#xe642;</span>
  21 + <p>{{answer}}</p>
  22 + </div>
  23 +
  24 + <ul class="operation">
  25 + <li class="fav {{#if isLike}}highlight{{/if}}">
  26 + <i class="iconfont ">&#xe601;</i>
  27 +
  28 + <i class="count">{{#if like}}{{like}}{{/if}}</i>
  29 + <span class="animate-count">+1</span>
  30 + </li>
  31 +
  32 + <li class="useful {{#if isUseful}}highlight{{/if}}">
  33 + <i class="iconfont ">&#xe605;</i>
  34 + 有用
  35 + <i class="count">{{#if useful}}{{useful}}{{/if}}</i>
  36 + <span class="animate-count">+1</span>
  37 + </li>
  38 + </ul>
  39 + </div>
  40 + {{/ consults}}
  41 + </div>
  42 +
  43 + {{#showReadMore}}
  44 + <a href="javascript:;" id="readmore" class="readmore tap-hightlight" >查看更多 <i class="iconfont">&#xe604;</i></a>
  45 + {{/showReadMore}}
  46 +
  47 + {{#if faq}}
  48 + <h1 class="faq-title">
  49 + 常见问题
  50 + </h1>
  51 + <div class="goods-consults" style="margin-top:0">
  52 + {{# faq}}
  53 + <div class="faq-item">
  54 + <div class="question">
  55 + <span class="iconfont">&#xe644;</span>
  56 + <p>
  57 + {{question}}
  58 + </p>
  59 + </div>
  60 +
  61 + <div class="answer">
  62 + <span class="iconfont">&#xe642;</span>
  63 + <p>{{answer}}</p>
  64 + </div>
  65 + </div>
  66 + {{/ faq}}
  67 + </div>
  68 + {{/if}}
  69 +</div>
1 @define-mixin consult-item { 1 @define-mixin consult-item {
2 margin-top: 30px; 2 margin-top: 30px;
3 padding: 20px 28px; 3 padding: 20px 28px;
4 - border-top: 1px solid $borderC;  
5 - border-bottom: 1px solid $borderC;  
6 background-color: #fff; 4 background-color: #fff;
  5 + border-bottom: 1px solid $borderC;
  6 + border-top: 1px solid $borderC;
7 7
8 .question { 8 .question {
9 - color: $mainFontC;  
10 font-size: 24px; 9 font-size: 24px;
  10 + color: $mainFontC;
11 11
12 - span { 12 + & > span {
13 display: block; 13 display: block;
14 float: left; 14 float: left;
15 padding-right: 15px; 15 padding-right: 15px;
16 } 16 }
17 17
18 p { 18 p {
19 - overflow: hidden;  
20 padding-bottom: 15px; 19 padding-bottom: 15px;
21 border-bottom: 1px solid $borderC; 20 border-bottom: 1px solid $borderC;
22 } 21 }
23 } 22 }
24 23
25 .time { 24 .time {
26 - color: $subFontC;  
27 font-size: 22px; 25 font-size: 22px;
  26 + color: $subFontC;
28 } 27 }
29 28
30 .answer { 29 .answer {
31 - margin-top: 14px;  
32 - color: $subFontC;  
33 font-size: 24px; 30 font-size: 24px;
34 line-height: 36px; 31 line-height: 36px;
  32 + color: $subFontC;
  33 + margin-top: 14px;
35 34
36 span { 35 span {
37 display: block; 36 display: block;
38 float: left; 37 float: left;
39 - padding-right: 15px;  
40 color: $mainFontC; 38 color: $mainFontC;
  39 + padding-right: 15px;
41 } 40 }
42 41
43 p { 42 p {
@@ -46,38 +45,37 @@ @@ -46,38 +45,37 @@
46 } 45 }
47 46
48 .operation { 47 .operation {
49 - position: relative;  
50 - right: 12%;  
51 - margin-top: 20px;  
52 width: 120%; 48 width: 120%;
53 height: 60px; 49 height: 60px;
54 - border-top: 1px solid #e0e0e0;  
55 line-height: 80px; 50 line-height: 80px;
  51 + position: relative;
  52 + right: 12%;
  53 + border-top: 1px solid #e0e0e0;
  54 + margin-top: 20px;
56 55
57 li { 56 li {
58 - position: relative;  
59 - float: left;  
60 - width: 50%;  
61 - color: $subFontC;  
62 - text-align: center;  
63 - font-size: 28px;  
64 -  
65 &.highlight { 57 &.highlight {
66 color: $basicBtnC; 58 color: $basicBtnC;
67 } 59 }
  60 + font-size: 28px;
  61 + float: left;
  62 + width: 50%;
  63 + text-align: center;
  64 + color: $subFontC;
68 65
69 .iconfont { 66 .iconfont {
70 display: inline-block; 67 display: inline-block;
71 padding-right: 5PX; 68 padding-right: 5PX;
72 font-size: inherit; 69 font-size: inherit;
73 } 70 }
  71 + position: relative;
74 72
75 .animate-count { 73 .animate-count {
  74 + display: none;
76 position: absolute; 75 position: absolute;
77 top: 0; 76 top: 0;
78 - z-index: 5;  
79 - display: none;  
80 font-size: 20px; 77 font-size: 20px;
  78 + z-index: 5;
81 } 79 }
82 80
83 i.count { 81 i.count {
@@ -102,18 +100,18 @@ @@ -102,18 +100,18 @@
102 .goods-comments-page { 100 .goods-comments-page {
103 .goods-comments { 101 .goods-comments {
104 .comment-item { 102 .comment-item {
105 - padding: 0 28px;  
106 border-bottom: 1px solid $borderC; 103 border-bottom: 1px solid $borderC;
  104 + padding: 0 28px;
107 105
108 .user-name { 106 .user-name {
109 - display: inline-block;  
110 - overflow: hidden; 107 + float: left;
111 max-width: 9rem; 108 max-width: 9rem;
112 - color: $mainFontC; 109 + overflow: hidden;
113 text-overflow: ellipsis; 110 text-overflow: ellipsis;
114 white-space: nowrap; 111 white-space: nowrap;
115 font-size: 24px; 112 font-size: 24px;
116 line-height: 62px; 113 line-height: 62px;
  114 + color: $mainFontC;
117 } 115 }
118 116
119 .goods-spec, 117 .goods-spec,
@@ -123,9 +121,9 @@ @@ -123,9 +121,9 @@
123 } 121 }
124 122
125 .detail-content { 123 .detail-content {
126 - color: $mainFontC;  
127 font-size: 24px; 124 font-size: 24px;
128 line-height: 62px; 125 line-height: 62px;
  126 + color: $mainFontC;
129 } 127 }
130 128
131 .goods-spec, 129 .goods-spec,
@@ -157,20 +155,20 @@ @@ -157,20 +155,20 @@
157 .goto-consult { 155 .goto-consult {
158 position: fixed; 156 position: fixed;
159 top: 2.25rem; 157 top: 2.25rem;
160 - z-index: 10; 158 + width: 100%;
161 box-sizing: border-box; 159 box-sizing: border-box;
162 padding: 0 28px; 160 padding: 0 28px;
163 - width: 100%;  
164 height: 120px; 161 height: 120px;
165 - border-bottom: 1px solid $borderC;  
166 background-color: #fff; 162 background-color: #fff;
  163 + border-bottom: 1px solid $borderC;
  164 + z-index: 10;
167 165
168 i, 166 i,
169 span, 167 span,
170 a { 168 a {
171 - color: $mainFontC;  
172 - font-size: 28px;  
173 line-height: 120px; 169 line-height: 120px;
  170 + font-size: 28px;
  171 + color: $mainFontC;
174 } 172 }
175 173
176 .consult-logo { 174 .consult-logo {
@@ -184,36 +182,31 @@ @@ -184,36 +182,31 @@
184 } 182 }
185 183
186 .goods-consults.customer-consults { 184 .goods-consults.customer-consults {
187 - .consult-item:nth-child(1) {  
188 - display: block;  
189 - }  
190 -  
191 - .consult-item:nth-child(2) {  
192 - display: block;  
193 - }  
194 -  
195 .consult-item { 185 .consult-item {
196 - display: none; 186 + @mixin consult-item ;
  187 + margin-top: 0;
  188 + margin-bottom: 15px;
197 } 189 }
198 } 190 }
199 191
200 .goods-consults { 192 .goods-consults {
201 - @mixin consult-item ;  
202 - overflow: hidden;  
203 margin-top: 5.25rem; 193 margin-top: 5.25rem;
  194 + overflow: hidden;
  195 + padding: 0;
  196 + background: none;
204 } 197 }
205 198
206 .readmore { 199 .readmore {
207 display: block; 200 display: block;
208 - margin-top: 30px;  
209 height: 88px; 201 height: 88px;
210 - border-top: 1px solid $borderC;  
211 - border-bottom: 1px solid $borderC; 202 + line-height: 88px;
212 background-color: #fff; 203 background-color: #fff;
213 - color: $subFontC;  
214 text-align: center; 204 text-align: center;
  205 + color: $subFontC;
  206 + margin-top: 30px;
  207 + border-top: 1px solid $borderC;
  208 + border-bottom: 1px solid $borderC;
215 font-size: 28px; 209 font-size: 28px;
216 - line-height: 88px;  
217 210
218 i { 211 i {
219 font-size: inherit; 212 font-size: inherit;
@@ -222,15 +215,15 @@ @@ -222,15 +215,15 @@
222 215
223 .faq-title { 216 .faq-title {
224 height: 88px; 217 height: 88px;
  218 + line-height: 88px;
225 text-align: center; 219 text-align: center;
226 font-size: 32px; 220 font-size: 32px;
227 - line-height: 88px;  
228 } 221 }
229 222
230 .goods-consults .faq-item { 223 .goods-consults .faq-item {
231 @mixin consult-item ; 224 @mixin consult-item ;
232 margin-top: 0; 225 margin-top: 0;
233 - margin-bottom: 30px; 226 + margin-bottom: 15px;
234 227
235 .answer { 228 .answer {
236 border-bottom: none; 229 border-bottom: none;
@@ -244,70 +237,73 @@ @@ -244,70 +237,73 @@
244 237
245 textarea { 238 textarea {
246 box-sizing: border-box; 239 box-sizing: border-box;
247 - padding: 10px;  
248 width: 100%; 240 width: 100%;
249 height: 400px; 241 height: 400px;
250 - color: $mainFontC;  
251 font-size: 28px; 242 font-size: 28px;
  243 + padding: 10px;
  244 + color: $mainFontC;
252 } 245 }
253 246
254 a { 247 a {
255 display: inline-block; 248 display: inline-block;
256 - margin-top: 20px;  
257 - width: 360px;  
258 height: 80px; 249 height: 80px;
259 - background-color: #444; 250 + width: 360px;
260 color: #fff; 251 color: #fff;
261 - text-align: center; 252 + background-color: #444;
262 font-size: 40px; 253 font-size: 40px;
263 line-height: 80px; 254 line-height: 80px;
  255 + text-align: center;
  256 + margin-top: 20px;
264 } 257 }
265 } 258 }
266 259
267 -.good-detail-page .feedback-list {  
268 - margin-bottom: 30px;  
269 - padding-top: 30px;  
270 - background-color: #f0f0f0;  
271 -  
272 - .nav-tab {  
273 - padding: 10px 0;  
274 - width: 100%;  
275 - border-top: 1px solid $borderC;  
276 - border-bottom: 1px solid $borderC;  
277 - background-color: #fff;  
278 - } 260 +.good-detail-page {
  261 + .feedback-list {
  262 + padding-top: 30px;
  263 + margin-bottom: 30px;
  264 + background-color: #f0f0f0;
  265 +
  266 + .nav-tab {
  267 + width: 100%;
  268 + height: 60px;
  269 + padding: 10px 0;
  270 + background-color: #fff;
  271 + border-top: 1px solid $borderC;
  272 + border-bottom: 1px solid $borderC;
  273 + }
279 274
280 - .comment-nav,  
281 - .consult-nav {  
282 - float: left;  
283 - box-sizing: border-box;  
284 - width: 50%;  
285 - height: 60px;  
286 - color: $subFontC;  
287 - text-align: center;  
288 - font-size: 28px;  
289 - line-height: 60px; 275 + .comment-nav,
  276 + .consult-nav {
  277 + box-sizing: border-box;
  278 + float: left;
  279 + width: 50%;
  280 + height: 60px;
  281 + line-height: 60px;
  282 + font-size: 28px;
  283 + text-align: center;
  284 + color: $subFontC;
290 285
291 - &.focus {  
292 - color: #000; 286 + &.focus {
  287 + color: #000;
  288 + }
293 } 289 }
294 - }  
295 290
296 - .comment-nav {  
297 - border-right: 1px solid #ccc;  
298 - } 291 + .comment-nav {
  292 + border-right: 1px solid #ccc;
  293 + }
299 294
300 - .content .content-main {  
301 - border-bottom: 1px solid $borderC;  
302 - background-color: #fff; 295 + .content-main {
  296 + background-color: #fff;
  297 + border-bottom: 1px solid $borderC;
  298 + }
303 299
304 - &.comment-content-main { 300 + .content-main.comment-content-main {
305 .user-name { 301 .user-name {
306 - padding-right: 18px;  
307 - padding-left: 28px;  
308 - color: $mainFontC;  
309 font-size: 24px; 302 font-size: 24px;
310 line-height: 62px; 303 line-height: 62px;
  304 + color: $mainFontC;
  305 + padding-left: 28px;
  306 + padding-right: 18px;
311 } 307 }
312 308
313 .goods-spec, 309 .goods-spec,
@@ -317,11 +313,11 @@ @@ -317,11 +313,11 @@
317 } 313 }
318 314
319 .detail-content { 315 .detail-content {
320 - padding-right: 18px;  
321 - padding-left: 28px;  
322 - color: $mainFontC;  
323 font-size: 24px; 316 font-size: 24px;
324 line-height: 62px; 317 line-height: 62px;
  318 + color: $mainFontC;
  319 + padding-left: 28px;
  320 + padding-right: 18px;
325 } 321 }
326 322
327 .goods-spec, 323 .goods-spec,
@@ -359,21 +355,21 @@ @@ -359,21 +355,21 @@
359 } 355 }
360 } 356 }
361 357
362 - &.consult-content-main {  
363 - padding-top: 20px; 358 + .content-main.consult-content-main {
364 padding-right: 28px; 359 padding-right: 28px;
365 - padding-bottom: 20px;  
366 padding-left: 28px; 360 padding-left: 28px;
  361 + padding-top: 20px;
  362 + padding-bottom: 20px;
367 363
368 .question { 364 .question {
369 - color: $mainFontC;  
370 font-size: 24px; 365 font-size: 24px;
  366 + color: $mainFontC;
371 367
372 span { 368 span {
373 display: block; 369 display: block;
374 float: left; 370 float: left;
375 - padding-right: 15px;  
376 font-size: inherit; 371 font-size: inherit;
  372 + padding-right: 15px;
377 } 373 }
378 374
379 p { 375 p {
@@ -382,22 +378,22 @@ @@ -382,22 +378,22 @@
382 } 378 }
383 379
384 .time { 380 .time {
385 - color: $subFontC;  
386 font-size: 22px; 381 font-size: 22px;
  382 + color: $subFontC;
387 } 383 }
388 384
389 .answer { 385 .answer {
390 - margin-top: 14px;  
391 - color: $subFontC;  
392 font-size: 24px; 386 font-size: 24px;
393 line-height: 36px; 387 line-height: 36px;
  388 + color: $subFontC;
  389 + margin-top: 14px;
394 390
395 span { 391 span {
396 display: block; 392 display: block;
397 float: left; 393 float: left;
398 - padding-right: 15px;  
399 - color: $mainFontC;  
400 font-size: inherit; 394 font-size: inherit;
  395 + color: $mainFontC;
  396 + padding-right: 15px;
401 } 397 }
402 398
403 p { 399 p {
@@ -406,56 +402,56 @@ @@ -406,56 +402,56 @@
406 } 402 }
407 } 403 }
408 404
409 - &.no-item { 405 + .content-main.no-item {
410 height: 200px; 406 height: 200px;
  407 + line-height: 200px;
411 color: #e0e0e0; 408 color: #e0e0e0;
412 - text-align: center;  
413 font-size: 16PX; 409 font-size: 16PX;
414 - line-height: 200px; 410 + text-align: center;
415 411
416 span { 412 span {
417 display: inline-block; 413 display: inline-block;
418 - padding-right: 5PX;  
419 font-size: 16PX; 414 font-size: 16PX;
  415 + padding-right: 5PX;
420 } 416 }
421 } 417 }
422 - }  
423 418
424 - .comment-content-footer,  
425 - .consult-content-footer {  
426 - display: block;  
427 - min-height: 88px;  
428 - border-bottom: 1px solid $borderC;  
429 - background-color: #fff;  
430 - color: #b0b0b0;  
431 - text-align: center;  
432 - font-size: 28px;  
433 - line-height: 88px; 419 + .comment-content-footer,
  420 + .consult-content-footer {
  421 + display: block;
  422 + min-height: 88px;
  423 + text-align: center;
  424 + background-color: #fff;
  425 + border-bottom: 1px solid $borderC;
  426 + line-height: 88px;
  427 + font-size: 28px;
  428 + color: #b0b0b0;
434 429
435 - .iconfont {  
436 - font-size: inherit; 430 + .iconfont {
  431 + font-size: inherit;
  432 + }
437 } 433 }
438 - }  
439 434
440 - .content.hide {  
441 - display: none;  
442 - } 435 + .content.hide {
  436 + display: none;
  437 + }
443 438
444 - .nodata {  
445 - padding: 0 28px;  
446 - height: 88px;  
447 - border-top: 1px solid $borderC;  
448 - border-bottom: 1px solid $borderC;  
449 - background-color: #fff;  
450 - font-size: 28px;  
451 - line-height: 88px; 439 + .nodata {
  440 + height: 88px;
  441 + font-size: 28px;
  442 + line-height: 88px;
  443 + background-color: #fff;
  444 + padding: 0 28px;
  445 + border-top: 1px solid $borderC;
  446 + border-bottom: 1px solid $borderC;
452 447
453 - .go-consult {  
454 - float: right;  
455 - color: $subFontC; 448 + .go-consult {
  449 + float: right;
  450 + color: $subFontC;
456 451
457 - span {  
458 - font-size: 28px; 452 + span {
  453 + font-size: 28px;
  454 + }
459 } 455 }
460 } 456 }
461 } 457 }