Mini_Program/pages/messages/messages.vue

<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="header-title">消息</text>
			<view class="header-right"></view>
		</view>
		
		<!-- 消息列表 -->
		<scroll-view class="scroll-content" scroll-y>
			<view 
				class="message-item" 
				v-for="(message, index) in messageList" 
				:key="index"
				@click="handleMessageClick(message)"
			>
				<image class="message-avatar" :src="message.avatar" mode="aspectFill"></image>
				<view class="message-content">
					<view class="message-header">
						<text class="message-sender">{{ message.sender }}</text>
						<text class="message-time">{{ message.time }}</text>
					</view>
					<view class="message-action">
						<text class="action-icon">{{ message.actionIcon }}</text>
						<text class="action-text">{{ message.actionText }}</text>
					</view>
					<view class="comment-bubble" v-if="message.comment">
						<text class="comment-text">{{ message.comment }}</text>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="messageList.length === 0">
				<text class="empty-text">暂无消息</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getMessages, markMessageAsRead } from '@/utils/api.js'
	
	export default {
		data() {
			return {
				messageList: [],
				loading: false,
				page: 1,
				size: 20,
				hasMore: true
			}
		},
		onLoad() {
			this.loadMessages()
		},
		onPullDownRefresh() {
			this.page = 1
			this.messageList = []
			this.hasMore = true
			this.loadMessages().finally(() => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			if (this.hasMore && !this.loading) {
				this.page++
				this.loadMessages()
			}
		},
		methods: {
			async loadMessages() {
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo || !userInfo.id) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
					return
				}
				
				if (this.loading) return
				this.loading = true
				
				try {
					const res = await getMessages(userInfo.id, null, null, this.page, this.size)
					
					if (res && res.code === 200 && res.data) {
						const newMessages = res.data.list || []
						
						if (this.page === 1) {
							this.messageList = newMessages
						} else {
							this.messageList = this.messageList.concat(newMessages)
						}
						
						// 判断是否还有更多数据
						this.hasMore = newMessages.length >= this.size
						
						// 如果没有默认头像，设置默认头像
						this.messageList.forEach(msg => {
							if (!msg.avatar) {
								msg.avatar = 'https://picsum.photos/seed/default/200/200'
							}
						})
					} else {
						if (this.page === 1) {
							this.messageList = []
						}
						this.hasMore = false
					}
				} catch (error) {
					console.error('加载消息失败:', error)
					if (this.page === 1) {
						this.messageList = []
					}
					if (this.page > 1) {
						this.page--
					}
				} finally {
					this.loading = false
				}
			},
			goBack() {
				uni.navigateBack()
			},
			async handleMessageClick(message) {
				// 标记消息为已读
				if (message.isRead === 0) {
					try {
						await markMessageAsRead(message.id)
						message.isRead = 1
					} catch (error) {
						console.error('标记消息已读失败:', error)
					}
				}
				
				// 根据消息类型跳转到相关页面
				if (message.type === 'like' || message.type === 'reply') {
					// 点赞或回复消息，跳转到书籍详情页（可以从relatedId获取评论，再获取bookId）
					uni.showToast({
						title: '查看评论详情',
						icon: 'none'
					})
					// TODO: 可以根据relatedId查询评论，然后跳转到书籍详情页
				} else if (message.type === 'comment') {
					// 评论消息，跳转到书籍详情页
					uni.showToast({
						title: '查看书籍详情',
						icon: 'none'
					})
					// TODO: 可以根据relatedId跳转到书籍详情页
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding-top: 30px;
		box-sizing: border-box;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #F0F0F0;
		position: relative;
	}
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
	
	.back-icon {
		font-size: 40rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.header-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.header-right {
		width: 60rpx;
	}
	
	.scroll-content {
		flex: 1;
		width: 100%;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.message-item {
		display: flex;
		padding: 30rpx;
		border-bottom: 1rpx solid #F0F0F0;
		background-color: #FFFFFF;
	}
	
	.message-item:last-child {
		border-bottom: none;
	}
	
	.message-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		flex-shrink: 0;
		background-color: #F5F5F5;
	}
	
	.message-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
	
	.message-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.message-sender {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.message-time {
		font-size: 24rpx;
		color: #999999;
	}
	
	.message-action {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.action-icon {
		font-size: 28rpx;
		margin-right: 10rpx;
	}
	
	.action-text {
		font-size: 28rpx;
		color: #666666;
	}
	
	.comment-bubble {
		background-color: #F5F5F5;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-top: 10rpx;
	}
	
	.comment-text {
		font-size: 28rpx;
		color: #333333;
		line-height: 1.6;
	}
	
	.empty-state {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 200rpx 0;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999999;
	}
</style>