修改密码交互

src/api/user.ts

@@ -1,30 +1,36 @@
 import { server } from "@/utils/server";
 
+
+// 前台用户绑定手机号
 export const getBindPhoneApi = () => {
     return server.post<any>({
         url: "/v1/api/user/bind_phone",
     });
 };
 
+// 前台用户手机号是否存在
 export const getCheckUserPhoneExistApi = (params: any) => {
-    return server.post<any>({
+    return server.get<any>({
         url: "/v1/api/user/check_user_phone_exist",
         params
     });
 };
 
+// 找回密码
 export const getFindPwdApi = () => {
     return server.post<any>({
         url: "/v1/api/user/find_pwd"
     });
 };
 
+// 前台用户谷歌登录
 export const getGoogleLoginApi = () => {
     return server.post<any>({
         url: "/v1/api/user/google_login"
     });
 };
 
+// 前台用户登录
 export const getLoginApi = (data: any) => {
     return server.post<any>({
         url: "/v1/api/user/login",
@@ -32,12 +38,14 @@ export const getLoginApi = (data: any) => {
     });
 };
 
+// 前台用户登出
 export const getLogoutApi = () => {
     return server.post<any>({
         url: "/v1/api/user/logout"
     });
 };
 
+// 前台用户注册
 export const getRegisterApi = (data: any) => {
     return server.post<any>({
         url: "/v1/api/user/register",
@@ -45,12 +53,15 @@ export const getRegisterApi = (data: any) => {
     });
 };
 
-export const getSendCodeApi = () => {
+// 前台用户注册发送验证码
+export const getSendCodeApi = (params: any) => {
     return server.get<any>({
-        url: "/v1/api/user/send_code"
+        url: "/v1/api/user/send_code",
+        params
     });
 };
 
+// 前台用户获取信息
 export const getUserInfoApi = () => {
     return server.post<any>({
         url: "/v1/api/user/user_info"

src/app/[locale]/login/component/FromCom/index.tsx

@@ -38,10 +38,11 @@ const FromCom: FC<PropsWithChildren<FromComProps>> = ({type = 'login', msgError
     }, [fromParam]);
 
 
-    const setInputVal = (e: ChangeEvent<HTMLInputElement>, propsName: string) => {
+    const setInputVal = (e: ChangeEvent<HTMLInputElement>) => {
+        const {name, value} = e.target;
         setFromParam({
             ...fromParam,
-            [propsName]: e.target.value
+            [name]: value
         })
     }
 
@@ -49,7 +50,6 @@ const FromCom: FC<PropsWithChildren<FromComProps>> = ({type = 'login', msgError
         let pwd = e.target.value || '';
         pwd.replaceAll(/[^a-zA-Z0-9_-]/g, '')
         setFromParam({ ...fromParam, pwd })
-        console.log('fromParam', fromParam.pwd)
     }
 
     const submitRequest = () => {
@@ -60,10 +60,10 @@ const FromCom: FC<PropsWithChildren<FromComProps>> = ({type = 'login', msgError
         <div className="FromCom">
             <div className="phoneInput">
                 <span className="after">+55</span>
-                <input type="tel" value={fromParam.userPhone} onChange={(e) => setInputVal(e, 'userPhone') } placeholder="Número de Celular" maxLength={11} />
+                <input name="userPhone" type="tel" value={fromParam.userPhone} onChange={setInputVal} placeholder="Número de Celular" maxLength={11} />
             </div>
             <div className="passwordInput">
-                <input type={pwdVisible?'text':'password'} value={fromParam.pwd} onChange={(e) => setInputVal(e, 'pwd') } onInput={verifyPwd} placeholder="Senha" maxLength={12}/>
+                <input name="pwd" type={pwdVisible?'text':'password'} value={fromParam.pwd} onChange={setInputVal} onInput={verifyPwd} placeholder="Senha" maxLength={12}/>
                 <span className={spanClassName} onClick={() => setPwdVisible(!pwdVisible)}></span>
             </div>
             <div className="btnContent">

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

@@ -4,7 +4,7 @@
     background-color: rgb(31, 31, 31);
     display: flex;
     flex-direction: column;
-  }
+  
   .main {
     background-color: #1f1f1f;
     padding: .72rem .18rem 0;
@@ -71,4 +71,4 @@
       margin: .29rem 0 .19rem;
     }
   }
-  
+}

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

@@ -1,23 +1,58 @@
 "use client";
-import { FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren, 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 {getCheckUserPhoneExistApi} from "@/api/user";
+import { phoneRegex } from "@/utils";
+import {getCheckUserPhoneExistApi, getSendCodeApi} from "@/api/user";
+import { useRouter } from "@/i18n";
 
 interface Props {}
 
 const ResetPhone: FC<PropsWithChildren<Props>> = () => {
+    const router:any = useRouter()
+    let [userPhone, setUserPhone] = useState('')
+    const changeUserPhone = (e: { target: { value: any; }; }) => {
+        setUserPhone(e.target.value)
+    }
+    let [verifyInfo, setVerifyInfo] = useState({
+        msgError: '',
+        check: false
+    })
+    const blurVerifyPhone = (e: { target: { value: any; }; }) => {
+        const {value} = e.target;
+        if (value && !phoneRegex(value)) {
+            setVerifyInfo({
+                msgError: '请输入正确的手机号',
+                check: false
+            })
+            return
+        }
+        if (!value) {
+            setVerifyInfo({
+                msgError: '',
+                check: false
+            })
+            return
+        }
+        setVerifyInfo({
+            msgError: '',
+            check: true
+        })
+    }
     const checkUserPhoneRequest = async () => {
-        let { code, msg } = await getCheckUserPhoneExistApi({user_phone: '18215519037'})
+        if(!phoneRegex(userPhone)) return
+        let { code, msg } = await getCheckUserPhoneExistApi({user_phone: userPhone})
         if(code == 200) {
-            alert('验证成功')
-            // router.replace('/login')
-        } else {
-            // setMsgError(msg)
+            router.push(`/verification?userPhone=${userPhone}`)
+            return
         }
+        setVerifyInfo({
+            ...verifyInfo,
+            msgError: msg,
+        })
     }
     return (
         <div className="resetPhone-box">
@@ -29,11 +64,11 @@ const ResetPhone: FC<PropsWithChildren<Props>> = () => {
                 </div>
                 <div className="phoneInput">
                     <span className="after">+55</span>
-                    <input type="tel" placeholder="Número de Celular" />
+                    <input type="tel" value={userPhone} onChange={changeUserPhone} onBlur={blurVerifyPhone} placeholder="Número de Celular" maxLength={11} />
                 </div>
-                <div className="tips"> O número de telefone não existe. </div>
+                { verifyInfo.msgError && <div className="tips"> {verifyInfo.msgError} </div> }
                 <div className="btnContent">
-                    <ButtonOwn active={true} callbackFun={checkUserPhoneRequest}>Continuar</ButtonOwn>
+                    <ButtonOwn active={verifyInfo.check} callbackFun={checkUserPhoneRequest}>Continuar</ButtonOwn>
                 </div>
             </div>
             <DomainFooter />

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

@@ -0,0 +1,71 @@
+.verification-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;
+      .after {
+        margin-left: .1rem;
+        font-size: .14rem;
+        color: #868686;
+      }
+      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]/verification/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+import { FC, PropsWithChildren, 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 { phoneRegex } from "@/utils";
+import {getCheckUserPhoneExistApi, getSendCodeApi} from "@/api/user";
+
+interface Props {}
+
+const ResetPhone: FC<PropsWithChildren<Props>> = () => {
+
+    let [userPhone, setUserPhone] = useState('')
+    const changeUserPhone = (e: { target: { value: any; }; }) => {
+        setUserPhone(e.target.value)
+    }
+    let [verifyInfo, setVerifyInfo] = useState({
+        msgError: '',
+        check: false
+    })
+
+    const checkUserPhoneRequest = async () => {
+        let { code, msg } = await getCheckUserPhoneExistApi({user_phone: userPhone})
+        if(code == 200) {
+            getSendCodeApi({user_phone: userPhone}).then((res) => {
+                if(res.code == 200) {
+                    alert('验证码发送成功')
+                     router.push('/verification')
+                }
+            })
+            router.push('/verification')
+            return
+        }
+        setVerifyInfo({
+            ...verifyInfo,
+            msgError: msg,
+        })
+    }
+    return (
+        <div className="verification-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 type="tel" value={userPhone} onChange={changeUserPhone} placeholder="Reenviar código" maxLength={6} />
+                    <span className="after">+55</span>
+                </div>
+                { verifyInfo.msgError && <div className="tips"> {verifyInfo.msgError} </div> }
+                <div className="btnContent">
+                    <ButtonOwn active={verifyInfo.check} callbackFun={checkUserPhoneRequest}>Completar</ButtonOwn>
+                </div>
+            </div>
+            <DomainFooter />
+        </div>
+    );
+};
+
+export default ResetPhone;

src/utils/index.ts

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

src/utils/server/index.ts

@@ -1,8 +1,8 @@
 import Request from "./axios";
 const server = new Request({
     timeout: 10 * 1000,
-    baseURL: "http://127.0.0.1:4523/m1/4790544-4444647-default",
-    // baseURL: "http://192.168.0.66:6060",
+    // baseURL: "http://127.0.0.1:4523/m1/4790544-4444647-default",
+    baseURL: "http://192.168.0.66:6060",
     transform: {
         // instance  interceptor
         requestInterceptor: (config) => {