wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by biao
Commit 605a580b53896897ef1a1821cde7fc93105b4d9b 1 parent 4f5c2faf

咨询页面增加点赞／有用功能。 code review by Zhang Zhen

Inline Side-by-side
Showing 3 changed files with 71 additions and 57 deletions
... ... @@ -11,30 +11,17 @@
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);
// });
// }
// });
function showCountPlus($el) {
var $count = $el.find('.animate-count');
$count.css('display','inline');
$count.animate({
opacity: 0.25,
fontSize: '0.7rem',
right: '-=5'
}, 300, function () {
$count.css('display', 'none');
});
}
if (goodsConsultsHammer) {
... ... @@ -48,22 +35,23 @@ if (goodsConsultsHammer) {
if (!$this.hasClass('highlight')) {
if ($this.hasClass('fav')) {
url = '/product/opt/fav';
} else if ($this.hasClass('usefull')) {
url = '/product/opt/usefull';
url = '/product/detail/consultupvote';
} else if ($this.hasClass('useful')) {
url = '/product/detail/consultuseful';
}
$.ajax({
method: 'post',
url: url,
data: {
consult_id: id
id: id
}
}).done(function(data) {
if (data.code === 200) {
showCountPlus($this);
$this.addClass('highlight');
$this.find('.count').html(count + 1);
} else if (data.code === 400) {
} else if (data.code === 401) {
location.href = data.data;//未登录跳转登录页
}
}).fail(function(data) {
... ... @@ -72,4 +60,4 @@ if (goodsConsultsHammer) {
}
});
}
\ No newline at end of file
}
... ...
... ... @@ -55,6 +55,7 @@
height: pxToRem(120px);
background-color: #ffffff;
border-bottom: 1px solid $borderC;
z-index: 10;
i,
span,
a {
... ... @@ -137,8 +138,32 @@
padding-right: 5px;
font-size: inherit;
}
position: relative;
.animate-count {
display: none;
position: absolute;
top: 0;
font-size: pxToRem(20px);
z-index: 5;
}
i.count {
position: absolute;
}
}
li.fav {
.animate-count {
right: 65px;
}
}
li.useful {
.animate-count {
right: 57px;
}
}
}
}
}
.readmore{
... ...
... ... @@ -6,39 +6,40 @@
<a href="javascript:;" class="iconfont enter-consult-page">&#xe604;</a>
</div>
{{# consults}}
<div class="goods-consults" id="goods-consults">
<div class="goods-consults" id="goods-consults">
{{#list}}
<div class="consult-item" data-id="{{consult-id}}">
<div class="question">
<span class="iconfont">&#xe639;</span>
<p>
{{question}}<br>
<span class="time">{{time}}</span>
</p>
</div>
<div class="consult-item" data-id="{{id}}">
<div class="question">
<span class="iconfont">&#xe639;</span>
<p>
{{question}}<br>
<span class="time">{{time}}</span>
</p>
</div>
<div class="answer">
<span class="iconfont">&#xe63f;</span>
<p>{{answer}}</p>
</div>
<div class="answer">
<span class="iconfont">&#xe63f;</span>
<p>{{answer}}</p>
</div>
<ul class="operation">
<li class="fav {{#if fav}}highlight{{/if}}">
<ul class="operation">
<li class="fav {{#if isLike}}highlight{{/if}}">
<i class="iconfont ">&#xe601;</i>
赞
<i class="count">{{#if favNum}}{{favNum}}{{/if}}</i>
</li>
<li class="usefull {{#if usefull}}highlight{{/if}}">
<i class="iconfont ">&#xe605;</i>
有用
<i class="count">{{#if usefullNum}}{{usefullNum}}{{/if}}</i>
</li>
</ul>
<i class="count">{{#if like}}{{like}}{{/if}}</i>
<span class="animate-count">+1</span>
</li>
</div>
<li class="useful {{#if isUseful}}highlight{{/if}}">
<i class="iconfont ">&#xe605;</i>
有用
<i class="count">{{#if useful}}{{useful}}{{/if}}</i>
<span class="animate-count">+1</span>
</li>
</ul>
{{/list}}
</div>
{{/list}}
</div>
{{/ consults}}
... ... @@ -49,7 +50,7 @@
常见问题
</h1>
{{/faq}}
{{#faq}}
<div class="goods-consults" style="margin-top:0">
{{#list}}
... ...