/**
|
* @author 韩天尊
|
* @time 2024-01-15
|
* @version 1.0.0
|
* @description 自主申报详情页面组件
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { useParams, useNavigate } from 'react-router-dom';
|
import { useAppContext } from '../context/AppContext';
|
import { pointsAPI } from '../services/api';
|
import { DeclarationRecord } from '../types';
|
import PageHeader from '../components/PageHeader';
|
import { formatActivityTime } from '../utils/timeFormatter';
|
|
const DeclarationDetailPage: React.FC = () => {
|
const { id } = useParams<{ id: string }>();
|
const navigate = useNavigate();
|
const { state } = useAppContext();
|
const [declaration, setDeclaration] = useState<DeclarationRecord | null>(null);
|
const [loading, setLoading] = useState(true);
|
const [error, setError] = useState('');
|
|
useEffect(() => {
|
const loadDeclarationDetail = async () => {
|
try {
|
setLoading(true);
|
const response = await pointsAPI.getDeclarationDetail(Number(id));
|
if (response.code === 0) {
|
setDeclaration(response.data);
|
} else {
|
setError('申报记录不存在');
|
}
|
} catch (err: any) {
|
setError(err.message || '获取申报详情失败');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
if (id) {
|
loadDeclarationDetail();
|
}
|
}, [id]);
|
|
// 获取状态显示文本
|
const getStatusText = (status: string | number) => {
|
const statusMap: { [key: string]: string } = {
|
'0': '待审核',
|
'1': '审核通过',
|
'2': '审核拒绝',
|
'approved': '已审核',
|
'pending': '审核中',
|
'rejected': '已拒绝'
|
};
|
return statusMap[status.toString()] || status.toString();
|
};
|
|
// 获取状态样式类名
|
const getStatusClass = (status: string | number) => {
|
const statusStr = status.toString();
|
if (statusStr === '0' || statusStr === 'pending') return 'pending';
|
if (statusStr === '1' || statusStr === 'approved') return 'approved';
|
if (statusStr === '2' || statusStr === 'rejected') return 'rejected';
|
return 'pending';
|
};
|
|
if (loading) {
|
return (
|
<div className="page">
|
<PageHeader title="申报详情" showBack={true} />
|
<div className="loading-container">
|
<div className="loading-spinner"></div>
|
<p>加载中...</p>
|
</div>
|
</div>
|
);
|
}
|
|
if (error || !declaration) {
|
return (
|
<div className="page">
|
<PageHeader title="申报详情" showBack={true} />
|
<div className="error-container">
|
<div className="error-icon">
|
<i className="fas fa-exclamation-triangle"></i>
|
</div>
|
<p>{error || '申报记录不存在'}</p>
|
<button
|
className="retry-btn"
|
onClick={() => navigate(-1)}
|
>
|
返回
|
</button>
|
</div>
|
</div>
|
);
|
}
|
|
return (
|
<div className="page">
|
<PageHeader title="申报详情" showBack={true} />
|
|
<div className="activity-detail-content">
|
{/* 申报状态 */}
|
<div className="detail-section">
|
<h3 className="section-title">申报状态</h3>
|
<div className="detail-info">
|
<div className="detail-item">
|
<label>审核状态</label>
|
<span className={`declaration-status ${getStatusClass(declaration.status)}`}>
|
{getStatusText(declaration.status)}
|
</span>
|
</div>
|
{declaration.reviewComment && (
|
<div className="detail-item">
|
<label>审核意见</label>
|
<p>{declaration.reviewComment}</p>
|
</div>
|
)}
|
</div>
|
</div>
|
|
{/* 基础信息 */}
|
<div className="detail-section">
|
<h3 className="section-title">基础信息</h3>
|
<div className="detail-info">
|
<div className="detail-item">
|
<label>申报标题</label>
|
<span>{declaration.title || declaration.activityName || '无标题'}</span>
|
</div>
|
<div className="detail-item">
|
<label>申报类型</label>
|
<span>{declaration.categoryDesc || declaration.category || '未分类'}</span>
|
</div>
|
<div className="detail-item">
|
<label>二级分类</label>
|
<span>{declaration.secondary || '无'}</span>
|
</div>
|
<div className="detail-item">
|
<label>活动名称</label>
|
<span>{declaration.activityName || '无'}</span>
|
</div>
|
<div className="detail-item">
|
<label>服务时间</label>
|
<span>{formatActivityTime(declaration.startTime, declaration.endTime, declaration.time)}</span>
|
</div>
|
<div className="detail-item">
|
<label>申报内容</label>
|
<p>{declaration.content || '暂无详细描述'}</p>
|
</div>
|
</div>
|
</div>
|
|
{/* 积分信息 */}
|
<div className="detail-section">
|
<h3 className="section-title">积分信息</h3>
|
<div className="detail-info">
|
<div className="detail-item">
|
<label>申报积分</label>
|
<span className="points-value">{declaration.points} 分</span>
|
</div>
|
<div className="detail-item">
|
<label>服务时长</label>
|
<span>{declaration.serviceHours || 0} 小时</span>
|
</div>
|
<div className="detail-item">
|
<label>积分类型</label>
|
<span>{declaration.isPositive ? '正向积分' : '负向积分'}</span>
|
</div>
|
<div className="detail-item">
|
<label>申报类型</label>
|
<span>{declaration.type || '自主申报'}</span>
|
</div>
|
</div>
|
</div>
|
|
{/* 操作按钮 */}
|
<div className="detail-actions">
|
<button
|
className="signup-btn secondary"
|
onClick={() => navigate(-1)}
|
>
|
<i className="fas fa-arrow-left"></i>
|
返回
|
</button>
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
export default DeclarationDetailPage;
|
