fix: 修复注册验证码相关功能

src/components/NiceForm/components/Phone.tsx

@@ -12,16 +12,20 @@ const IMG_WIDTH = 352
 const IMG_HEIGHT = 180
 
 const Phone = (props) => {
+  const { value, form, schema } = props
   const {text, isActive, start} = useCountDown({
     maxTime: 60,
     minTime: 0,
     initText: '获取验证码',
-    onEnd: () => {},
+    onEnd: () => {
+      form.setFieldState('phone', state => {
+        state.smsLoading = instanceRef.current.canIUseSms
+      })
+    },
     decayRate: 1,
     delay: 1 * 1000
   })
 
-  const { value, form, schema } = props
   const { smsFn, ...componentProps } = schema.getExtendsComponentProps() || {}
 
   const [loading, setLoading] = useState(false)
@@ -38,11 +42,11 @@ const Phone = (props) => {
 
   useEffect(() => {
     godEvent.on('SHOW_PHONE_VALIDATE', (payload) => {
-      if (!isActive) {
+      if (isActive) {
         // 验证码在loading的时候 不能再次触发
         return ;
       }
-      setIsShowValidate(true)
+      setIsShowValidate(payload)
     })
 
     return () => {
@@ -51,14 +55,13 @@ const Phone = (props) => {
   }, [])
 
   useEffect(() => {
-    if (isShowValidate) {
+    if (isShowValidate && !isActive) {
       PublicApi.getMemberCaptcha({
         width: IMG_WIDTH.toString(),
         height: IMG_HEIGHT.toString(),
         size: FLAG_SIZE.toString()
       }).then(res => {
         const { backImage, width, height, imgId } = res.data
-        console.log(Number(decryptedByAES(width)))
         setRemoteImg(() => {
           return {
             img: 'data:image/jpeg;base64,' +backImage,
@@ -70,10 +73,21 @@ const Phone = (props) => {
       })
     }
 
-  }, [isShowValidate])
-  const handleClickSms = () => {
+  }, [isShowValidate, isActive])
+  const handleClickSms = async () => {
+    const validateState = await form.validate('phone')
+    // 手机号未通过校验
+    if (validateState.errors > 0) {
+      return false
+    }
+
+    // 短信正在读秒中
+    if (isActive) {
+      return false
+    }
+
+    // 尚未通过滑块校验
     if (!instanceRef.current.canIUseSms) {
-      message.error('请先进行验证码校验')
       setIsShowValidate(true)
       return false
     }
@@ -89,6 +103,9 @@ const Phone = (props) => {
 
   const handleStartSms = () => {
     setLoading(true)
+    form.setFieldState('phone', state => {
+      state.smsLoading = instanceRef.current.canIUseSms
+    })
     PublicApi.postMemberRegisterSms({
       countryCode: '+86',
       width: String(remoteImg.x),
@@ -103,8 +120,8 @@ const Phone = (props) => {
   const handleCheckSuccess = (reset) => {
     setTimeout(() => {
       setIsShowValidate(false)
-      handleStartSms()
       instanceRef.current.canIUseSms = true
+      handleStartSms()
     }, 1000)
   }
 

src/pages/user/register.tsx

@@ -48,7 +48,7 @@ const useLinkageValidateEffects = () => {
     })
   })
   onFieldValidateEnd$('phone').subscribe(fieldState => {
-    if (fieldState.valid) {
+    if (fieldState.valid && !fieldState.smsLoading) {
       // 校验手机号格式通过时, 需请求接口判断手机号是否存在数据库
       PublicApi.getMemberRegisterPhoneCheck({
         countryCode: prefixCode,
@@ -57,11 +57,14 @@ const useLinkageValidateEffects = () => {
         if (code !== 1000) {
           setFieldState('phone', state => {
             state.errors = ['手机号已存在']
+            eventEmitter.emit('SHOW_PHONE_VALIDATE', false)
           })
         } else {
           eventEmitter.emit('SHOW_PHONE_VALIDATE', true)
         }
       })
+    } else {
+      eventEmitter.emit('SHOW_PHONE_VALIDATE', false)
     }
   })
   onFieldValueChange$('*(confirmPassword)').subscribe(fieldState => {