wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by Rock Zhang
Commit 579e6652d8e8c9d99701e8148a4c6d7e92668db8 2 parents 864417ed 64584d2c

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

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

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

See merge request !92
Inline Side-by-side
Showing 5 changed files with 246 additions and 17 deletions
... ... @@ -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,6 +70,12 @@ 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');
... ... @@ -74,3 +87,16 @@ 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 (readmoreHammer) {
readmoreHammer.on('tap', function() {
$('.readmore').hide();
$('.goods-consults .consult-item').show();
return false;
});
}
require('./fav');
... ...
/**
* 商品详情咨询页 --点赞和帮助功能
* @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);
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) {
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/detail/consultupvote';
} else if ($this.hasClass('useful')) {
url = '/product/detail/consultuseful';
}
$.ajax({
method: 'post',
url: url,
data: {
id: id
}
}).done(function(data) {
if (data.code === 200) {
showCountPlus($this);
$this.addClass('highlight');
$this.find('.count').html(count + 1);
} else if (data.code === 401) {
location.href = data.data;//未登录跳转登录页
}
}).fail(function(data) {
tip.show('网络断开连接了~');
});
}
});
}
... ...
... ... @@ -55,6 +55,7 @@
height: pxToRem(120px);
background-color: #ffffff;
border-bottom: 1px solid $borderC;
z-index: 10;
i,
span,
a {
... ... @@ -73,12 +74,20 @@
.goods-consults {
margin-top: 5.25rem;
overflow: hidden;
.consult-item:nth-child(1) {
display: block;
}
.consult-item:nth-child(2) {
display: block;
}
.consult-item {
margin-top: pxToRem(30px);
padding: pxToRem(20px) pxToRem(28px);
background-color: #fff;
border-bottom: 1px solid $borderC;
border-top: 1px solid $borderC;
display:none;
.question {
font-size: pxToRem(24px);
color: $mainFontC;
... ... @@ -114,6 +123,84 @@
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;
}
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{
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 +261,9 @@
&.focus {
color: #000;
}
.comments-num {
display: none;
}
}
.comment-nav {
border-right: 1px solid #ccc;
... ...
... ... @@ -6,14 +6,61 @@
<a href="{{link}}" 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">
<div class="question">
<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>
<ul class="operation">
<li class="fav {{#if isLike}}highlight{{/if}}">
<i class="iconfont ">&#xe601;</i>
赞
<i class="count">{{#if like}}{{like}}{{/if}}</i>
<span class="animate-count">+1</span>
</li>
<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>
</div>
{{/list}}
</div>
{{/ consults}}
{{#showReadMore}}
<a href="javascript:;" id="readmore" class="readmore tap-hightlight" >查看更多 <i class="iconfont">&#xe604;</i></a>
{{/showReadMore}}
{{#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">&#xe639;</span>
<p>
{{question}}<br>
<span class="time">{{time}}</span>
{{question}}
</p>
</div>
... ... @@ -21,10 +68,10 @@
<span class="iconfont">&#xe63f;</span>
<p>{{answer}}</p>
</div>
</div>
{{/list}}
</div>
{{/list}}
</div>
{{/ consults}}
{{/faq}}
</div>
{{> layout/footer}}
... ...
... ... @@ -12,7 +12,7 @@ class DetailController extends AbstractAction
/**
* 商品详情
*
*
* @param int productId
* @param int goodsId
*/
... ... @@ -50,7 +50,7 @@ class DetailController extends AbstractAction
/**
* 商品详情 (SKN)
*
*
* @param int productSkn
*/
public function showAction()
... ... @@ -100,7 +100,7 @@ class DetailController extends AbstractAction
/**
* 购买评价列表
*
*
* @param int productId
* @param int total
*/
... ... @@ -132,7 +132,7 @@ class DetailController extends AbstractAction
/**
* 购买咨询列表
*
*
* @param int productId
* @param int total
*/
... ... @@ -150,12 +150,14 @@ class DetailController extends AbstractAction
}
$this->setTitle('购买咨询');
$consults = \Product\DetailModel::getConsults($productId);
$data = array(
'goodsConsultsPage' => true,
'pageFooter' => true,
'consults' => array(
'list' => \Product\DetailModel::getConsults($productId),
'list' => $consults
),
'showReadMore' => count($consults) > 2,
'link' => Helpers::url('/product/detail/consultform', array('product_id' => $productId)),
);
... ... @@ -222,7 +224,7 @@ class DetailController extends AbstractAction
/**
* 添加咨询操作
*
*
* @param int product_id 商品ID
* @param string content 咨询内容
* @return json
... ... @@ -243,7 +245,7 @@ class DetailController extends AbstractAction
/**
* 为你优选
*
*
* @param int productSkn 商品SKN号
* @return json
*/
... ...