forgeplus-react/src/forge/users/Material/verification.jsx

import React , { forwardRef, Fragment, useEffect, useState } from 'react';
import { Form , Input, Button , Spin, message, Alert } from 'antd';
import { AlignCenter, AlignTop } from '../../Component/layout';
import './Index.scss';
import UploadImage from '../../Team/Component/UploadImage';
import axios from 'axios';
import { getImageUrl } from '../../../common/UrlTool';

export default Form.create()(
  forwardRef((props)=>{
    const { getFieldDecorator, validateFields , setFieldsValue } = props && props.form;
    const { current_user } = props;
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState(undefined);
    const [reload, setReload] = useState(undefined);

    useEffect(()=>{
      if(current_user && current_user.login){
        setLoading(true);
        // 获取用户身份认证信息
        axios.get(`/identity_verifications.json`).then(res=>{
          setLoading(false);
          if(res && res.status === 200){
            if(res.data && res.data.status === 0){
              return;
            }
            setData(res.data);
            const {name, number, card_back, card_front, hold_card_back, hold_card_front} = res.data;
            setFieldsValue({
              name, number, card_back, card_front, hold_card_back, hold_card_front
            })
          }
        })
      }
    },[current_user, reload])

    function submit() {
      validateFields((error, values) => {
        if (!error) {
          if(data){
            axios.put(`/identity_verifications/${data.id}.json`, values).then(res => {
              if(res && res.status === 200){
                message.success("提交成功");
                setReload(Math.random());
              }
            }).catch((error) => {});
          }else{
            // 新增
            axios.post(`/identity_verifications.json`, values).then(res=>{
              if(res && res.status === 200){
                message.success("提交成功");
                setReload(Math.random());
              }
            })
          }
        }
      });
    }

    return (
      <Spin spinning={loading}>
        {data && data.state && (
          <Fragment>
            {data.state === "待审核" && (
              <div className="tipsBox mb20">
                您提供的身份信息正在审核，请耐心等待
              </div>
            )}
            {data.state === "已拒绝" && <div className="tipsBox mb20 errorTip">
              您提交的身份信息未提供，原因：{data.description || "无，如有需要请联系平台管理员"}
            </div>}
            {data.state === "已通过" && <Alert className="mb20" type='success' message="您提交的身份信息已通过" />}
          </Fragment>
        )}
        <Form layout={"inline"} className="verificationForm">
          <Form.Item label="真实姓名" labelCol={{ span: 4 }}>
            {getFieldDecorator("name", {
              rules: [{ required: true, message: "请输入真实姓名" }],
            })(
              <Input
                placeholder="请输入与身份证一致的真实姓名"
                style={{ width: "400px" }}
              />
            )}
          </Form.Item>
          <Form.Item label="身份证号" labelCol={{ span: 4 }}>
            {getFieldDecorator("number", {
              rules: [
                { required: true, message: "请输入大陆身份证号码" },
                { pattern: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}([0-9]|X)$/, message: "请输入正确的中国大陆身份证号码"}
              ],
            })(
              <Input placeholder="请输入身份证号" style={{ width: "400px" }} />
            )}
          </Form.Item>
          <AlignTop style={{ alignItems: "flex-end" }}>
            <Form.Item
              label="身份证照片"
              extra="正面"
              className="uploadCard verUpload"
            >
              {getFieldDecorator("card_front", {
                rules: [{ required: true, message: "请上传照片" }],
              })(
                <UploadImage maxSize={5} getImageId={(id)=>{setFieldsValue({'card_front': id})}} url={data && getImageUrl(`/api/attachments/${data.card_front}`)}/>
              )}
            </Form.Item>
            <Form.Item
              extra="反面"
              className='verUpload'
            >
              {getFieldDecorator("card_back", {
                rules: [{ required: true, message: "请上传照片" }],
              })(
                <UploadImage maxSize={5} getImageId={(id)=>{setFieldsValue({'card_back': id})}} url={data && getImageUrl(`/api/attachments/${data.card_back}`)}/>
              )}
            </Form.Item>
          </AlignTop>
          <AlignTop style={{ alignItems: "flex-end" }}>
            <Form.Item
              label="手持身份证照片"
              extra="正面"
              className="uploadCard verUpload"
            >
              {getFieldDecorator("hold_card_front", {
                rules: [{ required: true, message: "请上传照片" }],
              })(
                <UploadImage maxSize={5} getImageId={(id)=>{setFieldsValue({'hold_card_front': id})}} url={data && getImageUrl(`/api/attachments/${data.hold_card_front}`)}/>
              )}
            </Form.Item>
            <Form.Item extra="反面" className='verUpload'>
              {getFieldDecorator("hold_card_back", {
                rules: [{ required: true, message: "请上传照片" }],
              })(
                <UploadImage maxSize={5} getImageId={(id)=>{setFieldsValue({'hold_card_back': id})}} url={data && getImageUrl(`/api/attachments/${data.hold_card_back}`)}/>
              )}
            </Form.Item>
          </AlignTop>
          {(!data || (data && data.state === "已拒绝")) && (
            <AlignCenter>
              <span className="ant-form-item-label"></span>
              <Button className="but25" type={"primary"} onClick={submit}>
                提交
              </Button>
            </AlignCenter>
          )}
        </Form>
      </Spin>
    );
  })
)