通知与推荐功能，css样式优化
Change-Id: I33d934bfdca88b7a8e6742be2a3c7323d28ffbcf
diff --git a/src/components/Personal/Notice.jsx b/src/components/Personal/Notice.jsx
index 55bc955..05198f9 100644
--- a/src/components/Personal/Notice.jsx
+++ b/src/components/Personal/Notice.jsx
@@ -1,57 +1,106 @@
-import React from 'react';
-import { useNavigate,useLocation } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { notificationApi } from '../../api/notification';
import './personalSubpage.css';
const Notice = ({ onLogout }) => {
const navigate = useNavigate();
const location = useLocation();
- // 模拟数据
- const [notices] = React.useState([
- {
- id: 1,
- title: '积分奖励到账',
- content: '您上传的资源《盗梦空间》获得100积分奖励',
- date: '2023-10-20',
- read: false
- },
- {
- id: 2,
- title: '系统通知',
- content: '服务器将于今晚2:00-4:00进行维护',
- date: '2023-10-18',
- read: true
+ const [notices, setNotices] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ // 获取当前用户ID（根据你的实际应用获取方式）
+ const userId = localStorage.getItem('username') || 'default-user-id';
+
+ // 获取通知列表
+ const fetchNotifications = async () => {
+ try {
+ setLoading(true);
+ const response = await notificationApi.getNotifications(userId);
+ setNotices(response.data.notifications || []);
+ } catch (err) {
+ setError('获取通知失败，请稍后重试');
+ console.error(err);
+ } finally {
+ setLoading(false);
}
- ]);
+ };
+
+ useEffect(() => {
+ fetchNotifications();
+ }, [userId]);
const handleBack = () => {
- // 返回个人中心，并携带来源标记
navigate('/personal', {
state: {
- fromSubpage: true, // 标记来自子页面
- dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
+ fromSubpage: true,
+ dashboardTab: location.state?.dashboardTab
},
- replace: true // 替换当前历史记录
+ replace: true
});
};
+ // 标记为已读处理
+ const handleMarkAsRead = async (id) => {
+ try {
+ const result = await notificationApi.markNotificationAsRead(id);
+
+ if (result.success) {
+ // 使用后端返回的更新后通知替换本地状态
+ setNotices(prevNotices =>
+ prevNotices.map(notice =>
+ notice.id === id ? result.notification : notice
+ )
+ );
+ } else {
+ setError(result.message || '标记为已读失败');
+ }
+ } catch (err) {
+ console.error('标记为已读失败:', err);
+ setError('标记为已读失败，请稍后重试');
+ }
+ };
+
+ const handleItemClick = (notice) => {
+ if (!notice.isRead) {
+ handleMarkAsRead(notice.id);
+ }
+ // 这里可以添加其他点击逻辑，比如展开详情等
+ };
+
return (
<div className="subpage-container">
- <button className="back-button" onClick={(handleBack)}>
- ← 返回个人中心
+ <button className="back-button" onClick={handleBack}>
+ 返回个人中心
</button>
<h2 className="page-title">消息通知</h2>
+ {loading && <div className="loading-message">加载中...</div>}
+ {error && <div className="error-message">{error}</div>}
+
<div className="notice-list">
- {notices.map(notice => (
- <div key={notice.id} className={`list-item ${!notice.read ? 'unread' : ''}`}>
- <div className="notice-header">
- <h3>{notice.title}</h3>
- <span className="notice-date">{notice.date}</span>
+ {notices.length === 0 && !loading ? (
+ <div className="empty-notice">暂无通知</div>
+ ) : (
+ notices.map(notice => (
+ <div
+ key={notice.id}
+ className={`list-item ${!notice.isRead ? 'unread' : ''}`}
+ onClick={() => handleItemClick(notice)}
+ >
+ <div className="notice-header">
+ <h3>{notice.title}</h3>
+ <span className="notice-date">
+ {new Date(notice.date).toLocaleDateString()}
+ {!notice.isRead && <span className="unread-badge">未读</span>}
+ </span>
+ </div>
+ <p className="notice-content">{notice.content}</p>
</div>
- <p className="notice-content">{notice.content}</p>
- </div>
- ))}
+ ))
+ )}
</div>
</div>
);