修改密码

src/app/[locale]/verification/page.tsx

@@ -1,12 +1,12 @@
 "use client";
-import { FC, PropsWithChildren, useState } from "react";
+import { FC, PropsWithChildren, useEffect, useRef, useState } from "react";
 import HeaderBack from "@/components/HeaderBack";
 import ButtonOwn from "@/components/ButtonOwn";
 import DomainFooter from "@/components/DomainFooter";
 import './page.scss'
 import React from "react";
 import {getSendCodeApi} from "@/api/user";
-import { useRouter } from "@/i18n";
+import { useRouter, useSearchParams } from "next/navigation";
 
 interface Props {}
 
@@ -16,17 +16,52 @@ const ResetPhone: FC<PropsWithChildren<Props>> = () => {
     const changeCode = (e: { target: { value: any; }; }) => {
         setCode(e.target.value)
     }
+
+    let searchParams = useSearchParams();
     let [msgError, setMsgError] = useState('')
-    const checkUserPhoneRequest = async () => {
-        getSendCodeApi({user_phone: userPhone}).then((res) => {
+    const sendCodeRequest = () => {
+        let user_phone = searchParams.get('userPhone')
+        if(!user_phone) return
+        getSendCodeApi({user_phone}).then((res) => {
             if(res.code == 200) {
-                alert('验证码发送成功')
-                router.push('/verification')
+                setTime(60);
+    		    setIsNote(true);
                 return
             }
-            setMsgError(res.MSG)
+            setMsgError(res.msg)
         })
     }
+    useEffect(() => {
+        sendCodeRequest()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+
+    let [isNote, setIsNote] = useState(true);
+    let [time, setTime] = useState(60);
+    let timeRef: any = useRef();
+    useEffect(() => {
+        if (time && time != 0) {
+            timeRef.current = setTimeout(() => {
+                setTime((time) => time - 1);
+            }, 1000);
+        } else {
+            setIsNote(false);
+        }
+        return () => {
+            timeRef.current && clearInterval(timeRef.current);
+        };
+    }, [time]);
+    const sendCodeFun = () => {
+        if(isNote) return
+        sendCodeRequest()
+    }
+
+    const goPage = (path =  '/') => {
+        if(!code || code.length < 6) return
+        router.push(path)
+    }
+
     return (
         <div className="verification-box">
             <HeaderBack />
@@ -37,11 +72,11 @@ const ResetPhone: FC<PropsWithChildren<Props>> = () => {
                 </div>
                 <div className="phoneInput">
                     <input type="tel" value={code} onChange={changeCode} placeholder="Reenviar código" maxLength={6} />
-                    <span className="after">Envie de novo</span>
+                    <span className="after" onClick={sendCodeFun}> { isNote ? `${time}s`: 'Envie de novo'} </span>
                 </div>
                 { msgError && <div className="tips"> {msgError} </div> }
                 <div className="btnContent">
-                    <ButtonOwn active={code.length==6} callbackFun={checkUserPhoneRequest}>Completar</ButtonOwn>
+                    <ButtonOwn active={code.length==6} callbackFun={goPage}>Completar</ButtonOwn>
                 </div>
             </div>
             <DomainFooter />