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 { @@ -138,6 +138,7 @@ a {
138 @import "home/index"; 138 @import "home/index";
139 @import "category/index"; 139 @import "category/index";
140 @import "product/index"; 140 @import "product/index";
  141 +@import "product/comments-consults";
141 @import "index/index"; 142 @import "index/index";
142 @import "shopping-cart/index"; 143 @import "shopping-cart/index";
143 @import "me/index"; //个人中心 144 @import "me/index"; //个人中心
  1 +.goods-comments-page{
  2 + .goods-comments{
  3 + .comment-item{
  4 + border: 1px solid $borderC;
  5 + padding: 0 pxToRem(28px);
  6 + .user-name{
  7 + font-size: pxToRem(24px);
  8 + line-height: pxToRem(62px);
  9 + color:$mainFontC;
  10 + }
  11 + .goods-spec,
  12 + .comment-time{
  13 + font-size: pxToRem(24px);
  14 + line-height: pxToRem(62px);
  15 + }
  16 + .detail-content{
  17 + font-size: pxToRem(24px);
  18 + line-height: pxToRem(62px);
  19 + color:$mainFontC;
  20 + }
  21 + .goods-spec,
  22 + .comment-time{
  23 + font-size: pxToRem(24px);
  24 + line-height: pxToRem(62px);
  25 + }
  26 + .detail-content{
  27 + font-size: pxToRem(28px);
  28 + line-height: pxToRem(36px);
  29 + }
  30 + .goods-spec,
  31 + .detail-content{
  32 + color:$mainFontC;
  33 + }
  34 + .comment-time{
  35 + color:#c1c1c1;
  36 + }
  37 + }
  38 + }
  39 +}
  40 +
  41 +.goods-consults-page{
  42 + .goto-consult{
  43 + padding: 0 pxToRem(28px);
  44 + height: pxToRem(120px);
  45 + background-color: #ffffff;
  46 + i,span{
  47 + line-height: pxToRem(120px);
  48 + font-size: pxToRem(28px);
  49 + color:$mainFontC;
  50 + }
  51 + .consult-logo{
  52 + padding-right: pxToRem(15px);
  53 + }
  54 + .enter-consult-page{
  55 + float: right;
  56 + color:$subFontC;
  57 + }
  58 + }
  59 + .goods-consults{
  60 + .consult-item{
  61 + padding: pxToRem(20px) pxToRem(28px);
  62 + background-color: #fff;
  63 + .question{
  64 + font-size: pxToRem(24px);
  65 + color:$mainFontC;
  66 + span{
  67 + display: block;
  68 + float: left;
  69 + font-size: inherit;
  70 + padding-right: pxToRem(15px);
  71 + }
  72 + p{
  73 + overflow: hidden;
  74 + padding-bottom: pxToRem(15px);
  75 + border-bottom: 1px solid $borderC;
  76 + }
  77 + }
  78 + .time{
  79 + font-size: pxToRem(22px);
  80 + color:$subFontC;
  81 + }
  82 + .answer{
  83 + font-size: pxToRem(24px);
  84 + line-height: pxToRem(36px);
  85 + color:$subFontC;
  86 + margin-top: pxToRem(14px);
  87 + span{
  88 + display: block;
  89 + float: left;
  90 + font-size: inherit;
  91 + color:$mainFontC;
  92 + padding-right: pxToRem(15px);
  93 + }
  94 + p{
  95 + overflow: hidden;
  96 + }
  97 + }
  98 + }
  99 + }
  100 +
  101 + .gap-block{
  102 + min-height: 30rem/$pxConvertRem;
  103 + background-color: #f0f0f0;
  104 + }
  105 +}
  106 +
  107 +.consult-form-page{
  108 + padding: pxToRem(28px);
  109 + text-align: center;
  110 + textarea{
  111 + box-sizing:border-box;
  112 + width: 100%;
  113 + height: pxToRem(400px);
  114 + font-size: pxToRem(28px);
  115 + padding:pxToRem(10px);
  116 + color:$mainFontC;
  117 + }
  118 + a{
  119 + display: inline-block;
  120 + height: pxToRem(80px);
  121 + width: pxToRem(360px);
  122 + color: #fff;
  123 + background-color: #444;
  124 + font-size: pxToRem(40px);
  125 + line-height: pxToRem(80px);
  126 + text-align: center;
  127 + margin-top: pxToRem(20px);
  128 + }
  129 +}
@@ -252,62 +252,107 @@ overflow: hidden; @@ -252,62 +252,107 @@ overflow: hidden;
252 .comment-nav { 252 .comment-nav {
253 border-right: 1px solid #ccc; 253 border-right: 1px solid #ccc;
254 } 254 }
255 - .comment-content{  
256 - .comment-content-main{ 255 + .content{
  256 + .content-main{
257 background-color: #fff; 257 background-color: #fff;
258 border-bottom: 1px solid $borderC; 258 border-bottom: 1px solid $borderC;
259 - .user-name{  
260 - font-size: pxToRem(24px);  
261 - line-height: pxToRem(62px);  
262 - color:$mainFontC;  
263 - padding-left: pxToRem(28px);  
264 - padding-right: pxToRem(18px);  
265 - }  
266 - .goods-spec,  
267 - .comment-time{  
268 - font-size: pxToRem(24px);  
269 - line-height: pxToRem(62px);  
270 - }  
271 - .detail-content{  
272 - font-size: pxToRem(28px);  
273 - line-height: pxToRem(36px);  
274 - font-size: pxToRem(24px);  
275 - line-height: pxToRem(62px);  
276 - color:$mainFontC;  
277 - padding-left: pxToRem(28px);  
278 - padding-right: pxToRem(18px);  
279 - }  
280 - .goods-spec,  
281 - .comment-time{  
282 - font-size: pxToRem(24px);  
283 - line-height: pxToRem(62px);  
284 - }  
285 - .detail-content{  
286 - font-size: pxToRem(28px);  
287 - line-height: pxToRem(36px);  
288 - }  
289 - .goods-spec,  
290 - .detail-content{  
291 - color:$mainFontC;  
292 - }  
293 - .detail-content,  
294 - .comment-time{  
295 - padding-left: pxToRem(28px); 259 + &.comment-content-main{
  260 + .user-name{
  261 + font-size: pxToRem(24px);
  262 + line-height: pxToRem(62px);
  263 + color:$mainFontC;
  264 + padding-left: pxToRem(28px);
  265 + padding-right: pxToRem(18px);
  266 + }
  267 + .goods-spec,
  268 + .comment-time{
  269 + font-size: pxToRem(24px);
  270 + line-height: pxToRem(62px);
  271 + }
  272 + .detail-content{
  273 + // font-size: pxToRem(28px);
  274 + // line-height: pxToRem(36px);
  275 + font-size: pxToRem(24px);
  276 + line-height: pxToRem(62px);
  277 + color:$mainFontC;
  278 + padding-left: pxToRem(28px);
  279 + padding-right: pxToRem(18px);
  280 + }
  281 + .goods-spec,
  282 + .comment-time{
  283 + font-size: pxToRem(24px);
  284 + line-height: pxToRem(62px);
  285 + }
  286 + .detail-content{
  287 + font-size: pxToRem(28px);
  288 + line-height: pxToRem(36px);
  289 + }
  290 + .goods-spec,
  291 + .detail-content{
  292 + color:$mainFontC;
  293 + }
  294 + .detail-content,
  295 + .comment-time{
  296 + padding-left: pxToRem(28px);
296 297
  298 + }
  299 + .detail-content{
  300 + padding-right: pxToRem(28px);
  301 + padding-left: pxToRem(28px);
  302 + }
  303 + .detail-content{
  304 + padding-right: pxToRem(28px);
  305 + }
  306 + .comment-time{
  307 + color:#c1c1c1;
  308 + }
297 } 309 }
298 - .detail-content{  
299 - padding-right: pxToRem(28px);  
300 - padding-left: pxToRem(28px);  
301 - }  
302 - .detail-content{  
303 - padding-right: pxToRem(28px);  
304 - }  
305 - .comment-time{  
306 - color:#c1c1c1; 310 + &.consult-content-main{
  311 + padding-right: pxToRem(28px);
  312 + padding-left: pxToRem(28px);
  313 + padding-top: pxToRem(20px);
  314 + padding-bottom: pxToRem(20px);
  315 + .question{
  316 + font-size: pxToRem(24px);
  317 + color:$mainFontC;
  318 + span{
  319 + display: block;
  320 + float: left;
  321 + font-size: inherit;
  322 + padding-right: pxToRem(15px);
  323 + }
  324 + p{
  325 + overflow: hidden;
  326 + }
  327 + }
  328 + .time{
  329 + font-size: pxToRem(22px);
  330 + color:$subFontC;
  331 + }
  332 + .answer{
  333 + font-size: pxToRem(24px);
  334 + line-height: pxToRem(36px);
  335 + color:$subFontC;
  336 + margin-top: pxToRem(14px);
  337 + span{
  338 + display: block;
  339 + float: left;
  340 + font-size: inherit;
  341 + color:$mainFontC;
  342 + padding-right: pxToRem(15px);
  343 + }
  344 + p{
  345 + overflow: hidden;
  346 + }
  347 + }
307 } 348 }
  349 +
308 } 350 }
309 351
310 - .comment-content-footer{ 352 +
  353 +}
  354 +.comment-content-footer,
  355 +.consult-content-footer{
311 356
312 min-height: pxToRem(88px); 357 min-height: pxToRem(88px);
313 text-align: center; 358 text-align: center;
@@ -322,9 +367,7 @@ overflow: hidden; @@ -322,9 +367,7 @@ overflow: hidden;
322 .iconfont{ 367 .iconfont{
323 font-size: inherit; 368 font-size: inherit;
324 } 369 }
325 - }  
326 -}  
327 - 370 + }
328 371
329 } 372 }
330 373
  1 +{{> layout/header}}
  2 +<div class="goods-comments-page yoho-page">
  3 + {{#comments}}
  4 + <div class="goods-comments">
  5 + {{#list}}
  6 + <div class="comment-item">
  7 + <span class="user-name">
  8 + {{userName}}
  9 + </span>
  10 + <span class="goods-spec">
  11 + {{desc}}
  12 + </span>
  13 + <p class="detail-content">
  14 + {{content}}
  15 + </p>
  16 + <span class="comment-time">
  17 + {{time}}
  18 + </span>
  19 + </div>
  20 + {{/list}}
  21 + </div>
  22 + {{/comments}}
  23 +
  24 +</div>
  25 +
  26 +{{> layout/footer}}
  1 +{{> layout/header}}
  2 +
  3 +<div class="consult-form-page">
  4 + <form class="consult-form">
  5 + <textarea>这款衣服有WS吗？</textarea>
  6 + <a href="" type="submit">提交</a>
  7 + </form>
  8 +</div>
  9 +{{> layout/footer}}
  1 +{{> layout/header}}
  2 +<div class="goods-consults-page yoho-page">
  3 + <div class="goto-consult">
  4 + <i class="iconfont consult-logo">&#xe639;</i>
  5 + <span>我要咨询</span>
  6 + <i class="iconfont enter-consult-page">&#xe604;</i>
  7 + </div>
  8 + {{# consults}}
  9 + <div class="goods-consults">
  10 + {{#list}}
  11 + <div class="gap-block"></div>
  12 + <div class="consult-item">
  13 + <div class="question">
  14 + <span class="iconfont">&#xe639;</span>
  15 + <p>
  16 + {{question}}
  17 + <span class="time">
  18 + {{time}}
  19 + </span>
  20 + </p>
  21 + </div>
  22 +
  23 + <div class="answer">
  24 + <span class="iconfont">&#xe63c;</span>
  25 + <p>{{answer}}</p>
  26 + </div>
  27 + </div>
  28 +
  29 + {{/list}}
  30 + </div>
  31 + {{/ consults}}
  32 +</div>
  33 +{{> layout/footer}}
@@ -50,12 +50,12 @@ @@ -50,12 +50,12 @@
50 <div class="feedback-list-page "> 50 <div class="feedback-list-page ">
51 {{# feedbacks}} 51 {{# feedbacks}}
52 <ul id="nav-tab" class="nav-tab clearfix"> 52 <ul id="nav-tab" class="nav-tab clearfix">
53 - <li class="comment-nav focus">{{commentName}}</li>  
54 - <li class="consult-nav">{{consultName}}</li> 53 + <li class="comment-nav focus">{{commentName}}({{commentsNum}})</li>
  54 + <li class="consult-nav">{{consultName}}({{consultsNum}})</li>
55 </ul> 55 </ul>
56 <div id="feedback-content" > 56 <div id="feedback-content" >
57 <div class="comment-content content "> 57 <div class="comment-content content ">
58 - <div class="comment-content-main"> 58 + <div class="comment-content-main content-main">
59 {{# comments}} 59 {{# comments}}
60 <span class="user-name"> 60 <span class="user-name">
61 {{userName}} 61 {{userName}}
@@ -75,18 +75,22 @@ @@ -75,18 +75,22 @@
75 <a href="{{moreComments}}">查看更多 <span class="iconfont">&#xe604;</span></a> 75 <a href="{{moreComments}}">查看更多 <span class="iconfont">&#xe604;</span></a>
76 </div> 76 </div>
77 </div> 77 </div>
78 - <div class="consult-content content hide">  
79 - <div class="consult-content-main"> 78 + <div class="consult-content content hide ">
  79 + <div class="consult-content-main content-main">
80 {{# consults}} 80 {{# consults}}
81 - <p class="question">  
82 - {{question}}  
83 - </p>  
84 - <span class="time">  
85 - {{time}}  
86 - </span>  
87 - <p class="answer">  
88 - {{answer}}  
89 - </p> 81 + <div class="question">
  82 + <span class="iconfont">&#xe639;</span>
  83 + <p>{{question}}
  84 + <span class="time">
  85 + {{time}}
  86 + </span>
  87 + </p>
  88 + </div>
  89 +
  90 + <div class="answer">
  91 + <span class="iconfont">&#xe63c;</span>
  92 + <p>{{answer}}</p>
  93 + </div>
90 {{/ consults}} 94 {{/ consults}}
91 </div> 95 </div>
92 <div class="consult-content-footer"> 96 <div class="consult-content-footer">
@@ -163,6 +163,12 @@ @@ -163,6 +163,12 @@
163 seajs.use('js/product/detail/detail'); 163 seajs.use('js/product/detail/detail');
164 </script> 164 </script>
165 {{/if}} 165 {{/if}}
  166 +{{!-- 商品详情评论 --}}
  167 +{{#if goodsCommentsPage}}
  168 +<script>
  169 + seajs.use('js/product/detail/comments');
  170 +</script>
  171 +{{/if}}
166 {{!-- 品类 --}} 172 {{!-- 品类 --}}
167 {{#if categoryPage}} 173 {{#if categoryPage}}
168 <script> 174 <script>
@@ -20,6 +20,7 @@ class DetailController extends AbstractAction @@ -20,6 +20,7 @@ class DetailController extends AbstractAction
20 'navHome' => 'sss ', 20 'navHome' => 'sss ',
21 'navTitle' => '商品详情TEST' 21 'navTitle' => '商品详情TEST'
22 ), 22 ),
  23 +
23 'bannerTop' => array ( 24 'bannerTop' => array (
24 'list' => array ( 25 'list' => array (
25 array ( 26 array (
@@ -65,8 +66,10 @@ SHOE BQT KEN BLOCK', @@ -65,8 +66,10 @@ SHOE BQT KEN BLOCK',
65 ), 66 ),
66 'goodsDiscount'=>'【summer final sale】满¥499立享6.8折', 67 'goodsDiscount'=>'【summer final sale】满¥499立享6.8折',
67 'feedbacks'=>array( 68 'feedbacks'=>array(
68 - 'commentName'=>'商品评价(15)',  
69 - 'consultName' =>'购买咨询(2)', 69 + 'commentsNum'=>2,
  70 + 'consultsNum'=>10,
  71 + 'commentName'=>'商品评价',
  72 + 'consultName' =>'购买咨询',
70 'moreComments'=>'http://www.baidu.com', 73 'moreComments'=>'http://www.baidu.com',
71 'moreConsults'=>'http://www.baidu.com', 74 'moreConsults'=>'http://www.baidu.com',
72 'comments'=>array( 75 'comments'=>array(
@@ -230,9 +233,109 @@ SHOE BQT KEN BLOCK', @@ -230,9 +233,109 @@ SHOE BQT KEN BLOCK',
230 ); 233 );
231 234
232 $this->_view->assign('title', '商品详情'); 235 $this->_view->assign('title', '商品详情');
233 - //$this->_view->display('brand', compact('brands')); 236 + // $this->_view->display('brand', compact('brands'));
234 237
235 // 渲染模板 238 // 渲染模板
236 $this->_view->display('index', $data); 239 $this->_view->display('index', $data);
237 } 240 }
  241 +
  242 + public function commentsAction(){
  243 + $data = array(
  244 + 'goodsCommentsPage' =>true,
  245 + 'pageHeader' => array (
  246 + 'navBack' => 'sss ',
  247 + // 'navHome' => 'sss ',
  248 + 'navTitle' => '购买评价（6）'
  249 + ),
  250 + 'pageFooter' => true,
  251 + 'comments'=>array(
  252 + 'list' =>array(
  253 + array(
  254 + 'userName'=>'Lynnic',
  255 + 'desc'=>'购买了白色Mate7',
  256 + 'content'=>'活动时买的，挺超值。上身效果也不错。质量
  257 + 很好，买送人的，很满意。而且物流相当给...',
  258 + 'time'=>'2014-08-12 10:24:26'
  259 + ),
  260 + array(
  261 + 'userName'=>'Lynnic',
  262 + 'desc'=>'购买了白色Mate7',
  263 + 'content'=>'活动时买的，挺超值。上身效果也不错。质量
  264 + 很好，买送人的，很满意。而且物流相当给...',
  265 + 'time'=>'2014-08-12 10:24:26'
  266 + ),
  267 + array(
  268 + 'userName'=>'Lynnic',
  269 + 'desc'=>'购买了白色Mate7',
  270 + 'content'=>'活动时买的，挺超值。上身效果也不错。质量
  271 + 很好，买送人的，很满意。而且物流相当给...',
  272 + 'time'=>'2014-08-12 10:24:26'
  273 + )
  274 +
  275 + )
  276 + ),
  277 + );
  278 +
  279 + $this->_view->assign('title', '购买评价');
  280 + //$this->_view->display('brand', compact('brands'));
  281 +
  282 + // 渲染模板
  283 + $this->_view->display('comments', $data);
  284 + }
  285 +
  286 +
  287 + public function consultsAction(){
  288 + $data = array(
  289 + 'goodsConsultsPage' =>true,
  290 + 'pageHeader' => array (
  291 + 'navBack' => 'sss ',
  292 + // 'navHome' => 'sss ',
  293 + 'navTitle' => '购买咨询（6）'
  294 + ),
  295 + 'pageFooter' => true,
  296 + 'consults'=>array(
  297 + 'list' =>array(
  298 + array(
  299 + 'question' =>'您好 我一米七七 140斤 穿M的行吗',
  300 + 'time'=>'2014-08-12 10:24:26',
  301 + 'answer'=>'您好，建议您参考XL的款式，由于版型和个人穿衣风格不同，需要'
  302 + ),
  303 + array(
  304 + 'question' =>'您好 我一米七七 140斤 穿M的行吗',
  305 + 'time'=>'2014-08-12 10:24:26',
  306 + 'answer'=>'您好，建议您参考XL的款式，由于版型和个人穿衣风格不同，需要'
  307 + ),
  308 + array(
  309 + 'question' =>'您好 我一米七七 140斤 穿M的行吗',
  310 + 'time'=>'2014-08-12 10:24:26',
  311 + 'answer'=>'您好，建议您参考XL的款式，由于版型和个人穿衣风格不同，需要'
  312 + )
  313 +
  314 + )
  315 + ),
  316 + );
  317 +
  318 + $this->_view->assign('title', '购买咨询');
  319 + //$this->_view->display('brand', compact('brands'));
  320 +
  321 + // 渲染模板
  322 + $this->_view->display('consults', $data);
  323 + }
  324 +
  325 + public function consultformAction(){
  326 + $data = array(
  327 + 'consultform' =>true,
  328 + 'pageHeader' => array (
  329 + 'navBack' => 'sss ',
  330 + // 'navHome' => 'sss ',
  331 + 'navTitle' => '我要咨询'
  332 + )
  333 + );
  334 +
  335 + $this->_view->assign('title', '我要咨询');
  336 + //$this->_view->display('brand', compact('brands'));
  337 +
  338 + // 渲染模板
  339 + $this->_view->display('consultform', $data);
  340 + }
238 } 341 }