fix: 修改密码验证组件以及错误提示

src/pages/accountSetting/components/SafeVerification/index.less

 .box {
   z-index: 99;
+  .container {
+    height: 32px;
+    line-height: 32px;
+    font-size: 14px;
+    background: #EBF7F2;
+    border: 1px solid #00B37A;  
+    margin: 8px 0 32px 0;
+    width: 495px;
+    cursor: pointer;
+    position: relative;
+  
+    .btn {
+      color: #00B37A;
+      text-align: center;
+    }
+  
+  }
+ 
 }
 
-.container {
-  height: 32px;
-  line-height: 32px;
-  font-size: 14px;
-  background: #EBF7F2;
-  border: 1px solid #00B37A;  
-  margin: 8px 0 32px 0;
-  width: 495px;
-  cursor: pointer;
-  position: relative;
+.risk {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 
-  .btn {
-    color: #00B37A;
-    text-align: center;
-  }
 
-}
 
-.sliderVerify {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  // background-color: #fff;
-  z-index: 99;
-  // transform: translateX(-130px);
-  margin-left: -130px;
-  margin-top: -136px;
-}
\ No newline at end of file

src/pages/accountSetting/components/SafeVerification/index.tsx

-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from './index.less';
-import { Row, Col } from 'antd';
-import SliderVerify from '../SliderVerify';
+import { Row, Col, Modal, message } from 'antd';
+// import SliderVerify from '../SliderVerify';
 import { useIntl} from 'umi'
+import { RiskCheck } from '@linkseeks/god';
+import { decryptedByAES } from '@/utils/cryptoAes';
+import { getMemberCaptcha } from '@/services/MemberV2Api';
 
+// const imageUrl = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689053532,4230915864&fm=26&gp=0.jpg'
 
-const imageUrl = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689053532,4230915864&fm=26&gp=0.jpg'
+// 滑块尺寸
+const FLAG_SIZE = 60
+const IMG_WIDTH = 352
+const IMG_HEIGHT = 180
 
-const SafeVerification =  (props) => {
+interface Iprops {
+  isDisabled: boolean
+  handleVerifySuccess: () => void,
+  tips?: string
+}
+
+const SafeVerification: React.FC<Iprops>  =  (props) => {
   const intl = useIntl();
+  const { isDisabled, tips = intl.formatMessage({id: 'accountSetting.inputCode', defaultMessage: '请填写验证码'}) } = props
   const [visible, setVisible] = useState(false)
+  const [remoteImg, setRemoteImg] = useState({
+    x: 0,
+    y: 0,
+    imgId: '',
+    img: '',
+  })
   const handleVisible = () => {
+    if (isDisabled) {
+      message.error(tips);
+      return
+    }
     setVisible(true)
   } 
   const cancel = () => {
@@ -21,6 +45,27 @@ const SafeVerification =  (props) => {
     setVisible(false);
     !!props.handleVerifySuccess && props.handleVerifySuccess()
   }
+
+  useEffect(() => {
+    if (visible) {
+      getMemberCaptcha({
+        width: IMG_WIDTH.toString(),
+        height: IMG_HEIGHT.toString(),
+        size: FLAG_SIZE.toString()
+      }).then(res => {
+        const { backImage, width, height, imgId } = res.data
+        setRemoteImg(() => {
+          return {
+            img: 'data:image/jpeg;base64,' +backImage,
+            imgId,
+            x: Number(decryptedByAES(width)),
+            y: Number(height)
+          }
+        })
+      })
+    }
+  }, [visible])
+
   return (
     <div className={styles.box}>
       <Row>
@@ -29,20 +74,33 @@ const SafeVerification =  (props) => {
             <div className={styles.btn} onClick={handleVisible}>
               {intl.formatMessage({ id: 'accountSetting.clickVerify' })}
             </div>
-            <div className={styles.sliderVerify}>
-              <SliderVerify 
-                visible={visible} 
-                onCancel={cancel} 
-                onSuccess={handleSuccess}
-                imageUrl={imageUrl}
-              />
-            </div>
           </div>
         </Col>
       </Row>
-      
+
+      <Modal
+        title={intl.formatMessage({id: 'components.huadongyanzheng'})}
+        visible={visible}
+        mask
+        centered
+        destroyOnClose
+        footer={null}
+        onCancel={cancel} 
+      >
+        <RiskCheck
+          className={styles.risk}
+          imgUrl={remoteImg.img}
+          imgWidth={IMG_WIDTH}
+          imgHeight={IMG_HEIGHT}
+          xPoint={remoteImg.x}
+          yPoint={remoteImg.y}
+          shadowSize={FLAG_SIZE}
+          differ={10}
+          tipText={intl.formatMessage({ id: 'components.riskCheckTips', defaultMessage: '' })}
+          onSuccess={handleSuccess}
+        />
+      </Modal>
     </div>
-    
   )
 }
 

src/pages/accountSetting/components/VerifyPanel/Panel/EmailVerifyPanel.tsx

@@ -19,6 +19,7 @@ import {
   postMemberSecurityPswUpdate
 } from '@/services/MemberV2Api';
 import { useIntl} from 'umi'
+import useShowRiskCheck from './useShowRiskCheck';
 
 
 const layout = {
@@ -35,6 +36,7 @@ const EmailVerifyPanel = (props) => {
   const [ visible, setVisible ] = useState(false);
   const { email, pageType } = props;
   const [form] = Form.useForm();
+  const { canShowRiskCheck, onValuesChange } = useShowRiskCheck();
 
   const handleFinish = (values) => {
     const { pageType } = props;
@@ -70,8 +72,6 @@ const EmailVerifyPanel = (props) => {
       }
     })
   }
-
-
   // 发送旧的邮箱验证码
   const getCode = useCallback(() => {
     let SERVICE_MAP = {
@@ -92,12 +92,10 @@ const EmailVerifyPanel = (props) => {
       'phone': postMemberSecurityPhoneEmailCheck
     }
     const service = SERVICE_CHECK[props.pageType];
-    service({smsCode: captcha}, { ctlType: 'none' }).then((data) => {
-      console.log(data);
+    service({smsCode: captcha}).then((data) => {
       if(data.code == 1000) {
-        message.success(intl.formatMessage({ id: 'accountSetting.verifyOk' }))
         setVisible(true);
-      }
+      } 
     })
   }
 
@@ -110,6 +108,7 @@ const EmailVerifyPanel = (props) => {
         name="basic"
         onFinish={handleFinish}
         form={form}
+        onValuesChange={onValuesChange}
       >
       {
         !visible
@@ -131,7 +130,10 @@ const EmailVerifyPanel = (props) => {
               </Row>
             </Form.Item>
           <div style={{marginBottom: '130px'}}>
-            <SafeVerification handleVerifySuccess={handleVerifySuccess}  />
+            <SafeVerification 
+              handleVerifySuccess={handleVerifySuccess} 
+              isDisabled={!canShowRiskCheck} 
+            />
           </div>
           </>
         : null

src/pages/accountSetting/components/VerifyPanel/Panel/PaycodeVerifyPanel.tsx

@@ -7,6 +7,7 @@ import { history } from 'umi'
 import { encryptedByAES } from '@/utils/cryptoAes'
 import { postMemberSecurityEmailUpdate, postMemberSecurityPayCheck, postMemberSecurityPhoneUpdate, postMemberSecurityPswUpdate } from '@/services/MemberV2Api';
 import { useIntl} from 'umi'
+import useShowRiskCheck from './useShowRiskCheck';
 
 
 const layout = {
@@ -28,6 +29,7 @@ const PaycodeVerifyPanel: React.FC<IProps> = (props) => {
   const {  pageType } = props;
   const [ visible, setVisible ] = useState(false);
   const [form] = Form.useForm();
+  const { canShowRiskCheck, onValuesChange } = useShowRiskCheck('paycode');
 
   const handleFinish = (values) => {
     const { pageType } = props;
@@ -68,10 +70,8 @@ const PaycodeVerifyPanel: React.FC<IProps> = (props) => {
    const handleVerifySuccess = () => {
     const payPassword = encryptedByAES(form.getFieldValue('paycode'));
     const service = postMemberSecurityPayCheck;
-    service({payPassword: payPassword}, { ctlType: "none" }).then((data) => {
-      console.log(data);
+    service({payPassword: payPassword}).then((data) => {
       if(data.code == 1000) {
-        message.success(intl.formatMessage({ id: 'accountSetting.verifyOk' }))
         setVisible(true);
       }
     })
@@ -85,8 +85,8 @@ const PaycodeVerifyPanel: React.FC<IProps> = (props) => {
         name="basic"
         form={form}
         onFinish={handleFinish}
+        onValuesChange={onValuesChange}
       >
-
       {
         !visible
         ? <>
@@ -104,7 +104,11 @@ const PaycodeVerifyPanel: React.FC<IProps> = (props) => {
               </Row>
             </Form.Item>
             <div style={{marginBottom: '130px'}}>
-              <SafeVerification handleVerifySuccess={handleVerifySuccess}  />
+              <SafeVerification 
+                handleVerifySuccess={handleVerifySuccess} 
+                isDisabled={!canShowRiskCheck}
+                tips={intl.formatMessage({id: 'accountSetting.inputPayPsw', defaultMessage: '请填写支付密码'})}
+              />
             </div>
           </>
         : null

src/pages/accountSetting/components/VerifyPanel/Panel/PhoneVerifyPanel.tsx

@@ -18,6 +18,7 @@ import {
   postMemberSecurityPswSmsCheck,
   postMemberSecurityPswUpdate
 } from '@/services/MemberV2Api';
+import useShowRiskCheck from './useShowRiskCheck';
 
 const layout = {
   labelCol: { span: 3 },
@@ -38,6 +39,7 @@ const PhoneVerifyPanel: React.FC<IProps> = (props) => {
   const intl = useIntl();
   const [ visible, setVisible ] = useState(false);
   const [form] = Form.useForm();
+  const { canShowRiskCheck, onValuesChange } = useShowRiskCheck();
 
   const { phone, pageType } = props;
   const onFinish = (values) => {
@@ -92,13 +94,11 @@ const PhoneVerifyPanel: React.FC<IProps> = (props) => {
       'phone': postMemberSecurityPhoneSmsCheck
     }
     const service = SERVICE_CHECK[props.pageType];
-    service({smsCode: captcha}, { ctlType: 'none' }).then((data) => {
+    service({smsCode: captcha}).then((data) => {
       if(data.code === 1000) {
-        message.success(intl.formatMessage({ id: 'accountSetting.verifyOk' }))
         setVisible(true);
       }
     })
-
   }
 
   return (
@@ -110,6 +110,7 @@ const PhoneVerifyPanel: React.FC<IProps> = (props) => {
         name="basic"
         onFinish={onFinish}
         form={form}
+        onValuesChange={onValuesChange}
       >
         {
           !visible
@@ -131,7 +132,10 @@ const PhoneVerifyPanel: React.FC<IProps> = (props) => {
                 </Row>
               </Form.Item>
               <div style={{marginBottom: '130px'}}>
-                <SafeVerification handleVerifySuccess={handleVerifySuccess}  />
+                <SafeVerification 
+                  handleVerifySuccess={handleVerifySuccess} 
+                  isDisabled={!canShowRiskCheck}
+                />
               </div>
             </>
           : null

src/pages/accountSetting/components/VerifyPanel/Panel/ResetPayCode.tsx

@@ -6,6 +6,7 @@ import TypeForHeader from '../../TypeForHeader';
 import { history, useIntl } from 'umi'
 import { encryptedByAES } from '@/utils/cryptoAes'
 import { postMemberSecurityPaySms, postMemberSecurityPaySmsCheck, postMemberSecurityPayUpdate } from '@/services/MemberV2Api';
+import useShowRiskCheck from './useShowRiskCheck';
 const layout = {
   labelCol: { span: 3 },
   wrapperCol: { span: 13 },
@@ -26,6 +27,8 @@ const ResetPayCode: React.FC<IProps> = (props) => {
   const [ visible, setVisible ] = useState(false);
   const [form] = Form.useForm();
   const { phone, pageType } = props;
+  const { canShowRiskCheck, onValuesChange } = useShowRiskCheck();
+
   const onFinish = (values) => {
     const postData = {
       payPassword: encryptedByAES(values.password)
@@ -51,8 +54,7 @@ const ResetPayCode: React.FC<IProps> = (props) => {
   const handleVerifySuccess = () => {
     const captcha = form.getFieldValue('captcha');
     const service = postMemberSecurityPaySmsCheck
-    service({smsCode: captcha}, {ctlType: 'none'}).then((data) => {
-      console.log(data);
+    service({smsCode: captcha}).then((data) => {
       if(data.code == 1000) {
         setVisible(true);
       }
@@ -129,6 +131,7 @@ const ResetPayCode: React.FC<IProps> = (props) => {
       name="basic"
       onFinish={onFinish}
       form={form}
+      onValuesChange={onValuesChange}
     >
     {
       !visible
@@ -152,7 +155,10 @@ const ResetPayCode: React.FC<IProps> = (props) => {
             </Row>
           </Form.Item>
           <div style={{marginBottom: '130px'}}>
-            <SafeVerification handleVerifySuccess={handleVerifySuccess}  />
+            <SafeVerification 
+              handleVerifySuccess={handleVerifySuccess}  
+              isDisabled={!canShowRiskCheck} 
+            />
           </div>
         </>
       : null

src/pages/accountSetting/components/VerifyPanel/Panel/useShowRiskCheck.ts

+import React, { useState } from 'react';
+
+function useShowRiskCheck(key: string = 'captcha') {
+  const [canShowRiskCheck, setCanShowRiskCheck] = useState(false);
+
+  const onValuesChange = (changedValues) => {
+    if (key in changedValues) {
+      if (changedValues[key]) {
+        setCanShowRiskCheck(true)
+      } else {
+        setCanShowRiskCheck(false)
+      }
+    }
+  }
+
+  return { canShowRiskCheck, onValuesChange };
+}
+
+export default useShowRiskCheck
\ No newline at end of file