fix: 修改短信验证码页面逻辑

messages/br.json

@@ -97,6 +97,12 @@
     "title": "Change the Contrasinha",
     "complete": "Complete"
   },
+  "changePasswordPage": {
+    "title": "Alterar senha",
+    "oldPwd": "Atual senha",
+    "newPwd": "Nova senha",
+    "button": "Mudar"
+  },
   "ResetPhonePage": {
     "enterCorrectphone":"Please enter a valid mobile phone numbe",
     "h2": "Encontre sua conta",

messages/en.json

@@ -98,6 +98,7 @@
     "title": "Change the Contrasinha",
     "complete": "Complete"
   },
+
   "changePasswordPage": {
     "title": "Alterar senha",
     "oldPwd": "Atual senha",

package.json

@@ -14,6 +14,7 @@
     "build:third": "node scripts/swEnv.js .env.third .env.local  && next build",
     "start": "next start",
     "lint": "next lint",
+    "build": "next build",
     "preinstall": "npx only-allow pnpm"
   },
   "dependencies": {

src/api/user.ts

@@ -68,6 +68,15 @@ export const getSendCodeApi = (params: any) => {
     });
 };
 
+/**
+ * @description 验证验证码
+ */
+export const checkCodeApi = (data: { mobile: string; code: string }) => {
+    return server.post({
+        url: "/v1/api/user/check_code",
+        data,
+    });
+};
 export interface UserInfoRep {
     /**
      * 账号

src/app/[locale]/(enter)/resetPhone/page.tsx

@@ -34,15 +34,19 @@ const ResetPhone: FC<Props> = () => {
     };
     const checkUserPhoneRequest = async () => {
         // if (!phoneRegex(userPhone)) return;
-        getSendCodeApi({ user_phone: userPhone })
-            .then(({ code, data }) => {
-                if (data) {
-                    router.push(`/verification?userPhone=${userPhone}`);
-                }
-            })
-            .catch((err) => {
-                setMsgError(tCode(`code.${err.data.code}`));
-            });
+        if (process.env.NODE_ENV === "development") {
+            router.push(`/verification?userPhone=${userPhone}`);
+        } else {
+            getSendCodeApi({ user_phone: userPhone })
+                .then(({ code, data }) => {
+                    if (data) {
+                        router.push(`/verification?userPhone=${userPhone}`);
+                    }
+                })
+                .catch((err) => {
+                    setMsgError(tCode(`code.${err.data.code}`));
+                });
+        }
     };
     return (
         <div className="resetPhone-box">

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

@@ -1,16 +1,15 @@
 "use client";
-import { getFindPwdApi, getSendCodeApi } from "@/api/user";
+import { getFindPwdApi } from "@/api/user";
 import ButtonOwn from "@/components/ButtonOwn";
 import DomainFooter from "@/components/DomainFooter";
 import HeaderBack from "@/components/HeaderBack";
-import { Link, useRouter } from "@/i18n/routing";
-import { useUserInfoStore } from "@/stores/useUserInfoStore";
+import { useLogout } from "@/hooks/useLogout";
 import { Form, Input, Toast } from "antd-mobile";
 import { FormInstance } from "antd-mobile/es/components/form";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
 import { useSearchParams } from "next/navigation";
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, useRef, useState } from "react";
 import { Simulate } from "react-dom/test-utils";
 import "./page.scss";
 import change = Simulate.change;
@@ -18,39 +17,19 @@ import change = Simulate.change;
 interface Props {}
 
 const ResetPhone: FC<Props> = () => {
-    const router: any = useRouter();
-    // confirmPasswordPage
     const t = useTranslations();
+    const { logout } = useLogout();
 
     let searchParams = useSearchParams();
     let user_phone = searchParams.get("userPhone");
     let code = searchParams.get("code");
 
-    let alter = searchParams.get("alter");
-    const sendCodeRequest = () => {
-        if (!user_phone) return;
-        getSendCodeApi({ user_phone }).then((res) => {
-            if (res.code == 200) {
-                return;
-            }
-        });
-    };
-    useEffect(() => {
-        alter && sendCodeRequest();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [alter]);
-
-    const { setUserInfo } = useUserInfoStore();
-
     const findPwdRequest = ({ pwd }: { pwd: string }) => {
         getFindPwdApi({ user_phone, code, pwd })
-            .then((res) => {
+            .then(async (res) => {
                 if (res.code == 200) {
                     Toast.show({ icon: "success", content: t("code.200"), maskClickable: false });
-                    setUserInfo("");
-                    setTimeout(() => {
-                        router.replace("/login");
-                    }, 1000);
+                    await logout();
                 }
             })
             .catch((error) => {
@@ -77,7 +56,7 @@ const ResetPhone: FC<Props> = () => {
     };
     const checkValidator = (rules: any, value: string) => {
         const password = formRef.current?.getFieldValue("pwd");
-        if (value === password) {
+        if (value !== password) {
             return Promise.reject(new Error(t("form.checkPwdReg")));
         }
         return Promise.resolve();
@@ -123,26 +102,6 @@ const ResetPhone: FC<Props> = () => {
                         />
                     </Form.Item>
 
-                    <Form.Item
-                        name="pwd"
-                        label=""
-                        extra={
-                            <span
-                                className={spanClassName}
-                                onClick={() => setVisible(!visible)}
-                            ></span>
-                        }
-                        rules={[
-                            { required: true, message: t("form.passwordReg") },
-                            { min: 6, max: 20, message: t("form.passwordMinReg") },
-                        ]}
-                    >
-                        <Input
-                            placeholder={t("form.newPwd")}
-                            maxLength={20}
-                            type={visible ? "text" : "password"}
-                        />
-                    </Form.Item>
                     <Form.Item
                         name="checkPwd"
                         label=""
@@ -157,11 +116,6 @@ const ResetPhone: FC<Props> = () => {
                         <Input placeholder={t("form.checkPwd")} maxLength={20} type={"password"} />
                     </Form.Item>
                 </Form>
-                <div className={"text-right"}>
-                    <Link href={"/resetPhone"} className={"text-[#fff]"}>
-                        {t("LoginPage.forgetPwd")}
-                    </Link>
-                </div>
             </div>
 
             <DomainFooter />

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

@@ -1,25 +1,30 @@
 "use client";
-import { getSendCodeApi } from "@/api/user";
+import { checkCodeApi, getSendCodeApi } from "@/api/user";
 import ButtonOwn from "@/components/ButtonOwn";
 import DomainFooter from "@/components/DomainFooter";
 import HeaderBack from "@/components/HeaderBack";
 import { useRouter } from "@/i18n/routing";
 import { useCountDown } from "ahooks";
+import { Toast } from "antd-mobile";
 import { useTranslations } from "next-intl";
 import { useSearchParams } from "next/navigation";
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import "./page.scss";
 
 interface Props {}
 
 const ResetPhone: FC<Props> = () => {
     const t = useTranslations("VerificationPage");
+    const tCode = useTranslations();
     const router = useRouter();
+    const staticTime = Date.now() + 3 * 1000;
+    //  是否发送
+    const [isSend, setIsSend] = useState(true);
     let [time, setTime] = useState<number>();
     const [countdown] = useCountDown({
-        time,
+        targetDate: time,
         onEnd: () => {
-            alert("End of the time");
+            setIsSend(false);
         },
     });
     let [code, setCode] = useState("");
@@ -30,42 +35,41 @@ const ResetPhone: FC<Props> = () => {
     let searchParams = useSearchParams();
     let user_phone = searchParams.get("userPhone");
     const sendCodeRequest = () => {
-        if (!user_phone) return;
-        getSendCodeApi({ user_phone }).then((res) => {
-            if (res.code == 200) {
-                setTime(60);
-                setIsNote(true);
-            }
-        });
+        if (!user_phone && isSend) return;
+        getSendCodeApi({ user_phone })
+            .then((res) => {
+                if (res.code == 200) {
+                    setTime(staticTime);
+                    setIsSend(true);
+                }
+            })
+            .catch((error) => {
+                Toast.show(tCode(`code.${error.data.code}`));
+                setIsSend(false);
+            });
     };
     useEffect(() => {
         sendCodeRequest();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    let [isNote, setIsNote] = useState(true);
-
-    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;
+        if (isSend) return;
         sendCodeRequest();
     };
 
     const goPage = () => {
         if (!code || code.length < 6) return;
-        router.push(`/confirmPassword`);
+        if (process.env.NODE_ENV === "development") {
+            router.replace(`/confirmPassword?code=${123456}&userPhone=${user_phone}`);
+        } else {
+            checkCodeApi({ code, mobile: user_phone! })
+                .then((res) => {
+                    router.replace(`/confirmPassword?code=${code}&userPhone=${user_phone}`);
+                })
+                .catch((error) => {
+                    Toast.show(tCode(`code.${error.data.code}`));
+                });
+        }
     };
 
     return (
@@ -87,7 +91,7 @@ const ResetPhone: FC<Props> = () => {
                         maxLength={6}
                     />
                     <span className="after" onClick={sendCodeFun}>
-                        {isNote ? `${countdown}s` : t("Envie")}
+                        {isSend ? `${Math.round(countdown / 1000)}s` : t("Envie")}
                     </span>
                 </div>
                 <div className="btnContent">