From 93e3f10e847da2db4490cee84b0efedd3ff7be0a Mon Sep 17 00:00:00 2001 From: mackt <1033530438@qq.com> Date: Sun, 7 Apr 2024 00:08:42 +0800 Subject: [PATCH] update(login): Add request error prompt. --- src/app/mylist/page.tsx | 1 - src/components/Header/UserCard.tsx | 14 +++---- src/components/Login/LoginForm.tsx | 38 +++++++++++++------ .../{Header => Login}/LoginModal.tsx | 14 ++++--- src/components/common/Button.tsx | 3 +- src/components/index.ts | 2 +- src/services/client/user.ts | 2 +- src/store/user.ts | 20 +++++----- src/utils/logout.ts | 2 +- 9 files changed, 56 insertions(+), 40 deletions(-) rename src/components/{Header => Login}/LoginModal.tsx (76%) diff --git a/src/app/mylist/page.tsx b/src/app/mylist/page.tsx index 0358497..b5d38c6 100644 --- a/src/app/mylist/page.tsx +++ b/src/app/mylist/page.tsx @@ -36,7 +36,6 @@ export default function Journal() { // journal: apiGetSongCollect, // }; const result = await apiGetSongCollect({ userId: userInfo?.id, pageNum, pageSize }); - console.log(result.data); if (result.code === 200) setList(result.data.rows); }; diff --git a/src/components/Header/UserCard.tsx b/src/components/Header/UserCard.tsx index d4679a0..61327e4 100644 --- a/src/components/Header/UserCard.tsx +++ b/src/components/Header/UserCard.tsx @@ -5,6 +5,9 @@ import { useRouter } from 'next/navigation'; import { useShallow } from 'zustand/react/shallow'; import { Avatar } from '@/components'; + +import logout from '@/utils/logout'; + import useUserStore from '@/store/user'; interface Props { @@ -19,10 +22,9 @@ interface TDataList { export default function UserCard({ onClose, className }: Props) { const router = useRouter(); - const { userInfo, userLogout } = useUserStore( + const { userInfo } = useUserStore( useShallow((state) => ({ userInfo: state.userInfo, - userLogout: state.userLogout, })), ); @@ -38,12 +40,6 @@ export default function UserCard({ onClose, className }: Props) { onClose(); }; - const handleLogout = async () => { - userLogout(); - router.push('/'); - onClose(); - }; - useEffect(() => { setUserDataList([ { label: '关注', value: userInfo.followCount }, @@ -87,7 +83,7 @@ export default function UserCard({ onClose, className }: Props) {
  • 退出登录
    • diff --git a/src/components/Login/LoginForm.tsx b/src/components/Login/LoginForm.tsx index e59eaa0..c6ecad2 100644 --- a/src/components/Login/LoginForm.tsx +++ b/src/components/Login/LoginForm.tsx @@ -5,7 +5,7 @@ import React, { useState, useMemo, useEffect } from 'react'; import { debounce } from 'lodash'; import { useShallow } from 'zustand/react/shallow'; -import { Input, Button } from '@/components'; +import { Button } from '@/components'; import { apiSendSMS } from '@/services'; import useUserStore from '@/store/user'; @@ -19,6 +19,7 @@ export default function LoginForm() { const [phone, setPhone] = useState('17861518060'); // 手机号 const [authCode, seAuthCode] = useState('111111'); // 验证码 + const [errorText, setErrorText] = useState(''); // 验证码 const [time, setTime] = useState(0); // 倒计时 const [btnLoading, setBtnLoading] = useState(false); const deviceId = '1'; // 设备id 暂时写死 @@ -29,23 +30,33 @@ export default function LoginForm() { setBtnLoading(true); const result = await apiSendSMS({ mobile: phone, deviceId }); - if (result.code === 200) { - setTime(59); - setTimeout(() => { - setBtnLoading(false); - }, 60000); + if (result.code !== 200) { + setErrorText(result.message); + setBtnLoading(false); + return; } - setBtnLoading(false); + setTime(59); + setTimeout(() => { + setBtnLoading(false); + }, 60000); }; // 登录 const handleLogin = async () => { + setBtnLoading(true); const result = await userLogin({ mobile: phone, mobileCheckCode: authCode, deviceId: '1' }); - if (result) setShowLogin(false); + if (result.code === 200) { + setShowLogin(false); + window.location.reload(); + } else { + setErrorText(result.message); + setBtnLoading(false); + } }; // 输入框，只允许输入数字 const handleInputChange = (e: React.ChangeEvent, fn: (text: string) => void) => { + if (errorText) setErrorText(''); const inputValue = e.target.value; const regex = /^[0-9]*$/; if (regex.test(inputValue) || inputValue === '') fn(e.target.value); @@ -64,7 +75,8 @@ export default function LoginForm() { return (
    -
    - + +

    {errorText}

    ); } diff --git a/src/components/Header/LoginModal.tsx b/src/components/Login/LoginModal.tsx similarity index 76% rename from src/components/Header/LoginModal.tsx rename to src/components/Login/LoginModal.tsx index 0da0335..ce8153d 100644 --- a/src/components/Header/LoginModal.tsx +++ b/src/components/Login/LoginModal.tsx @@ -1,7 +1,7 @@ import Image from 'next/image'; import { useShallow } from 'zustand/react/shallow'; -import LoginForm from '../Login/LoginForm'; +import LoginForm from './LoginForm'; import useUserStore from '@/store/user'; @@ -18,7 +18,7 @@ export default function LoginCard() {
    {/* 登录框 */} -
    +
    {/* title */}

    登录雀乐

    @@ -42,10 +42,14 @@ export default function LoginCard() { diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx index d3a4c3f..1f9e2cb 100644 --- a/src/components/common/Button.tsx +++ b/src/components/common/Button.tsx @@ -1,7 +1,7 @@ import React from 'react'; interface ButtonProps { - type?: 'default' | 'primary' | 'black'; + type?: 'default' | 'primary' | 'black' | 'white'; disabled?: boolean; className?: string; children: React.ReactNode; @@ -18,6 +18,7 @@ const Button: React.FC = ({ const buttonColorList = { default: { default: 'bg-blue text-[#000]', disabled: 'opacity-50' }, primary: { default: 'bg-brand text-[#fff]', disabled: 'opacity-50' }, + white: { default: 'bg-[#fff] text-brand', disabled: 'text-[rgba(0,0,0,0.4)]' }, black: { default: 'bg-[#000] text-[#fff]', disabled: 'opacity-10' }, }; diff --git a/src/components/index.ts b/src/components/index.ts index b3655b4..36aacd1 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -7,7 +7,7 @@ export { default as Category } from './Category'; export { default as ContributorCard } from './ContributorCard'; // Login -export { default as LoginModal } from './Header/LoginModal'; +export { default as LoginModal } from './Login/LoginModal'; export { default as LoginForm } from './Login/LoginForm'; // Journal diff --git a/src/services/client/user.ts b/src/services/client/user.ts index b9e3d6a..bfce5f3 100644 --- a/src/services/client/user.ts +++ b/src/services/client/user.ts @@ -41,7 +41,7 @@ export const apiUserLogin = async (params: { * @description token 续期 */ export const apiAutoLogin = async (params: { deviceId: string; deviceBrand?: string }) => { - const result: FetchResponse = await clientHttp.post('http://localhost:3001/api/user/autoLogin', params); + const result: FetchResponse = await clientHttp.post('/queyueapi/user/autoLogin', params); return result; }; diff --git a/src/store/user.ts b/src/store/user.ts index 0760bc2..102ddbc 100644 --- a/src/store/user.ts +++ b/src/store/user.ts @@ -21,11 +21,11 @@ interface UserState { /** 更新用户信息 */ setUserInfo: (parmas: UserInfo) => void; /** 用户登录 */ - userLogin: (params: TRequestLogin) => Promise; + userLogin: (params: TRequestLogin) => Promise>; /** 登出 */ userLogout: () => void; /** 获取用户信息 */ - getUserInfo: () => Promise; + getUserInfo: () => Promise>; } const useUserStore = create()( @@ -58,7 +58,7 @@ const useUserStore = create()( const getUserInfo = async () => { const result = await apiGetMyUserInfo(); if (result.code === 200) setUserInfo(result.data); - return result.code === 200; + return result; }; return { @@ -68,12 +68,14 @@ const useUserStore = create()( setUserInfo, userLogin: async (params) => { const result = await apiUserLogin(params); - if (result.code !== 200) return false; - await setCookie(null, 'token', result.data, { - maxAge: 7 * 24 * 60 * 60, - path: '/', - }); - return await getUserInfo(); + if (result.code === 200) { + setCookie(null, 'token', result.data, { + maxAge: 7 * 24 * 60 * 60, + path: '/', + }); + await getUserInfo(); + } + return result; }, userLogout: async () => { apiUserLogout(); diff --git a/src/utils/logout.ts b/src/utils/logout.ts index 905ad3c..c7c6099 100644 --- a/src/utils/logout.ts +++ b/src/utils/logout.ts @@ -6,7 +6,7 @@ const logout = () => { apiUserLogout(); localStorage.clear(); destroyCookie(null, 'token'); - window.location.href = '/'; + window.location.reload(); }; export default logout;