/**
|
* @author 韩天尊
|
* @time 2024-01-15
|
* @version 1.0.0
|
* @description 消息详情页面组件
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { useParams, useNavigate } from 'react-router-dom';
|
import { messageAPI } from '../services/api';
|
import PageHeader from '../components/PageHeader';
|
import { format } from 'date-fns';
|
|
interface Message {
|
id: number;
|
title: string;
|
content: string;
|
type: string;
|
createTime: string;
|
isRead: boolean;
|
}
|
|
const MessageDetailPage: React.FC = () => {
|
const { id } = useParams<{ id: string }>();
|
const navigate = useNavigate();
|
const [message, setMessage] = useState<Message | null>(null);
|
const [loading, setLoading] = useState(true);
|
const [error, setError] = useState<string | null>(null);
|
|
// 加载消息详情
|
useEffect(() => {
|
const loadMessageDetail = async () => {
|
if (!id) {
|
setError('消息ID不存在');
|
setLoading(false);
|
return;
|
}
|
|
try {
|
setLoading(true);
|
const response = await messageAPI.getDetail(parseInt(id));
|
|
if (response.code === 0) {
|
setMessage(response.data);
|
} else {
|
setError(response.msg || '加载消息详情失败');
|
}
|
} catch (error: any) {
|
console.error('加载消息详情失败:', error);
|
setError(error.message || '加载消息详情失败');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
loadMessageDetail();
|
}, [id]);
|
|
// 获取消息类型文本
|
const getMessageTypeText = (type: string) => {
|
switch (type) {
|
case '1': return '系统消息';
|
case '2': return '活动消息';
|
default: return '系统消息';
|
}
|
};
|
|
// 格式化时间
|
const formatMessageTime = (timeStr?: string) => {
|
if (!timeStr) return '时间未知';
|
|
try {
|
const date = new Date(timeStr);
|
return format(date, 'yyyy-MM-dd HH:mm');
|
} catch (error) {
|
console.error('时间格式化失败:', error);
|
return timeStr;
|
}
|
};
|
|
// 标记已读
|
const handleMarkAsRead = async () => {
|
if (!message || message.isRead) return;
|
|
try {
|
const response = await messageAPI.markAsRead(message.id);
|
|
if (response.code === 0) {
|
setMessage(prev => prev ? { ...prev, isRead: true } : null);
|
// 可以显示成功提示
|
console.log('消息已标记为已读');
|
} else {
|
console.error('标记已读失败:', response.msg);
|
}
|
} catch (error: any) {
|
console.error('标记已读失败:', error);
|
}
|
};
|
|
// 删除消息
|
const handleDeleteMessage = () => {
|
// 这里可以添加删除消息的逻辑
|
console.log('删除消息功能待实现');
|
// 删除成功后返回消息列表页
|
navigate('/messages');
|
};
|
|
if (loading) {
|
return (
|
<div className="page">
|
<PageHeader title="消息详情" showBack={true} />
|
<div className="loading-container">
|
<div className="loading-spinner"></div>
|
<p>加载中...</p>
|
</div>
|
</div>
|
);
|
}
|
|
if (error || !message) {
|
return (
|
<div className="page">
|
<PageHeader title="消息详情" showBack={true} />
|
<div className="error-state">
|
<i className="fas fa-exclamation-triangle"></i>
|
<p>{error || '消息不存在'}</p>
|
<button className="btn primary" onClick={() => navigate('/messages')}>
|
返回消息列表
|
</button>
|
</div>
|
</div>
|
);
|
}
|
|
return (
|
<div className="page">
|
<PageHeader title="消息详情" showBack={true} />
|
|
<div className="message-detail-content">
|
{/* 消息标题 */}
|
<div className="message-header">
|
<h3 className="message-detail-title">{message.title}</h3>
|
<div className="message-meta">
|
<span className="message-detail-time">{formatMessageTime(message.createTime)}</span>
|
<span className="message-detail-type">{getMessageTypeText(message.type)}</span>
|
</div>
|
</div>
|
|
{/* 消息内容 */}
|
<div className="message-body">
|
<div className="message-detail-content-text">
|
{message.content}
|
</div>
|
</div>
|
|
{/* 操作按钮 */}
|
<div className="message-actions">
|
{!message.isRead && (
|
<button className="action-btn primary" onClick={handleMarkAsRead}>
|
<span>标记已读</span>
|
</button>
|
)}
|
<button className="action-btn secondary" onClick={handleDeleteMessage}>
|
<span>删除消息</span>
|
</button>
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
export default MessageDetailPage;
|
