张泽世 / yohobuywap-node · Commits

Go to a project

Authored by yyq
Commit 75b73383620d482f6e50f12f3f264b68a5b8aec6 1 parent 06bbb2cb

商品咨询

Inline Side-by-side
Showing 5 changed files with 324 additions and 138 deletions
... ... @@ -11,6 +11,7 @@ const headerModel = require('../../../doraemon/models/header'); // 头部model
const detail = require(`${mRoot}/detail`); // 商品详情 model
const intro = require(`${mRoot}/intro`); // 商品尺码信息 model
const preference = require(`${mRoot}/preference`); // 商品偏好 model
const ccModel = require(`${mRoot}/consult-comment`); // 商品评论咨询 model
const _ = require('lodash');
/**
... ... @@ -61,6 +62,14 @@ exports.intro = (req, res) => {
});
};
exports.consults = (req, res, next) => {
ccModel.consults(req.query).then((result) => {
res.render('detail/consults', Object.assign({
pageFooter: true
}, result));
}).catch(next);
};
/**
* 为你优选
* @param {[type]} req [description]
... ...
/**
* 商品详情相关models
* @author: yyq<yanqing.yang@yoho.cn>
* @date: 2016/6/27
*/
'use strict';
const api = global.yoho.API;
const helpers = global.yoho.helpers;
const headerModel = require('../../../doraemon/models/header'); // 头部model
const _ = require('lodash');
const _getCommonConsult = () => {
let params = {
method: 'app.consult.common'
};
return api.get('', params, {
code: 200
}).then(result => {
let data = {};
if (result.data) {
data.faq = result.data;
}
return data;
});
};
const _formatConsultsList = (data) => {
let list = [];
if (data.length) {
_.forEach(data, (value) => {
list.push({
question: value.ask,
time: value.ask_time,
answer: value.answer,
id: value.id,
isLike: value.is_like === 'Y',
like: _.toNumber(value.like),
isUseful: value.is_useful === 'Y',
useful: _.toNumber(value.useful)
});
});
}
return list;
};
const _getConsults = (id, page, limit) => {
let params = {
method: 'app.consult.li',
product_id: id,
page: page ? page : 1,
limit: limit ? limit : 10
};
return api.get('', params, {
code: 200
}).then(result => {
let data = {};
if (result.data && result.data.list) {
Object.assign(data, {
list: _formatConsultsList(result.data.list),
pageTotal: result.data.page_total,
total: result.data.total
});
}
return data;
});
};
let consults = (params) => {
let title = '购买咨询';
return api.all([
headerModel.setNav({
navTitle: title
}),
_getCommonConsult(),
_getConsults(params.product_id, 1, 10)
]).then(result => {
let data = {
pageHeader: result[0],
link: helpers.urlFormat('/product/detail/consultform', {
product_id: params.product_id
})
};
Object.assign(data, result[1]);
if (result[2].list && result[2].list.length) {
if (result[2].total) {
data.pageHeader.navTitle += `（${result[2].total}）`;
}
data.consults = result[2].list;
}
return data;
});
};
module.exports = {
consults // 商品详情相关-购买咨询
};
... ...
... ... @@ -24,6 +24,8 @@ const outlet = require(`${cRoot}/outlet`);
router.get(/\/pro_([\d]+)_([\d]+)\/(.*)/, detail.index);
router.get('/detail/intro/:productskn', detail.intro);
router.get('/detail/preference', detail.preference);
router.get('/detail/consults', detail.consults);
router.get('/detail/comments', detail.preference);
router.get('/sale', sale.index);
router.get('/sale/discount', sale.discount);
... ...
<div class="goods-consults-page yoho-page">
<div class="goto-consult tap-hightlight" id="goto-consult" data-href="{{link}}">
<i class="iconfont consult-logo">&#xe643;</i>
<span>我要咨询</span>
<a href="{{link}}" class="iconfont enter-consult-page">&#xe604;</a>
</div>
<div class="goods-consults customer-consults" id="goods-consults">
{{# consults}}
<div class="consult-item hide" data-id="{{id}}">
<div class="question">
<span class="iconfont">&#xe644;</span>
<p>
{{question}}<br>
<span class="time">{{time}}</span>
</p>
</div>
<div class="answer">
<span class="iconfont">&#xe642;</span>
<p>{{answer}}</p>
</div>
<ul class="operation">
<li class="fav {{#if isLike}}highlight{{/if}}">
<i class="iconfont ">&#xe601;</i>
赞
<i class="count">{{#if like}}{{like}}{{/if}}</i>
<span class="animate-count">+1</span>
</li>
<li class="useful {{#if isUseful}}highlight{{/if}}">
<i class="iconfont ">&#xe605;</i>
有用
<i class="count">{{#if useful}}{{useful}}{{/if}}</i>
<span class="animate-count">+1</span>
</li>
</ul>
</div>
{{/ consults}}
</div>
{{#showReadMore}}
<a href="javascript:;" id="readmore" class="readmore tap-hightlight" >查看更多 <i class="iconfont">&#xe604;</i></a>
{{/showReadMore}}
{{#if faq}}
<h1 class="faq-title">
常见问题
</h1>
<div class="goods-consults" style="margin-top:0">
{{# faq}}
<div class="faq-item">
<div class="question">
<span class="iconfont">&#xe644;</span>
<p>
{{question}}
</p>
</div>
<div class="answer">
<span class="iconfont">&#xe642;</span>
<p>{{answer}}</p>
</div>
</div>
{{/ faq}}
</div>
{{/if}}
</div>
\ No newline at end of file
... ...
@define-mixin consult-item {
margin-top: 30px;
padding: 20px 28px;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
background-color: #fff;
border-bottom: 1px solid $borderC;
border-top: 1px solid $borderC;
.question {
color: $mainFontC;
font-size: 24px;
color: $mainFontC;
span {
& > span {
display: block;
float: left;
padding-right: 15px;
}
p {
overflow: hidden;
padding-bottom: 15px;
border-bottom: 1px solid $borderC;
}
}
.time {
color: $subFontC;
font-size: 22px;
color: $subFontC;
}
.answer {
margin-top: 14px;
color: $subFontC;
font-size: 24px;
line-height: 36px;
color: $subFontC;
margin-top: 14px;
span {
display: block;
float: left;
padding-right: 15px;
color: $mainFontC;
padding-right: 15px;
}
p {
... ... @@ -46,38 +45,37 @@
}
.operation {
position: relative;
right: 12%;
margin-top: 20px;
width: 120%;
height: 60px;
border-top: 1px solid #e0e0e0;
line-height: 80px;
position: relative;
right: 12%;
border-top: 1px solid #e0e0e0;
margin-top: 20px;
li {
position: relative;
float: left;
width: 50%;
color: $subFontC;
text-align: center;
font-size: 28px;
&.highlight {
color: $basicBtnC;
}
font-size: 28px;
float: left;
width: 50%;
text-align: center;
color: $subFontC;
.iconfont {
display: inline-block;
padding-right: 5PX;
font-size: inherit;
}
position: relative;
.animate-count {
display: none;
position: absolute;
top: 0;
z-index: 5;
display: none;
font-size: 20px;
z-index: 5;
}
i.count {
... ... @@ -102,18 +100,18 @@
.goods-comments-page {
.goods-comments {
.comment-item {
padding: 0 28px;
border-bottom: 1px solid $borderC;
padding: 0 28px;
.user-name {
display: inline-block;
overflow: hidden;
float: left;
max-width: 9rem;
color: $mainFontC;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 24px;
line-height: 62px;
color: $mainFontC;
}
.goods-spec,
... ... @@ -123,9 +121,9 @@
}
.detail-content {
color: $mainFontC;
font-size: 24px;
line-height: 62px;
color: $mainFontC;
}
.goods-spec,
... ... @@ -157,20 +155,20 @@
.goto-consult {
position: fixed;
top: 2.25rem;
z-index: 10;
width: 100%;
box-sizing: border-box;
padding: 0 28px;
width: 100%;
height: 120px;
border-bottom: 1px solid $borderC;
background-color: #fff;
border-bottom: 1px solid $borderC;
z-index: 10;
i,
span,
a {
color: $mainFontC;
font-size: 28px;
line-height: 120px;
font-size: 28px;
color: $mainFontC;
}
.consult-logo {
... ... @@ -184,36 +182,31 @@
}
.goods-consults.customer-consults {
.consult-item:nth-child(1) {
display: block;
}
.consult-item:nth-child(2) {
display: block;
}
.consult-item {
display: none;
@mixin consult-item ;
margin-top: 0;
margin-bottom: 15px;
}
}
.goods-consults {
@mixin consult-item ;
overflow: hidden;
margin-top: 5.25rem;
overflow: hidden;
padding: 0;
background: none;
}
.readmore {
display: block;
margin-top: 30px;
height: 88px;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
line-height: 88px;
background-color: #fff;
color: $subFontC;
text-align: center;
color: $subFontC;
margin-top: 30px;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
font-size: 28px;
line-height: 88px;
i {
font-size: inherit;
... ... @@ -222,15 +215,15 @@
.faq-title {
height: 88px;
line-height: 88px;
text-align: center;
font-size: 32px;
line-height: 88px;
}
.goods-consults .faq-item {
@mixin consult-item ;
margin-top: 0;
margin-bottom: 30px;
margin-bottom: 15px;
.answer {
border-bottom: none;
... ... @@ -244,70 +237,73 @@
textarea {
box-sizing: border-box;
padding: 10px;
width: 100%;
height: 400px;
color: $mainFontC;
font-size: 28px;
padding: 10px;
color: $mainFontC;
}
a {
display: inline-block;
margin-top: 20px;
width: 360px;
height: 80px;
background-color: #444;
width: 360px;
color: #fff;
text-align: center;
background-color: #444;
font-size: 40px;
line-height: 80px;
text-align: center;
margin-top: 20px;
}
}
.good-detail-page .feedback-list {
margin-bottom: 30px;
padding-top: 30px;
background-color: #f0f0f0;
.nav-tab {
padding: 10px 0;
width: 100%;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
background-color: #fff;
}
.good-detail-page {
.feedback-list {
padding-top: 30px;
margin-bottom: 30px;
background-color: #f0f0f0;
.nav-tab {
width: 100%;
height: 60px;
padding: 10px 0;
background-color: #fff;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
}
.comment-nav,
.consult-nav {
float: left;
box-sizing: border-box;
width: 50%;
height: 60px;
color: $subFontC;
text-align: center;
font-size: 28px;
line-height: 60px;
.comment-nav,
.consult-nav {
box-sizing: border-box;
float: left;
width: 50%;
height: 60px;
line-height: 60px;
font-size: 28px;
text-align: center;
color: $subFontC;
&.focus {
color: #000;
&.focus {
color: #000;
}
}
}
.comment-nav {
border-right: 1px solid #ccc;
}
.comment-nav {
border-right: 1px solid #ccc;
}
.content .content-main {
border-bottom: 1px solid $borderC;
background-color: #fff;
.content-main {
background-color: #fff;
border-bottom: 1px solid $borderC;
}
&.comment-content-main {
.content-main.comment-content-main {
.user-name {
padding-right: 18px;
padding-left: 28px;
color: $mainFontC;
font-size: 24px;
line-height: 62px;
color: $mainFontC;
padding-left: 28px;
padding-right: 18px;
}
.goods-spec,
... ... @@ -317,11 +313,11 @@
}
.detail-content {
padding-right: 18px;
padding-left: 28px;
color: $mainFontC;
font-size: 24px;
line-height: 62px;
color: $mainFontC;
padding-left: 28px;
padding-right: 18px;
}
.goods-spec,
... ... @@ -359,21 +355,21 @@
}
}
&.consult-content-main {
padding-top: 20px;
.content-main.consult-content-main {
padding-right: 28px;
padding-bottom: 20px;
padding-left: 28px;
padding-top: 20px;
padding-bottom: 20px;
.question {
color: $mainFontC;
font-size: 24px;
color: $mainFontC;
span {
display: block;
float: left;
padding-right: 15px;
font-size: inherit;
padding-right: 15px;
}
p {
... ... @@ -382,22 +378,22 @@
}
.time {
color: $subFontC;
font-size: 22px;
color: $subFontC;
}
.answer {
margin-top: 14px;
color: $subFontC;
font-size: 24px;
line-height: 36px;
color: $subFontC;
margin-top: 14px;
span {
display: block;
float: left;
padding-right: 15px;
color: $mainFontC;
font-size: inherit;
color: $mainFontC;
padding-right: 15px;
}
p {
... ... @@ -406,56 +402,56 @@
}
}
&.no-item {
.content-main.no-item {
height: 200px;
line-height: 200px;
color: #e0e0e0;
text-align: center;
font-size: 16PX;
line-height: 200px;
text-align: center;
span {
display: inline-block;
padding-right: 5PX;
font-size: 16PX;
padding-right: 5PX;
}
}
}
.comment-content-footer,
.consult-content-footer {
display: block;
min-height: 88px;
border-bottom: 1px solid $borderC;
background-color: #fff;
color: #b0b0b0;
text-align: center;
font-size: 28px;
line-height: 88px;
.comment-content-footer,
.consult-content-footer {
display: block;
min-height: 88px;
text-align: center;
background-color: #fff;
border-bottom: 1px solid $borderC;
line-height: 88px;
font-size: 28px;
color: #b0b0b0;
.iconfont {
font-size: inherit;
.iconfont {
font-size: inherit;
}
}
}
.content.hide {
display: none;
}
.content.hide {
display: none;
}
.nodata {
padding: 0 28px;
height: 88px;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
background-color: #fff;
font-size: 28px;
line-height: 88px;
.nodata {
height: 88px;
font-size: 28px;
line-height: 88px;
background-color: #fff;
padding: 0 28px;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
.go-consult {
float: right;
color: $subFontC;
.go-consult {
float: right;
color: $subFontC;
span {
font-size: 28px;
span {
font-size: 28px;
}
}
}
}
... ...