import React, { useState, useEffect, useCallback } from 'react';
|
import { Table, Card, Input, Button, Space, Row, Col, Form, message, Spin } from 'antd';
|
import { SearchOutlined, DownloadOutlined } from '@ant-design/icons';
|
import { userAPI } from '../../services/api';
|
|
|
const VolunteerPoints = () => {
|
const [searchForm] = Form.useForm();
|
const [volunteerPoints, setVolunteerPoints] = useState([]);
|
const [loading, setLoading] = useState(false);
|
const [pagination, setPagination] = useState({
|
current: 1,
|
pageSize: 10,
|
total: 0,
|
});
|
const [filters, setFilters] = useState({});
|
|
const columns = [
|
{
|
title: '志愿者姓名',
|
dataIndex: 'name',
|
key: 'name',
|
},
|
{
|
title: '手机号',
|
dataIndex: 'phone',
|
key: 'phone',
|
},
|
{
|
title: '总积分',
|
dataIndex: 'totalPoints',
|
key: 'totalPoints',
|
render: (points) => <span style={{ color: '#52c41a', fontWeight: 'bold' }}>{points || 0}</span>,
|
},
|
{
|
title: '获得积分',
|
dataIndex: 'points',
|
key: 'points',
|
render: (points) => <span style={{ color: '#1890ff' }}>+{points || 0}</span>,
|
},
|
{
|
title: '使用积分',
|
dataIndex: 'redeemedPoints',
|
key: 'redeemedPoints',
|
render: (points) => <span style={{ color: '#ff4d4f' }}>-{points || 0}</span>,
|
},
|
];
|
|
// 获取积分数据
|
const fetchPointsData = useCallback(async (params = {}) => {
|
try {
|
setLoading(true);
|
const queryParams = {
|
page: pagination.current,
|
size: pagination.pageSize,
|
...filters,
|
...params,
|
};
|
|
const response = await userAPI.getUserList(queryParams);
|
if (response.code === 0) {
|
setVolunteerPoints(response.data.content || []);
|
setPagination(prev => ({
|
...prev,
|
total: response.data.totalElements || 0,
|
}));
|
}
|
} catch (error) {
|
console.error('获取积分数据失败:', error);
|
message.error('获取积分数据失败');
|
} finally {
|
setLoading(false);
|
}
|
}, [pagination.current, pagination.pageSize, filters]);
|
|
// 页面初始化加载数据
|
useEffect(() => {
|
fetchPointsData();
|
}, [fetchPointsData]);
|
|
const handleSearch = (values) => {
|
setFilters(values);
|
setPagination(prev => ({ ...prev, current: 1 }));
|
fetchPointsData({ ...values, page: 1 });
|
};
|
|
const handleReset = () => {
|
searchForm.resetFields();
|
setFilters({});
|
setPagination(prev => ({ ...prev, current: 1 }));
|
fetchPointsData({ page: 1 });
|
};
|
|
// 处理分页变化
|
const handleTableChange = (paginationInfo) => {
|
setPagination(prev => ({
|
...prev,
|
current: paginationInfo.current,
|
pageSize: paginationInfo.pageSize,
|
}));
|
fetchPointsData({
|
page: paginationInfo.current,
|
size: paginationInfo.pageSize,
|
});
|
};
|
|
const handleExport = () => {
|
console.log('导出数据');
|
};
|
|
return (
|
<div>
|
<div className="page-header">
|
<h1 className="page-title">积分查询</h1>
|
<p className="page-description">查询志愿者积分情况，支持导出数据</p>
|
</div>
|
|
<Card className="search-form">
|
<Form
|
form={searchForm}
|
layout="inline"
|
onFinish={handleSearch}
|
>
|
<Row gutter={[16, 16]} style={{ width: '100%' }} align="middle">
|
<Col xs={24} sm={12} md={6}>
|
<Form.Item name="name" label="姓名">
|
<Input placeholder="请输入姓名" />
|
</Form.Item>
|
</Col>
|
<Col xs={24} sm={12} md={6}>
|
<Form.Item name="phone" label="手机号">
|
<Input placeholder="请输入手机号" />
|
</Form.Item>
|
</Col>
|
<Col xs={24} sm={12} md={12}>
|
<Space>
|
<Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
|
搜索
|
</Button>
|
<Button onClick={handleReset}>
|
重置
|
</Button>
|
<Button icon={<DownloadOutlined />} onClick={handleExport}>
|
导出
|
</Button>
|
</Space>
|
</Col>
|
</Row>
|
</Form>
|
</Card>
|
|
<Card>
|
<Table
|
columns={columns}
|
dataSource={volunteerPoints}
|
rowKey="id"
|
loading={loading}
|
pagination={{
|
...pagination,
|
showSizeChanger: true,
|
showQuickJumper: true,
|
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
|
}}
|
onChange={handleTableChange}
|
/>
|
</Card>
|
</div>
|
);
|
};
|
|
export default VolunteerPoints;
|
