Merge branch 'feature/consultUpdate' into 'feature/wap323'
购买咨询页面更新。code review by 张振 1.加入点赞/喜欢功能 2.查看更多功能优化。 code review by 张振 See merge request !92
Showing
5 changed files
with
246 additions
and
17 deletions
@@ -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'); |
static/js/product/detail/fav.js
0 → 100755
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"></a> | 6 | <a href="{{link}}" class="iconfont enter-consult-page"></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"></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"></span> | ||
22 | + <p>{{answer}}</p> | ||
23 | + </div> | ||
24 | + | ||
25 | + <ul class="operation"> | ||
26 | + <li class="fav {{#if isLike}}highlight{{/if}}"> | ||
27 | + <i class="iconfont "></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 "></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"></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"></span> | 61 | <span class="iconfont"></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"></span> | 68 | <span class="iconfont"></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 | */ |
-
Please register or login to post a comment