diff --git a/static/js/product/detail/comments-consults.js b/static/js/product/detail/comments-consults.js
index 9266d52..4b14d7f 100644
--- a/static/js/product/detail/comments-consults.js
+++ b/static/js/product/detail/comments-consults.js
@@ -9,11 +9,18 @@ var $ = require('jquery'),
var commentsNum,consultsNum;
-var navtabEle = document.getElementById('nav-tab'),
+var consultFooterEle = $('.consult-content-footer')[0],
+ consultFooterHammer = consultFooterEle && new Hammer(consultFooterEle),
+
+ navtabEle = document.getElementById('nav-tab'),
navtabHammer = navtabEle && new Hammer(navtabEle),
gotoConsultEle = document.getElementById('goto-consult'),
- gotoConsultHammer = gotoConsultEle && new Hammer(gotoConsultEle);
+ gotoConsultHammer = gotoConsultEle && new Hammer(gotoConsultEle),
+
+ readmore = document.getElementById('readmore'),
+ readmoreHammer = readmore && new Hammer(readmore);
+
(function() {
@@ -63,9 +70,15 @@ if (navtabHammer) {
});
}
+if (consultFooterHammer) {
+ consultFooterHammer.on('tap', function() {
+ location.href = $(consultFooterEle).data('href');
+ });
+}
+
if (gotoConsultHammer) {
gotoConsultHammer.on('tap', function() {
- location.href = $(gotoConsultEle).find('a').attr('href');
+ location.href = $(gotoConsultEle).data('href');
});
}
@@ -74,3 +87,22 @@ if ($('.goods-consults-page').length > 0) {
$('#yoho-header').css('position', 'fixed').css('top', '0');
}
+if ($('.goods-consults-page').length > 0) {
+ $('#yoho-footer').css('border-top', '1px solid #e0e0e0');
+}
+
+if ($('.goods-consults .consult-item').length > 10) {
+ $('.readmore').show();
+} else {
+ $('.readmore').hide();
+}
+
+if (readmoreHammer) {
+ readmoreHammer.on('tap', function() {
+ $('.readmore').hide();
+ $('.goods-consults .consult-item:nth-child(n+11)').show();
+ return false;
+ });
+}
+
+require('./fav');
\ No newline at end of file
diff --git a/static/js/product/detail/fav.js b/static/js/product/detail/fav.js
new file mode 100755
index 0000000..ce3ae25
--- /dev/null
+++ b/static/js/product/detail/fav.js
@@ -0,0 +1,75 @@
+/**
+ * 商品详情咨询页 --点赞和帮助功能
+ * @author: Lynnic
+ * @date: 2015/12/09
+ */
+
+ var $ = require('jquery'),
+ Hammer = require('yoho.hammer'),
+ tip = require('../../plugin/tip');
+
+var goodsConsultsEle = $('#goods-consults')[0],
+ goodsConsultsHammer = goodsConsultsEle && new Hammer(goodsConsultsEle);
+
+// $favBtn.on('click', function() {
+// var id = $(this).closest('.consult-item').data('id'),
+// $that = $(this),
+// count = $that.find('.count').html() - 0;
+// if (!$(this).hasClass('highlight')) {
+// $.ajax({
+// method: 'post',
+// url: '/home/upxxDown',
+// data: {
+// consult_id: id
+// }
+// }).done(function(data) {
+// if (data.code === 200) {
+// $that.addClass('highlight');
+// $that.find('.count').html(count+1);
+// } else if (data.code === 400) {
+// location.href = data.data;//未登录跳转登录页
+// }
+// }).fail(function(data) {
+// $that.addClass('highlight');
+// $that.find('.count').html(count+1);
+// });
+// }
+// });
+
+if (goodsConsultsHammer) {
+
+ goodsConsultsHammer.on('tap', function(e) {
+
+ var $this = $(e.target).closest('li'),
+ id = $this.closest('.consult-item').data('id'),
+ count = $this.find('.count').html() - 0,
+ url;
+
+ if (!$this.hasClass('highlight')) {
+
+ if ($this.hasClass('fav')) {
+ url = '/product/opt/fav';
+ } else if ($this.hasClass('usefull')) {
+ url = '/product/opt/usefull';
+ }
+
+ $.ajax({
+ method: 'post',
+ url: url,
+ data: {
+ consult_id: id
+ }
+ }).done(function(data) {
+ if (data.code === 200) {
+ $this.addClass('highlight');
+ $this.find('.count').html(count + 1);
+ } else if (data.code === 400) {
+ location.href = data.data;//未登录跳转登录页
+ }
+ }).fail(function(data) {
+ tip.show('网络断开连接了~');
+ });
+
+ }
+ });
+}
\ No newline at end of file
diff --git a/static/sass/product/_comments-consults.scss b/static/sass/product/_comments-consults.scss
index 2db6576..440d764 100644
--- a/static/sass/product/_comments-consults.scss
+++ b/static/sass/product/_comments-consults.scss
@@ -114,6 +114,60 @@
overflow: hidden;
}
}
+ .operation {
+ width: 120%;
+ height: pxToRem(60px);
+ line-height: pxToRem(80px);
+ position: relative;
+ right: 12%;
+ border-top: 1px solid #e0e0e0;
+ margin-top: pxToRem(20px);
+
+ li{
+ &.highlight{
+ color: $basicBtnC;
+ }
+ font-size:pxToRem(28px);
+ float:left;
+ width: 50%;
+ text-align: center;
+ color:$subFontC;
+ .iconfont{
+ display: inline-block;
+ padding-right: 5px;
+ font-size: inherit;
+ }
+ }
+ }
+ }
+ }
+ .readmore{
+ display: block;
+ height: pxToRem(88px);
+ line-height: pxToRem(88px);
+ background-color: #fff;
+ text-align: center;
+ color: $subFontC;
+ margin-top: pxToRem(30px);
+ border-top: 1px solid $borderC;
+ border-bottom: 1px solid $borderC;
+ font-size: pxToRem(28px);
+ i{
+ font-size: inherit;
+ }
+ }
+ .faq-title{
+ height: pxToRem(88px);
+ line-height: pxToRem(88px);
+ text-align: center;
+ font-size: pxToRem(32px);
+ }
+ .goods-consults .faq-item{
+ @extend .consult-item;
+ margin-top: 0;
+ margin-bottom: pxToRem(30px);
+ .answer{
+ border-bottom: none;
}
}
// .gap-block {
@@ -174,6 +228,9 @@
&.focus {
color: #000;
}
+ .comments-num {
+ display: none;
+ }
}
.comment-nav {
border-right: 1px solid #ccc;
diff --git a/template/m.yohobuy.com/actions/product/detail/consults.phtml b/template/m.yohobuy.com/actions/product/detail/consults.phtml
index a883e48..317cfbf 100644
--- a/template/m.yohobuy.com/actions/product/detail/consults.phtml
+++ b/template/m.yohobuy.com/actions/product/detail/consults.phtml
@@ -3,12 +3,12 @@
<div class="goto-consult tap-hightlight" id="goto-consult" data-href="{{link}}">
<i class="iconfont consult-logo"></i>
<span>我要咨询</span>
- <a href="{{link}}" class="iconfont enter-consult-page"></a>
+ <a href="javascript:;" class="iconfont enter-consult-page"></a>
</div>
{{# consults}}
<div class="goods-consults" id="goods-consults">
{{#list}}
- <div class="consult-item">
+ <div class="consult-item" data-id="{{consult-id}}">
<div class="question">
<span class="iconfont"></span>
<p>
@@ -21,10 +21,54 @@
<span class="iconfont"></span>
<p>{{answer}}</p>
</div>
+
+ <ul class="operation">
+ <li class="fav {{#if fav}}highlight{{/if}}">
+ <i class="iconfont "></i>
+ 赞
+ <i class="count">{{#if favNum}}{{favNum}}{{/if}}</i>
+ </li>
+ <li class="usefull {{#if usefull}}highlight{{/if}}">
+ <i class="iconfont "></i>
+ 有用
+ <i class="count">{{#if usefullNum}}{{usefullNum}}{{/if}}</i>
+ </li>
+ </ul>
+
</div>
+
+
{{/list}}
</div>
{{/ consults}}
+ <a href="javascript:;" id="readmore" class="readmore tap-hightlight" >查看更多 <i class="iconfont"></i></a>
+
+ {{#faq}}
+ <h1 class="faq-title">
+ 常见问题
+ </h1>
+ {{/faq}}
+
+ {{#faq}}
+ <div class="goods-consults" style="margin-top:0">
+ {{#list}}
+ <div class="faq-item">
+ <div class="question">
+ <span class="iconfont"></span>
+ <p>
+ {{question}}
+ </p>
+ </div>
+
+ <div class="answer">
+ <span class="iconfont"></span>
+ <p>{{answer}}</p>
+ </div>
+ </div>
+ {{/list}}
+ </div>
+ {{/faq}}
+
</div>
{{> layout/footer}}