/**
|
* @author 韩天尊
|
* @time 2024-01-15
|
* @version 1.0.0
|
* @description 管理端志愿者审核详情页面，显示单个志愿者申请的详细信息并提供审核操作
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { useNavigate, useParams } from 'react-router-dom';
|
import { useAppContext } from '../context/AppContext';
|
import PageHeader from '../components/PageHeader';
|
import { adminAPI } from '../services/api';
|
import { AdminVolunteerReviewDetail } from '../types';
|
|
const AdminVolunteerReviewDetailPage: React.FC = () => {
|
const navigate = useNavigate();
|
const { id } = useParams<{ id: string }>();
|
const { state } = useAppContext();
|
const [reviewDetail, setReviewDetail] = useState<AdminVolunteerReviewDetail | null>(null);
|
const [loading, setLoading] = useState(true);
|
|
// 加载审核详情
|
useEffect(() => {
|
const loadReviewDetail = async () => {
|
setLoading(true);
|
const recordId = parseInt(id || '0');
|
|
try {
|
const response = await adminAPI.getVolunteerReviewDetail(recordId);
|
if (response.code === 0) {
|
setReviewDetail(response.data);
|
} else {
|
alert(response.msg || '获取志愿者审核详情失败');
|
navigate('/admin-volunteer-review');
|
}
|
} catch (error) {
|
console.error('获取志愿者审核详情失败:', error);
|
alert('获取志愿者审核详情失败，请稍后重试');
|
navigate('/admin-volunteer-review');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
if (id) {
|
loadReviewDetail();
|
}
|
}, [id, navigate]);
|
|
// 审核操作处理
|
const handleReview = async (action: 'approve' | 'reject', reason?: string) => {
|
if (!reviewDetail) return;
|
|
try {
|
const response = await adminAPI.singleReviewVolunteerApplication({
|
applicationId: reviewDetail.id,
|
action: action === 'approve' ? '1' : '2',
|
comment: reason || (action === 'approve' ? '符合志愿者要求' : '不符合志愿者要求')
|
});
|
|
if (response.code === 0) {
|
const newStatus = action === 'approve' ? '1' : '2';
|
const reviewTime = new Date().toLocaleString('zh-CN', {
|
year: 'numeric',
|
month: '2-digit',
|
day: '2-digit',
|
hour: '2-digit',
|
minute: '2-digit'
|
});
|
|
setReviewDetail(prev => prev ? {
|
...prev,
|
status: newStatus,
|
reviewTime,
|
reviewComment: reason || (action === 'approve' ? '符合志愿者要求' : '不符合志愿者要求')
|
} : null);
|
|
alert(`志愿者申请审核${action === 'approve' ? '通过' : '拒绝'}成功`);
|
} else {
|
alert(response.msg || `审核${action === 'approve' ? '通过' : '拒绝'}失败`);
|
}
|
} catch (error) {
|
console.error('审核操作失败:', error);
|
alert(`审核${action === 'approve' ? '通过' : '拒绝'}失败，请稍后重试`);
|
}
|
};
|
|
// 通过审核
|
const handleApprove = () => {
|
if (window.confirm('确认通过此志愿者申请吗？')) {
|
handleReview('approve');
|
}
|
};
|
|
// 拒绝审核
|
const handleReject = () => {
|
const reason = prompt('请输入拒绝原因（可选）：');
|
if (reason !== null) { // 用户没有取消
|
handleReview('reject', reason || '不符合志愿者要求');
|
}
|
};
|
|
// 获取状态文本
|
const getStatusText = (status: string) => {
|
const statusMap: { [key: string]: string } = {
|
'0': '待审核',
|
'1': '审核通过',
|
'2': '审核拒绝',
|
'pending': '待审核',
|
'approved': '审核通过',
|
'rejected': '审核拒绝'
|
};
|
return statusMap[status] || status;
|
};
|
|
// 格式化时间为 yyyy-MM-dd HH:mm 格式
|
const formatDateTime = (dateTime: string) => {
|
if (!dateTime) return '';
|
const date = new Date(dateTime);
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
const hours = String(date.getHours()).padStart(2, '0');
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
};
|
|
if (loading) {
|
return (
|
<div className="page admin-volunteer-review-detail-page">
|
<PageHeader title="审核详情" showBack={true} />
|
<div className="loading-state">
|
<i className="fas fa-spinner fa-spin"></i>
|
<p>加载中...</p>
|
</div>
|
</div>
|
);
|
}
|
|
if (!reviewDetail) {
|
return (
|
<div className="page admin-volunteer-review-detail-page">
|
<PageHeader title="审核详情" showBack={true} />
|
<div className="empty-state">
|
<i className="fas fa-exclamation-triangle"></i>
|
<p>未找到志愿者审核记录</p>
|
</div>
|
</div>
|
);
|
}
|
|
return (
|
<div className="page admin-volunteer-review-detail-page">
|
<PageHeader title="志愿者审核详情" showBack={true} />
|
|
<div className="review-detail-content">
|
{/* 志愿者信息 */}
|
<div className="detail-section">
|
<h3 className="section-title">志愿者信息</h3>
|
<div className="detail-info">
|
<div className="detail-item">
|
<label>姓名</label>
|
<span>{reviewDetail.name}</span>
|
</div>
|
<div className="detail-item">
|
<label>手机号</label>
|
<span>{reviewDetail.phone}</span>
|
</div>
|
<div className="detail-item">
|
<label>证件类型</label>
|
<span>身份证</span>
|
</div>
|
<div className="detail-item">
|
<label>证件号码</label>
|
<span>{reviewDetail.idCard}</span>
|
</div>
|
</div>
|
</div>
|
|
{/* 申请信息 */}
|
<div className="detail-section">
|
<h3 className="section-title">申请信息</h3>
|
<div className="detail-info">
|
<div className="detail-item">
|
<label>提交时间</label>
|
<span>{formatDateTime(reviewDetail.createTime)}</span>
|
</div>
|
<div className="detail-item">
|
<label>审核状态</label>
|
<span className={`status-badge ${reviewDetail.status}`}>
|
{getStatusText(reviewDetail.status)}
|
</span>
|
</div>
|
{reviewDetail.reviewTime && (
|
<div className="detail-item">
|
<label>审核时间</label>
|
<span>{reviewDetail.reviewTime}</span>
|
</div>
|
)}
|
{reviewDetail.reviewComment && (
|
<div className="detail-item">
|
<label>审核说明</label>
|
<p className="content-text">{reviewDetail.reviewComment}</p>
|
</div>
|
)}
|
</div>
|
</div>
|
|
{/* 审核操作 */}
|
{reviewDetail.status === 'pending' && (
|
<div className="detail-section">
|
<h3 className="section-title">审核操作</h3>
|
<div className="review-actions">
|
<button
|
className="review-btn approve"
|
onClick={handleApprove}
|
>
|
<i className="fas fa-check"></i>
|
<span>通过</span>
|
</button>
|
<button
|
className="review-btn reject"
|
onClick={handleReject}
|
>
|
<i className="fas fa-times"></i>
|
<span>拒绝</span>
|
</button>
|
</div>
|
</div>
|
)}
|
</div>
|
</div>
|
);
|
};
|
|
export default AdminVolunteerReviewDetailPage;
|
