novel-front-app/pages_order/comment/myComment.vue

<template>
	<view class="my-comment-page">
		<navbar title="我的评论" :leftClick="true" @leftClick="goBack" />
		<view class="comment-section">
			<view class="section-title">未读评论·{{ unreadComments.length }}</view>
			<myCommentItem :item="item" v-for="(item, idx) in unreadComments" :key="idx"/>
			<uv-empty mode="list" v-if="unreadComments.length == 0"></uv-empty>
		</view>
		<view class="comment-section history-section">
			<view class="section-title">历史评论</view>
			<!-- <view v-for="(item, idx) in list" :key="idx" class="comment-card">
				<uv-avatar :src="item.hanHaiMember.headImage" size="44" shape="circle" class="avatar" />
				<view class="comment-main">
					<view class="comment-header">
						<text class="username">{{ item.hanHaiMember.nickName }}</text>
						<text class="from">来自《{{ item.commonShop.name }}》</text>
					</view>
					<view class="comment-content">{{ item.comment }}</view>
					<view class="comment-footer">
						<text class="comment-time">{{ item.createTime }}</text>
						<view class="reply-btn-wrap" @click="goToReply(item)">
							<text class="reply-btn">回复</text>
						</view>
					</view>
				</view>
			</view> -->
			
			<uv-empty mode="list" v-if="list.length == 0"></uv-empty>
			
			<myCommentItem :item="item" v-for="(item, idx) in list" :key="idx"/>
		</view>
	</view>
</template>

<script>
    import mixinsList from '@/mixins/list.js'
	import myCommentItem from '../components/comment/myCommentItem.vue'
	export default {
        mixins: [mixinsList],
		components: {
			myCommentItem,
		},
		data() {
			return {
                mixinsListApi : 'getMyCommentList',
				unreadComments: [],
			}
		},
		onLoad() {
			this.queryParams.type = 'Y'
		},
		onShow() {
			this.getList()
		},
		methods: {
			//获取未读
			getList(){
				this.$fetch('getMyCommentList', {
					type : 'N',
					pageNo: 1,
					pageSize: 100000
				}).then(res => {
					this.unreadComments = res.records
					
					this.unreadComments.forEach(n => {
						this.updateCommentRead(n.id)
					})
				})
			},
			updateCommentRead(commentId){
				this.$fetch('updateCommentRead', {
					commentId
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.my-comment-page {
		min-height: 100vh;
		background: #f8f8f8;
		display: flex;
		flex-direction: column;
	}

	.comment-section {
		background: #fff;
		margin: 24rpx 24rpx 0 24rpx;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0 24rpx;
		margin-bottom: 24rpx;
	}

	.section-title {
		color: #222;
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 16rpx;
	}
</style>