Authored by Rock Zhang

Merge branch 'feature/consultUpdate' into 'feature/wap323'

购买咨询页面更新。code review by 张振

1.加入点赞/喜欢功能
2.查看更多功能优化。
code review by 张振

See merge request !92
@@ -9,11 +9,18 @@ var $ = require('jquery'), @@ -9,11 +9,18 @@ var $ = require('jquery'),
9 9
10 var commentsNum,consultsNum; 10 var commentsNum,consultsNum;
11 11
12 -var navtabEle = document.getElementById('nav-tab'), 12 +var consultFooterEle = $('.consult-content-footer')[0],
  13 + consultFooterHammer = consultFooterEle && new Hammer(consultFooterEle),
  14 +
  15 + navtabEle = document.getElementById('nav-tab'),
13 navtabHammer = navtabEle && new Hammer(navtabEle), 16 navtabHammer = navtabEle && new Hammer(navtabEle),
14 17
15 gotoConsultEle = document.getElementById('goto-consult'), 18 gotoConsultEle = document.getElementById('goto-consult'),
16 - gotoConsultHammer = gotoConsultEle && new Hammer(gotoConsultEle); 19 + gotoConsultHammer = gotoConsultEle && new Hammer(gotoConsultEle),
  20 +
  21 + readmore = document.getElementById('readmore'),
  22 + readmoreHammer = readmore && new Hammer(readmore);
  23 +
17 24
18 25
19 (function() { 26 (function() {
@@ -63,6 +70,12 @@ if (navtabHammer) { @@ -63,6 +70,12 @@ if (navtabHammer) {
63 }); 70 });
64 } 71 }
65 72
  73 +if (consultFooterHammer) {
  74 + consultFooterHammer.on('tap', function() {
  75 + location.href = $(consultFooterEle).data('href');
  76 + });
  77 +}
  78 +
66 if (gotoConsultHammer) { 79 if (gotoConsultHammer) {
67 gotoConsultHammer.on('tap', function() { 80 gotoConsultHammer.on('tap', function() {
68 location.href = $(gotoConsultEle).find('a').attr('href'); 81 location.href = $(gotoConsultEle).find('a').attr('href');
@@ -74,3 +87,16 @@ if ($('.goods-consults-page').length > 0) { @@ -74,3 +87,16 @@ if ($('.goods-consults-page').length > 0) {
74 $('#yoho-header').css('position', 'fixed').css('top', '0'); 87 $('#yoho-header').css('position', 'fixed').css('top', '0');
75 } 88 }
76 89
  90 +if ($('.goods-consults-page').length > 0) {
  91 + $('#yoho-footer').css('border-top', '1px solid #e0e0e0');
  92 +}
  93 +
  94 +if (readmoreHammer) {
  95 + readmoreHammer.on('tap', function() {
  96 + $('.readmore').hide();
  97 + $('.goods-consults .consult-item').show();
  98 + return false;
  99 + });
  100 +}
  101 +
  102 +require('./fav');
  1 +/**
  2 + * 商品详情咨询页 --点赞和帮助功能
  3 + * @author: Lynnic
  4 + * @date: 2015/12/09
  5 + */
  6 +
  7 + var $ = require('jquery'),
  8 + Hammer = require('yoho.hammer'),
  9 + tip = require('../../plugin/tip');
  10 +
  11 +var goodsConsultsEle = $('#goods-consults')[0],
  12 + goodsConsultsHammer = goodsConsultsEle && new Hammer(goodsConsultsEle);
  13 +
  14 +function showCountPlus($el) {
  15 + var $count = $el.find('.animate-count');
  16 +
  17 + $count.css('display', 'inline');
  18 + $count.animate({
  19 + opacity: 0.25,
  20 + fontSize: '0.7rem',
  21 + right: '-=5'
  22 + }, 300, function() {
  23 + $count.css('display', 'none');
  24 + });
  25 +}
  26 +
  27 +if (goodsConsultsHammer) {
  28 +
  29 + goodsConsultsHammer.on('tap', function(e) {
  30 +
  31 + var $this = $(e.target).closest('li'),
  32 + id = $this.closest('.consult-item').data('id'),
  33 + count = $this.find('.count').html() - 0,
  34 + url;
  35 +
  36 + if (!$this.hasClass('highlight')) {
  37 +
  38 + if ($this.hasClass('fav')) {
  39 + url = '/product/detail/consultupvote';
  40 + } else if ($this.hasClass('useful')) {
  41 + url = '/product/detail/consultuseful';
  42 + }
  43 +
  44 + $.ajax({
  45 + method: 'post',
  46 + url: url,
  47 + data: {
  48 + id: id
  49 + }
  50 + }).done(function(data) {
  51 + if (data.code === 200) {
  52 + showCountPlus($this);
  53 + $this.addClass('highlight');
  54 + $this.find('.count').html(count + 1);
  55 + } else if (data.code === 401) {
  56 + location.href = data.data;//未登录跳转登录页
  57 + }
  58 + }).fail(function(data) {
  59 + tip.show('网络断开连接了~');
  60 + });
  61 +
  62 + }
  63 + });
  64 +}
@@ -55,6 +55,7 @@ @@ -55,6 +55,7 @@
55 height: pxToRem(120px); 55 height: pxToRem(120px);
56 background-color: #ffffff; 56 background-color: #ffffff;
57 border-bottom: 1px solid $borderC; 57 border-bottom: 1px solid $borderC;
  58 + z-index: 10;
58 i, 59 i,
59 span, 60 span,
60 a { 61 a {
@@ -73,12 +74,20 @@ @@ -73,12 +74,20 @@
73 .goods-consults { 74 .goods-consults {
74 margin-top: 5.25rem; 75 margin-top: 5.25rem;
75 overflow: hidden; 76 overflow: hidden;
  77 + .consult-item:nth-child(1) {
  78 + display: block;
  79 + }
  80 + .consult-item:nth-child(2) {
  81 + display: block;
  82 + }
  83 +
76 .consult-item { 84 .consult-item {
77 margin-top: pxToRem(30px); 85 margin-top: pxToRem(30px);
78 padding: pxToRem(20px) pxToRem(28px); 86 padding: pxToRem(20px) pxToRem(28px);
79 background-color: #fff; 87 background-color: #fff;
80 border-bottom: 1px solid $borderC; 88 border-bottom: 1px solid $borderC;
81 border-top: 1px solid $borderC; 89 border-top: 1px solid $borderC;
  90 + display:none;
82 .question { 91 .question {
83 font-size: pxToRem(24px); 92 font-size: pxToRem(24px);
84 color: $mainFontC; 93 color: $mainFontC;
@@ -114,6 +123,84 @@ @@ -114,6 +123,84 @@
114 overflow: hidden; 123 overflow: hidden;
115 } 124 }
116 } 125 }
  126 + .operation {
  127 + width: 120%;
  128 + height: pxToRem(60px);
  129 + line-height: pxToRem(80px);
  130 + position: relative;
  131 + right: 12%;
  132 + border-top: 1px solid #e0e0e0;
  133 + margin-top: pxToRem(20px);
  134 +
  135 + li{
  136 + &.highlight{
  137 + color: $basicBtnC;
  138 + }
  139 + font-size:pxToRem(28px);
  140 + float:left;
  141 + width: 50%;
  142 + text-align: center;
  143 + color:$subFontC;
  144 + .iconfont{
  145 + display: inline-block;
  146 + padding-right: 5px;
  147 + font-size: inherit;
  148 + }
  149 + position: relative;
  150 + .animate-count {
  151 + display: none;
  152 + position: absolute;
  153 + top: 0;
  154 + font-size: pxToRem(20px);
  155 + z-index: 5;
  156 + }
  157 + i.count {
  158 + position: absolute;
  159 + }
  160 + }
  161 + li.fav {
  162 + .animate-count {
  163 + right: 65px;
  164 + }
  165 + }
  166 +
  167 + li.useful {
  168 + .animate-count {
  169 + right: 57px;
  170 + }
  171 + }
  172 + }
  173 +
  174 +
  175 + }
  176 + }
  177 + .readmore{
  178 + display: block;
  179 + height: pxToRem(88px);
  180 + line-height: pxToRem(88px);
  181 + background-color: #fff;
  182 + text-align: center;
  183 + color: $subFontC;
  184 + margin-top: pxToRem(30px);
  185 + border-top: 1px solid $borderC;
  186 + border-bottom: 1px solid $borderC;
  187 + font-size: pxToRem(28px);
  188 + i{
  189 + font-size: inherit;
  190 + }
  191 + }
  192 + .faq-title{
  193 + height: pxToRem(88px);
  194 + line-height: pxToRem(88px);
  195 + text-align: center;
  196 + font-size: pxToRem(32px);
  197 + }
  198 + .goods-consults .faq-item{
  199 + @extend .consult-item;
  200 + margin-top: 0;
  201 + margin-bottom: pxToRem(30px);
  202 + .answer{
  203 + border-bottom: none;
117 } 204 }
118 } 205 }
119 // .gap-block { 206 // .gap-block {
@@ -174,6 +261,9 @@ @@ -174,6 +261,9 @@
174 &.focus { 261 &.focus {
175 color: #000; 262 color: #000;
176 } 263 }
  264 + .comments-num {
  265 + display: none;
  266 + }
177 } 267 }
178 .comment-nav { 268 .comment-nav {
179 border-right: 1px solid #ccc; 269 border-right: 1px solid #ccc;
@@ -6,14 +6,61 @@ @@ -6,14 +6,61 @@
6 <a href="{{link}}" class="iconfont enter-consult-page">&#xe604;</a> 6 <a href="{{link}}" class="iconfont enter-consult-page">&#xe604;</a>
7 </div> 7 </div>
8 {{# consults}} 8 {{# consults}}
9 - <div class="goods-consults" id="goods-consults"> 9 + <div class="goods-consults" id="goods-consults">
10 {{#list}} 10 {{#list}}
11 - <div class="consult-item">  
12 - <div class="question"> 11 + <div class="consult-item" data-id="{{id}}">
  12 + <div class="question">
  13 + <span class="iconfont">&#xe639;</span>
  14 + <p>
  15 + {{question}}<br>
  16 + <span class="time">{{time}}</span>
  17 + </p>
  18 + </div>
  19 +
  20 + <div class="answer">
  21 + <span class="iconfont">&#xe63f;</span>
  22 + <p>{{answer}}</p>
  23 + </div>
  24 +
  25 + <ul class="operation">
  26 + <li class="fav {{#if isLike}}highlight{{/if}}">
  27 + <i class="iconfont ">&#xe601;</i>
  28 +
  29 + <i class="count">{{#if like}}{{like}}{{/if}}</i>
  30 + <span class="animate-count">+1</span>
  31 + </li>
  32 +
  33 + <li class="useful {{#if isUseful}}highlight{{/if}}">
  34 + <i class="iconfont ">&#xe605;</i>
  35 + 有用
  36 + <i class="count">{{#if useful}}{{useful}}{{/if}}</i>
  37 + <span class="animate-count">+1</span>
  38 + </li>
  39 + </ul>
  40 +
  41 + </div>
  42 + {{/list}}
  43 + </div>
  44 + {{/ consults}}
  45 +
  46 + {{#showReadMore}}
  47 + <a href="javascript:;" id="readmore" class="readmore tap-hightlight" >查看更多 <i class="iconfont">&#xe604;</i></a>
  48 + {{/showReadMore}}
  49 +
  50 + {{#faq}}
  51 + <h1 class="faq-title">
  52 + 常见问题
  53 + </h1>
  54 + {{/faq}}
  55 +
  56 + {{#faq}}
  57 + <div class="goods-consults" style="margin-top:0">
  58 + {{#list}}
  59 + <div class="faq-item">
  60 + <div class="question">
13 <span class="iconfont">&#xe639;</span> 61 <span class="iconfont">&#xe639;</span>
14 <p> 62 <p>
15 - {{question}}<br>  
16 - <span class="time">{{time}}</span> 63 + {{question}}
17 </p> 64 </p>
18 </div> 65 </div>
19 66
@@ -21,10 +68,10 @@ @@ -21,10 +68,10 @@
21 <span class="iconfont">&#xe63f;</span> 68 <span class="iconfont">&#xe63f;</span>
22 <p>{{answer}}</p> 69 <p>{{answer}}</p>
23 </div> 70 </div>
24 - </div>  
25 - {{/list}} 71 + </div>
  72 + {{/list}}
26 </div> 73 </div>
27 - {{/ consults}} 74 + {{/faq}}
28 75
29 </div> 76 </div>
30 {{> layout/footer}} 77 {{> layout/footer}}
@@ -12,7 +12,7 @@ class DetailController extends AbstractAction @@ -12,7 +12,7 @@ class DetailController extends AbstractAction
12 12
13 /** 13 /**
14 * 商品详情 14 * 商品详情
15 - * 15 + *
16 * @param int productId 16 * @param int productId
17 * @param int goodsId 17 * @param int goodsId
18 */ 18 */
@@ -50,7 +50,7 @@ class DetailController extends AbstractAction @@ -50,7 +50,7 @@ class DetailController extends AbstractAction
50 50
51 /** 51 /**
52 * 商品详情 (SKN) 52 * 商品详情 (SKN)
53 - * 53 + *
54 * @param int productSkn 54 * @param int productSkn
55 */ 55 */
56 public function showAction() 56 public function showAction()
@@ -100,7 +100,7 @@ class DetailController extends AbstractAction @@ -100,7 +100,7 @@ class DetailController extends AbstractAction
100 100
101 /** 101 /**
102 * 购买评价列表 102 * 购买评价列表
103 - * 103 + *
104 * @param int productId 104 * @param int productId
105 * @param int total 105 * @param int total
106 */ 106 */
@@ -132,7 +132,7 @@ class DetailController extends AbstractAction @@ -132,7 +132,7 @@ class DetailController extends AbstractAction
132 132
133 /** 133 /**
134 * 购买咨询列表 134 * 购买咨询列表
135 - * 135 + *
136 * @param int productId 136 * @param int productId
137 * @param int total 137 * @param int total
138 */ 138 */
@@ -150,12 +150,14 @@ class DetailController extends AbstractAction @@ -150,12 +150,14 @@ class DetailController extends AbstractAction
150 } 150 }
151 $this->setTitle('购买咨询'); 151 $this->setTitle('购买咨询');
152 152
  153 + $consults = \Product\DetailModel::getConsults($productId);
153 $data = array( 154 $data = array(
154 'goodsConsultsPage' => true, 155 'goodsConsultsPage' => true,
155 'pageFooter' => true, 156 'pageFooter' => true,
156 'consults' => array( 157 'consults' => array(
157 - 'list' => \Product\DetailModel::getConsults($productId), 158 + 'list' => $consults
158 ), 159 ),
  160 + 'showReadMore' => count($consults) > 2,
159 'link' => Helpers::url('/product/detail/consultform', array('product_id' => $productId)), 161 'link' => Helpers::url('/product/detail/consultform', array('product_id' => $productId)),
160 ); 162 );
161 163
@@ -222,7 +224,7 @@ class DetailController extends AbstractAction @@ -222,7 +224,7 @@ class DetailController extends AbstractAction
222 224
223 /** 225 /**
224 * 添加咨询操作 226 * 添加咨询操作
225 - * 227 + *
226 * @param int product_id 商品ID 228 * @param int product_id 商品ID
227 * @param string content 咨询内容 229 * @param string content 咨询内容
228 * @return json 230 * @return json
@@ -243,7 +245,7 @@ class DetailController extends AbstractAction @@ -243,7 +245,7 @@ class DetailController extends AbstractAction
243 245
244 /** 246 /**
245 * 为你优选 247 * 为你优选
246 - * 248 + *
247 * @param int productSkn 商品SKN号 249 * @param int productSkn 商品SKN号
248 * @return json 250 * @return json
249 */ 251 */