登录 个人 与 零星采购

src/pages/register/supplier/CommonFormSections.tsx

@@ -2,7 +2,7 @@
  * 供应商注册表单通用部分
  * 封装了国内企业和境外企业注册表单相同的部分
  */
-import React, { useState, useEffect }  from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Form,
   Input,
@@ -298,20 +298,20 @@ export const InvoiceSection: React.FC<CommonFormSectionsProps> = ({ form }) => {
  * 包含开户银行、账户名称、账号、所在地区等
  */
 export const BankAccountSection: React.FC<CommonFormSectionsProps> = ({ form, supplierType }) => {
-   // 地区
-   const [addressOptions, setAddressOptions] = useState<API.RegionOption[]>([]);
-  
-   useEffect(() => {
-    if(supplierType) {
-      const  submitInterface =  supplierType === 'dvs'?  getRegionTree : getregionInternational;
+  // 地区
+  const [addressOptions, setAddressOptions] = useState<API.RegionOption[]>([]);
+
+  useEffect(() => {
+    if (supplierType) {
+      const submitInterface = supplierType === 'dvs' ? getRegionTree : getregionInternational;
       submitInterface().then(res => {
         if (res.code === 200) {
           setAddressOptions(convertToCascaderOptions(res.data));
         }
       });
     }
-   
-   }, [supplierType]);
+
+  }, [supplierType]);
   return (
     <>
       <div className="form-section-title">银行账户</div>

src/pages/register/supplier/Person.tsx

@@ -0,0 +1,106 @@
+/* 境外企业 表单项 */
+import React from 'react';
+import { Form, Input, Button, Row, Col, Upload } from 'antd';
+import {
+  MobileOutlined,
+  UploadOutlined
+} from '@ant-design/icons';
+
+import { validateFileSize } from '@/utils/utils';
+
+
+interface ForeignFormProps {
+  form: any;
+  countdown: number;
+  handleGetCaptcha: () => void;
+  surveyQuestions?: API.SurveyQuestionResponse; // 本身就是数组类型
+}
+
+/**
+ * 个人注册表单
+ * 基本信息部分为个人
+ */
+const ForeignForm: React.FC<ForeignFormProps> = ({ form, countdown, handleGetCaptcha, surveyQuestions }) => {
+
+  return (
+    <>
+      {/* 境外企业特有的基本信息部分 */}
+      <div className="form-section-title">基本信息</div>
+
+      <Row gutter={24}>
+        <Col span={13}>
+          <Form.Item
+            name={['coscoSupplierBase', 'name']}
+            label="姓名"
+            rules={[{ required: true, message: '请输入姓名' }]}
+          >
+            <Input placeholder="请输入姓名" />
+          </Form.Item>
+        </Col>
+
+        <Col span={13}>
+          <Form.Item
+            name={['coscoSupplierBase', 'idCard']}
+            label="身份证号"
+            rules={[{ required: true, message: '请输入身份证号' }]}
+          >
+            <Input placeholder="请填写正确的身份证号" />
+          </Form.Item>
+        </Col>
+        <Col span={13}>
+          <Form.Item
+            name={['coscoSupplierBase', 'contactPhone']}
+            label="联系电话"
+            rules={[
+              { required: true, message: '请输入联系电话' },
+              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的联系电话' },
+            ]}
+          >
+            <Input
+              placeholder="请输入11位联系电话"
+              prefix={<MobileOutlined />}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={13}>
+          <Form.Item
+            name={['coscoSupplierBase', 'personBank']}
+            label="开户行"
+            rules={[{ required: true, message: '请输入开户行' }]}
+          >
+            <Input placeholder="请输入开户行" />
+          </Form.Item>
+        </Col>
+        <Col span={13}>
+          <Form.Item
+            name={['coscoSupplierBase', 'personAccount']}
+            label="银行账号"
+            rules={[{ required: true, message: '请输入银行账号' }]}
+          >
+            <Input placeholder="请输入银行账号" />
+          </Form.Item>
+        </Col>
+        <Col span={13}>
+          <Form.Item
+            name="attachments"
+            label="相关证照"
+            extra="pdf,jpg,jpeg,png类型的文件,大小不超过10MB"
+            rules={[{ required: true, message: '请上传相关证照' }]}
+          >
+            <Upload
+              name="file"
+              action="/api/fileConfig/files/upload"
+              listType="text"
+              maxCount={1}
+              beforeUpload={(file) => validateFileSize(file, 10, ['pdf', 'jpg', 'jpeg', 'png'])}
+            >
+              <Button icon={<UploadOutlined />}>上传文件</Button>
+            </Upload>
+          </Form.Item>
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default ForeignForm;