register page

package.json

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

src/components/ListCard/index.less

+.listCard {
+  margin-top: 41px;
+  .header {
+    display: flex;
+    align-items: center;
+    height: 38px;
+    border-bottom: 1px solid #F4F5F7;
+    margin-bottom: 24px;
+    &::before {
+      content: "";
+      width: 2px;
+      height: 16px;
+      background: @primary-color;
+      margin-right: 6px;
+    }
+  }
+}
\ No newline at end of file

src/components/ListCard/index.less.d.ts

+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'header': string;
+  'listCard': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

src/components/ListCard/index.tsx

+import React from 'react';
+import styles from './index.less';
+
+export interface ListCardProps {
+  title?: React.ReactNode,
+}
+const ListCard: React.FC<ListCardProps> = (props) => {
+  return (
+    <div className={styles.listCard}>
+      <div className={styles.header}>{props.title}</div>
+      { props.children }
+    </div>
+  )
+}
+
+ListCard.defaultProps = {
+  title: 'header'
+}
+export default ListCard
\ No newline at end of file

src/pages/user/components/ButtonList.tsx

+import React from 'react';
+import styles from '../index.less';
+import { Radio } from 'antd';
+
+export interface ButtonListProps {
+  size?: 'default' | 'large',
+  group: {value: string, text?: React.ReactNode, key: string}[]
+}
+const ButtonList: React.FC<ButtonListProps> = (props) => {
+  return (
+    <div className={styles.margin320}>
+      <Radio.Group>
+        {
+          props.group.map(v => <Radio.Button value={v.value} key={v.key} className={props.size === 'default' ? styles.default : styles.large}>{v.text}</Radio.Button>)
+        }
+      </Radio.Group>
+    </div>
+  )
+}
+
+ButtonList.defaultProps = {
+  size: 'default'
+}
+export default ButtonList
\ No newline at end of file

src/pages/user/index.less

@@ -57,7 +57,7 @@
   align-items: center;
 }
 .form-box {
-  width: 320px;
+  width: 340px;
   margin: 40px auto 0;
 }
 .formBefore {
@@ -69,4 +69,36 @@
   color: #42526E;
   border: 1px solid #DFE1E6;
   border-right: 0;
+}
+.agreement {
+  font-size: 12px;
+}
+
+.checkTypes {
+  width: 702px;
+  margin: 0 auto;
+}
+.margin320 {
+  width: 320px;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+.default {
+  width: 148px;
+  margin-right: 24px;
+  margin-bottom: 16px;
+  text-align: center;
+  height: 32px;
+  line-height: 32px;
+  &:nth-child(2n) {
+    margin-right: 0;
+  }
+}
+.large {
+  width: 320px;
+  margin-bottom: 24px;
+  text-align: center;
+  height: 48px;
+  line-height: 48px;
 }
\ No newline at end of file

src/pages/user/index.less.d.ts

 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'agreement': string;
+  'checkTypes': string;
+  'default': string;
   'form-box': string;
   'formBefore': string;
   'formBox': string;
+  'large': string;
   'lingxi-business-content1024': string;
   'lingxi-business-margin_content': string;
   'lingxiBusinessContent1024': string;
@@ -16,6 +20,7 @@ interface CssExports {
   'loginMain': string;
   'loginVerBtn': string;
   'loginWrap': string;
+  'margin320': string;
   'register': string;
   'registerBox': string;
   'stepWrap': string;

src/pages/user/register.tsx

@@ -6,6 +6,8 @@ import cx from 'classnames'
 import { FormPage } from 'god'
 import { IFormControllers, IFormButtonTypes } from 'god/dist/src/form-page'
 import { Link } from 'umi'
+import ListCard from '@/components/ListCard'
+import ButtonList from './components/ButtonList'
 
 const Step = Steps.Step
 
@@ -55,14 +57,15 @@ const registerForm: IFormControllers[] = [
     }
   },
   {
-    type: 'CheckBox',
+    type: 'Agreement',
     name: 'readme',
-    label: <>
+    valuePropName: 'checked',
+    agreeText: <span className={styles.agreement}>
       <span>阅读并同意</span>
       <Link to='/'>《会员服务协议》</Link>
       <Link to='/'>《法律条款》</Link>
       <Link to='/'>《隐私政策》</Link>
-    </>
+    </span>
   }
 ]
 
@@ -75,24 +78,136 @@ const registerButtons: IFormButtonTypes[] = [
     disabled: true,
   }
 ]
+
+const checkTypes = {
+  business: [{text: '个人', value: 'self', key: 'self'}, {text: '企业', value: 'business', key: 'business'}],
+
+  types: [
+    {
+      text: '采购',
+      value: 'caigou',
+      key: 'caigou'
+    },
+    {
+      text: '商品销售',
+      value: 'sp',
+      key: 'sp'
+    },
+    {
+      text: '加工服务',
+      value: '321',
+      key: '321'
+    },
+    {
+      text: '物流服务',
+      value: '44',
+      key: '55'
+    },
+    {
+      text: '金融服务',
+      value: '4411',
+      key: '5511'
+    },
+    {
+      text: '保险服务',
+      value: '1244',
+      key: '3255'
+    },
+  ]
+}
+
+type mixinForm = IFormControllers | IFormControllers[]
+const nextForms: mixinForm[] = [
+  [
+    {
+      type: 'Input',
+      name: 'companyName',
+      inputProps: {
+        placeholder: '请输入公司名称 (必填)'
+      }
+    },
+    {
+      type: 'Input',
+      name: 'companyType',
+      inputProps: {
+        placeholder: '请输入企业类型 (必填)'
+      }
+    },
+  ],
+  [
+    {
+      type: 'Input',
+      name: 'companyType123',
+      inputProps: {
+        placeholder: '请输入住所 (必填)'
+      },
+    },
+    {
+      type: 'Input',
+      name: '1444',
+      inputProps: {
+        placeholder: '请输入法定代表人 (必填)'
+      },
+    }
+  ]
+]
 const UserRegistry = () => {
-  const [current, setCurrent] = useState(0)
+  const [current, setCurrent] = useState(1)
+  const [next, setNext] = useState(true)
   return (
     <div className={cx(styles.register, globalStyles.lingxiBusinessContent1024)}>
       <h3>欢迎您注册数商云账号</h3>
       <div className={styles.registerBox}>
         <Steps current={current} className={styles.stepWrap} size='small'>
           {
-            stepList.map(v => <Step title={v.title} key={v.key}/>)
+            stepList.map((v,i) => <Step title={v.title} key={v.key} onClick={() => {setCurrent(i)}}/>)
           }
         </Steps>
-        <div className={styles.formBox}>
-          <FormPage renderFormLists={registerForm} renderButtonLists={registerButtons}>
-            <Row justify='center' align='middle'>
-              已有平台账号？<Button type='link'>去登陆</Button>
-            </Row>
-          </FormPage>
-        </div>
+        {
+          current === 0 &&
+          <div className={styles.formBox}>
+            <FormPage renderFormLists={registerForm} renderButtonLists={registerButtons}>
+              <Row justify='center' align='middle'>
+                已有平台账号？<Button type='link'>去登陆</Button>
+              </Row>
+            </FormPage>
+          </div>
+        }
+
+        {
+          current === 1 && 
+          <div className={styles.checkTypes}>
+            {
+              next ? 
+              <>
+                <ListCard title='请填写营业执照信息'>
+                  <FormPage
+                    renderFormLists={nextForms}
+                  />
+                </ListCard>
+                <ListCard title='请填写法定代表人信息'>
+                  <FormPage
+                    renderFormLists={nextForms}
+                  />
+                </ListCard>
+              </>
+              :
+              <>
+                <ListCard title='请选择您的身份'>
+                  <ButtonList size='large' group={checkTypes.business}/>
+                </ListCard>
+
+                <ListCard title='请选择您要开展的业务'>
+                  <ButtonList group={checkTypes.types}/>
+                </ListCard>
+
+                <Button block type='primary' onClick={() => { setNext(true) }} className={styles.margin320}>下一步：继续完善</Button>
+              </>
+            }
+            
+          </div>
+        }
+        
       </div>
     </div>
   )