fix:换为formpage

config/router.ts

@@ -19,6 +19,10 @@ const router = [
         path: '/user/getBack',
         component: '@/pages/user/getBack'
       },
+      {
+        path: '/user/policy',
+        component: '@/pages/user/policy'
+      },
     ]
   }
 ]

package.json

@@ -24,7 +24,7 @@
     "@ant-design/icons": "^4.2.1",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.2.0",
-    "god": "0.0.24",
+    "god": "0.0.28",
     "lint-staged": "^10.0.7",
     "mobx": "^5.15.4",
     "mobx-react": "^6.2.2",

src/global/styles/global.less

@@ -27,9 +27,27 @@ h1, h2, h3, h4, h5, h6 {
   width: 1024px;
 }
 
+// 公共的title伪类竖线
+.commonPanelTitle {
+  padding-left: 8px;
+  position: relative;
+  &::before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -.42667rem;
+    width: 2px;
+    height: .85333rem;
+    background-color: @primary-color;
+    box-shadow: 0 0.14933rem 0.256rem 0 rgba(97,144,232,.2);
+    border-radius: 1px;
+  }
+}
 
-// 通用 居中
-.@{prefix}-center {
-  .make-center(block);
-  .make-center(text);
-}
\ No newline at end of file
+// 通用class 居中
+// .@{prefix}-center {
+//   .make-center(block);
+//   .make-center(text);
+// }
\ No newline at end of file

src/global/styles/mixins/layout.less

@@ -51,18 +51,46 @@
 // margin带上下边距居中
 .make-center-space(@type: margin, @top: 0, @bottom: 0) {
   .make-center(@type);
-  margin-top: @top;
-  margin-bottom: @bottom;
+  margin-top: unit(@top, px);
+  margin-bottom: unit(@bottom, px);
 }
 
-// position定位
-.position-left-top(@left, @top) {
+// position绝对定位
+.ab-position(@_, @_, @num1: 0, @num2: 0){
   position: absolute;
-  left: @left;
-  top: @top;
 }
-.position-right-bottom(@right, @bottom) {
-  position: absolute;
-  right: @right;
-  bottom: @bottom;
+.ab-position(right, bottom, @num1: 0, @num2: 0){
+  right: @num1 * 1px;
+  bottom: @num2 * 1px;
+}
+.ab-position(right, top, @num1: 0, @num2: 0){
+  right: @num1 * 1px;
+  top: @num2 * 1px;
+}
+.ab-position(left, bottom, @num1: 0, @num2: 0){
+  left: @num1 * 1px;
+  bottom: @num2 * 1px;
+}
+.ab-position(left, top, @num1: 0, @num2: 0){
+  left: @num1 * 1px;
+  top: @num2 * 1px;;
+}
+
+
+// 高 行高等同并混入字体大小 颜色
+.mixinFontSize (@size) when (isnumber(@size)) {
+  font-size: unit(@size, px);
+}
+.mixinFontColor (@color) when (iscolor(@color)) {
+  color: @color;
+}
+.mixinBgColor(@bgcolor) when (iscolor(@bgcolor)) {
+  background-color: @bgcolor;
+}
+.font-height-color (@size: undefined, @height, @color: undefined, @bgcolor: undefined) {
+  .mixinFontSize(@size);
+  height: unit(@height, px);
+  line-height: unit(@height, px);
+  .mixinFontColor(@color);
+  .mixinBgColor(@bgcolor);
 }
\ No newline at end of file

src/pages/user/components/ScanLoginWrap.tsx

@@ -11,7 +11,7 @@ import styles from '../index.less'
 const ScanLoginWrap: React.FC = () => {
   const [qrCode, setQrCode] = useState('')
 
-  QRCode.toDataURL('数商云是知名云计算及数据服务提供商点播互动直播技术深度投入致力以数字化未来赋能各行业全面进入数据时代。').then((url:any) => {
+  QRCode.toDataURL('数商云是知名云计算及数据服务提供商').then((url:any) => {
       setQrCode(url)
       console.log(url)
     })

src/pages/user/getBack.tsx

@@ -8,97 +8,106 @@ import {
   ExclamationCircleFilled,
 } from '@ant-design/icons';
 import { Link, history } from 'umi'
+import { FormPage, RiskCheck } from 'god'
+import { IFormControllers, IFormButtonTypes } from 'god/dist/src/form-page'
 
 const GetBack: React.FC = () => {
   const [validButton, setValidButton] = useState(true)
 
   const finish = (value: any) => {
-    console.log(value)
+    console.log(value, 'finish')
   }
 
+  const handleSubmit = (value: any) => {
+    console.log(value, 'handleSubmit')
+  }
+
+  const getBcakForm: IFormControllers[] = [
+    {
+      type: 'Input',
+      name: 'phonemail',
+      span: 24,
+      inputProps: {
+        type: 'phonemail',
+        placeholder: '请输入您的邮箱/手机',
+      },
+      rules: [
+        { required: true, message: '邮箱/手机为必填项！' }
+      ]
+    },
+    {
+      span: 24,
+      // @ts-ignore
+      custom: () => <RiskCheck />
+    },
+    {
+      type: 'Verification',
+      name: 'smsCode',
+      span: 24,
+      inputProps: {
+  
+      }
+    },
+    {
+      type: 'Input',
+      name: 'password',
+      span: 24,
+      inputProps: {
+        type: 'password',
+        placeholder: '设置你的密码',
+      },
+      rules: [
+        { required: true, message: '密码为必填项！' },
+        { pattern:  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,20}$/, message: '密码长度8-20个字符，必须包含大小写字母和数字！' }
+      ],
+    },
+    {
+      type: 'Input',
+      name: 'confirm',
+      span: 24,
+      dependencies: ['password'],
+      inputProps: {
+        type: 'password',
+        placeholder: '请再次输入密码',
+      },
+      rules: [
+        { required: true, message: '请再次确认密码！' },
+        ({ getFieldValue }) => ({
+          validator(rule, value) {
+            if (!value || getFieldValue('password') === value) {
+              return Promise.resolve();
+            }
+            return Promise.reject('两次的密码输入不一致！');
+          },
+        }),
+      ]
+    },
+  ]
+  const getBackButtons: IFormButtonTypes[] = [
+    {
+      text: '提交',
+      type: 'primary',
+      htmlType: 'submit',
+      block: true,
+      disabled: false,
+    }
+  ]
+
   return (
     <Row className={styles.getBackBox}>
       <h2>找回密码</h2>
       <div className={cx(styles.getBackForm, globalStyles.lingxiBusinessMarginContent)}>
-        <Form
-          onFinish={finish}
-          className={styles.formBox}
-        >
-          <Form.Item
-            name='phonemail'
-            rules={
-              [
-                {
-                  required: true,
-                  message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请输入正确的手机或邮箱</span></>
-                }
-              ]
-            }
+        <div className={styles.formBox}>
+          <FormPage
+            renderFormLists={getBcakForm}
+            renderButtonLists={getBackButtons}
+            onSubmit={handleSubmit}
           >
-            <Input placeholder='请输入您的邮箱/手机' size='large'/>
-          </Form.Item>
-          { validButton && (<Form.Item
-              className={styles.loginVerBtn}
-            >
-              <Button ghost type='primary' block size='large'>点击进行验证</Button>
-            </Form.Item>)
-          }
-          <Form.Item>
-            <Row>
-              <Col span={15}>
-                <Form.Item
-                  name="captcha"
-                  noStyle
-                  rules={[{ required: true, message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请输入验证码</span></> }]}
-                >
-                  <Input size='large' placeholder='输入验证码' />
-                </Form.Item>
-              </Col>
-              <Col offset={1} span={8}>
-                <Button type='default' size='large'>获取验证码</Button>
-              </Col>
+            <Row justify='center' align='middle'>
+              <Link to='/user/login' className={styles.back}>返回登录页</Link>
             </Row>
-          </Form.Item>
-          <Form.Item
-            name='password'
-            rules={
-              [
-                {
-                  required: true,
-                  message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请设置你的新密码</span></>
-                }
-              ]
-            }
-          >
-            <Input.Password placeholder='请设置你的新密码' size='large'/>
-          </Form.Item>
-          <Form.Item
-            name="confirm"
-            dependencies={['password']}
-            rules={[
-              {
-                required: true,
-                message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请再次输入密码</span></>,
-              },
-              ({ getFieldValue }) => ({
-                validator(rule, value) {
-                  if (!value || getFieldValue('password') === value) {
-                    return Promise.resolve();
-                  }
-                  return Promise.reject(<><ExclamationCircleFilled style={{marginRight: 6}}/><span>两次输入的密码不匹配</span></>);
-                },
-              }),
-            ]}
-          >
-            <Input.Password placeholder='请再次输入密码' size='large'/>
-          </Form.Item>
-          <Form.Item>
-            <Button type='primary' size='large' htmlType='submit' block>提交</Button>
-          </Form.Item>
-          <Form.Item>
-            <Link to='/user/login' className={styles.back}>返回登录页</Link>
-          </Form.Item>
-        </Form>
+          </FormPage>
+        </div>
       </div>
     </Row>
   )

src/pages/user/index.less

@@ -21,17 +21,13 @@
     margin-bottom: 32px;
   }
   .clickUsernameLogin{
-    position: absolute;
-    right: 8px;
-    top: 8px;
+    .ab-position(right, top, 8, 8);
     font-size:14px;
     color:rgba(107,119,140,1);
   }
   .clickScanLogin{
     .center-text();
-    position: absolute;
-    right: 8px;
-    top: 8px;
+    .ab-position(right, top, 8, 8);
     width: 32px;
     height: 32px;
     background: url("../../../mockStatic/qr_code1.png") center center no-repeat;
@@ -51,18 +47,14 @@
   }
 }
 .loginDesc {
-  //background: #9f9;
   background: url("../../../mockStatic/image_ad.png") center center no-repeat;
   background-size: cover;
   .adBox{
     color: @white;
     .make-center(text);
     & h2{
-      color: @white;
       margin-top: 20px;
-      height: 80px;
-      line-height: 80px;
-      font-size:32px;
+      .font-height-color(32, 80, @white);
       letter-spacing:2px;
     }
     & p{
@@ -92,11 +84,9 @@
   }
   .qrCodeImage{
     .make-center(text);
-    margin-top: 30px;
-    margin-bottom: 18px;
     width: 224px;
     height: 224px;
-    .make-center(margin);
+    .make-center-space(margin, 30, 18);
     &>img{
       .make-center(block);
       width: 100%;
@@ -107,7 +97,6 @@
 
 
 
-
 // register
 .register {
   // width: 100%;
@@ -136,26 +125,19 @@
 
 .formBoxStep1 {
   width: 320px;
-  .make-center-space(margin, 40px, 0);
-  // .form-box {
-  //   width: 340px;
-  //   margin: 40px auto 0;
-  // }
+  .make-center-space(margin, 40, 0);
 }
 
 .formBefore {
   width: 54px;
-  line-height: 40px;
-  height: 40px;
+  .font-height-color(undefined, 40, #42526E, #F4F5F7);
   .make-center(text);
-  background: #F4F5F7;
-  color: #42526E;
   border: 1px solid #DFE1E6;
   border-right: 0;
 }
 .formBoxStep2{
   width: 704px;
-  margin: 0px auto 0;
+  .make-center(margin);
   & h3{
     margin-top: 48px;
   }
@@ -164,7 +146,7 @@
   .make-center(block);
   width: 320px;
   height: 40px;
-  margin: 8px auto;
+  .make-center-space(margin, 8);
 }
 .identityRadio{
   display: flex;
@@ -173,7 +155,7 @@
   & label{
     width: 320px;
     height: 48px;
-    margin: 12px auto;
+    .make-center-space(margin, 12);
     vertical-align: middle;
     line-height: 48px;
   }
@@ -182,7 +164,7 @@
   display: flex;
   flex-wrap: wrap;
   width: 320px;
-  margin: 0 auto;
+  .make-center(margin);
   .make-center(text);
   & label{
     width: 148px;
@@ -197,22 +179,16 @@
 
 .formBoxStep3{
   width: 704px;
-  margin: 0px auto;
+  .make-center(margin);
   .make-center(text);
   & .description{
     margin-bottom: 40px;
     & p{
-      height:20px;
-      font-size:14px;
-      color:rgba(66,82,110,1);
-      line-height:20px;
+      .font-height-color(14, 20, #42526e);
     }
   }
   &.guid{
-    height:22px;
-    font-size:14px;
-    color:rgba(107,119,140,1);
-    line-height:22px;
+    .font-height-color(14, 22, #6b778c);
   }
   & h2{
     font-size:24px;
@@ -221,7 +197,7 @@
   }
   & img{
     display: block;
-    margin: 0 auto;
+    .make-center(margin);
   }
 }
 .agreement {
@@ -230,12 +206,11 @@
 
 .checkTypes {
   width: 702px;
-  margin: 0 auto;
+  .make-center(margin);
 }
 .margin320 {
   width: 320px;
-  margin-left: auto;
-  margin-right: auto;
+  .make-center(margin);
   display: block;
 }
 .default {
@@ -259,35 +234,53 @@
 
 .btnCenter {
   width: 320px;
-  margin-left: auto;
-  margin-right: auto;
+  .make-center(margin);
   display: block;
 }
 
-
-
 // get back password
 .getBackBox {
   &>h2 {
     width: 100%;
     .make-center(text);
-    height:120px;
-    line-height:120px;
-    font-size:24px;
-    font-weight:500;
-    color: #172B4D;
+    .font-height-color(24, 120, #172B4D);
   }
   .getBackForm{
     background-color: @white;
     .formBox{
       width: 320px;
-      .make-center-space(margin,40px,40px);
+      .make-center-space(margin,40,40);
       .back{
-        .make-center(block);
         width: 100%;
+        .make-center(block);
         .make-center(text);
         color: #6B778C;
       }
     }
   }
+}
+
+// policy
+.policyBox{
+  width: 100%;
+  // height: 100vh;
+  background-color: #fff;
+  &>h1{
+    .font-height-color(24, 96, #172B4D, #F4F5F7);
+    .make-center(text)
+  }
+  & article{
+    padding-bottom: 200px;
+    h4{
+      width:96px;
+      .font-height-color(16, 48, #172b4d);
+      font-weight:500;
+      margin-top: 24px;
+    }
+    p{
+      font-size:14px;
+      color:rgba(66,82,110,1);
+      line-height:22px;
+    }
+  }
 }
\ No newline at end of file

src/pages/user/policy.tsx

+import React from 'react'
+import cx from 'classnames'
+import styles from './index.less'
+import globalStyles from '@/global/styles/global.less'
+
+export interface PolicyProps {
+
+}
+
+const Policy:React.FC<PolicyProps> = (props) => {
+
+  return  <div className={styles.policyBox}>
+    <h1>隐私政策</h1>
+    <div className={globalStyles.lingxiBusinessMarginContent}>
+      <article>
+        <h4>一、权利归属</h4>
+        <main>
+          <p>1.1. 涂鸦网站的Logo、“涂鸦”、“涂鸦智能”、“tuya”等文字、图形及其组合，以及涂鸦网站的其他标识、徽记、涂鸦服务的名称等为涂鸦及其关联公司在中国和其他国家的注册商标。未经涂鸦书面授权，任何人不得以任何方式展示、使用或做其他处理（包括但不限于复制、传播、展示、镜像、上传、下载），也不得向他人表明您有权展示、使用或做其他处理。</p>
+          <p>1.2. 涂鸦网站所有的产品、服务、技术与所有程序（以下或简称“技术服务”）的知识产权均归属于涂鸦或归其权利人所有。</p>
+          <p>1.3. 除非涂鸦另行声明，涂鸦拥有涂鸦在网站内发布文档等信息（包括但不限于文字、图形、图片、照片、音频、视频、图标、色彩、版面设计、电子文档）的所有权利（包括但不限于版权、商标权、专利权、商业秘密和其他所有相关权利）。未经涂鸦许可，任何人不得擅自使用如上内容（包括但不限于通过程序或设备监视、复制、转播、展示、镜像、上传、下载涂鸦网站内的任何内容）。被授权浏览、复制、打印和传播属于涂鸦网站内信息内容的，该等内容都不得用于商业目的且所有信息内容及其任何部分的使用都必须包括此权利声明。</p>
+        </main>
+        <h4>二、责任限制</h4>
+        <main>
+          <p>2.1. 涂鸦网站的Logo、“涂鸦”、“涂鸦智能”、“tuya”等文字、图形及其组合，以及涂鸦网站的其他标识、徽记、涂鸦服务的名称等为涂鸦及其关联公司在中国和其他国家的注册商标。未经涂鸦书面授权，任何人不得以任何方式展示、使用或做其他处理（包括但不限于复制、传播、展示、镜像、上传、下载），也不得向他人表明您有权展示、使用或做其他处理。</p>
+          <p>2.2. 涂鸦网站所有的产品、服务、技术与所有程序（以下或简称“技术服务”）的知识产权均归属于涂鸦或归其权利人所有。</p>
+          <p>2.3. 除非涂鸦另行声明，涂鸦拥有涂鸦在网站内发布文档等信息（包括但不限于文字、图形、图片、照片、音频、视频、图标、色彩、版面设计、电子文档）的所有权利（包括但不限于版权、商标权、专利权、商业秘密和其他所有相关权利）。未经涂鸦许可，任何人不得擅自使用如上内容（包括但不限于通过程序或设备监视、复制、转播、展示、镜像、上传、下载涂鸦网站内的任何内容）。被授权浏览、复制、打印和传播属于涂鸦网站内信息内容的，该等内容都不得用于商业目的且所有信息内容及其任何部分的使用都必须包括此权利声明。</p>
+        </main>
+      </article>
+    </div>
+  </div>
+}
+
+Policy.defaultProps = {}
+
+export default Policy
\ No newline at end of file

src/pages/user/register.tsx

@@ -41,6 +41,7 @@ const registerForm: IFormControllers[] = [
     inputProps: {
       addonBefore: <div className={styles.formBefore}>+86</div>,
       placeholder: '请输入你的手机号码',
+      size: 'large',
     },
     rules: [
       { required: true, message: '手机号为必填项！' }
@@ -51,7 +52,7 @@ const registerForm: IFormControllers[] = [
     name: 'smsCode',
     span: 24,
     inputProps: {
-
+      size: 'large',
     }
   },
   {
@@ -61,6 +62,7 @@ const registerForm: IFormControllers[] = [
     inputProps: {
       type: 'password',
       placeholder: '设置你的密码',
+      size: 'large',
     },
     rules: [
       { required: true, message: '密码为必填项！' },
@@ -75,6 +77,7 @@ const registerForm: IFormControllers[] = [
     inputProps: {
       type: 'password',
       placeholder: '请再次输入你的登录密码',
+      size: 'large',
     },
     rules: [
       { required: true, message: '请再次确认密码！' },
@@ -95,6 +98,7 @@ const registerForm: IFormControllers[] = [
     inputProps: {
       type: 'email',
       placeholder: '请输入你的邮箱（选填）',
+      size: 'large',
     }
   },
   {
@@ -110,26 +114,223 @@ const registerForm: IFormControllers[] = [
       order: 1,
     },
     style: {overflow: 'visible'},
-    label: <span style={{fontSize:12,overflow:'visible'}}>阅读并同意<Link to='/'>《会员服务协议》</Link><Link to='/'>《法律条款》</Link><Link to='/'>《隐私政策》</Link></span>,
+    label: <span style={{fontSize:12,overflow:'visible'}}>阅读并同意<Link to='/'>《会员服务协议》</Link><Link to='/'>《法律条款》</Link><Link to='/user/policy'>《隐私政策》</Link></span>,
     colon: false,
-  }
-]
-const registerButtons: IFormButtonTypes[] = [
+  },
   {
-    text: '同意协议并注册',
-    type: 'primary',
-    htmlType: 'submit',
-    block: true,
-    disabled: false,
+    span: 24,
+    // @ts-ignore
+    custom: () => <Row>
+      <Button type='primary' className={styles.continueButton} htmlType="submit">同意协议并注册</Button>
+    </Row>
   }
 ]
+// const registerButtons: IFormButtonTypes[] = [
+//   {
+//     text: '同意协议并注册',
+//     type: 'primary',
+//     htmlType: 'submit',
+//     block: true,
+//     disabled: false,
+//   }
+// ]
 
 let timeChange: any;  // 定时器
 
 const UserRegistry = () => {
   const [identityForm1] = Form.useForm();
   const [licenseForm] = Form.useForm();
-  const [current, setCurrent] = useState(1.1)
+  const [current, setCurrent] = useState(0)
+  const [identityFormData, setIdentityFormData] = useState<IFormControllers[]>([])
+  const [licenseFormData, setLicenseFormData] = useState<IFormControllers[]>([])
+
+  useEffect(() => {
+    const identityForm: IFormControllers[] = [
+      {
+        span: 24,
+        custom: () => <>
+          <h3 className={styles.commonPanelTitle}>请选择您的身份</h3>
+          <Divider />
+        </>
+      },
+      {
+        span: 24,
+        custom: () => <Form.Item name='typeId' initialValue="a">
+          <Radio.Group onChange={onChange} className={styles.identityRadio} name="typeId">
+            <Radio.Button value="a">企业</Radio.Button>
+            <Radio.Button value="b">个人</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+      },
+      {
+        span: 24,
+        custom: () => <>
+          <h3 className={styles.commonPanelTitle}>请选择您要开展的业务</h3>
+          <Divider />
+        </>
+      },
+      {
+        span: 24,
+        custom: () => <Form.Item name='businessTypeId' initialValue="f">
+          <Radio.Group onChange={onChange} className={styles.businessRadio} name="businessTypeId">
+            <Radio.Button value="c">采购</Radio.Button>
+            <Radio.Button value="d">商品销售</Radio.Button>
+            <Radio.Button value="e">加工服务</Radio.Button>
+            <Radio.Button value="f">物流服务</Radio.Button>
+            <Radio.Button value="g">金融服务</Radio.Button>
+            <Radio.Button value="h">保险服务</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+      },
+      {
+        span: 24,
+        custom: () => <Row>
+          <Button type='primary' className={styles.continueButton} htmlType="submit">下一步：继续</Button>
+        </Row>
+      }
+    ]
+    setIdentityFormData(identityForm)
+  }, [])
+
+  useEffect(() => {
+    const licenseForm: IFormControllers[] = [
+      {
+        span: 24,
+        custom: () => <>
+          <h3 className={styles.commonPanelTitle}>请填写营业执照信息</h3>
+          <Divider />
+        </>
+      },
+      // @ts-ignore
+      [{
+        type: 'Input',
+        name: 'companyName',
+        label: <>
+          <Tooltip title="请填写法定代表人信息请填请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息">
+            <QuestionCircleOutlined />
+          </Tooltip>
+        </>,
+        span: 12,
+        rules: [
+          {
+            required: true,
+            message: '请输入公司名称'
+          },
+        ],
+        inputProps: {
+          placeholder: '请输入公司名称（必填）',
+          size: 'large',
+        }
+      },
+      {
+        type: 'Input',
+        name: 'companyType',
+        label: <>
+          <Tooltip title="请填写法定代表人信息请填请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息">
+            <QuestionCircleOutlined />
+          </Tooltip>
+        </>,
+        span: 12,
+        rules: [
+          {
+            required: true,
+            message: '请输入企业类型'
+          },
+        ],
+        inputProps: {
+          placeholder: '请输入企业类型（必填）',
+          size: 'large',
+        }
+      }],
+      {
+        type: 'TextArea',
+        name: 'business',
+        label: <>
+          <Tooltip title="请填写法定代表人信息请填请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息">
+            <QuestionCircleOutlined />
+          </Tooltip>
+        </>,
+        span: 24,
+        labelCol: {
+          span: 1,
+          order: 2
+        },
+        wrapperCol: {
+          span: 23,
+          order: 1
+        },
+        rules: [
+          {
+            required: true,
+            message: '请输入经营范围'
+          },
+        ],
+        inputProps: {
+          placeholder: '请输入经营范围（必填）',
+          size: 'large',
+        }
+      },
+      {
+        span: 12,
+        custom: () => 
+        <Form.Item
+          name="runLicense"
+          valuePropName="fileList"
+          getValueFromEvent={normFile}
+          extra="附件大小不能超过5M"
+          rules={[
+            {
+              required: true,
+              message: '营业执照附件为必须项！'
+            },
+            {
+              validator: checkoutFile
+            }
+          ]}
+        >
+          <Upload name="logo" action="/upload.do" beforeUpload={beforeUpload}>
+            <Button>
+              <UploadOutlined /> 上传营业执照附件
+            </Button>
+          </Upload>
+        </Form.Item>
+      },
+      {
+        span: 24,
+        custom: () => <>
+            <h3 className={styles.commonPanelTitle}>请填写法定代表人信息</h3>
+            <Divider />
+          </>
+      },
+      {
+        type: 'Input',
+        name: 'legalInfo',
+        label: <>
+          <Tooltip title="请填写法定代表人信息请填请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息">
+            <QuestionCircleOutlined />
+          </Tooltip>
+        </>,
+        span: 12,
+        rules: [
+          {
+            required: true,
+            message: '请输入法人身份证号码'
+          },
+        ],
+        inputProps: {
+          placeholder: '请输入法人身份证号码（必填）',
+          size: 'large',
+        }
+      },
+      {
+        span: 24,
+        custom: () => <Row>
+          <Button type='primary' className={styles.continueButton} htmlType="submit">下一步：继续</Button>
+        </Row>
+      }
+    ]
+    setLicenseFormData(licenseForm)
+  }, [])
 
   const handleOneSubmit = (values: any) => {
     let obj = { ...values }
@@ -167,7 +368,7 @@ const UserRegistry = () => {
     setCurrent(2)
   }
 
-  const [time, setTime] = useState(5);
+  const [time, setTime] = useState(5); // timer
   useEffect(() => {
     clearInterval(timeChange)
     handleRegisterTypeList()
@@ -177,10 +378,10 @@ const UserRegistry = () => {
     if(current === 2) runTimerJump()
   }, [current])
   useEffect(() => {
-    if(time < 0){
+    if(time === 0){
       clearInterval(timeChange)
       setTime(5)
-      // history.push('/user/login')
+      history.push('/user/login')
       console.log('执行登录跳转！')
     }
   }, [time])
@@ -189,7 +390,6 @@ const UserRegistry = () => {
   }
 
   const normFile = (e: any) => {
-    console.log('上传Upload 事件:', e);
     if (Array.isArray(e)) {
       return e;
     }
@@ -233,7 +433,7 @@ const UserRegistry = () => {
           current === 0 && <div className={styles.formBoxStep1}>
             <FormPage
               renderFormLists={registerForm}
-              renderButtonLists={registerButtons}
+              // renderButtonLists={registerButtons}
               onSubmit={handleOneSubmit}
             >
               <Row justify='center' align='middle'>
@@ -244,138 +444,25 @@ const UserRegistry = () => {
         }
         {
           current === 1 && <div className={styles.formBoxStep2}>
-            <Form
-              form={identityForm1}
-              name="identity_information"
-              onFinish={handleSecondSubmit}
+            <FormPage
+              renderFormLists={identityFormData}
+              onSubmit={handleSecondSubmit}
             >
-              <h3 className="commonPanelTitle">请选择您的身份</h3>
-              <Divider />
-              <Form.Item name='typeId' initialValue="a">
-                <Radio.Group onChange={onChange} className={styles.identityRadio} name="typeId">
-                  <Radio.Button value="a">企业</Radio.Button>
-                  <Radio.Button value="b">个人</Radio.Button>
-                </Radio.Group>
-              </Form.Item>
-              <h3 className="commonPanelTitle">请选择您要开展的业务</h3>
-              <Divider />
-              <Form.Item name='businessTypeId' initialValue="f">
-                <Radio.Group onChange={onChange} className={styles.businessRadio} name="businessTypeId">
-                  <Radio.Button value="c">采购</Radio.Button>
-                  <Radio.Button value="d">商品销售</Radio.Button>
-                  <Radio.Button value="e">加工服务</Radio.Button>
-                  <Radio.Button value="f">物流服务</Radio.Button>
-                  <Radio.Button value="g">金融服务</Radio.Button>
-                  <Radio.Button value="h">保险服务</Radio.Button>
-                </Radio.Group>
-              </Form.Item>
-              <Row>
-                <Button type='primary' className={styles.continueButton} htmlType="submit">下一步：继续</Button>
-              </Row>
-            </Form>
+            </FormPage>
           </div>
         }
         {
           current === 1.1 && <div className={styles.formBoxStep2}>
-            <Form
-              {...formItemLayout}
-              form={licenseForm}
-              name="license_information"
-              onFinish={handleLicenseSubmit}
-              size="large"
-              colon={false}
+            <FormPage
+              renderFormLists={licenseFormData}
+              onSubmit={handleLicenseSubmit}
+              formProps={{
+                ...formItemLayout,
+                labelAlign: 'left',
+                colon: false
+              }}
             >
-              <h3 className="commonPanelTitle">请填写营业执照信息</h3>
-              <Divider />
-              <Row gutter={[20,0]}>
-                <Col span={12}>
-                  <Form.Item
-                    name="companyName"
-                    label={
-                      <>
-                        <Tooltip title="请填写法定代表人信息请填请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息">
-                          <QuestionCircleOutlined />
-                        </Tooltip>
-                      </>
-                    }
-                  >
-                    <Input placeholder="请输入公司名称（必填）" />
-                  </Form.Item>
-                </Col>
-                <Col span={12}>
-                  <Form.Item
-                    name="companyType"
-                    label={
-                      <>
-                        <Tooltip title="请填写法定代表人信息请填写法定代表人信息请填写法定代表人信表人信息请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息">
-                          <QuestionCircleOutlined />
-                        </Tooltip>
-                      </>
-                    }
-                  >
-                    <Input placeholder="请输入企业类型（必填）" />
-                  </Form.Item>
-                </Col>
-                <Col span={24}>
-                  <Form.Item
-                    name="business"
-                    labelCol={{span:1,order:2}}
-                    wrapperCol={{span:23,order:1}}
-                    label={
-                      <>
-                        <Tooltip title="请填写法定代表人信息请填写法定代表人信息请填写法定代表人信表人信息请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息">
-                          <QuestionCircleOutlined />
-                        </Tooltip>
-                      </>
-                    }
-                  >
-                    <TextArea placeholder="请输入经营范围（必填）" rows={4} />
-                  </Form.Item>
-                  <Form.Item
-                    name="runLicense"
-                    valuePropName="fileList"
-                    getValueFromEvent={normFile}
-                    extra="附件大小不能超过5M"
-                    rules={[
-                      {
-                        required: true,
-                        message: '营业执照附件为必须项！'
-                      },
-                      {
-                        validator: checkoutFile
-                      }
-                    ]}
-                  >
-                    <Upload name="logo" action="/upload.do" beforeUpload={beforeUpload}>
-                      <Button>
-                        <UploadOutlined /> 上传营业执照附件
-                      </Button>
-                    </Upload>
-                  </Form.Item>
-                </Col>
-              </Row>
-              <h3 className="commonPanelTitle">请填写法定代表人信息</h3>
-              <Divider />
-              <Row gutter={[20,0]}>
-                <Col span={12}>
-                  <Form.Item
-                    name="legalInfo"
-                    label={
-                      <>
-                        <Tooltip title="请填写法定代表人信息请填写法定代表人信息请填写法定代表人信息请填写法定代定代表人信息请填写法定代表人信息请填写法定代表人信息">
-                          <QuestionCircleOutlined />
-                        </Tooltip>
-                      </>
-                    }
-                  >
-                    <Input placeholder="请输入法人身份证号码（必填）" />
-                  </Form.Item>
-                </Col>
-              </Row>
-              <Row>
-                <Button type='primary' className={styles.continueButton} htmlType="submit">提交注册资料</Button>
-              </Row>
-            </Form>
+            </FormPage>
           </div>
         }
         {
@@ -398,4 +485,4 @@ const UserRegistry = () => {
   )
 }
 
-export default UserRegistry
+export default UserRegistry
\ No newline at end of file

src/services/member/API.d.ts

@@ -7,7 +7,7 @@ declare namespace MemberApi {
   }
 
   interface RegisterBasicModel {
-    id: number
+    id: number;
   }
 
   interface RegisterTypeDTO {