import React, { useState } from 'react';
|
import { Form, Input, Select, DatePicker, InputNumber, Button, Card, message, Row, Col, Upload } from 'antd';
|
import { useNavigate } from 'react-router-dom';
|
import { activityAPI } from '../../services/api';
|
import { UploadOutlined } from '@ant-design/icons';
|
import dayjs from 'dayjs';
|
import './ActivityCreate.css';
|
|
const { Option } = Select;
|
const { TextArea } = Input;
|
|
const ActivityCreate = () => {
|
const [form] = Form.useForm();
|
const [loading, setLoading] = useState(false);
|
const navigate = useNavigate();
|
|
const onFinish = async (values) => {
|
try {
|
setLoading(true);
|
|
// 活动分类映射
|
const categoryMap = {
|
'1': '党的建设',
|
'2': '经济发展',
|
'3': '平安法治',
|
'4': '民生服务',
|
'5': '失信违法'
|
};
|
|
// 处理时间格式
|
const activityData = {
|
...values,
|
categoryDesc: categoryMap[values.category] || values.category, // 添加categoryDesc字段
|
startTime: values.startTime.toISOString(),
|
endTime: values.endTime.toISOString(),
|
deadline: values.deadline.toISOString(),
|
currentVolunteers: 0,
|
status: '报名中',
|
createTime: new Date().toISOString(),
|
};
|
|
const response = await activityAPI.saveActivity(activityData);
|
if (response.code === 0) {
|
message.success('活动发布成功！');
|
navigate('/activities');
|
} else {
|
message.error('发布失败，请检查表单信息');
|
}
|
} catch (error) {
|
console.error('发布活动失败:', error);
|
message.error('发布失败，请检查表单信息');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
const onFinishFailed = (errorInfo) => {
|
console.log('Failed:', errorInfo);
|
message.error('请检查表单信息');
|
};
|
|
const handleCancel = () => {
|
navigate('/activities');
|
};
|
|
return (
|
<div>
|
<div className="page-header">
|
<h1 className="page-title">发布活动</h1>
|
<p className="page-description">创建新的志愿者活动，设置活动信息和积分规则</p>
|
</div>
|
|
<Card>
|
<Form
|
form={form}
|
layout="vertical"
|
onFinish={onFinish}
|
onFinishFailed={onFinishFailed}
|
initialValues={{
|
category: '4',
|
maxParticipants: 30,
|
points: 10,
|
}}
|
>
|
<Row gutter={[24, 0]}>
|
<Col xs={24} md={12}>
|
<Form.Item
|
name="title"
|
label="活动名称"
|
rules={[{ required: true, message: '请输入活动名称' }]}
|
>
|
<Input placeholder="请输入活动名称" />
|
</Form.Item>
|
</Col>
|
<Col xs={24} md={12}>
|
<Form.Item
|
name="category"
|
label="活动分类"
|
rules={[{ required: true, message: '请选择活动分类' }]}
|
>
|
<Select placeholder="请选择活动分类">
|
<Option value="1">党的建设</Option>
|
<Option value="2">经济发展</Option>
|
<Option value="3">平安法治</Option>
|
<Option value="4">民生服务</Option>
|
<Option value="5">失信违法</Option>
|
</Select>
|
</Form.Item>
|
</Col>
|
</Row>
|
|
<Row gutter={[24, 0]}>
|
<Col xs={24} md={12}>
|
<Form.Item
|
name="startTime"
|
label="活动开始时间"
|
rules={[{ required: true, message: '请选择活动开始时间' }]}
|
>
|
<DatePicker
|
showTime
|
format="YYYY-MM-DD HH:mm"
|
style={{ width: '100%' }}
|
placeholder="请选择活动开始时间"
|
/>
|
</Form.Item>
|
</Col>
|
<Col xs={24} md={12}>
|
<Form.Item
|
name="endTime"
|
label="活动结束时间"
|
rules={[{ required: true, message: '请选择活动结束时间' }]}
|
>
|
<DatePicker
|
showTime
|
format="YYYY-MM-DD HH:mm"
|
style={{ width: '100%' }}
|
placeholder="请选择活动结束时间"
|
/>
|
</Form.Item>
|
</Col>
|
</Row>
|
|
<Row gutter={[24, 0]}>
|
<Col xs={24} md={12}>
|
<Form.Item
|
name="location"
|
label="活动地点"
|
rules={[{ required: true, message: '请输入活动地点' }]}
|
>
|
<Input placeholder="请输入活动地点" />
|
</Form.Item>
|
</Col>
|
<Col xs={24} md={12}>
|
<Form.Item
|
name="deadline"
|
label="报名截止时间"
|
rules={[{ required: true, message: '请选择报名截止时间' }]}
|
>
|
<DatePicker
|
showTime
|
format="YYYY-MM-DD HH:mm"
|
style={{ width: '100%' }}
|
placeholder="请选择报名截止时间"
|
/>
|
</Form.Item>
|
</Col>
|
</Row>
|
|
<Row gutter={[24, 0]}>
|
<Col xs={24} md={8}>
|
<Form.Item
|
name="maxParticipants"
|
label="最大志愿者人数"
|
rules={[{ required: true, message: '请输入最大志愿者人数' }]}
|
>
|
<InputNumber
|
min={1}
|
style={{ width: '100%' }}
|
placeholder="请输入最大志愿者人数"
|
/>
|
</Form.Item>
|
</Col>
|
<Col xs={24} md={8}>
|
<Form.Item
|
name="points"
|
label="活动积分"
|
rules={[{ required: true, message: '请输入活动积分' }]}
|
>
|
<InputNumber
|
min={0}
|
style={{ width: '100%' }}
|
placeholder="请输入活动积分"
|
/>
|
</Form.Item>
|
</Col>
|
<Col xs={24} md={8}>
|
<Form.Item
|
name="placeholder"
|
label=""
|
>
|
<div className="tip-box">
|
</div>
|
</Form.Item>
|
</Col>
|
</Row>
|
|
<Form.Item
|
name="content"
|
label="活动内容"
|
rules={[{ required: true, message: '请输入活动内容' }]}
|
>
|
<TextArea
|
rows={6}
|
placeholder="请详细描述活动内容、要求、注意事项等"
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="cover"
|
label="活动封面"
|
>
|
<Upload
|
name="cover"
|
listType="picture-card"
|
maxCount={5}
|
beforeUpload={() => false}
|
multiple
|
>
|
<div className="upload-button">
|
<UploadOutlined className="upload-icon" />
|
<div className="upload-text">上传封面</div>
|
</div>
|
</Upload>
|
</Form.Item>
|
|
<div className="form-actions">
|
<Button onClick={handleCancel}>
|
取消
|
</Button>
|
<Button type="primary" htmlType="submit" loading={loading}>
|
发布活动
|
</Button>
|
</div>
|
</Form>
|
</Card>
|
</div>
|
);
|
};
|
|
export default ActivityCreate;
|
