HQ_yueYue/展示端/src/pages/A8proof/index.tsx

import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { useParams } from 'react-router-dom'
import TopCom from '@/components/TopCom'
import { Button, Form, FormInstance, Input } from 'antd'
import ZinfoPop from '@/components/ZinfoPop'
import history from '@/utils/history'
import TextArea from 'antd/es/input/TextArea'
import { CloudUploadOutlined, EyeOutlined, CloseOutlined } from '@ant-design/icons'
import MyPopconfirm from '@/components/MyPopconfirm'
import { ImageViewer } from 'antd-mobile'

function A8proof() {
  const urlObj: any = useParams()

  const canRef = useRef('')

  useEffect(() => {
    if (urlObj.id) {
      canRef.current =
        urlObj.id === '1' ? '横琴粤澳深度合作区民生事务局' : '澳门街坊会联合总会广东办事处'
    }
  }, [urlObj.id])

  useEffect(() => {
    FormBoxRef.current?.setFieldsValue({
      name: '王大锤',
      phone: '18702025091',
      danwei: '阿三大苏打'
    })
  }, [])

  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null)

  // 没有通过校验
  const onFinishFailed = useCallback(() => {}, [])

  //  通过校验点击确定
  const onFinish = useCallback(async (values: any) => {
    setTitPop('succ')
  }, [])

  // 打开提示弹窗
  const [titPop, setTitPop] = useState('')

  const [fileArr, setFileArr] = useState([
    {
      id: 1,
      name: '啊实打实大苏打实打实大苏打啊实打实大苏打实打实大苏打啊实打实大苏打实打实大苏打.jpg',
      src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
    },
    {
      id: 2,
      name: 'cccc.pdf',
      src: '//cccc.pdf'
    }
  ])

  return (
    <div className={styles.A8proof}>
      <TopCom txt='团体认证' />
      <div className='A8main'>
        <div className='A8Center'>
          <Form
            ref={FormBoxRef}
            name='basic'
            // labelCol={{ span: 3 }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete='off'
            scrollToFirstError
          >
            {/* 第一个卡片 */}
            <div className='A8lKa'>
              <div className='A8tit'>负责人信息</div>

              <Form.Item
                label='负责人姓名'
                name='name'
                rules={[{ required: true, message: '请输入负责人姓名!' }]}
                getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
              >
                <Input placeholder='请输入内容，不超过6个字' maxLength={6} />
              </Form.Item>

              <Form.Item
                label='联系方式'
                name='phone'
                rules={[
                  { required: true, message: '请输入联系方式!' },
                  {
                    pattern: /^1[3-9][0-9]{9}$/,
                    message: '请输入正确格式的手机号!'
                  }
                ]}
              >
                <Input placeholder='请输入11位数字' maxLength={11} />
              </Form.Item>

              <Form.Item
                className='A8Text'
                label='单位名称'
                name='danwei'
                rules={[{ required: true, message: '请输入单位名称!' }]}
                // getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
              >
                <TextArea placeholder='请输入内容，不超过50个字' maxLength={50} />
              </Form.Item>
            </div>

            {/* 第二个卡片 */}
            <div className='A8lKa A8lKa2'>
              <div className='A8lKa2Top'>
                <div className='A8K2ll'>
                  <div className='A8K2ll_1'>
                    <span>* </span>上传授权或同意文件
                  </div>
                  <div className='A8K2ll_2'>仅限PDF，jpg，png格式；大小不超过5M；最多3个文件</div>
                </div>
                <div
                  className='A8K2rr'
                  style={{
                    opacity: fileArr.length >= 3 ? '0' : '1',
                    pointerEvents: fileArr.length >= 3 ? 'none' : 'auto'
                  }}
                >
                  <CloudUploadOutlined />
                  上传
                </div>
              </div>
              {fileArr.length ? (
                <div className='A8lKa2File'>
                  {fileArr.map(item => (
                    <div key={item.id} className='A8Frow'>
                      <div className='A8Frowll'>{item.name}</div>
                      <div className='A8Frowrr'>
                        {item.name.includes('.pdf') || item.name.includes('.PDF') ? null : (
                          <EyeOutlined onClick={() => ImageViewer.show({ image: item.src })} />
                        )}

                        <MyPopconfirm
                          txtK='删除'
                          onConfirm={() => setFileArr(fileArr.filter(v => v.id !== item.id))}
                          Dom={<CloseOutlined className='clearCover' />}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              ) : null}
            </div>

            <Button className='A8btn' type='primary' htmlType='submit'>
              提交
            </Button>
          </Form>
        </div>
      </div>
      {/* 预约成功的弹窗 */}
      {titPop ? (
        <ZinfoPop proof={true} type={titPop as 'succ'} callFu={() => history.push('/my?m=1')} />
      ) : null}
    </div>
  )
}

const MemoA8proof = React.memo(A8proof)

export default MemoA8proof