fix: 滑动验证码组件

src/components/NiceForm/components/Phone.tsx

-import React, { useEffect, useState } from 'react'
-import { Row, Input, Col, Button, Result } from 'antd';
+import React, { useEffect, useRef, useState } from 'react'
+import { Row, Input, Col, Button, Result, message, Modal } 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';
+import { decryptedByAES, encryptedByAES } from '@/utils/cryptoAes';
 
-const customEvent$ = createEffectHook('SHOW_PHONE_VALIDATE')
+// 滑块尺寸
+const FLAG_SIZE = 60
+const IMG_WIDTH = 352
+const IMG_HEIGHT = 180
 
 const Phone = (props) => {
   const {text, isActive, start} = useCountDown({
@@ -23,9 +26,22 @@ const Phone = (props) => {
 
   const [loading, setLoading] = useState(false)
   const [isShowValidate, setIsShowValidate] = useState(false)
+  const instanceRef = useRef({
+    canIUseSms: false
+  })
+  const [remoteImg, setRemoteImg] = useState({
+    x: 0,
+    y: 0,
+    imgId: '',
+    img: '',
+  })
 
   useEffect(() => {
     godEvent.on('SHOW_PHONE_VALIDATE', (payload) => {
+      if (isActive) {
+        // 验证码在loading的时候 不能再次触发
+        return ;
+      }
       setIsShowValidate(true)
     })
 
@@ -33,7 +49,34 @@ const Phone = (props) => {
       godEvent.off('SHOW_PHONE_VALIDATE')
     }
   }, [])
+
+  useEffect(() => {
+    if (isShowValidate) {
+      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,
+            imgId,
+            x: Number(decryptedByAES(width)),
+            y: Number(height)
+          }
+        })
+      })
+    }
+
+  }, [isShowValidate])
   const handleClickSms = () => {
+    if (!instanceRef.current.canIUseSms) {
+      message.error('请先进行验证码校验')
+      setIsShowValidate(true)
+      return false
+    }
     if (smsFn) {
       smsFn(form, setLoading, () => {
         start()
@@ -41,23 +84,16 @@ const Phone = (props) => {
       })
       return ;
     }
-    // console.log(props)
-    // console.log(form.action)
-    // setTimeout(() => {
-    //   form.getFieldState('phone', state => {
-    //     console.log(state)
-    //     if (state.errors.length === 0) {
-    //       setIsShowValidate(true)
-    //     }
-    //   })
-    // }, 50)
+    handleStartSms()
   }
 
   const handleStartSms = () => {
     setLoading(true)
     PublicApi.postMemberRegisterSms({
       countryCode: '+86',
-      phone: form.getFieldValue('phone')
+      width: String(remoteImg.x),
+      imgId: remoteImg.imgId,
+      phone: encryptedByAES(form.getFieldValue('phone'))
     }).finally(() => {
       start()
       setLoading(false)
@@ -67,7 +103,7 @@ const Phone = (props) => {
   const handleCheckSuccess = (reset) => {
     setTimeout(() => {
       setIsShowValidate(false)
-      handleStartSms()
+      instanceRef.current.canIUseSms = true
     }, 1000)
   }
 
@@ -83,19 +119,26 @@ 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 &&
+      <Modal
+        title='滑动验证'
+        visible={isShowValidate}
+        mask
+        centered
+        footer={null}
+        onCancel={() => setIsShowValidate(false)}
+      >
         <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}
+          className='lx-risk-check'
+          imgUrl={remoteImg.img}
+          imgWidth={IMG_WIDTH}
+          imgHeight={IMG_HEIGHT}
+          xPoint={remoteImg.x}
+          yPoint={remoteImg.y}
+          shadowSize={FLAG_SIZE}
           differ={10}
           onSuccess={handleCheckSuccess}
         />
-      }
+      </Modal>
     </Row>
   )
 }

src/components/NiceForm/index.less

@@ -49,4 +49,11 @@
     line-height: 1;
     content: '*';
   }
-}
\ No newline at end of file
+}
+
+// 滑动验证码
+.lx-risk-check {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}