/**
|
* @author 韩天尊
|
* @time 2024-01-15
|
* @version 1.0.0
|
* @description 管理端首页组件，包含轮播图、功能按钮和活动列表
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { useNavigate } from 'react-router-dom';
|
import { useAppContext } from '../context/AppContext';
|
import Carousel from '../components/Carousel';
|
import PageHeader from '../components/PageHeader';
|
import { adminAPI } from '../services/api';
|
import { AdminDashboardStats, AdminActivity } from '../types';
|
import { APP_CONFIG } from '../config/appConfig';
|
|
const AdminHomePage: React.FC = () => {
|
const navigate = useNavigate();
|
const { state } = useAppContext();
|
const [currentSlide, setCurrentSlide] = useState(0);
|
const [dashboardStats, setDashboardStats] = useState<AdminDashboardStats | null>(null);
|
const [adminActivities, setAdminActivities] = useState<AdminActivity[]>([]);
|
const [loading, setLoading] = useState(true);
|
|
// 轮播图数据
|
const carouselImages = [
|
{
|
src: 'https://img2.baidu.com/it/u=4288096266,408974710&fm=253&fmt=auto&app=138&f=JPEG?w=720&h=360',
|
alt: '公益活动1'
|
},
|
{
|
src: 'https://img1.baidu.com/it/u=3109399925,3815937957&fm=253&app=138&f=JPEG?w=912&h=513',
|
alt: '公益活动2'
|
},
|
{
|
src: 'https://img0.baidu.com/it/u=1541673592,3279127521&fm=253&app=138&f=JPEG?w=912&h=513',
|
alt: '公益活动3'
|
}
|
];
|
|
// 自动轮播
|
useEffect(() => {
|
const timer = setInterval(() => {
|
setCurrentSlide((prev) => (prev + 1) % carouselImages.length);
|
}, 3000);
|
|
return () => clearInterval(timer);
|
}, [carouselImages.length]);
|
|
// 获取管理端数据
|
useEffect(() => {
|
const fetchAdminData = async () => {
|
try {
|
setLoading(true);
|
|
// 获取统计数据
|
const statsResponse = await adminAPI.getDashboardStats();
|
if (statsResponse.code === 0) {
|
setDashboardStats(statsResponse.data);
|
}
|
|
// 获取活动列表
|
const activitiesResponse = await adminAPI.getActivityList({
|
page: 1,
|
size: 3,
|
status: '1' // 获取未开始的活动
|
});
|
if (activitiesResponse.code === 0) {
|
setAdminActivities(activitiesResponse.data.list || []);
|
}
|
} catch (error) {
|
console.error('获取管理端数据失败:', error);
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
fetchAdminData();
|
}, []);
|
|
// 功能按钮点击处理
|
const handleFunctionClick = (route: string) => {
|
navigate(route);
|
};
|
|
// 活动点击处理
|
const handleActivityClick = (activityId: number) => {
|
navigate(`/admin-activity-detail/${activityId}`);
|
};
|
|
// 切换市民端
|
const handleSwitchToUser = () => {
|
navigate('/');
|
};
|
|
// 获取状态文本
|
const getStatusText = (status: string) => {
|
const statusMap: { [key: string]: string } = {
|
'1': '未开始',
|
'2': '进行中',
|
'3': '已结束',
|
'ongoing': '进行中',
|
'upcoming': '即将开始',
|
'completed': '已结束'
|
};
|
return statusMap[status] || status;
|
};
|
|
// 获取分类文本
|
const getCategoryText = (category: string) => {
|
const categoryMap: { [key: string]: string } = {
|
'1': '党的建设',
|
'2': '经济发展',
|
'3': '平安法治',
|
'4': '民生服务',
|
'5': '失信违法',
|
'party': '党的建设',
|
'economy': '经济发展',
|
'security': '平安法治',
|
'service': '民生服务',
|
'illegal': '失信违法'
|
};
|
return categoryMap[category] || category;
|
};
|
|
// 构建完整的图片URL
|
const buildImageUrl = (filePath: string) => {
|
// 如果已经是完整URL，直接返回
|
if (filePath.startsWith('http')) {
|
return filePath;
|
}
|
// 否则拼接基础路径
|
return `${APP_CONFIG.API.SYS_BASE_URL}${filePath}`;
|
};
|
|
return (
|
<div className="page admin-page">
|
{/* 轮播图区域 */}
|
<Carousel
|
images={carouselImages}
|
currentSlide={currentSlide}
|
onSlideChange={setCurrentSlide}
|
/>
|
|
{/* 功能按钮区域 */}
|
<div className="admin-function-buttons">
|
<button
|
className="admin-function-btn"
|
onClick={() => handleFunctionClick('/admin-activity-list')}
|
>
|
<i className="fas fa-list-alt"></i>
|
<span>活动列表</span>
|
</button>
|
<button
|
className="admin-function-btn"
|
onClick={() => handleFunctionClick('/admin-points-review')}
|
>
|
<i className="fas fa-clipboard-check"></i>
|
<span>积分审核</span>
|
</button>
|
<button
|
className="admin-function-btn"
|
onClick={() => handleFunctionClick('/admin-volunteer-review')}
|
>
|
<i className="fas fa-user-check"></i>
|
<span>志愿者审核</span>
|
</button>
|
<button
|
className="admin-function-btn"
|
onClick={() => handleFunctionClick('/admin-points-redemption')}
|
>
|
<i className="fas fa-qrcode"></i>
|
<span>积分核销</span>
|
</button>
|
<button
|
className="admin-function-btn"
|
onClick={() => handleFunctionClick('/admin-activity-create')}
|
>
|
<i className="fas fa-plus-circle"></i>
|
<span>发布活动</span>
|
</button>
|
<button
|
className="admin-function-btn"
|
onClick={handleSwitchToUser}
|
>
|
<i className="fas fa-users"></i>
|
<span>切换市民端</span>
|
</button>
|
</div>
|
|
{/* 最新活动列表 */}
|
<div className="activity-list">
|
<div className="section-header">
|
<h3 className="section-title">最新活动</h3>
|
<button className="more-btn" onClick={() => handleFunctionClick('/admin-activity-list')}>
|
<span>更多</span>
|
<i className="fas fa-chevron-right"></i>
|
</button>
|
</div>
|
<div className="activity-grid">
|
{loading ? (
|
<div className="loading">
|
<i className="fas fa-spinner fa-spin"></i>
|
<p>加载中...</p>
|
</div>
|
) : adminActivities.length > 0 ? (
|
adminActivities.map((activity) => (
|
<div
|
key={activity.id}
|
className="activity-item"
|
onClick={() => handleActivityClick(activity.id)}
|
style={{ cursor: 'pointer' }}
|
>
|
<img
|
className="cover"
|
src={
|
// 优先显示fileList中的第一张图片
|
activity.fileList && activity.fileList.length > 0
|
? buildImageUrl(activity.fileList[0])
|
: activity.img || require('../image/image1.jpg')
|
}
|
alt="活动封面"
|
/>
|
<div className="activity-info">
|
<div className="activity-info-row">
|
<h4>{activity.title}</h4>
|
<div className={`activity-status ${activity.status}`}>
|
{getStatusText(activity.status)}
|
</div>
|
</div>
|
<div className="activity-info-detail">
|
<i className="fas fa-clock"></i>服务类型：
|
<span className={`category-tag ${activity.category}`}>
|
{activity.categoryDesc || getCategoryText(activity.category)}
|
</span>
|
</div>
|
<div className="activity-info-detail">
|
<i className="fas fa-clock"></i>时间：{activity.startTime}
|
</div>
|
<div className="activity-info-detail">
|
<i className="fas fa-map-marker-alt"></i>地点：{activity.location}
|
</div>
|
<div className="activity-info-detail">
|
<i className="fas fa-users"></i>参与人数：{activity.participants}人
|
</div>
|
</div>
|
</div>
|
))
|
) : (
|
<div className="no-data">
|
<i className="fas fa-inbox"></i>
|
<p>暂无活动数据</p>
|
</div>
|
)}
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
export default AdminHomePage;
|
