fe / YOHOBUYWAP · Commits

Go to a project

Authored by Lynnic
Commit 2dbe497139996e69fc628bac321bb6dbb8127873 1 parent 009bd9cb

添加商品评论和咨询页面

Inline Side-by-side
Showing 10 changed files with 423 additions and 69 deletions
... ... @@ -138,6 +138,7 @@ a {
@import "home/index";
@import "category/index";
@import "product/index";
@import "product/comments-consults";
@import "index/index";
@import "shopping-cart/index";
@import "me/index"; //个人中心
... ...
.goods-comments-page{
.goods-comments{
.comment-item{
border: 1px solid $borderC;
padding: 0 pxToRem(28px);
.user-name{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
}
.goods-spec,
.comment-time{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
}
.goods-spec,
.comment-time{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content{
font-size: pxToRem(28px);
line-height: pxToRem(36px);
}
.goods-spec,
.detail-content{
color:$mainFontC;
}
.comment-time{
color:#c1c1c1;
}
}
}
}
.goods-consults-page{
.goto-consult{
padding: 0 pxToRem(28px);
height: pxToRem(120px);
background-color: #ffffff;
i,span{
line-height: pxToRem(120px);
font-size: pxToRem(28px);
color:$mainFontC;
}
.consult-logo{
padding-right: pxToRem(15px);
}
.enter-consult-page{
float: right;
color:$subFontC;
}
}
.goods-consults{
.consult-item{
padding: pxToRem(20px) pxToRem(28px);
background-color: #fff;
.question{
font-size: pxToRem(24px);
color:$mainFontC;
span{
display: block;
float: left;
font-size: inherit;
padding-right: pxToRem(15px);
}
p{
overflow: hidden;
padding-bottom: pxToRem(15px);
border-bottom: 1px solid $borderC;
}
}
.time{
font-size: pxToRem(22px);
color:$subFontC;
}
.answer{
font-size: pxToRem(24px);
line-height: pxToRem(36px);
color:$subFontC;
margin-top: pxToRem(14px);
span{
display: block;
float: left;
font-size: inherit;
color:$mainFontC;
padding-right: pxToRem(15px);
}
p{
overflow: hidden;
}
}
}
}
.gap-block{
min-height: 30rem/$pxConvertRem;
background-color: #f0f0f0;
}
}
.consult-form-page{
padding: pxToRem(28px);
text-align: center;
textarea{
box-sizing:border-box;
width: 100%;
height: pxToRem(400px);
font-size: pxToRem(28px);
padding:pxToRem(10px);
color:$mainFontC;
}
a{
display: inline-block;
height: pxToRem(80px);
width: pxToRem(360px);
color: #fff;
background-color: #444;
font-size: pxToRem(40px);
line-height: pxToRem(80px);
text-align: center;
margin-top: pxToRem(20px);
}
}
\ No newline at end of file
... ...
... ... @@ -252,62 +252,107 @@ overflow: hidden;
.comment-nav {
border-right: 1px solid #ccc;
}
.comment-content{
.comment-content-main{
.content{
.content-main{
background-color: #fff;
border-bottom: 1px solid $borderC;
.user-name{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
padding-left: pxToRem(28px);
padding-right: pxToRem(18px);
}
.goods-spec,
.comment-time{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content{
font-size: pxToRem(28px);
line-height: pxToRem(36px);
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
padding-left: pxToRem(28px);
padding-right: pxToRem(18px);
}
.goods-spec,
.comment-time{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content{
font-size: pxToRem(28px);
line-height: pxToRem(36px);
}
.goods-spec,
.detail-content{
color:$mainFontC;
}
.detail-content,
.comment-time{
padding-left: pxToRem(28px);
&.comment-content-main{
.user-name{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
padding-left: pxToRem(28px);
padding-right: pxToRem(18px);
}
.goods-spec,
.comment-time{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content{
// font-size: pxToRem(28px);
// line-height: pxToRem(36px);
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
padding-left: pxToRem(28px);
padding-right: pxToRem(18px);
}
.goods-spec,
.comment-time{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content{
font-size: pxToRem(28px);
line-height: pxToRem(36px);
}
.goods-spec,
.detail-content{
color:$mainFontC;
}
.detail-content,
.comment-time{
padding-left: pxToRem(28px);
}
.detail-content{
padding-right: pxToRem(28px);
padding-left: pxToRem(28px);
}
.detail-content{
padding-right: pxToRem(28px);
}
.comment-time{
color:#c1c1c1;
}
}
.detail-content{
padding-right: pxToRem(28px);
padding-left: pxToRem(28px);
}
.detail-content{
padding-right: pxToRem(28px);
}
.comment-time{
color:#c1c1c1;
&.consult-content-main{
padding-right: pxToRem(28px);
padding-left: pxToRem(28px);
padding-top: pxToRem(20px);
padding-bottom: pxToRem(20px);
.question{
font-size: pxToRem(24px);
color:$mainFontC;
span{
display: block;
float: left;
font-size: inherit;
padding-right: pxToRem(15px);
}
p{
overflow: hidden;
}
}
.time{
font-size: pxToRem(22px);
color:$subFontC;
}
.answer{
font-size: pxToRem(24px);
line-height: pxToRem(36px);
color:$subFontC;
margin-top: pxToRem(14px);
span{
display: block;
float: left;
font-size: inherit;
color:$mainFontC;
padding-right: pxToRem(15px);
}
p{
overflow: hidden;
}
}
}
}
.comment-content-footer{
}
.comment-content-footer,
.consult-content-footer{
min-height: pxToRem(88px);
text-align: center;
... ... @@ -322,9 +367,7 @@ overflow: hidden;
.iconfont{
font-size: inherit;
}
}
}
}
}
... ...
{{> layout/header}}
<div class="goods-comments-page yoho-page">
{{#comments}}
<div class="goods-comments">
{{#list}}
<div class="comment-item">
<span class="user-name">
{{userName}}
</span>
<span class="goods-spec">
{{desc}}
</span>
<p class="detail-content">
{{content}}
</p>
<span class="comment-time">
{{time}}
</span>
</div>
{{/list}}
</div>
{{/comments}}
</div>
{{> layout/footer}}
... ...
{{> layout/header}}
<div class="consult-form-page">
<form class="consult-form">
<textarea>这款衣服有WS吗？</textarea>
<a href="" type="submit">提交</a>
</form>
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="goods-consults-page yoho-page">
<div class="goto-consult">
<i class="iconfont consult-logo">&#xe639;</i>
<span>我要咨询</span>
<i class="iconfont enter-consult-page">&#xe604;</i>
</div>
{{# consults}}
<div class="goods-consults">
{{#list}}
<div class="gap-block"></div>
<div class="consult-item">
<div class="question">
<span class="iconfont">&#xe639;</span>
<p>
{{question}}
<span class="time">
{{time}}
</span>
</p>
</div>
<div class="answer">
<span class="iconfont">&#xe63c;</span>
<p>{{answer}}</p>
</div>
</div>
{{/list}}
</div>
{{/ consults}}
</div>
{{> layout/footer}}
... ...
... ... @@ -50,12 +50,12 @@
<div class="feedback-list-page ">
{{# feedbacks}}
<ul id="nav-tab" class="nav-tab clearfix">
<li class="comment-nav focus">{{commentName}}</li>
<li class="consult-nav">{{consultName}}</li>
<li class="comment-nav focus">{{commentName}}({{commentsNum}})</li>
<li class="consult-nav">{{consultName}}({{consultsNum}})</li>
</ul>
<div id="feedback-content" >
<div class="comment-content content ">
<div class="comment-content-main">
<div class="comment-content-main content-main">
{{# comments}}
<span class="user-name">
{{userName}}
... ... @@ -75,18 +75,22 @@
<a href="{{moreComments}}">查看更多 <span class="iconfont">&#xe604;</span></a>
</div>
</div>
<div class="consult-content content hide">
<div class="consult-content-main">
<div class="consult-content content hide ">
<div class="consult-content-main content-main">
{{# consults}}
<p class="question">
{{question}}
</p>
<span class="time">
{{time}}
</span>
<p class="answer">
{{answer}}
</p>
<div class="question">
<span class="iconfont">&#xe639;</span>
<p>{{question}}
<span class="time">
{{time}}
</span>
</p>
</div>
<div class="answer">
<span class="iconfont">&#xe63c;</span>
<p>{{answer}}</p>
</div>
{{/ consults}}
</div>
<div class="consult-content-footer">
... ...
... ... @@ -163,6 +163,12 @@
seajs.use('js/product/detail/detail');
</script>
{{/if}}
{{!-- 商品详情评论 --}}
{{#if goodsCommentsPage}}
<script>
seajs.use('js/product/detail/comments');
</script>
{{/if}}
{{!-- 品类 --}}
{{#if categoryPage}}
<script>
... ...
... ... @@ -20,6 +20,7 @@ class DetailController extends AbstractAction
'navHome' => 'sss ',
'navTitle' => '商品详情TEST'
),
'bannerTop' => array (
'list' => array (
array (
... ... @@ -65,8 +66,10 @@ SHOE BQT KEN BLOCK',
),
'goodsDiscount'=>'【summer final sale】满¥499立享6.8折',
'feedbacks'=>array(
'commentName'=>'商品评价(15)',
'consultName' =>'购买咨询(2)',
'commentsNum'=>2,
'consultsNum'=>10,
'commentName'=>'商品评价',
'consultName' =>'购买咨询',
'moreComments'=>'http://www.baidu.com',
'moreConsults'=>'http://www.baidu.com',
'comments'=>array(
... ... @@ -230,9 +233,109 @@ SHOE BQT KEN BLOCK',
);
$this->_view->assign('title', '商品详情');
//$this->_view->display('brand', compact('brands'));
// $this->_view->display('brand', compact('brands'));
// 渲染模板
$this->_view->display('index', $data);
}
public function commentsAction(){
$data = array(
'goodsCommentsPage' =>true,
'pageHeader' => array (
'navBack' => 'sss ',
// 'navHome' => 'sss ',
'navTitle' => '购买评价（6）'
),
'pageFooter' => true,
'comments'=>array(
'list' =>array(
array(
'userName'=>'Lynnic',
'desc'=>'购买了白色Mate7',
'content'=>'活动时买的，挺超值。上身效果也不错。质量
很好，买送人的，很满意。而且物流相当给...',
'time'=>'2014-08-12 10:24:26'
),
array(
'userName'=>'Lynnic',
'desc'=>'购买了白色Mate7',
'content'=>'活动时买的，挺超值。上身效果也不错。质量
很好，买送人的，很满意。而且物流相当给...',
'time'=>'2014-08-12 10:24:26'
),
array(
'userName'=>'Lynnic',
'desc'=>'购买了白色Mate7',
'content'=>'活动时买的，挺超值。上身效果也不错。质量
很好，买送人的，很满意。而且物流相当给...',
'time'=>'2014-08-12 10:24:26'
)
)
),
);
$this->_view->assign('title', '购买评价');
//$this->_view->display('brand', compact('brands'));
// 渲染模板
$this->_view->display('comments', $data);
}
public function consultsAction(){
$data = array(
'goodsConsultsPage' =>true,
'pageHeader' => array (
'navBack' => 'sss ',
// 'navHome' => 'sss ',
'navTitle' => '购买咨询（6）'
),
'pageFooter' => true,
'consults'=>array(
'list' =>array(
array(
'question' =>'您好 我一米七七 140斤 穿M的行吗',
'time'=>'2014-08-12 10:24:26',
'answer'=>'您好，建议您参考XL的款式，由于版型和个人穿衣风格不同，需要'
),
array(
'question' =>'您好 我一米七七 140斤 穿M的行吗',
'time'=>'2014-08-12 10:24:26',
'answer'=>'您好，建议您参考XL的款式，由于版型和个人穿衣风格不同，需要'
),
array(
'question' =>'您好 我一米七七 140斤 穿M的行吗',
'time'=>'2014-08-12 10:24:26',
'answer'=>'您好，建议您参考XL的款式，由于版型和个人穿衣风格不同，需要'
)
)
),
);
$this->_view->assign('title', '购买咨询');
//$this->_view->display('brand', compact('brands'));
// 渲染模板
$this->_view->display('consults', $data);
}
public function consultformAction(){
$data = array(
'consultform' =>true,
'pageHeader' => array (
'navBack' => 'sss ',
// 'navHome' => 'sss ',
'navTitle' => '我要咨询'
)
);
$this->_view->assign('title', '我要咨询');
//$this->_view->display('brand', compact('brands'));
// 渲染模板
$this->_view->display('consultform', $data);
}
}
\ No newline at end of file
... ...