import React, { useState, useEffect, useCallback } from 'react';
|
import { Card, Row, Col, Descriptions, Avatar, Tag, Table, Statistic, Spin, message } from 'antd';
|
import { UserOutlined } from '@ant-design/icons';
|
import { useParams, useNavigate } from 'react-router-dom';
|
import { applicationAPI } from '../../services/api';
|
import dayjs from 'dayjs';
|
|
const VolunteerDetail = () => {
|
const { id } = useParams();
|
const navigate = useNavigate();
|
const [loading, setLoading] = useState(false);
|
const [volunteerDetail, setVolunteerDetail] = useState(null);
|
const [activityRecords, setActivityRecords] = useState([]);
|
|
// 获取志愿者详情数据
|
const fetchVolunteerDetail = useCallback(async () => {
|
try {
|
setLoading(true);
|
const response = await applicationAPI.getApplicationById(id);
|
if (response.code === 0) {
|
const data = response.data;
|
|
// 转换状态显示
|
const statusMap = {
|
'0': '待审核',
|
'1': '审核通过',
|
'2': '审核不通过'
|
};
|
|
// 设置志愿者基本信息
|
setVolunteerDetail({
|
id: data.id,
|
name: data.name,
|
phone: data.phone,
|
idCard: data.idCard,
|
status: statusMap[data.status] || data.status,
|
totalPoints: data.applicationsCount?.points || 0,
|
activities: data.applicationsCount?.activityNum || 0,
|
serviceHours: data.applicationsCount?.serviceHours || 0,
|
});
|
|
// 设置活动记录数据
|
const activities = data.activitiesList?.map(item => ({
|
key: item.id || Math.random(),
|
activityName: item.title,
|
date: item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD') : '',
|
points: item.earnedPoints || 0,
|
status: item.status === '1' ? '已报名' : item.status === '2' ? '已签到' : item.status === '3' ? '已签退' : '未知',
|
})) || [];
|
|
setActivityRecords(activities);
|
} else {
|
message.error('获取志愿者详情失败');
|
navigate(-1);
|
}
|
} catch (error) {
|
console.error('获取志愿者详情失败:', error);
|
message.error('获取志愿者详情失败');
|
navigate(-1);
|
} finally {
|
setLoading(false);
|
}
|
}, [id, navigate]);
|
|
// 页面初始化加载数据
|
useEffect(() => {
|
if (id) {
|
fetchVolunteerDetail();
|
}
|
}, [id, fetchVolunteerDetail]);
|
|
const activityColumns = [
|
{
|
title: '活动名称',
|
dataIndex: 'activityName',
|
key: 'activityName',
|
},
|
{
|
title: '参与日期',
|
dataIndex: 'date',
|
key: 'date',
|
},
|
{
|
title: '获得积分',
|
dataIndex: 'points',
|
key: 'points',
|
render: (points) => <span style={{ color: '#52c41a' }}>+{points}</span>,
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
key: 'status',
|
render: (status) => {
|
const statusColorMap = {
|
'已报名': 'blue',
|
'已签到': 'green',
|
'已签退': 'purple',
|
'未知': 'default',
|
};
|
return <Tag color={statusColorMap[status] || 'default'}>{status}</Tag>;
|
},
|
},
|
];
|
|
// 获取状态颜色
|
const getStatusColor = (status) => {
|
switch (status) {
|
case '审核通过':
|
return 'success';
|
case '待审核':
|
return 'warning';
|
case '审核不通过':
|
return 'error';
|
default:
|
return 'default';
|
}
|
};
|
|
if (loading) {
|
return (
|
<div style={{ textAlign: 'center', padding: '50px' }}>
|
<Spin size="large" />
|
<div style={{ marginTop: 16 }}>加载中...</div>
|
</div>
|
);
|
}
|
|
if (!volunteerDetail) {
|
return (
|
<div style={{ textAlign: 'center', padding: '50px' }}>
|
<div>志愿者信息不存在</div>
|
</div>
|
);
|
}
|
|
return (
|
<div>
|
<div className="page-header">
|
<h1 className="page-title">志愿者详情</h1>
|
<p className="page-description">查看志愿者的详细信息和活动记录</p>
|
</div>
|
|
<Row gutter={[16, 16]}>
|
<Col xs={24} lg={8}>
|
<Card>
|
<div style={{ textAlign: 'center', marginBottom: 24 }}>
|
<Avatar size={80} icon={<UserOutlined />} />
|
<h2 style={{ marginTop: 16 }}>{volunteerDetail.name}</h2>
|
<Tag color={getStatusColor(volunteerDetail.status)}>{volunteerDetail.status}</Tag>
|
</div>
|
<Descriptions column={1}>
|
<Descriptions.Item label="手机号">{volunteerDetail.phone}</Descriptions.Item>
|
<Descriptions.Item label="身份证号">{volunteerDetail.idCard}</Descriptions.Item>
|
</Descriptions>
|
</Card>
|
</Col>
|
<Col xs={24} lg={16}>
|
<Row gutter={[16, 16]}>
|
<Col xs={24} sm={8}>
|
<Card>
|
<Statistic
|
title="总积分"
|
value={volunteerDetail.totalPoints}
|
valueStyle={{ color: '#52c41a' }}
|
/>
|
</Card>
|
</Col>
|
<Col xs={24} sm={8}>
|
<Card>
|
<Statistic
|
title="参与活动"
|
value={volunteerDetail.activities}
|
valueStyle={{ color: '#1890ff' }}
|
suffix="次"
|
/>
|
</Card>
|
</Col>
|
<Col xs={24} sm={8}>
|
<Card>
|
<Statistic
|
title="服务时长"
|
value={volunteerDetail.serviceHours}
|
valueStyle={{ color: '#faad14' }}
|
suffix="小时"
|
/>
|
</Card>
|
</Col>
|
</Row>
|
<Card title="活动记录" style={{ marginTop: 16 }}>
|
<Table
|
columns={activityColumns}
|
dataSource={activityRecords}
|
pagination={false}
|
size="small"
|
/>
|
</Card>
|
</Col>
|
</Row>
|
</div>
|
);
|
};
|
|
export default VolunteerDetail;
|
