/**
|
* @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 { formatActivityTime } from '../utils/timeFormatter';
|
import PageHeader from '../components/PageHeader';
|
import { APP_CONFIG } from '../config/appConfig';
|
import './HomePage.less';
|
|
const HomePage: React.FC = () => {
|
const navigate = useNavigate();
|
const { state, loadActivities } = useAppContext();
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|
// 轮播图数据
|
const carouselImages = [
|
{
|
src: require('../image/image1.jpg'),
|
alt: '公益活动1'
|
},
|
{
|
src: require('../image/image2.jpg'),
|
alt: '公益活动2'
|
}
|
];
|
|
// 组件挂载时加载活动数据
|
useEffect(() => {
|
loadActivities({ page: 1, size: 10 });
|
}, []); // 移除loadActivities依赖，避免无限循环
|
|
// 自动轮播
|
useEffect(() => {
|
const timer = setInterval(() => {
|
setCurrentSlide((prev) => (prev + 1) % carouselImages.length);
|
}, 3000);
|
|
return () => clearInterval(timer);
|
}, [carouselImages.length]);
|
|
// 功能按钮点击处理
|
const handleFunctionClick = (route: string) => {
|
navigate(route);
|
};
|
|
// 获取状态文本
|
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 } = {
|
'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(`/activity-detail/${activityId}`);
|
};
|
|
return (
|
<div className="page">
|
{/* 轮播图区域 */}
|
<Carousel
|
images={carouselImages}
|
currentSlide={currentSlide}
|
onSlideChange={setCurrentSlide}
|
/>
|
|
{/* 功能按钮区域 */}
|
<div className="function-buttons">
|
<button
|
className="function-btn"
|
onClick={() => handleFunctionClick('/points-declaration')}
|
>
|
<i className="fas fa-plus-circle"></i>
|
<span>积分申报</span>
|
</button>
|
<button
|
className="function-btn"
|
onClick={() => handleFunctionClick('/my-registrations')}
|
>
|
<i className="fas fa-list-alt"></i>
|
<span>活动列表</span>
|
</button>
|
<button
|
className="function-btn"
|
onClick={() => handleFunctionClick('/scan-checkin')}
|
>
|
<i className="fas fa-check-circle"></i>
|
<span>签到/签退</span>
|
</button>
|
<button
|
className="function-btn"
|
onClick={() => handleFunctionClick('/points-redemption')}
|
>
|
<i className="fas fa-qrcode"></i>
|
<span>积分核销</span>
|
</button>
|
</div>
|
|
{/* 最新活动列表 */}
|
<div className="activity-list">
|
<div className="section-header">
|
<h3 className="section-title">最新活动</h3>
|
<button className="more-btn" onClick={() => handleFunctionClick('/my-registrations')}>
|
<span>更多</span>
|
<i className="fas fa-chevron-right"></i>
|
</button>
|
</div>
|
<div className="activity-grid">
|
{state.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, activity.time)}
|
</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-coins"></i>活动积分：<span className="activity-points">{activity.points}</span>
|
</div>
|
</div>
|
</div>
|
))}
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
export default HomePage;
|
