/**
|
* @author 韩天尊
|
* @time 2024-01-15
|
* @version 1.0.0
|
* @description 志愿者注册页面组件
|
*/
|
import React, { useState } from 'react';
|
import { useNavigate } from 'react-router-dom';
|
import { volunteerAPI } from '../services/api';
|
|
const VolunteerRegisterPage: React.FC = () => {
|
const navigate = useNavigate();
|
const [formData, setFormData] = useState({
|
name: '',
|
idCard: '',
|
phone: ''
|
});
|
const [loading, setLoading] = useState(false);
|
|
const handleInputChange = (field: string, value: string) => {
|
setFormData(prev => ({
|
...prev,
|
[field]: value
|
}));
|
};
|
|
const handleGoBack = () => {
|
// 如果未登录，返回首页；如果已登录，返回个人中心
|
const token = localStorage.getItem('token');
|
if (token) {
|
navigate('/profile');
|
} else {
|
navigate('/');
|
}
|
};
|
|
const handleSubmit = async () => {
|
// 简单的表单验证
|
if (!formData.name.trim()) {
|
alert('请输入真实姓名');
|
return;
|
}
|
if (!formData.idCard.trim()) {
|
alert('请输入身份证号');
|
return;
|
}
|
if (!formData.phone.trim()) {
|
alert('请输入手机号码');
|
return;
|
}
|
|
setLoading(true);
|
try {
|
await volunteerAPI.register(formData);
|
alert('注册提交成功，请等待审核结果');
|
// 如果未登录，跳转到首页；如果已登录，跳转到个人中心
|
const token = localStorage.getItem('token');
|
if (token) {
|
navigate('/profile');
|
} else {
|
navigate('/');
|
}
|
} catch (error) {
|
console.error('注册失败:', error);
|
alert('注册失败，请重试');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
return (
|
<div className="page">
|
{/* 页面头部 */}
|
<div className="page-header">
|
<button className="back-btn" onClick={handleGoBack}>
|
<i className="fas fa-arrow-left"></i>
|
</button>
|
<h2>志愿者注册</h2>
|
</div>
|
|
{/* 志愿者注册表单 */}
|
<div className="volunteer-register-form">
|
<div className="form-group">
|
<label>真实姓名</label>
|
<input
|
type="text"
|
placeholder="请输入真实姓名"
|
className="form-input"
|
value={formData.name}
|
onChange={(e) => handleInputChange('name', e.target.value)}
|
/>
|
</div>
|
|
<div className="form-group">
|
<label>身份证号</label>
|
<input
|
type="text"
|
placeholder="请输入身份证号"
|
className="form-input"
|
value={formData.idCard}
|
onChange={(e) => handleInputChange('idCard', e.target.value)}
|
/>
|
</div>
|
|
<div className="form-group">
|
<label>手机号码</label>
|
<input
|
type="tel"
|
placeholder="请输入手机号码"
|
className="form-input"
|
value={formData.phone}
|
onChange={(e) => handleInputChange('phone', e.target.value)}
|
/>
|
</div>
|
|
{/* 注册说明 */}
|
<div className="register-notice">
|
<div className="notice-item">
|
<i className="fas fa-shield-alt"></i>
|
<span>您的个人信息将被严格保密</span>
|
</div>
|
<div className="notice-item">
|
<i className="fas fa-clock"></i>
|
<span>注册成功后即可参与志愿服务活动</span>
|
</div>
|
</div>
|
|
<div className="form-actions">
|
<button
|
className="submit-btn"
|
onClick={handleSubmit}
|
disabled={loading}
|
>
|
<i className="fas fa-user-plus"></i>
|
{loading ? '提交中...' : '提交注册'}
|
</button>
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
export default VolunteerRegisterPage;
|
