feat: 注册页新增图片验证码

src/components/NiceForm/components/Phone.tsx

-import React, { useState } from 'react'
-import { Row, Input, Col, Button } from 'antd';
+import React, { useEffect, useState } from 'react'
+import { Row, Input, Col, Button, Result } from 'antd';
 import useCountDown from '@/utils/hooks';
 import { PublicApi } from '@/services/api';
+import godEvent from '@/utils/event'
+import { RiskCheck } from 'god';
+import { createEffectHook } from '@formily/antd';
+
+const customEvent$ = createEffectHook('SHOW_PHONE_VALIDATE')
 
 const Phone = (props) => {
   const {text, isActive, start} = useCountDown({
@@ -17,7 +22,17 @@ const Phone = (props) => {
   const { smsFn, ...componentProps } = schema.getExtendsComponentProps() || {}
 
   const [loading, setLoading] = useState(false)
+  const [isShowValidate, setIsShowValidate] = useState(false)
+
+  useEffect(() => {
+    godEvent.on('SHOW_PHONE_VALIDATE', (payload) => {
+      setIsShowValidate(true)
+    })
 
+    return () => {
+      godEvent.off('SHOW_PHONE_VALIDATE')
+    }
+  }, [])
   const handleClickSms = () => {
     if (smsFn) {
       smsFn(form, setLoading, () => {
@@ -26,23 +41,40 @@ const Phone = (props) => {
       })
       return ;
     }
-    form.validate('phone').then(result => {
-      // 暂时写死, 需优化该组件
-      setLoading(true)
-      PublicApi.postMemberRegisterSms({
-        countryCode: '+86',
-        phone: form.getFieldValue('phone')
-      }).finally(() => {
-        start()
-        setLoading(false)
-      })
+    // console.log(props)
+    // console.log(form.action)
+    // setTimeout(() => {
+    //   form.getFieldState('phone', state => {
+    //     console.log(state)
+    //     if (state.errors.length === 0) {
+    //       setIsShowValidate(true)
+    //     }
+    //   })
+    // }, 50)
+  }
+
+  const handleStartSms = () => {
+    setLoading(true)
+    PublicApi.postMemberRegisterSms({
+      countryCode: '+86',
+      phone: form.getFieldValue('phone')
+    }).finally(() => {
+      start()
+      setLoading(false)
     })
   }
 
+  const handleCheckSuccess = (reset) => {
+    setTimeout(() => {
+      setIsShowValidate(false)
+      handleStartSms()
+    }, 1000)
+  }
+
   return (
     <Row style={{width: '100%'}}>
       <Col flex={1}>
-        <Input 
+        <Input
           value={value || ''}
           onChange={e => props.mutators.change(e.target.value)}
           {...componentProps}
@@ -51,6 +83,19 @@ const Phone = (props) => {
       <Col style={{marginLeft: 8}}>
         <Button disabled={isActive} style={{minWidth: 110, marginLeft: 8}} loading={loading} size='large' onClick={handleClickSms}>{text}</Button>
       </Col>
+      {
+        isShowValidate &&
+        <RiskCheck
+          imgUrl="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1505%2F05%2Fc9%2F6361159_6361159_1430799005928.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626945322&t=5bbeeecc4566988c9f44e0aae3640e69"
+          imgWidth={300}
+          imgHeight={150}
+          xPoint={100}
+          yPoint={30}
+          shadowSize={60}
+          differ={10}
+          onSuccess={handleCheckSuccess}
+        />
+      }
     </Row>
   )
 }
@@ -59,4 +104,4 @@ Phone.defaultProps = {}
 
 Phone.isFieldComponent = true;
 
-export default Phone
\ No newline at end of file
+export default Phone

src/global/styles/reset.less

@@ -313,4 +313,8 @@
     padding-top: 6px;
     padding-bottom: 6px;
   }
+
+  .ant-input-lg {
+    padding: 8px 11px;
+  }
 }

src/pages/user/register.tsx

@@ -17,6 +17,9 @@ import NiceForm from '@/components/NiceForm';
 import schemas from './schema';
 import { encryptedByAES } from '@/utils/cryptoAes';
 import PasswordInput from './components/PasswordInput'
+import godEvent from '@/utils/event'
+
+const eventEmitter = godEvent
 
 const { onFieldValueChange$, onFieldInputChange$, onFieldValidateEnd$ } = FormEffectHooks
 
@@ -37,7 +40,7 @@ const CustomInput = props => {
 
 // 检验联动
 const useLinkageValidateEffects = () => {
-  const { setFieldState, getFieldState } = createFormActions()
+  const { setFieldState, getFieldState, notify } = createFormActions()
   onFieldInputChange$('phone').subscribe(fieldState => {
     // 手动输入的时候 重置校验信息
     setFieldState('phone', state => {
@@ -55,6 +58,8 @@ const useLinkageValidateEffects = () => {
           setFieldState('phone', state => {
             state.errors = ['手机号已存在']
           })
+        } else {
+          eventEmitter.emit('SHOW_PHONE_VALIDATE', true)
         }
       })
     }

src/utils/event.ts

+class EventEmitter {
+  events = {}
+
+  on(eventName: string, handler) {
+    if (typeof handler !== 'function') {
+      throw '必须传入一个函数'
+    }
+    if (this.events[eventName]) {
+      this.events[eventName].push(handler)
+    } else {
+      this.events[eventName] = [handler]
+    }
+  }
+
+  off(eventName) {
+    this.events[eventName] = null
+  }
+
+  emit(eventName: string, ...payload) {
+    if (this.events[eventName]) {
+      this.events[eventName].forEach(v => {
+        v(...payload)
+      })
+    }
+  }
+}
+
+export default new EventEmitter()