/**
|
* @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 PageHeader from '../components/PageHeader';
|
import { formatActivityTime } from '../utils/timeFormatter';
|
import { adminAPI } from '../services/api';
|
import { AdminActivity } from '../types';
|
import { APP_CONFIG } from '../config/appConfig';
|
|
const AdminActivityListPage: React.FC = () => {
|
const navigate = useNavigate();
|
const { state } = useAppContext();
|
|
// 状态管理
|
const [activeTab, setActiveTab] = useState('all');
|
const [activities, setActivities] = useState<AdminActivity[]>([]);
|
const [filteredActivities, setFilteredActivities] = useState<AdminActivity[]>([]);
|
const [loading, setLoading] = useState(true);
|
const [pagination, setPagination] = useState({
|
page: 1,
|
size: 10,
|
total: 0
|
});
|
|
// 获取活动列表数据
|
const fetchActivities = async (status?: string) => {
|
try {
|
setLoading(true);
|
const response = await adminAPI.getActivityList({
|
page: pagination.page,
|
size: pagination.size,
|
status: status
|
});
|
|
if (response.code === 0) {
|
setActivities(response.data.list || []);
|
setPagination(prev => ({
|
...prev,
|
total: response.data.total || 0
|
}));
|
}
|
} catch (error) {
|
console.error('获取活动列表失败:', error);
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
// 初始化数据
|
useEffect(() => {
|
fetchActivities();
|
}, [pagination.page]);
|
|
// 切换Tab时重新获取数据
|
useEffect(() => {
|
const statusMap: { [key: string]: string } = {
|
'all': '',
|
'ongoing': '2',
|
'completed': '3'
|
};
|
fetchActivities(statusMap[activeTab]);
|
}, [activeTab]);
|
|
|
|
// 获取状态文本
|
const getStatusText = (status: string | number) => {
|
const statusMap: { [key: string]: string } = {
|
'1': '未开始',
|
'2': '进行中',
|
'3': '已结束',
|
'ongoing': '进行中',
|
'upcoming': '即将开始',
|
'completed': '已结束'
|
};
|
return statusMap[status.toString()] || status.toString();
|
};
|
|
// 获取分类文本
|
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}`;
|
};
|
|
|
|
// 处理活动点击
|
const handleActivityClick = (activityId: number) => {
|
navigate(`/admin-activity-detail/${activityId}`);
|
};
|
|
// 返回上一页
|
const handleGoBack = () => {
|
navigate('/admin');
|
};
|
|
return (
|
<div className="page admin-activity-list-page">
|
{/* 页面头部 */}
|
<PageHeader
|
title="活动列表"
|
onBack={handleGoBack}
|
/>
|
|
|
|
{/* 顶部Tab切换 */}
|
<div className="declaration-tabs">
|
<button
|
className={`declaration-tab ${activeTab === 'all' ? 'active' : ''}`}
|
onClick={() => setActiveTab('all')}
|
>
|
全部
|
</button>
|
<button
|
className={`declaration-tab ${activeTab === 'ongoing' ? 'active' : ''}`}
|
onClick={() => setActiveTab('ongoing')}
|
>
|
进行中
|
</button>
|
<button
|
className={`declaration-tab ${activeTab === 'completed' ? 'active' : ''}`}
|
onClick={() => setActiveTab('completed')}
|
>
|
已结束
|
</button>
|
</div>
|
|
|
|
{/* 活动列表 */}
|
<div className="activity-grid">
|
{loading ? (
|
<div className="loading">
|
<i className="fas fa-spinner fa-spin"></i>
|
<p>加载中...</p>
|
</div>
|
) : activities.length > 0 ? (
|
activities.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>时间：{formatActivityTime(activity.startTime, activity.endTime)}
|
</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>
|
);
|
};
|
|
export default AdminActivityListPage;
|
