评论分页,我的证书
This commit is contained in:
@@ -8,14 +8,14 @@
|
||||
<div class="comment" @click="showComment = true;getComment()">
|
||||
<img src="https://cdn.cunwuyun.cn/qujing/message.png" alt="">
|
||||
<div class="comm_num">
|
||||
<span>{{ commentList.length || 0}}</span><span v-show="commentList.length > 999">+</span>
|
||||
<span>{{ total || 0}}</span><span v-show="commentList.length > 999">+</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<u-popup v-model="showComment" mode="bottom" border-radius="32" height="80%">
|
||||
<h4 class="message_num">共{{ commentList.length }}条评论</h4>
|
||||
<div v-if="commentList.length" style="padding-bottom:70px;">
|
||||
<h4 class="message_num">共{{ total || 0 }}条评论</h4>
|
||||
<scroll-view scroll-y="true" @scrolltolower="scrollLower" class="comment_box" v-if="commentList.length">
|
||||
<div class="comment_card" v-for="item in commentList" :key="item.id">
|
||||
<div class="avatar">
|
||||
<img :src="item.avatar" alt="" v-if="item.avatar">
|
||||
@@ -29,7 +29,7 @@
|
||||
<div class="comm_content">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</scroll-view>
|
||||
<AiEmpty :description="`暂无相关评论`" class="emptyWrap" v-else/>
|
||||
|
||||
<div class="comm_input_btn" @click="showSend = true,showComment= false">
|
||||
@@ -77,6 +77,9 @@ export default {
|
||||
commentList: [],
|
||||
id: '',
|
||||
flag: false,
|
||||
current: 1,
|
||||
pages: 2,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
onLoad({id}) {
|
||||
@@ -98,9 +101,12 @@ export default {
|
||||
},
|
||||
// 评论集合
|
||||
getComment() {
|
||||
this.$instance.post(`/app/appcontentcomment/listForWX?contentId=${this.id}`).then(res=> {
|
||||
if(this.current > this.pages) return
|
||||
this.$instance.post(`/app/appcontentcomment/listForWX?contentId=${this.id}¤t=${this.current}`).then(res=> {
|
||||
if(res?.data) {
|
||||
this.commentList = res.data.records
|
||||
this.commentList = this.current==1? res.data.records: [...this.commentList,...res.data.records]
|
||||
this.total = res.data.total
|
||||
this.pages = res.data.pages
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -131,6 +137,10 @@ export default {
|
||||
this.$u.toast(err.msg)
|
||||
})
|
||||
},
|
||||
scrollLower() {
|
||||
this.current++
|
||||
this.getComment()
|
||||
},
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
@@ -146,7 +156,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contentDetail {
|
||||
.btn_box {
|
||||
.btn_box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -201,47 +211,51 @@ export default {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.comment_card {
|
||||
display: flex;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
.comment_box {
|
||||
width: 100%;
|
||||
max-height: 60vh;
|
||||
.comment_card {
|
||||
display: flex;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
.avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment_info {
|
||||
margin-left: 16px;
|
||||
width: calc(100% - 80px);
|
||||
.comment_info {
|
||||
margin-left: 16px;
|
||||
width: calc(100% - 80px);
|
||||
|
||||
.avatar_info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.avatar_info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.avatar_name {
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
.avatar_name {
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
color: #333333;
|
||||
}
|
||||
.avatar_time {
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.comm_content {
|
||||
margin-top: 8px;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.avatar_time {
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.comm_content {
|
||||
margin-top: 8px;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user