diff --git a/nkebao/src/pages/login/api.ts b/nkebao/src/pages/login/api.ts index 1aba513e..191b14f7 100644 --- a/nkebao/src/pages/login/api.ts +++ b/nkebao/src/pages/login/api.ts @@ -39,7 +39,7 @@ export function loginWithCode(params:any) { // 发送验证码 export function sendVerificationCode(params:any) { - return request('/v1/auth/send-code',params, 'POST'); + return request('/v1/auth/code',params, 'POST'); } // 退出登录 diff --git a/nkebao/src/pages/login/login.module.scss b/nkebao/src/pages/login/login.module.scss index 5c2c55d2..a13baa52 100644 --- a/nkebao/src/pages/login/login.module.scss +++ b/nkebao/src/pages/login/login.module.scss @@ -4,7 +4,7 @@ display: flex; align-items: center; justify-content: center; - padding: 20px; + padding: 15px; position: relative; overflow: hidden; } @@ -66,7 +66,7 @@ background: #ffffff; backdrop-filter: blur(20px); border-radius: 24px; - padding: 32px 24px; + padding: 24px 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); position: relative; z-index: 1; @@ -109,13 +109,6 @@ margin: 0; } -.welcome-text { - font-size: 18px; - font-weight: 600; - color: #333; - margin: 0 0 4px 0; -} - .subtitle { font-size: 13px; color: #666; @@ -262,17 +255,13 @@ .agreement-section { margin-bottom: 24px; - padding: 10px; - background: #f8f9fa; - border-radius: 10px; - border: 1px solid #e5e5e5; } .agreement-checkbox { display: flex; align-items: center; gap: 6px; - font-size: 11px; + font-size: 12px; color: #666; line-height: 1.3; white-space: nowrap; @@ -292,7 +281,7 @@ white-space: nowrap; overflow: visible; text-overflow: clip; - font-size: 11px; + font-size: 13px; } .agreement-link { @@ -434,10 +423,6 @@ font-size: 22px; } - .welcome-text { - font-size: 16px; - } - .third-party-login { gap: 16px; } diff --git a/nkebao/src/pages/login/login.tsx b/nkebao/src/pages/login/login.tsx index f38d7dc7..f53ccc6d 100644 --- a/nkebao/src/pages/login/login.tsx +++ b/nkebao/src/pages/login/login.tsx @@ -12,7 +12,7 @@ import style from "./login.module.scss"; const Login: React.FC = () => { const [form] = Form.useForm(); - const [activeTab, setActiveTab] = useState("password"); + const [activeTab, setActiveTab] = useState(1); // 1: 密码登录, 2: 验证码登录 const [loading, setLoading] = useState(false); const [countdown, setCountdown] = useState(0); const [showPassword, setShowPassword] = useState(false); @@ -40,38 +40,33 @@ const Login: React.FC = () => { } }; - // 手机号格式验证 - const validatePhone = (phone: string) => { - const phoneRegex = /^1[3-9]\d{9}$/; - return phoneRegex.test(phone); - }; - // 发送验证码 const handleSendVerificationCode = async () => { - const phone = form.getFieldValue("phone"); + const account = form.getFieldValue("account"); - if (!phone) { + if (!account) { Toast.show({ content: "请输入手机号", position: "top" }); return; } - if (!validatePhone(phone)) { + // 手机号格式验证 + const phoneRegex = /^1[3-9]\d{9}$/; + if (!phoneRegex.test(account)) { Toast.show({ content: "请输入正确的11位手机号", position: "top" }); return; } try { setLoading(true); - const response = await sendVerificationCode(phone); + await sendVerificationCode({ + mobile: account, + type: "login", + }); - if (response.code === 200) { - Toast.show({ content: "验证码已发送", position: "top" }); - setCountdown(60); - } else { - Toast.show({ content: response.msg || "发送失败", position: "top" }); - } + Toast.show({ content: "验证码已发送", position: "top" }); + setCountdown(60); } catch (error) { - Toast.show({ content: "发送失败,请稍后重试", position: "top" }); + // 错误已在request中处理,这里不需要额外处理 } finally { setLoading(false); } @@ -86,46 +81,39 @@ const Login: React.FC = () => { setLoading(true); try { + // 添加typeId参数 + const loginParams = { + ...values, + typeId: activeTab as number, + }; + let response; - - if (activeTab === "password") { - response = await loginWithPassword(values.phone, values.password); + if (activeTab === 1) { + response = await loginWithPassword(loginParams); } else { - response = await loginWithCode(values.phone, values.verificationCode); + response = await loginWithCode(loginParams); } + console.log(response, "response"); - if (response.code === 200 && response.data) { - // 保存登录信息到localStorage - localStorage.setItem("token", response.data.token); - localStorage.setItem("token_expired", response.data.token_expired); - localStorage.setItem("s2_accountId", response.data.member.s2_accountId); - localStorage.setItem("userInfo", JSON.stringify(response.data.member)); + // 更新状态管理(token会自动存储到localStorage,用户信息存储在状态管理中) + login(response.token, response.member); - // 更新状态管理 - login(response.data.token, response.data.member); + Toast.show({ content: "登录成功", position: "top" }); - Toast.show({ content: "登录成功", position: "top" }); - - // 跳转到首页或重定向URL - const returnUrl = searchParams.get("returnUrl"); - if (returnUrl) { - const decodedUrl = decodeURIComponent(returnUrl); - if (isLoginPage(decodedUrl)) { - navigate("/"); - } else { - window.location.href = decodedUrl; - } - } else { + // 跳转到首页或重定向URL + const returnUrl = searchParams.get("returnUrl"); + if (returnUrl) { + const decodedUrl = decodeURIComponent(returnUrl); + if (isLoginPage(decodedUrl)) { navigate("/"); + } else { + window.location.href = decodedUrl; } } else { - Toast.show({ content: response.msg || "登录失败", position: "top" }); + navigate("/"); } } catch (error: any) { - Toast.show({ - content: error?.message || "登录失败,请稍后重试", - position: "top", - }); + // 错误已在request中处理,这里不需要额外处理 } finally { setLoading(false); } @@ -158,7 +146,6 @@ const Login: React.FC = () => {

存客宝

-

欢迎回来

登录您的账户继续使用

@@ -168,23 +155,23 @@ const Login: React.FC = () => {
setActiveTab("password")} + onClick={() => setActiveTab(1)} > 密码登录
setActiveTab("verification")} + onClick={() => setActiveTab(2)} > 验证码登录
@@ -197,7 +184,7 @@ const Login: React.FC = () => { > {/* 手机号输入 */} { {/* 密码输入 */} - {activeTab === "password" && ( + {activeTab === 1 && ( { )} {/* 验证码输入 */} - {activeTab === "verification" && ( + {activeTab === 2 && ( void; + setToken: (token: string) => void; clearUser: () => void; - login: (token: string, userInfo: any) => void; + login: (token: string, userInfo: User) => void; logout: () => void; } export const useUserStore = createPersistStore( (set) => ({ user: null, + token: null, isLoggedIn: false, setUser: (user) => set({ user, isLoggedIn: true }), - clearUser: () => set({ user: null, isLoggedIn: false }), + setToken: (token) => set({ token }), + clearUser: () => set({ user: null, token: null, isLoggedIn: false }), login: (token, userInfo) => { + // 只将token存储到localStorage + localStorage.setItem('token', token); + + // 用户信息存储在状态管理中 const user: User = { id: userInfo.id, - name: userInfo.name || userInfo.nickname || userInfo.username, + account: userInfo.account, + username: userInfo.username, phone: userInfo.phone, - role: userInfo.role || 'user', - token, - token_expired: userInfo.token_expired, - s2_accountId: userInfo.s2_accountId, avatar: userInfo.avatar, - email: userInfo.email, + isAdmin: userInfo.isAdmin, + companyId: userInfo.companyId, + typeId: userInfo.typeId, + status: userInfo.status, + s2_accountId: userInfo.s2_accountId, + createTime: userInfo.createTime, + updateTime: userInfo.updateTime, + lastLoginIp: userInfo.lastLoginIp, + lastLoginTime: userInfo.lastLoginTime, }; - set({ user, isLoggedIn: true }); + set({ user, token, isLoggedIn: true }); }, logout: () => { + // 清除localStorage中的token localStorage.removeItem('token'); - localStorage.removeItem('token_expired'); - localStorage.removeItem('s2_accountId'); - localStorage.removeItem('userInfo'); - set({ user: null, isLoggedIn: false }); + set({ user: null, token: null, isLoggedIn: false }); }, }), 'user-store', - (state) => ({ user: state.user, isLoggedIn: state.isLoggedIn }) + (state) => ({ + user: state.user, + token: state.token, + isLoggedIn: state.isLoggedIn + }) ); \ No newline at end of file