电子合同

src/pages/transaction/electronicContracts/addContract/index.tsx

-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { history } from 'umi'
-import { Form, Input, Upload, Card, Tooltip, Button, message } from 'antd'
+import { Form, Input, Upload, Card, Tooltip, Button, message, Badge, Popconfirm } from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ReutrnEle from '@/components/ReturnEle';
 import { PublicApi } from '@/services/api'
@@ -9,8 +9,13 @@ import { UPLOAD_TYPE } from '@/constants'
 import { QuestionCircleOutlined, StarOutlined, FileWordFilled, UploadOutlined, DeleteOutlined } from '@ant-design/icons';
 import styles from './index.less'
 
-const AddContract: React.FC<{}> = () => {
+const AddContract: React.FC<{}> = (props) => {
+  const { type } = history.location.query
   const { TextArea } = Input;
+  const [form] = Form.useForm();
+  const [fileExampleUrl, setFileExampleUrl] = useState<string>('');
+  const [uploadFile, setUploadFile] = useState<any>([]);
+  const [fileUrl, setFileUrl] = useState<string>('')
   /**判断文件类型和大小 */
   const beforeDocUpload = (file: UploadFile) => {
     const isJpgOrPng = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
@@ -26,7 +31,58 @@ const AddContract: React.FC<{}> = () => {
 
   /**上传回调 */
   const handleChange = ({ fileList }) => {
-    console.log(fileList, 10086)
+    if (fileList[0].response) {
+      const file = [{
+        name: fileList[0].name,
+        file: fileList[0].response.data
+      }]
+      setFileUrl(fileList[0].response.data)
+      setUploadFile(file)
+    }
+  }
+
+  /**合同模板样例查询 */
+  useEffect(() => {
+    PublicApi.getOrderContractTemplateExample().then(res => {
+      setFileExampleUrl(res.data)
+    })
+  }, [])
+
+  /**新增&修改 */
+  const sharedFn = async (parmas: any) => {
+    await PublicApi.postOrderContractTemplateAdd(parmas).then(res => {
+      setTimeout(() => {
+        history.goBack()
+      }, 1000)
+    })
+  }
+
+  /**提交数据 */
+  const onSubmit = async () => {
+    await form.validateFields().then(res => {
+      const parmas = {
+        name: res.name,
+        version: res.version,
+        description: res.description,
+        fileExampleUrl,
+        fileUrl,
+      }
+      sharedFn(parmas)
+      console.log(parmas)
+    })
+  }
+
+  /**删除上传的合同 */
+  const delectContract = () => {
+    setUploadFile([]);
+    setFileUrl('');
+  }
+
+  const confirm = () => {
+    // message.error(`未保存地址信息`)
+    setTimeout(() => {
+      history.goBack()
+    }, 1000)
   }
 
   return (
@@ -36,17 +92,22 @@ const AddContract: React.FC<{}> = () => {
     >
       <Card>
         <div className={styles.addcontract_wrap}>
-          <Form>
-            <Form.Item label='合同模板名称' colon={false} name='name'>
-              <Input />
+          <Form form={form}>
+            <Form.Item label='合同模板名称' colon={false} name='name' rules={[{ required: type && true, message: '请输入合同模板名称' }]}>
+              {type ? <Input /> : <span>1</span>}
             </Form.Item>
-            <Form.Item label='版本号' colon={false} name='version'>
-              <Input />
+            <Form.Item label='版本号' colon={false} name='version' rules={[{ required: type && true, message: '请输入版本号' }]}>
+              {type ? <Input /> : <span>1</span>}
             </Form.Item>
+            {!type &&
+              <Form.Item label='状态' colon={false} name='status'>
+                <span><Badge status="success" /> 有效</span>
+              </Form.Item>
+            }
             <Form.Item label='合同模板说明' colon={false} name='description'>
-              <TextArea rows={4} />
+              {type ? <TextArea rows={4} /> : <span>1</span>}
             </Form.Item>
-            <Form.Item label={<div>合同文件模板样例&nbsp;<Tooltip placement="top" title='制作合同模板前，可下载合同模板样例，按照样例指引制作合同模板，其中需要添加的参数可以在合同模板参数查询中查找。'><QuestionCircleOutlined /></Tooltip></div>} colon={false} name='fileExampleUrl'>
+            <Form.Item label={<div>合同文件模板样例&nbsp;<Tooltip placement="top" title='制作合同模板前，可下载合同模板样例，按照样例指引制作合同模板，其中需要添加的参数可以在合同模板参数查询中查找。'><QuestionCircleOutlined /></Tooltip></div>} colon={false}>
               <div className={styles.upload_item}>
                 <div className={styles.upload_left}>
                   <FileWordFilled />
@@ -57,19 +118,30 @@ const AddContract: React.FC<{}> = () => {
                 </div>
               </div>
             </Form.Item>
-            <Form.Item label={<div>合同文件模板&nbsp;<Tooltip placement="top" title='制作完成的合同模板，需要上传至平台，才能在后续的订单中签订电子合同'><QuestionCircleOutlined /></Tooltip></div>} colon={false} name='fileUrl'>
+            <Form.Item label={<div>合同文件模板&nbsp;<Tooltip placement="top" title='制作完成的合同模板，需要上传至平台，才能在后续的订单中签订电子合同'><QuestionCircleOutlined /></Tooltip></div>} colon={false}>
               <div className={styles.upload_data}>
-                <div className={styles.upload_item}>
+                {uploadFile.map((v, i) => (
+                  <div className={styles.upload_item} key={i}>
                     <div className={styles.upload_left}>
                       <FileWordFilled />
-                    <span>合同模板样例.doc</span>
+                      <span>{v.name}</span>
                     </div>
+                    {
+                      type ?
                         <div className={styles.upload_right}>
                           <span>预览</span>
-                    <DeleteOutlined />
+                          <DeleteOutlined onClick={delectContract} />
                         </div>
+                        :
+                        <div className={styles.upload_right}>
+                          <span>下载</span>
                         </div>
+                    }
+                  </div>
+                ))}
               </div>
+              {
+                (uploadFile.length === 0 && type) &&
                 <Upload
                   action="/api/file/file/upload"
                   data={{ fileType: UPLOAD_TYPE }}
@@ -81,11 +153,21 @@ const AddContract: React.FC<{}> = () => {
                   <Button icon={<UploadOutlined />}>上传文件</Button>
                   <div style={{ marginTop: '8px' }}>支持扩展名：.doc，文件大小不超过 20M</div>
                 </Upload>
+              }
             </Form.Item>
-            <Form.Item>
-              <Button type="primary">保存</Button>
+            {type &&
+              <Form.Item style={{ marginLeft: '174px' }}>
+                <Button type="primary" style={{ marginRight: '24px' }} onClick={onSubmit}>保存</Button>
+                <Popconfirm
+                  title="未保存，是否确定执行这个操作?"
+                  onConfirm={confirm}
+                  okText="是"
+                  cancelText="否"
+                >
                   <Button>取消</Button>
+                </Popconfirm>
               </Form.Item>
+            }
           </Form>
         </div>
       </Card>

src/pages/transaction/electronicContracts/apply/index.tsx

-import React from 'react'
+import React, { useState } from 'react'
 import styles from './index.less'
 import { Link } from 'umi';
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
@@ -7,7 +7,6 @@ import { Descriptions, Button } from 'antd';
 import div from './../../../editor/configs/componentConfigs/HTML/div';
 
 const Apply = () => {
-
   /**头部状态的颜色值 */
   const applyStaus = [{
     status: 1,
@@ -30,8 +29,8 @@ const Apply = () => {
     icon: <CloseCircleFilled />,
     color: '#D32F2F',
   }]
-
-  const num = 1
+  const [num, setNum] = useState<number>(1);
+  const [authType, setAuthType] = useState<number>(1); // 认证方式 1-法人认证 2-经办人认证 3-个人认证
 
   return (
     <PageHeaderWrapper>
@@ -47,8 +46,8 @@ const Apply = () => {
                     <div className={styles.status}>{item.icon} {item.name}</div>
                   </div>
                   <div className={styles.apply_status_btn}>
-                      <Link to={`/memberCenter/tranactionAbility/electronicContracts/enterpriseCertified`}><Button size='middle' style={{ color: item.color }}>{item.status === 1 ? '立即申请' : '重新申请'}</Button></Link>
-                      {item.status === 3 && <Button size='middle' ghost>查看进度</Button>}
+                    <Link to={`/memberCenter/tranactionAbility/electronicContracts/enterpriseCertified?authTypeEdit=${authType}`}><Button size='middle' style={{ color: item.color }}>{item.status === 1 ? '立即申请' : '重新申请'}</Button></Link>
+                    {num === 3 && <Button style={{ marginLeft: '24px' }} size='middle' ghost>查看进度</Button>}
                   </div>
                 </div>
               }
@@ -56,6 +55,8 @@ const Apply = () => {
           ))
         }
 
+        {/* 企业 */}
+        {(authType === 1 || authType === 2) &&
           <div className={styles.apply_item}>
             <Descriptions title="申请信息" column={1}>
               <Descriptions.Item label="公司名称">温州市隆昌皮业有限公司</Descriptions.Item>
@@ -67,6 +68,19 @@ const Apply = () => {
               <Descriptions.Item label="验证方式">-</Descriptions.Item>
             </Descriptions>
           </div>
+        }
+
+        {/* 个人 */}
+        {authType === 3 &&
+          <div className={styles.apply_item}>
+            <Descriptions title="申请信息" column={1}>
+              <Descriptions.Item label="姓名">张三</Descriptions.Item>
+              <Descriptions.Item label="手机号">+86 185 2929 6758</Descriptions.Item>
+              <Descriptions.Item label="身份证号">321023 19891205 3746</Descriptions.Item>
+              <Descriptions.Item label="验证方式">-</Descriptions.Item>
+            </Descriptions>
+          </div>
+        }
       </div>
     </PageHeaderWrapper>
 

src/pages/transaction/electronicContracts/classSearch/index.tsx

-import React from 'react'
+import React, { useState, useRef } from 'react'
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { Card, Row, Col, Input, Button } from 'antd';
 import { ColumnType } from 'antd/lib/table/interface';
 import { StandardTable } from 'god';
+import { PublicApi } from '@/services/api'
 
 const ClassSearch = () => {
-
+  const ref = useRef<any>({});
   //表头
   const columns: ColumnType<any>[] = [{
     title: 'ID',
@@ -22,6 +23,16 @@ const ClassSearch = () => {
     dataIndex: 'status',
   }]
 
+  // 列表数据
+  const fetchData = (params?: any) => {
+    console.log(params)//可以直接打印参数
+    return new Promise((resolve, reject) => {
+      PublicApi.getContractParamPage({ ...params }).then(res => {
+        resolve(res.data)
+      })
+    })
+  }
+
   return (
     <PageHeaderWrapper>
       <Card>
@@ -30,6 +41,8 @@ const ClassSearch = () => {
             rowKey: 'id',
           }}
           columns={columns}
+          currentRef={ref}
+          fetchTableData={(params: any) => fetchData(params)}
           controlRender={
             <Row>
               <Col span={12}>

src/pages/transaction/electronicContracts/components/alipay/index.tsx

-import React from 'react'
-import { Result } from 'antd'
-import styles from '../index.less'
-import { AlipaySquareFilled } from '@ant-design/icons';
-
-const Alipay = () => {
-  return(
-    <div className={styles.info_wrap}>
-      <Result
-        title="请使用法人手机号注册的支付宝账号登录支付"
-        extra={[
-          <div key='key'>
-            <div className={styles.info_wran}>并使用支付宝首页的扫一扫功能</div>
-            <div className={styles.info_wran}>扫描下面的二维码，然后按照支付宝APP的</div>
-            <div className={styles.alipay_qrcode} />
-            <div className={styles.alipay_wran}>
-              <AlipaySquareFilled
-                style={{
-                  fontSize: '24px',
-                  color: '#3f7ed2',
-                  marginRight: '8px'
-                }}
-              />
-              支付宝扫一扫
-            </div>
-          </div>
-        ]}
-      />
-    </div>
-  )
-}
-
-export default Alipay

src/pages/transaction/electronicContracts/components/corporate/index.tsx

-import React from 'react'
+import React, { useState } from 'react'
 import { Button, Row, Col, Form, Input, Select } from 'antd'
 import styles from '../index.less'
 import cx from 'classnames'
 import { QuestionCircleOutlined } from '@ant-design/icons';
 
-const Corporate = () => {
+interface queryProps {
+  authType: number,
+  authTypeFn: Function,
+  checkPayWayFn: Function
+}
+
+const Corporate: React.FC<queryProps> = (props) => {
   const { Option } = Select;
+  const { authType, authTypeFn, checkPayWayFn } = props;
   const [form] = Form.useForm();
+  const [payWay, setPayWay] = useState<number>(1); // 1.支付宝, 2.对公, 3.短信
 
   // 测试表当提交效果
   const onSubmit = async () => {
     const value = await form.validateFields();
     console.log(value)
   }
-
+  // 切换支付认证方式
+  const CheckPayWay = (type: number) => {
+    setPayWay(type)
+    checkPayWayFn(type)
+  }
 
   return (
     <>
-      {/**认证方式*/}
+      {/**企业认证方式*/}
+      {authType === 1 &&
         <div className={styles.info_wrap}>
           <div className={styles.info_item}>
             <div className={styles.info_item_con}>
@@ -25,22 +38,24 @@ const Corporate = () => {
                 <div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
                 <div className={styles.item_control}>
                   <Row className={styles.card_checkbox}>
-                  <Col className={cx(styles.card_checkbox_item, styles.active)}>支付宝验证</Col>
-                  <Col className={cx(styles.card_checkbox_item, styles.active)}>手机验证码验证</Col>
+                    <Col className={cx(styles.card_checkbox_item, payWay===1&&styles.active)} onClick={()=>CheckPayWay(1)}>支付宝验证</Col>
+                    <Col className={cx(styles.card_checkbox_item, payWay===2&&styles.active)} onClick={()=>CheckPayWay(2)}>对公账户验证</Col>
                   </Row>
                 </div>
               </div>
               <div className={styles.item_con}>
                 <div className={styles.item_label}></div>
                 <div className={styles.item_control}>
-                <Button type='primary'>下一步</Button>
-                <Button>上一步</Button>
+                  <Button type='primary' onClick={()=>authTypeFn('', 2)}>下一步</Button>
+                  <Button onClick={()=>authTypeFn('', 0)}>上一步</Button>
                 </div>
               </div>
             </div>
           </div>
         </div>
+      }
       {/**经办人认证*/}
+      {authType === 2 &&
         <div className={styles.info_wrap}>
           <div className={styles.info_item}>
             <div className={styles.info_item_title}>企业信息核验</div>
@@ -68,7 +83,7 @@ const Corporate = () => {
                 <Form.Item label='手机号码' colon={false} required={true}>
                   <Row gutter={24}>
                     <Col span={7}>
-                    <Form.Item style={{width: '150px'}} name='code' rules={[{ required: true, message: '请选择区号' }]}>
+                      <Form.Item style={{ width: '150px' }} name='code' rules={[{ required: true, message: '请选择区号' }]}>
                         <Select style={{ width: '100%' }}>
                           <Option value="Zhejiang">Zhejiang</Option>
                           <Option value="Jiangsu">Jiangsu</Option>
@@ -76,7 +91,7 @@ const Corporate = () => {
                       </Form.Item>
                     </Col>
                     <Col span={17}>
-                    <Form.Item style={{width: '398px'}} name='phone' rules={[{ required: true, message: '请输入手机号码' }]}>
+                      <Form.Item style={{ width: '398px' }} name='phone' rules={[{ required: true, message: '请输入手机号码' }]}>
                         <Input />
                       </Form.Item>
                     </Col>
@@ -92,6 +107,32 @@ const Corporate = () => {
             </div>
           </div>
         </div>
+      }
+      {/**个人认证方式*/}
+      {authType === 3 &&
+        <div className={styles.info_wrap}>
+          <div className={styles.info_item}>
+            <div className={styles.info_item_con}>
+              <div className={styles.item_con}>
+                <div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
+                <div className={styles.item_control}>
+                  <Row className={styles.card_checkbox}>
+                    <Col className={cx(styles.card_checkbox_item, styles.active)}>支付宝验证</Col>
+                    <Col className={cx(styles.card_checkbox_item, styles.active)}>手机验证码验证</Col>
+                  </Row>
+                </div>
+              </div>
+              <div className={styles.item_con}>
+                <div className={styles.item_label}></div>
+                <div className={styles.item_control}>
+                  <Button type='primary'>下一步</Button>
+                  <Button>上一步</Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
     </>
   )
 }

src/pages/transaction/electronicContracts/components/enterpriseInfoCheck/index.tsx

-import React from 'react'
+import React, { useState } from 'react'
 import styles from '../index.less'
 import { Button, Row, Col } from 'antd'
 import cx from 'classnames'
 import { QuestionCircleOutlined } from '@ant-design/icons';
 
-const EnterpriseInfoCheck = () => {
+interface queryProps {
+  authTypeEdit: string,
+  authTypeFn: Function
+}
+
+const EnterpriseInfoCheck: React.FC<queryProps> = (props) => {
+  const { authTypeEdit, authTypeFn } = props;
+  const [authTypeBtn, setAuthTypeBtn] = useState<number>(1); // 认证方式
+  // 切换认证方式
+  const checkAuthType = (type:number) => {
+    setAuthTypeBtn(type);
+  }
+
   return (
     <>
       {/* 企业展示 */}
+      {(authTypeEdit === '1' || authTypeEdit === '2') &&
         <div className={styles.info_wrap}>
           <div className={styles.info_item}>
             <div className={styles.info_item_title}>企业信息核验</div>
@@ -45,21 +58,23 @@ const EnterpriseInfoCheck = () => {
                 <div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
                 <div className={styles.item_control}>
                   <Row className={styles.card_checkbox}>
-                  <Col className={cx(styles.card_checkbox_item, styles.active)}>法人认证</Col>
-                  <Col className={cx(styles.card_checkbox_item, styles.active)}>经办人认证</Col>
+                    <Col className={cx(styles.card_checkbox_item, authTypeBtn===1&&styles.active)} onClick={()=>checkAuthType(1)}>法人认证</Col>
+                    <Col className={cx(styles.card_checkbox_item, authTypeBtn===2&&styles.active)} onClick={()=>checkAuthType(2)}>经办人认证</Col>
                   </Row>
                 </div>
               </div>
               <div className={styles.item_con}>
                 <div className={styles.item_label}></div>
                 <div className={styles.item_control}>
-                <Button type='primary'>下一步</Button>
+                  <Button type='primary' onClick={()=>authTypeFn(authTypeBtn, 1)}>下一步</Button>
                 </div>
               </div>
             </div>
           </div>
         </div>
+      }
       {/* 个人展示 */}
+      {authTypeEdit === '3' &&
         <div className={styles.info_wrap}>
           <div className={styles.info_item}>
             <div className={styles.info_item_title}>个人信息核验</div>
@@ -85,6 +100,8 @@ const EnterpriseInfoCheck = () => {
             </div>
           </div>
         </div>
+      }
+
     </>
   )
 }

src/pages/transaction/electronicContracts/components/publicAccount/index.tsx

 import React from 'react'
 import { Result, Button, Form, Input, Row, Col } from 'antd'
 import styles from '../index.less'
+import { AlipaySquareFilled } from '@ant-design/icons';
 
-const PublicAccount = () => {
+interface queryProps {
+  payWay: number,
+  authType: number
+}
+
+const PublicAccount: React.FC<queryProps> = (props) => {
+  const { payWay, authType } = props;
   return (
     <>
+      {payWay === 1 &&
+        <div className={styles.info_wrap}>
+          {/** 支付宝认证*/}
+          <Result
+            title="请使用法人手机号注册的支付宝账号登录支付"
+            extra={[
+              <div key='key'>
+                <div className={styles.info_wran}>并使用支付宝首页的扫一扫功能</div>
+                <div className={styles.info_wran}>扫描下面的二维码，然后按照支付宝APP的</div>
+                <div className={styles.alipay_qrcode} />
+                <div className={styles.alipay_wran}>
+                  <AlipaySquareFilled
+                    style={{
+                      fontSize: '24px',
+                      color: '#3f7ed2',
+                      marginRight: '8px'
+                    }}
+                  />
+              支付宝扫一扫
+            </div>
+              </div>
+            ]}
+          />
+        </div>
+      }
+      {(authType === 1 && payWay === 2) &&
+        <>
           <div className={styles.info_wrap}>
             {/** 对公账户确认*/}
             <Result
@@ -34,8 +68,6 @@ const PublicAccount = () => {
                 </div>
               ]}
             />
-
-
           </div>
           <div className={styles.info_wrap}>
             {/** 对公账户打款*/}
@@ -60,6 +92,10 @@ const PublicAccount = () => {
               ]}
             />
           </div>
+        </>
+      }
+
+      {(authType === 2 && payWay === 3) &&
         <div className={styles.info_wrap}>
           {/** 系统将向法人手机号码发送验证短信*/}
           <Result
@@ -79,6 +115,9 @@ const PublicAccount = () => {
             ]}
           />
         </div>
+      }
+
+      {authType === 3 &&
         <div className={styles.info_wrap}>
           {/** 系统将向当前会员手机号码发送短信验证码*/}
           <Result
@@ -90,20 +129,18 @@ const PublicAccount = () => {
                   <div>法人手机号：</div>
                   <div>+86 186 7700 2345</div>
                 </div>
-              <Form style={{width: '338px', margin: 'auto'}}>
+                <Form style={{ width: '338px', margin: 'auto' }}>
                   <Form.Item noStyle>
                     <Row gutter={6}>
                       <Col span={16}>
                         <Form.Item name='code' rules={[{ required: true, message: '请输入短信验证码' }]}>
-                        <Input placeholder='请输入您收到的转账金额' />
+                          <Input placeholder='请输入短信验证码' />
                         </Form.Item>
                       </Col>
                       <Col span={8}>
                         <Button>获取验证码</Button>
                       </Col>
                     </Row>
-
-
                   </Form.Item>
                 </Form>
                 <div className={styles.bank_btn} style={{ textAlign: 'center' }}>
@@ -114,6 +151,7 @@ const PublicAccount = () => {
             ]}
           />
         </div>
+      }
     </>
   )
 }

src/pages/transaction/electronicContracts/components/steps/index.tsx

@@ -3,10 +3,16 @@ import styles from './index.less'
 import { Steps } from 'antd'
 const { Step } = Steps;
 
-const StepComponents = () => {
+interface stepProps {
+  step: number,
+}
+
+const StepComponents: React.FC<stepProps> = (props) => {
+  const { step } = props;
+
   return (
     <div className={styles.step_info}>
-      <Steps size="small" current={0}>
+      <Steps size="small" current={step}>
         <Step title="企业信息核验" />
         <Step title="经办人/法人认证" />
         <Step title="企业认证" />

src/pages/transaction/electronicContracts/enterpriseCertified/index.tsx

-import React from 'react'
+import React, { useState } from 'react'
 import { history } from 'umi'
 import ReutrnEle from '@/components/ReturnEle';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import StepComponents from '../components/steps'
 import EnterpriseInfoCheck from '../components/enterpriseInfoCheck'
 import Corporate from '../components/corporate'
-import Alipay from '../components/alipay'
 import PublicAccount from '../components/publicAccount'
 
 const EnterpriseCertified = () => {
+  const { authTypeEdit } = history.location.query;
+  const [step, setStep] = useState<number>(0);
+  const [authType, setAuthType] = useState<number>(1);
+  const [payWay, setPayWay] = useState<number>(1); // 1.支付宝, 2.对公, 3.短信
+
+  //认证方式切换Fn
+  const authTypeFn = (type: number, steps: number) => {
+    if (type) { setAuthType(type); }
+    setStep(steps)
+  }
+
+  //切换支付方式
+  const checkPayWayFn = (type: number) => {
+    setPayWay(type)
+  }
+
   return (
     <PageHeaderWrapper
       onBack={() => history.goBack()}
       backIcon={<ReutrnEle description="返回" />}
     >
-      <StepComponents />
-      <EnterpriseInfoCheck />
-      <Corporate />
-      {/**<Alipay />*/}
-      <PublicAccount />
+      <StepComponents step={step} />
+      {step === 0 &&
+        <EnterpriseInfoCheck
+          authTypeEdit={authTypeEdit}
+          authTypeFn={authTypeFn}
+        />
+      }
+      {step === 1 &&
+        <Corporate
+          authType={authType}
+          checkPayWayFn={checkPayWayFn}
+          authTypeFn={authTypeFn}
+        />
+      }
+      {step === 2 &&
+        <PublicAccount
+          authType={authType}
+          payWay={payWay}
+        />}
     </PageHeaderWrapper>
   )
 }