227 lines
7.8 KiB
TypeScript
227 lines
7.8 KiB
TypeScript
|
// 供应商注册
|
|||
|
|
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;
|