/**
|
* @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 { DeclarationRecord } from '../types';
|
import PageHeader from '../components/PageHeader';
|
import { formatActivityTime } from '../utils/timeFormatter';
|
|
const PointsDeclarationPage: React.FC = () => {
|
const navigate = useNavigate();
|
const { state, loadDeclarationRecords } = useAppContext();
|
const [activeTab, setActiveTab] = useState('all');
|
const [searchText, setSearchText] = useState('');
|
|
// 组件挂载时加载申报记录
|
useEffect(() => {
|
loadDeclarationRecords({ page: 1, size: 20 });
|
}, []); // 空依赖数组，只在组件挂载时执行一次
|
|
// 根据Tab筛选申报记录
|
const filteredRecords = state.declarationRecords.filter(record => {
|
if (activeTab === 'all') return true;
|
return record.status === activeTab;
|
}).filter(record => {
|
if (!searchText) return true;
|
return (record.title || record.activityName || '').toLowerCase().includes(searchText.toLowerCase());
|
});
|
|
// 处理Tab切换
|
const handleTabChange = (tab: string) => {
|
setActiveTab(tab);
|
};
|
|
// 处理搜索
|
const handleSearch = () => {
|
// 搜索逻辑已在filteredRecords中实现
|
};
|
|
// 跳转到申报详情
|
const handleDeclarationClick = (record: DeclarationRecord) => {
|
// 跳转到申报详情页面
|
navigate(`/declaration-detail/${record.id}`);
|
};
|
|
// 跳转到申报表单
|
const handleNewDeclaration = () => {
|
navigate('/declaration-form');
|
};
|
|
// 获取状态显示文本
|
const getStatusText = (status: string | number) => {
|
const statusMap: { [key: string]: string } = {
|
'0': '待审核',
|
'1': '审核通过',
|
'2': '审核拒绝',
|
'approved': '已审核',
|
'pending': '审核中',
|
'rejected': '已拒绝'
|
};
|
return statusMap[status.toString()] || status.toString();
|
};
|
|
return (
|
<div className="page points-declaration-page">
|
<PageHeader title="积分申报" />
|
|
{/* 搜索框 */}
|
<div className="declaration-search-bar">
|
<div className="search-box declaration-search">
|
<i className="fas fa-search"></i>
|
<input
|
type="text"
|
placeholder="请输入申报标题"
|
value={searchText}
|
onChange={(e) => setSearchText(e.target.value)}
|
/>
|
<button className="declaration-search-btn" onClick={handleSearch}>
|
搜索
|
</button>
|
</div>
|
</div>
|
|
{/* 顶部Tab切换 */}
|
<div className="declaration-tabs">
|
<button
|
className={`declaration-tab ${activeTab === 'all' ? 'active' : ''}`}
|
onClick={() => handleTabChange('all')}
|
>
|
全部
|
</button>
|
<button
|
className={`declaration-tab ${activeTab === 'pending' ? 'active' : ''}`}
|
onClick={() => handleTabChange('pending')}
|
>
|
审核中
|
</button>
|
<button
|
className={`declaration-tab ${activeTab === 'approved' ? 'active' : ''}`}
|
onClick={() => handleTabChange('approved')}
|
>
|
已审核
|
</button>
|
</div>
|
|
{/* 申报列表 */}
|
<div className="declaration-list">
|
{filteredRecords.map((record) => (
|
<div key={record.id} className="declaration-item" onClick={() => handleDeclarationClick(record)}>
|
<div className="declaration-header">
|
<div className="declaration-title">{record.title || record.activityName}</div>
|
<div className={`declaration-status ${record.status}`}>
|
{getStatusText(record.status)}
|
</div>
|
</div>
|
<div className="declaration-info">
|
<div className="declaration-info-row">
|
<i className="fas fa-tag"></i>
|
<span>申报类型：{record.categoryDesc || record.category}</span>
|
</div>
|
<div className="declaration-info-row">
|
<i className="fas fa-clock"></i>
|
<span>时间：{formatActivityTime(record.startTime, record.endTime, record.time)}</span>
|
</div>
|
</div>
|
<div className="declaration-content">{record.content}</div>
|
</div>
|
))}
|
</div>
|
|
{/* 悬浮自主申报按钮 */}
|
<div className="floating-declaration-btn" onClick={handleNewDeclaration}>
|
<i className="fas fa-plus"></i>
|
<span>自主申报</span>
|
</div>
|
</div>
|
);
|
};
|
|
export default PointsDeclarationPage;
|
