评论分页,我的证书

This commit is contained in:
liuye
2023-02-21 14:26:25 +08:00
parent e879ea68d8
commit 759640bca4
3 changed files with 136 additions and 47 deletions

View File

@@ -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}&current=${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;
}
}
}