fe_supplier_frontend/src/pages/register/supplier.tsx

// 供应商注册
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 Person from './supplier/Person';
import { addAgent, coscoSupplierBaseAdd, fetchSurveyQuestions } from '@/servers/api/register';
import './register.less';

interface supplierWithInputProps {
  supplierWithInput?: Boolean;
  exitId?: string;
  onOk?: () => void;
}

const SupplierRegister: React.FC<supplierWithInputProps> = (props) => {
  const { supplierWithInput = false, exitId = '', onOk } = props;
  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(() => {
    //供应商带录入
    if (supplierWithInput) {

    }
    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 onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const onFinish = async (values: any) => {
    setLoading(true);
    try {
      // 确保供应商类型添加到表单值中
      values.coscoSupplierBase = values.coscoSupplierBase || {};
      values.coscoSupplierBase.supplierType = supplierType;

      if(supplierType === 'pe') {
        values.coscoSupplierBase.personName = values.coscoSupplierBase.name;
        values.coscoSupplierBase.personPhone = values.coscoSupplierBase.contactPhone;
        values.coscoSupplierSurveyAttachments = [{
          attachmentsType: "accessory",
          fileName: values.attachments.file.response.fileName,
          fileType: values.attachments.file.response.fileType,
          fileSize: values.attachments.file.response.fileSize,
          filePath: values.attachments.file.response.filePath,
          fileUrl: values.attachments.file.response.filePath,
        }]
      }
      console.log('供应商注册信息:', values);
      // 直接调用API  supplierWithInput === true 供应商注册代录 否则 注册  accessory

      const response = await (supplierWithInput ? addAgent(values) : coscoSupplierBaseAdd(values));

      if (response.success) {
        if (!supplierWithInput) {
          message.success('注册成功，请登录');
          history.push('/login');
        } else {
          message.success(`${exitId ? '修改成功' : '注册成功'}`);
          onOk?.();
        }
      } 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 ${supplierWithInput ? ' on' : ''}`}>
      <div className="register-container large-width">
        {!supplierWithInput && (
          <>
            <div className="back-home">
              <a onClick={() => history.push('/login')}>
                <HomeOutlined /> 返回
              </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}
            onFinishFailed={onFinishFailed}
            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>
                {supplierWithInput && (
                  <Radio.Button value="pe">个人</Radio.Button>
                )}
              </Radio.Group>
            </Form.Item>


            {supplierType === 'dvs' ? (
              <DomesticForm
                form={form}
                countdown={countdown}
                surveyQuestions={surveyQuestions}
                handleGetCaptcha={handleGetCaptcha}
              />
            ) : supplierType === 'ovs' ? (
              <ForeignForm
                form={form}
                countdown={countdown}
                handleGetCaptcha={handleGetCaptcha}
                surveyQuestions={surveyQuestions}
              />
            ) : (
              <Person
                form={form}
                countdown={countdown}
                handleGetCaptcha={handleGetCaptcha}
                surveyQuestions={surveyQuestions}
              />
            )}
            {supplierType !== 'pe' && (
              <Form.Item
                name="agreement"
                valuePropName="checked"
                wrapperCol={{ span: 24 }}
                rules={[
                  {
                    validator: (_, value) =>
                      value
                        ? Promise.resolve()
                        : Promise.reject(new Error('请阅读并同意注册信息承诺书')),
                  },
                ]}
              >
                <div style={{ textAlign: 'center' }}>
                <Checkbox>
                  我已阅读并同意
                  <Button
                    type="link"
                    onClick={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                      setModalVisible(true);
                    }}
                  >
                    《注册信息承诺书》
                  </Button>
                </Checkbox>
                </div>
              </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;