fe / mars-static · Commits

Go to a project

Authored by 李靖
Commit d87090d8b973e29db59d8b496070f0d8044594a9 1 parent a8b0ab42

开发完成

Inline Side-by-side
Showing 2 changed files with 83 additions and 18 deletions
... ... @@ -16,7 +16,7 @@ class Comment extends Page {
$showBig: $('.show-big')
};
this.page = 0;
this.page = 1;
this.limit = 5;
this.loading = false;
this.end = false;
... ... @@ -30,9 +30,9 @@ class Comment extends Page {
}
bindEvents() {
this.selector.$openMore.on('click', this.openMore.bind(this));
this.selector.$closeMore.on('click', this.closeMore.bind(this));
this.selector.$showBig.on('click', this.showBig.bind(this));
$('.comment-list').on('click', '.open-more', this.openMore.bind(this));
$('.comment-list').on('click', '.close-more', this.closeMore.bind(this));
$('.comment-list').on('click', '.show-big', this.showBig.bind(this));
}
scroll() {
... ... @@ -51,11 +51,10 @@ class Comment extends Page {
}
getMore() {
console.log(this.page);
this.loading = true;
$.ajax({
method: 'GET',
url: window.$ajaxPath,
url: `${window.$ajaxPath}/TblStoreAssessmentRest/commentsforh5`,
data: {
store_id: $('#storeId').val(),
page: this.page || 1,
... ... @@ -65,8 +64,8 @@ class Comment extends Page {
let list = [];
let $commentList = $('.comment-list');
if (result && result.code && result.code === 200 && result.data) {
list = result.data.data.list;
if (result && result.data && result.data.list && result.data.list.length > 0) {
list = result.data.list;
list.forEach((val) => {
let $html = $(`<div class="comment-item-c clearfix">
<div class="comment-item comment-main clearfix">
... ... @@ -80,10 +79,7 @@ class Comment extends Page {
${val.publish_time_str}
</span>
</div>
<div class="price">
<span class="cny">CNY</span>
<span>233 /人</span>
</div>
<div class="price"></div>
<div class="comment-words">${val.description}</div>
<div class="pic-list"></div>
</div>
... ... @@ -91,6 +87,14 @@ class Comment extends Page {
<div class="comment-follow"></div>
</div>`);
if (val.consume && val.consume !== '0') {
// 用户消费
let $consume = $(`<span class="cny">CNY</span>
<span>${val.consume} /人</span>`);
$html.find('.comment-main .price').append($consume);
}
if (val.user) {
// 用户图片-名称
let headpic = val.user.headpic.split('?')[0];
... ... @@ -137,22 +141,27 @@ class Comment extends Page {
</div>`);
if (item.user) {
let userName = item.user.nickname || '';
if (item.user.headpic) {
let headpic = item.user.headpic.split('?')[0];
let $userPic = $(`<img class="head-pic lazy" alt="${val.user.nickname}"
let $userPic = $(`<img class="head-pic lazy" alt="${userName}"
data-original="${headpic}?imageView2/1/w/152/h/152" />`);
let userName = item.user.nickname;
$comment.find('.user-name').text(userName);
$comment.find('.left').append($userPic);
}
$comment.find('.user-name').text(userName);
}
$html.find('.comment-follow').append($comment);
});
}
if (val.comment_num > 0) {
if (val.comment_num > 3) {
// 更多评论
let commentNum = parseInt(val.comment_num, 10) > 7 ? 10 : parseInt(val.comment_num, 10) + 3;
let $moreComment = $(`
<div class="more-comment open-more">所有${val.comment_num}条评论&nbsp;▼</div>
<div class="more-comment open-more" id="${val.id}">所有${commentNum}条评论&nbsp;▼</div>
<div class="more-comment close-more">收起评论&nbsp;▲</div>`);
$html.append($moreComment);
... ... @@ -165,6 +174,8 @@ class Comment extends Page {
});
this.loading = false;
});
} else {
this.end = true;
}
}
});
... ... @@ -188,15 +199,67 @@ class Comment extends Page {
openMore(e) {
let $this = $(e.currentTarget);
if ($this.hasClass('opened')) {
$this.parents('.comment-item-c').find('.comment-follow .comment-item').show();
$this.hide();
$this.next('.close-more').show();
return false;
} else {
$this.addClass('opened');
}
$.ajax({
method: 'GET',
url: `${window.$ajaxPath}/TblStoreAssessmentRest/subcommentsforh5`,
data: {
comment_id: $this.attr('id'),
page: 1,
limit: 7
},
success: (result) => {
if (result && result.data && result.data.list && result.data.list.length > 0) {
let list = result.data.list;
list.forEach((item) => {
let $comment = $(`<div class="comment-item clearfix">
<div class="left"></div>
<div class="right">
<div class="name">
<span class="user-name"></span>
<span class="time">${item.create_time_str}</span>
</div>
<div class="comment-words">${item.content}</div>
</div>
</div>`);
if (item.user) {
let userName = item.user.nickname || '';
if (item.user.headpic) {
let headpic = item.user.headpic.split('?')[0];
let $userPic = $(`<img class="head-pic lazy" alt="${userName}"
data-original="${headpic}?imageView2/1/w/152/h/152" />`);
$comment.find('.left').append($userPic);
}
$comment.find('.user-name').text(userName);
}
$this.parents('.comment-item-c').find('.comment-follow').append($comment);
});
$this.hide();
$this.next('.close-more').show();
}
}
});
}
closeMore(e) {
let $this = $(e.currentTarget);
$this.hide();
$this.parents('.comment-item-c').find('.comment-follow .comment-item:gt(2)').hide();
$this.prev('.open-more').show();
$this.hide();
}
}
... ...
... ... @@ -104,6 +104,7 @@
font-size: 30px;
height: 50px;
line-height: 50px;
color: #1a1a1a;
}
.location {
... ... @@ -206,6 +207,7 @@
.comment-item {
border-bottom: 0;
padding-right: 0;
padding-bottom: 0;
.name {
font-size: 30px;
... ...