From adf5816ade6483aa87c7a4066169d99a7787f11e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A2=A8=E7=B6=A0BG?= Date: Mon, 7 Oct 2024 18:09:04 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=94=A8=20refactor=EF=BC=9A=E9=87=8D?= =?UTF-8?q?=E6=9E=84=E7=99=BB=E5=BD=95=E9=A1=B5=E6=A0=B7=E5=BC=8F=E5=92=8C?= =?UTF-8?q?=E9=83=A8=E4=BB=BD=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/login/index.scss | 102 ---------------------------- src/pages/login/index.tsx | 133 ++++++++++++++++++++----------------- 2 files changed, 72 insertions(+), 163 deletions(-) diff --git a/src/pages/login/index.scss b/src/pages/login/index.scss index 9c3f0d1..0f4f197 100644 --- a/src/pages/login/index.scss +++ b/src/pages/login/index.scss @@ -1,107 +1,5 @@ -.login_top_background { - width: 110vw; - height: 30vh; - margin: 0; - padding: 0; - box-sizing: border-box; - position: relative; - top: -13vh; - left: -3vh; -} -.login { - width: 100vw; - height: 100vh; -} -.logo { - display: flex; - align-items: center; - width: 40vw; - height: 40vw; - resize: horizontal; - margin: auto; -} -.login_content { - height: 60hv; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; -} - -.login_main { - height: 40vh; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; -} -.login_main_text { - height: 18vh; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; -} -.login_main_button { - height: 20vh; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - //padding-top: -10vh; -} -.login_input { - width: 90vw; - height: 6vh; - margin: 0; - padding: 0 4vh; - box-sizing: border-box; - font-size: 2.5vh; - background-color: #f7f7f7; - border-radius: 5vh; - box-sizing: border-box; -} -.login_link { - font-size: 30px; - color: #c5c5c5; -} -.login_button { - width: 90vw; - height: 6vh; - color: #fff; - font-size: 2.5vh; - background-color: #ffd777; - border-radius: 5vh; - border: none; - font-weight: bold; -} .guest_button { color: #565656; background-color: #fff; border: 1px solid; } - -.login_terms { - height: 5vh; - display: flex; - justify-content: center; - align-items: center; -} -.login_checkbox { - margin: 0; - padding: 0; - box-sizing: border-box; -} -.login_terms_text { - font-size: 30px; - color: #707070; -} - -.floating_window_switch { - padding: 0; - margin: 0; - border: none; - font-size: 30px; - color: #3055cf; - background-color: transparent; -} diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 121bf28..f72a570 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -1,110 +1,121 @@ -/* eslint-disable @typescript-eslint/ban-ts-comment */ - -/* eslint-disable @typescript-eslint/no-unsafe-assignment */ - -/* eslint-disable no-console */ -/* eslint-disable import/first */ import { Button, Checkbox, Image, Input, Text, View } from '@tarojs/components'; -import Taro, { useLoad } from '@tarojs/taro'; -import React, { useState } from 'react'; - -import './index.scss'; +import Taro from '@tarojs/taro'; +import React, { useCallback, useState } from 'react'; import handleLogin from '@/common/api/handleLogin'; -import iconLogo from '@/common/assets/img/login/logo.png'; -import top_background from '@/common/assets/img/login/top_background.png'; +import Icon from '@/common/assets/img/login/logo.png'; +import TopBackground from '@/common/assets/img/login/top_background.png'; import { FloatingWindow } from '@/common/components'; -type LoginProps = object; +type UserData = { + studentId: string; + password: string; + isAgreeTerms: boolean; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + userInfo: any; +}; -const Login: React.FC = () => { - useLoad(() => { - console.log('Page loaded.'); +const Login: React.FC = () => { + const [isPopperOpened, setIsPopperOpened] = useState(false); + const [userData, setUserData] = useState({ + studentId: '', + password: '', + isAgreeTerms: false, + userInfo: null, }); - const [floatingWindowOpenning, setFloatingWindowOpenning] = useState(false); - const [studentId, setStudentId] = useState(''); - const [password, setPassword] = useState(''); - const [agreeTerms, setAgreeTerms] = useState(false); - const [userInfo, setUserInfo] = useState(null); - const handleGetUserProfile = () => { + const handleGetUserProfile = useCallback(() => { void Taro.getUserProfile({ desc: '用于完善用户资料', success: (res) => { - console.log('用户信息:', res.userInfo); - - // @ts-expect-error - setUserInfo(res.userInfo); + setUserData({ ...userData, userInfo: res.userInfo }); Taro.setStorageSync('userInfo', res.userInfo); }, fail: (err) => { + // eslint-disable-next-line no-console console.error('获取用户信息失败:', err); }, }); - }; + }, [userData]); - const handleLoginClick = () => { - if (agreeTerms) { - if (!userInfo) { + const handleLoginClick = useCallback(() => { + if (userData.isAgreeTerms) { + if (!userData.userInfo) { handleGetUserProfile(); } - void handleLogin({ student_id: studentId, password: password }).then((r) => - console.log(r) - ); + void handleLogin({ + student_id: userData.studentId, + password: userData.password, + }); } else { void Taro.showToast({ icon: 'error', title: '请确认隐私条例', }); } - }; + }, [handleGetUserProfile, userData]); return ( - - - - - - + + + + + + + + 木犀课栈 + + + setStudentId(e.detail.value)} + value={userData.studentId} + onInput={(e) => setUserData({ ...userData, studentId: e.detail.value })} > setPassword(e.detail.value)} + onInput={(e) => setUserData({ ...userData, password: e.detail.value })} > - Forget your password? + Forget your password? - - - + setAgreeTerms(!agreeTerms)} - className="login_checkbox" + checked={userData.isAgreeTerms} + onClick={() => + setUserData({ ...userData, isAgreeTerms: !userData.isAgreeTerms }) + } > - 我已同意 - setFloatingWindowOpenning(true)} - > - 《木犀课栈隐私条例》 + + 我已同意 + setIsPopperOpened(true)} + > + 《木犀课栈隐私条例》 + + 内的所有内容 - 内的所有内容 - {floatingWindowOpenning && } + {isPopperOpened && } ); }; From b8106cb757ac7fbe978812c17c2727d86b3f0021 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A2=A8=E7=B6=A0BG?= Date: Mon, 7 Oct 2024 18:24:06 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=94=A8=20refactor=EF=BC=9A=E6=A8=A1?= =?UTF-8?q?=E5=9D=97=E5=8C=96=E5=B0=81=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/login/components/AuthForm.tsx | 118 ++++++++++++++++++++ src/modules/login/components/Login.tsx | 18 ++++ src/modules/login/index.ts | 3 + src/pages/login/index.tsx | 124 +--------------------- 4 files changed, 144 insertions(+), 119 deletions(-) create mode 100644 src/modules/login/components/AuthForm.tsx create mode 100644 src/modules/login/components/Login.tsx create mode 100644 src/modules/login/index.ts diff --git a/src/modules/login/components/AuthForm.tsx b/src/modules/login/components/AuthForm.tsx new file mode 100644 index 0000000..b89094b --- /dev/null +++ b/src/modules/login/components/AuthForm.tsx @@ -0,0 +1,118 @@ +import { Button, Checkbox, Image, Input, Text, View } from '@tarojs/components'; +import Taro from '@tarojs/taro'; +import { memo, useCallback, useState } from 'react'; + +import handleLogin from '@/common/api/handleLogin'; +import Icon from '@/common/assets/img/login/logo.png'; +import { FloatingWindow } from '@/common/components'; + +type UserData = { + studentId: string; + password: string; + isAgreeTerms: boolean; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + userInfo: any; +}; + +const AuthForm: React.FC = memo(() => { + const [isPopperOpened, setIsPopperOpened] = useState(false); + const [userData, setUserData] = useState({ + studentId: '', + password: '', + isAgreeTerms: false, + userInfo: null, + }); + + const handleGetUserProfile = useCallback(() => { + void Taro.getUserProfile({ + desc: '用于完善用户资料', + success: (res) => { + setUserData({ ...userData, userInfo: res.userInfo }); + Taro.setStorageSync('userInfo', res.userInfo); + }, + fail: (err) => { + // eslint-disable-next-line no-console + console.error('获取用户信息失败:', err); + }, + }); + }, [userData]); + + const handleLoginClick = useCallback(() => { + if (userData.isAgreeTerms) { + if (!userData.userInfo) { + handleGetUserProfile(); + } + void handleLogin({ + student_id: userData.studentId, + password: userData.password, + }); + } else { + void Taro.showToast({ + icon: 'error', + title: '请确认隐私条例', + }); + } + }, [handleGetUserProfile, userData]); + + return ( + <> + + + + + + 木犀课栈 + + + + setUserData({ ...userData, studentId: e.detail.value })} + > + setUserData({ ...userData, password: e.detail.value })} + > + Forget your password? + + + + + + + + setUserData({ ...userData, isAgreeTerms: !userData.isAgreeTerms }) + } + > + + 我已同意 + setIsPopperOpened(true)} + > + 《木犀课栈隐私条例》 + + 内的所有内容 + + + + {isPopperOpened && } + + ); +}); + +export default AuthForm; diff --git a/src/modules/login/components/Login.tsx b/src/modules/login/components/Login.tsx new file mode 100644 index 0000000..248de3f --- /dev/null +++ b/src/modules/login/components/Login.tsx @@ -0,0 +1,18 @@ +import { Image, View } from '@tarojs/components'; +import { memo } from 'react'; + +import TopBackground from '@/common/assets/img/login/top_background.png'; + +import AuthForm from './AuthForm'; + +const Login: React.FC = memo(() => ( + + + + +)); + +export default Login; diff --git a/src/modules/login/index.ts b/src/modules/login/index.ts new file mode 100644 index 0000000..0a8e2fd --- /dev/null +++ b/src/modules/login/index.ts @@ -0,0 +1,3 @@ +import Login from './components/Login'; + +export default Login; diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index f72a570..dc8cd9c 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -1,123 +1,9 @@ -import { Button, Checkbox, Image, Input, Text, View } from '@tarojs/components'; -import Taro from '@tarojs/taro'; -import React, { useCallback, useState } from 'react'; +import { memo } from 'react'; -import handleLogin from '@/common/api/handleLogin'; -import Icon from '@/common/assets/img/login/logo.png'; -import TopBackground from '@/common/assets/img/login/top_background.png'; -import { FloatingWindow } from '@/common/components'; +import './index.scss'; -type UserData = { - studentId: string; - password: string; - isAgreeTerms: boolean; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - userInfo: any; -}; +import Login from '../../modules/login'; -const Login: React.FC = () => { - const [isPopperOpened, setIsPopperOpened] = useState(false); - const [userData, setUserData] = useState({ - studentId: '', - password: '', - isAgreeTerms: false, - userInfo: null, - }); +const Page: React.FC = memo(() => ); - const handleGetUserProfile = useCallback(() => { - void Taro.getUserProfile({ - desc: '用于完善用户资料', - success: (res) => { - setUserData({ ...userData, userInfo: res.userInfo }); - Taro.setStorageSync('userInfo', res.userInfo); - }, - fail: (err) => { - // eslint-disable-next-line no-console - console.error('获取用户信息失败:', err); - }, - }); - }, [userData]); - - const handleLoginClick = useCallback(() => { - if (userData.isAgreeTerms) { - if (!userData.userInfo) { - handleGetUserProfile(); - } - void handleLogin({ - student_id: userData.studentId, - password: userData.password, - }); - } else { - void Taro.showToast({ - icon: 'error', - title: '请确认隐私条例', - }); - } - }, [handleGetUserProfile, userData]); - - return ( - - - - - - - - 木犀课栈 - - - - setUserData({ ...userData, studentId: e.detail.value })} - > - setUserData({ ...userData, password: e.detail.value })} - > - Forget your password? - - - - - - - - setUserData({ ...userData, isAgreeTerms: !userData.isAgreeTerms }) - } - > - - 我已同意 - setIsPopperOpened(true)} - > - 《木犀课栈隐私条例》 - - 内的所有内容 - - - - {isPopperOpened && } - - ); -}; - -export default Login; +export default Page;