Initial commit
This commit is contained in:
linxd
226
src/pages/register/supplier.tsx
Normal file
226
src/pages/register/supplier.tsx
Normal file
@ -0,0 +1,226 @@
|
||||
// 供应商注册
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useIntl, history } from 'umi';
|
||||
import { Form, Button, message, Radio, Checkbox, Modal, Spin } from 'antd';
|
||||
import { HomeOutlined } from '@ant-design/icons';
|
||||
import DomesticForm from './supplier/DomesticForm';
|
||||
import ForeignForm from './supplier/ForeignForm';
|
||||
import { coscoSupplierBaseAdd, fetchSurveyQuestions } from '@/servers/api/register';
|
||||
import './register.less';
|
||||
|
||||
const SupplierRegister: React.FC = () => {
|
||||
const [form] = Form.useForm();
|
||||
const intl = useIntl();
|
||||
const [supplierType, setSupplierType] = useState<string>('dvs');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [countdown, setCountdown] = useState(0);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [surveyQuestions, setSurveyQuestions] = useState<API.SurveyQuestionResponse>([]);
|
||||
const [fetchingQuestions, setFetchingQuestions] = useState(false);
|
||||
|
||||
// 获取问卷列表
|
||||
useEffect(() => {
|
||||
const fetchQuestions = async () => {
|
||||
setFetchingQuestions(true);
|
||||
try {
|
||||
const response = await fetchSurveyQuestions();
|
||||
if (response.success) {
|
||||
setSurveyQuestions(response.data || []);
|
||||
} else {
|
||||
message.error(response.message || '获取问卷列表失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取问卷列表出错:', error);
|
||||
message.error('获取问卷列表出错');
|
||||
} finally {
|
||||
setFetchingQuestions(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchQuestions();
|
||||
}, []);
|
||||
|
||||
// 获取短信验证码
|
||||
const handleGetCaptcha = () => {
|
||||
form
|
||||
.validateFields(['contactPhone'])
|
||||
.then((values) => {
|
||||
message.success(`验证码已发送至 ${values.contactPhone}`);
|
||||
let count = 60;
|
||||
setCountdown(count);
|
||||
|
||||
const timer = setInterval(() => {
|
||||
count--;
|
||||
setCountdown(count);
|
||||
if (count === 0) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 1000);
|
||||
})
|
||||
.catch((errorInfo) => {
|
||||
message.error('请先输入正确的手机号');
|
||||
});
|
||||
};
|
||||
|
||||
const onFinish = async (values: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 确保供应商类型添加到表单值中
|
||||
values.coscoSupplierBase = values.coscoSupplierBase || {};
|
||||
values.coscoSupplierBase.supplierType = supplierType;
|
||||
|
||||
console.log('供应商注册信息:', values);
|
||||
|
||||
// 直接调用API
|
||||
const response = await coscoSupplierBaseAdd(values);
|
||||
|
||||
if (response.success) {
|
||||
message.success('注册成功，请登录');
|
||||
history.push('/login');
|
||||
} else {
|
||||
message.error(response.message || '注册失败，请重试');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('注册出错:', error);
|
||||
message.error('注册失败，请稍后重试');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSupplierTypeChange = (e: any) => {
|
||||
form.resetFields();
|
||||
setSupplierType(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="register-page ">
|
||||
<div className="register-container large-width">
|
||||
<div className="back-home">
|
||||
<a onClick={() => history.push('/index')}>
|
||||
<HomeOutlined /> {intl.formatMessage({ id: 'login.back.home' })}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="register-title">
|
||||
{intl.formatMessage({ id: 'register.supplier.title' })}
|
||||
</div>
|
||||
|
||||
<Spin spinning={fetchingQuestions}>
|
||||
<Form
|
||||
form={form}
|
||||
name="supplier_register"
|
||||
className="register-form"
|
||||
onFinish={onFinish}
|
||||
layout="horizontal"
|
||||
labelAlign="right"
|
||||
size="large"
|
||||
labelCol={{ span: 7 }}
|
||||
wrapperCol={{ span: 17 }}
|
||||
>
|
||||
<Form.Item label="企业类型" labelCol={{ span: 2 }} wrapperCol={{ span: 19 }}>
|
||||
<Radio.Group onChange={handleSupplierTypeChange} buttonStyle="solid" value={supplierType}>
|
||||
<Radio.Button value="dvs">境内企业/机构</Radio.Button>
|
||||
<Radio.Button value="ovs">境外企业</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
{supplierType === 'dvs' ? (
|
||||
<DomesticForm
|
||||
form={form}
|
||||
countdown={countdown}
|
||||
surveyQuestions={surveyQuestions}
|
||||
handleGetCaptcha={handleGetCaptcha}
|
||||
/>
|
||||
) : (
|
||||
<ForeignForm
|
||||
form={form}
|
||||
countdown={countdown}
|
||||
handleGetCaptcha={handleGetCaptcha}
|
||||
surveyQuestions={surveyQuestions}
|
||||
/>
|
||||
)}
|
||||
<Form.Item
|
||||
name="agreement"
|
||||
valuePropName="checked"
|
||||
labelCol={{ span: 2 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
rules={[
|
||||
{
|
||||
validator: (_, value) =>
|
||||
value
|
||||
? Promise.resolve()
|
||||
: Promise.reject(new Error('请阅读并同意注册信息承诺书')),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Checkbox>
|
||||
我已阅读并同意
|
||||
<Button
|
||||
type="link"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setModalVisible(true);
|
||||
}}
|
||||
>
|
||||
《注册信息承诺书》
|
||||
</Button>
|
||||
</Checkbox>
|
||||
</Form.Item>
|
||||
<Form.Item wrapperCol={{ span: 24 }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Button type="primary" htmlType="submit" loading={loading}>
|
||||
{intl.formatMessage({ id: 'register.submit' })}
|
||||
</Button>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Spin>
|
||||
</div>
|
||||
|
||||
{/* 注册信息承诺书弹窗 */}
|
||||
<Modal
|
||||
title="注册信息承诺书"
|
||||
visible={modalVisible}
|
||||
onOk={() => {
|
||||
console.log('点击了确定按钮');
|
||||
setModalVisible(false);
|
||||
}}
|
||||
onCancel={() => {
|
||||
console.log('点击了取消按钮');
|
||||
setModalVisible(false);
|
||||
}}
|
||||
width={700}
|
||||
okText="我知道了"
|
||||
cancelButtonProps={{ style: { display: 'none' } }}
|
||||
destroyOnClose
|
||||
// maskClosable={false}
|
||||
>
|
||||
<div style={{ maxHeight: '60vh', overflow: 'auto' }}>
|
||||
<p>尊敬的用户：</p>
|
||||
<p>感谢您注册使用我们的平台。请您仔细阅读以下承诺内容：</p>
|
||||
<ol>
|
||||
<li>
|
||||
本人/单位承诺所提供的注册信息真实、准确、完整，不存在虚假记载、误导性陈述或重大遗漏。
|
||||
</li>
|
||||
<li>本人/单位承诺遵守平台的各项规则和要求，不从事任何违法违规活动。</li>
|
||||
<li>
|
||||
本人/单位了解并同意，如提供虚假信息或违反平台规则，平台有权终止服务并追究相关责任。
|
||||
</li>
|
||||
<li>本人/单位承诺妥善保管账号和密码，对账号下的所有操作和行为负责。</li>
|
||||
<li>本人/单位同意平台在必要范围内合法使用所提供的信息，用于提供服务和改善用户体验。</li>
|
||||
<li>
|
||||
本人/单位承诺遵守国家法律法规和行业规范，恪守商业道德，不从事任何损害平台或其他用户利益的行为。
|
||||
</li>
|
||||
<li>本人/单位承诺所上传的资质文件和证明材料真实有效，并对其真实性和合法性负责。</li>
|
||||
<li>本人/单位了解并同意，平台有权根据业务需要对用户资料进行审核，并保留最终解释权。</li>
|
||||
</ol>
|
||||
<p>特此承诺！</p>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupplierRegister;
|
||||
Reference in New Issue
Block a user