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

<template>
	<view class="my-comment-page">
		<navbar title="我的评论" :leftClick="true" @leftClick="$utils.navigateBack" />
		
		<uv-tabs :list="tabs"
		:activeStyle="{ color: '#0A2463', fontWeight: 600 }" 
		lineColor="#0A2463" lineHeight="8rpx"
		lineWidth="50rpx" 
		:scrollable="false"
		:current="current"
		@click="clickTabs"></uv-tabs>
		
		<template v-if="current == 0">
			<view class="comment-section">
				<myCommentItem :item="item" 
				edit
				@getData="getData"
				v-for="(item, idx) in list" :key="idx"/>
			</view>
		</template>
		
		<template v-if="current == 1">
			<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>
				<myCommentItem 
				:item="item" 
				v-for="(item, idx) in list" :key="idx"/>
			</view>
		</template>
		
		<uv-empty mode="list" v-if="list.length == 0"></uv-empty>
	</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: [],
				tabs: [
					{
						name: '我的评论'
					},
					{
						name: '回复我的'
					},
				],
				current : 0,
				apiList : [
					'getMyCommentList',
					'getMyReplyCommentList'
				],
			}
		},
		onLoad() {
			this.queryParams.type = 'Y'
			this.mixinsListApi = this.apiList[this.current]
		},
		onShow() {
			this.getList()
		},
		methods: {
			//点击tab栏
			clickTabs({ index }) {
				this.queryParams.pageSize = 10
				this.current = index
				
				this.mixinsListApi = this.apiList[this.current]
				
				this.getData()
			},
			//获取未读
			getList(){
				this.$fetch('getMyReplyCommentList', {
					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>