修改密码逻辑

src/api/user.ts

@@ -17,9 +17,10 @@ export const getCheckUserPhoneExistApi = (params: any) => {
 };
 
 // 找回密码
-export const getFindPwdApi = () => {
+export const getFindPwdApi = (data: any) => {
     return server.post<any>({
-        url: "/v1/api/user/find_pwd"
+        url: "/v1/api/user/find_pwd",
+        data
     });
 };
 

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

@@ -0,0 +1,83 @@
+.confirmPassword-box {
+    width: 100%;
+    min-height: 100vh;
+    background-color: rgb(31, 31, 31);
+    display: flex;
+    flex-direction: column;
+  
+  .main {
+    background-color: #1f1f1f;
+    padding: .72rem .18rem 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    .title {
+      font-size: .18rem;
+      h2 {
+        color: #fcde26;
+        line-height: .22rem;
+      }
+      div {
+        color: #fff;
+        font-size: .12rem;
+        margin: .06rem 0;
+        line-height: .2rem;
+      }
+    }
+    .phoneInput {
+      width: 100%;
+      height: auto;
+      background-color: #494949;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      margin-top: 0.2rem;
+      position: relative;
+
+      .after {
+          color: #fcde26;
+          font-size: .14rem;
+          border: .01rem solid #fcde26;
+          position: absolute;
+          height: .26rem;
+          line-height: .26rem;
+          padding: 0 .08rem;
+          text-align: center;
+          right: .1rem;
+          top: .11rem;
+          border-radius: .13rem;
+      }
+
+      input {
+        padding-left: .14rem;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+      }
+      
+    }
+    
+    input {
+      flex: 1;
+      background-color: #494949;
+      height: .48rem;
+      color: #868686;
+      font-size: .14rem;
+      outline: none;
+      &::placeholder {
+        color: #868686;
+      }
+    }
+
+    .tips {
+      width: 100%;
+      color: #e53535;
+      font-size: 0.12rem;
+      margin-top: .02rem;
+    }
+
+    .btnContent {
+      margin: .29rem 0 .19rem;
+    }
+  }
+}

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

@@ -0,0 +1,88 @@
+"use client";
+import { FC, PropsWithChildren, useEffect, useMemo, 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 {getFindPwdApi} from "@/api/user";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "@/i18n";
+
+interface Props {}
+
+const ResetPhone: FC<PropsWithChildren<Props>> = () => {
+    const router:any = useRouter()
+
+    let searchParams = useSearchParams();
+    let user_phone = searchParams.get('userPhone')
+    let code = searchParams.get('code')
+
+    let [fromParam, setFromParam] = useState({
+        pwd: '',
+        againPwd: ''
+    })
+
+    const setInputVal = (e: { target: { name: any; value: any; }; }) => {
+        const {name, value} = e.target;
+        setFromParam({
+            ...fromParam,
+            [name]: value
+        })
+    }
+
+    const verifyPwd = (e: any) => {
+        let pwd = e.target.value || '';
+        pwd.replaceAll(/[^a-zA-Z0-9_-]/g, '')
+        setFromParam({ ...fromParam, pwd })
+    }
+
+    const activeCls = useMemo(() => {
+        let { pwd, againPwd } = fromParam
+        if (pwd && againPwd && pwd.length==againPwd.length) {
+            return true
+        }
+        return false
+    }, [fromParam]);
+
+    let [msgError, setMsgError] = useState('')
+    const findPwdRequest = () => {
+        let { pwd, againPwd } = fromParam
+        if (pwd && againPwd && pwd!=againPwd) {
+            setMsgError('两次输入的密码不相同')
+            return true
+        }
+        getFindPwdApi({user_phone, code, pwd}).then((res) => {
+            setMsgError(res.msg || '')
+            if(res.code == 200) {
+                alert('修改成功')
+                router.replace('/login')
+            }
+        })
+    }
+
+    return (
+        <div className="confirmPassword-box">
+            <HeaderBack />
+            <div className="main">
+                <div className="title">
+                    <h2>Ativa a sua conta por entrar a Senha de Verificação!</h2>
+                    <div>A senha de verificação foi enviado para o teu telemóvel 16982013895</div>
+                </div>
+                <div className="phoneInput">
+                    <input name="pwd" type="password" value={fromParam.pwd} onChange={setInputVal} onInput={verifyPwd} placeholder="Senha" maxLength={12}/>
+                </div>
+                <div className="phoneInput">
+                    <input name="againPwd" type="password" value={fromParam.againPwd} onChange={setInputVal} placeholder="Senha" maxLength={12}/>
+                </div>
+                { msgError && <div className="tips"> {msgError} </div> }
+                <div className="btnContent">
+                    <ButtonOwn active={activeCls} callbackFun={findPwdRequest}>Completar</ButtonOwn>
+                </div>
+            </div>
+            <DomainFooter />
+        </div>
+    );
+};
+
+export default ResetPhone;

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

@@ -20,9 +20,8 @@ const Login: FC<PropsWithChildren<Props>> = () => {
             alert('登录成功')
             window.localStorage.setItem('userInfo',JSON.stringify(res.data))
             router.replace('/')
-        } else {
-            setMsgError(res.msg)
         }
+        setMsgError(res.msg || '')
     }
 
     return (

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

@@ -23,16 +23,16 @@ const ResetPhone: FC<PropsWithChildren<Props>> = () => {
     })
     const blurVerifyPhone = (e: { target: { value: any; }; }) => {
         const {value} = e.target;
-        if (value && !phoneRegex(value)) {
+        if (!value) {
             setVerifyInfo({
-                msgError: '请输入正确的手机号',
+                msgError: '',
                 check: false
             })
             return
         }
-        if (!value) {
+        if (value && !phoneRegex(value)) {
             setVerifyInfo({
-                msgError: '',
+                msgError: '请输入正确的手机号',
                 check: false
             })
             return
@@ -44,8 +44,8 @@ const ResetPhone: FC<PropsWithChildren<Props>> = () => {
     }
     const checkUserPhoneRequest = async () => {
         if(!phoneRegex(userPhone)) return
-        let { code, msg } = await getCheckUserPhoneExistApi({user_phone: userPhone})
-        if(code == 200) {
+        let { code, msg, data } = await getCheckUserPhoneExistApi({user_phone: userPhone})
+        if(code == 200 && data) {
             router.push(`/verification?userPhone=${userPhone}`)
             return
         }

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

@@ -6,7 +6,8 @@ import DomainFooter from "@/components/DomainFooter";
 import './page.scss'
 import React from "react";
 import {getSendCodeApi} from "@/api/user";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "@/i18n";
 
 interface Props {}
 
@@ -18,9 +19,9 @@ const ResetPhone: FC<PropsWithChildren<Props>> = () => {
     }
 
     let searchParams = useSearchParams();
+    let user_phone = searchParams.get('userPhone')
     let [msgError, setMsgError] = useState('')
     const sendCodeRequest = () => {
-        let user_phone = searchParams.get('userPhone')
         if(!user_phone) return
         getSendCodeApi({user_phone}).then((res) => {
             if(res.code == 200) {
@@ -57,9 +58,9 @@ const ResetPhone: FC<PropsWithChildren<Props>> = () => {
         sendCodeRequest()
     }
 
-    const goPage = (path =  '/') => {
+    const goPage = () => {
         if(!code || code.length < 6) return
-        router.push(path)
+        router.push(`/confirmPassword?userPhone=${user_phone}&code=${code}`)
     }
 
     return (

src/utils/index.ts

@@ -25,7 +25,7 @@ export const pwdRegex = (pwd = '') => {
 	return regex.test(pwd)
 }
 
-// 密码正则 6到12位（字母，数字，下划线，减号）
+// 手机号正则
 export const phoneRegex = (pwd = '') => {
 	let regex =  /^1[3-9]\d{9}$/;
 	return regex.test(pwd)

src/utils/server/axios.ts

@@ -40,6 +40,13 @@ export default class Request {
             (config: InternalAxiosRequestConfig) => {
                 if (requestInterceptor) {
                     config = requestInterceptor(config);
+
+                    // header请求头添加token
+                    let userInfo = window.localStorage.getItem("userInfo") || '';
+                    if (userInfo) {
+                        let userInfoObj = JSON.parse(userInfo)
+                        config.headers['token'] = userInfoObj?.token;
+                    }
                 }
                 return config;
             },