ttk-app-core/src/apps/portal/app-registry/components/registryForm.js

@ttk/recat enterprise develop framework

import React, { useCallback, useState, useEffect } from 'react'
import { PageHeader, Spin, Button, Form, Input, Checkbox, Row, Col, Select } from 'antd'
import { Link } from '@ttk/router'
import webapi from '../webapi'
import { useActions, useData } from '@ttk/app-loader'

let sendTimer = null
export default function CustomForm(props) {

  const actions = useActions(props)
  const validateState = useData([props, 'validateState']).toJS()
  const formObj = useData([props, 'attributeForm']).toJS()
  const [loading, setLoading] = useState(false)
  const [btnText, setBtnText] = useState("点击获取验证码")
  const [imgUrl, setImgUrl] = useState("https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1800947853,3461028799&fm=26&gp=0.jpg")
  // const [showModal, setShowModal] = useState(false)
  // 定义form表单字段，用于清除重置时回显和首次校验
  const formData = {
    phone: null,
    verifyCode: null,
    captcha: null,
    password: null,
    confirm: null,
    remember: null
  }

  // 初始化
  useEffect(() => {
    actions.initForm(formData)
    return () => {
      if (sendTimer)
        window.clearInterval(sendTimer)
        sendTimer = null
    }
  }, []) 

  // 发送短信验证码
  const onSendCode = useCallback(() => {
    let fields = {
      phone: formObj.phone,
      captcha: formObj.captcha
    }
    async function sendCode() {
      let i = 60
      setBtnText(`${i}秒后重试`)
      webapi.sendCode(fields)
      sendTimer = window.setInterval(() => {
        i--
        setBtnText(`${i}秒后重试`)
        if (i <= 0) {
          window.clearInterval(sendTimer)
          sendTimer = null
          setBtnText(`点击获取验证码`)
          return
        }
      }, 1000)
    }
    async function validate() {
      if (sendTimer) {
        return false
      }
      // 先验证手机号和图形验证码是否已填写
      const result = await actions.updateFormObj(fields)
      if (!result) return;
      sendCode()
    }
    validate()
  }, [formObj, sendTimer])

  // 提交注册
  const handleSubmit = useCallback(event => {
    event.preventDefault()
    async function asyncFun() {
      setLoading(true)
      const res = await webapi.registry(formObj)
      setLoading(false)
      console.log(111, res);
      if (res) {
        props.history.replace('/app-root/app-login')
      }
    }
    async function validate() {
      const result = await actions.updateFormObj()
      if (!result) return;
      asyncFun() 
    }
    validate()
  }, [])

  // 更换图片验证码
  const onChangeImg = useCallback(() => {
    async function getImg() {
      let res = await webapi.getImg()
      if (res) {
        setImgUrl(res.imgUrl)
      }
    }
    getImg()
  })

  // 更新表单方法
  const updateForm = useCallback((e) => {
    async function asyncFun(arges) {
      await actions.updateFormObj(e)
    }
    asyncFun(e)
  }, [])

  // form的验证规则可参考：https://github.com/yiminghe/async-validator
  return (
    <div className="registry-form">
      <PageHeader style={{ paddingLeft: 0, paddingBottom: "20px" }} title="账号注册" />
      <Spin tip="Loading..." spinning={loading}>
        <Form onSubmit={handleSubmit}>
          <Form.Item
            required={true}
            validateStatus={validateState.phone.state}
            help={validateState.phone.message}>
            <Input value={formObj.phone} onChange={e => updateForm({ phone: e.target.value })}
              placeholder="请输入手机号码" />
          </Form.Item>
          <Form.Item
            required={true}
            validateStatus={validateState.captcha.state}
            help={validateState.captcha.message}>
            <Row gutter={8}>
              <Col span={14}>
                <Input placeholder="请输入图形验证码" value={formObj.captcha} onChange={e => updateForm({ captcha: e.target.value })}/>
              </Col>
              <Col span={5}>
                <img className="captchaImg" src={imgUrl} onClick={() => onChangeImg()}/>
              </Col>
              <Col span={5}>
                <Button className="captchaBtn" onClick={() => onChangeImg()}>换一张</Button>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item
            required={true}
            validateStatus={validateState.verifyCode.state}
            help={validateState.verifyCode.message}>
            <Row gutter={8}>
              <Col span={18}>
                <Input placeholder="请输入手机验证码" value={formObj.verifyCode} onChange={e => updateForm({ verifyCode: e.target.value })}/>
              </Col>
              <Col span={6}>
                <Button onClick={onSendCode}>{btnText}</Button>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item 
            required={true}
            validateStatus={validateState.password.state}
            help={validateState.password.message}
          >
            <Input.Password placeholder="请输入密码" value={formObj.password} onChange={e => updateForm({ password: e.target.value })}/>
          </Form.Item>
          <Form.Item 
            required={true}
            validateStatus={validateState.confirm.state}
            help={validateState.confirm.message}>
            <Input.Password placeholder="请确认密码" value={formObj.confirm} onChange={e => updateForm({ confirm: e.target.value })} />
          </Form.Item>
          <Form.Item
            required={true}
            validateStatus={validateState.remember.state}
            help={validateState.remember.message}
          >
            <Button style={{ width: '100%' }} type="primary" htmlType="submit" className="login-form-button">
              立即注册
            </Button>
            <br />
            <Row>
              <Col>
                <Checkbox 
                  checked={!!formObj.remember} 
                  onChange={e => updateForm({ remember: e.target.checked })}>注册表示您已阅读并同意 <Link>《用户注册协议》</Link>
                </Checkbox>
              </Col>
            </Row>
          </Form.Item>
        </Form>
      </Spin>
    </div>
  )
}