评论分页,我的证书

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;
}
}
}

View File

@@ -80,12 +80,12 @@ export default {
path: "./testList",
type: 'token'
},
// {
// icon: 'https://cdn.cunwuyun.cn/qujing/wdzs.png',
// label: "我的证书",
// path: "/mods/AppHometown/AppHometown",
// type: 'token'
// }
{
icon: 'https://cdn.cunwuyun.cn/qujing/wdzs.png',
label: "我的证书",
path: "./myCertificate",
type: 'token'
}
],
]
}
@@ -159,7 +159,7 @@ export default {
},
onShareAppMessage() {
return {
title: `欢迎使用数字平昌~`,
title: `欢迎使用法制曲靖~`,
path: `/pages/AppHome/AppHome`
}
},

View File

@@ -0,0 +1,75 @@
<template>
<div class="page">
<div class="list" v-if="files.length">
<img v-for="(item, index) in files" :key="index" :src="item.imageUrl" alt="" @click="previewImage(index)">
</div>
<AiEmpty :description="`暂无数据`" class="emptyWrap" v-else/>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: "myCertificate",
appName: "我的证书",
data() {
return {
files: [],
}
},
computed: {
...mapState(['user', 'token']),
},
onLoad() {
uni.setNavigationBarTitle({
title: '我的证书'
})
uni.setNavigationBarColor({
frontColor: "#000000",
backgroundColor: "#F4F6FA",
})
},
onLoad() {
this.getFile()
},
methods: {
getFile() {
this.$instance.post(`/app/appcertificateinfo/list?size=100`).then(res => {
if (res.code == 0) {
}
})
},
previewImage(index) {
var tempList = []
for (var i in this.files) {
tempList.push(this.files[i].imageUrl)
}
uni.previewImage({
current: tempList[index],
urls: tempList
});
},
},
}
</script>
<style scoped lang="scss">
@import "~dvcp-wui/common";
.page {
width: 100%;
background-color: #F4F5FA;
.list {
padding: 50px 0 0 32px;
img {
width: calc(100%/2 - 13px);
height: 462px;
margin: 0 26px 24px 0;
}
img:nth-of-type(2n) {
margin-right: 0;
}
}
}
</style>