From d835d1b51f832889929cdf69010034a30ef44d02 Mon Sep 17 00:00:00 2001
From: Junjie <xjj@123>
Date: 星期四, 17 十月 2024 13:57:29 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/User/Login/index.jsx | 229 +++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 189 insertions(+), 40 deletions(-)
diff --git a/zy-asrs-flow/src/pages/User/Login/index.jsx b/zy-asrs-flow/src/pages/User/Login/index.jsx
index 0bf4e36..c32f457 100644
--- a/zy-asrs-flow/src/pages/User/Login/index.jsx
+++ b/zy-asrs-flow/src/pages/User/Login/index.jsx
@@ -9,16 +9,27 @@
ProFormCaptcha,
ProFormCheckbox,
ProFormText,
+ ProFormSelect
} from '@ant-design/pro-components';
-import { Button, Divider, Alert, Tabs, message, theme } from 'antd';
+import { Button, Divider, Alert, Tabs, message, theme, Form } from 'antd';
import { useState, useEffect } from 'react';
-import { FormattedMessage, history, SelectLang, useIntl, useModel, Helmet } from '@umijs/max';
+import { FormattedMessage, history, SelectLang, useIntl, useModel, request } from '@umijs/max';
import { flushSync } from 'react-dom';
-import { request } from '@umijs/max';
+import { createStyles } from 'antd-style';
import { setToken } from '@/utils/token-util'
import { PROJECT_NAME } from '@/config/setting'
+import Http from '@/utils/http';
-import logo from './logo.png'
+import logo from '/public/img/logo.png'
+import logoBg from '/public/login-bg.mp4'
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ lang: {
+
+ }
+ }
+})
const LoginMessage = ({ content }) => {
return (
@@ -33,21 +44,67 @@
);
};
+const Lang = () => {
+ const { styles } = useStyles();
+ return (
+ <div className={styles.lang} data-lang>
+ {SelectLang && <SelectLang />}
+ </div>
+ );
+};
+
const Page = () => {
const intl = useIntl();
const { initialState, setInitialState } = useModel('@@initialState');
const { token } = theme.useToken();
+ const [form] = Form.useForm();
const [loginType, setLoginType] = useState('account');
- const [userLoginState, setUserLoginState] = useState({});
const [status, setStatus] = useState(200);
- const [rememberMe, setRememberMe] = useState(true);
-
- console.log(initialState.memo);
+ const [errDesc, setErrDesc] = useState('');
+ const [rememberMe, setRememberMe] = useState(() => {
+ const storedValue = localStorage.getItem('rememberMe');
+ return storedValue !== null ? JSON.parse(storedValue) : true;
+ });
+ const [rememberData, setRememberData] = useState(() => {
+ const storedValue = localStorage.getItem('rememberData');
+ return storedValue !== null ? JSON.parse(storedValue) : true;
+ });
+ const [hostList, setHostList] = useState([]);
useEffect(() => {
- console.log(rememberMe);
+ form.setFieldsValue({
+ autoLogin: rememberMe
+ });
+ localStorage.setItem('rememberMe', JSON.stringify(rememberMe));
}, [rememberMe])
+
+ useEffect(() => {
+ form.setFieldsValue({
+ username: rememberData.username,
+ password: rememberData.password
+ });
+ localStorage.setItem('rememberData', JSON.stringify(rememberData));
+ }, [rememberData])
+
+ useEffect(() => {
+ const fetchHostList = async () => {
+ const resp = await Http.doGet('api/auth/host');
+ if (resp?.data) {
+ const list = resp.data.map(item => ({
+ label: item.name,
+ value: item.id
+ }));
+ setHostList(list);
+ if (list && list.length > 0) {
+ form.setFieldsValue({
+ hostId: list[0].value
+ });
+ }
+ }
+ }
+ fetchHostList();
+ }, []);
const fetchUserInfo = async () => {
const userInfo = await initialState?.fetchUserInfo?.();
@@ -72,8 +129,15 @@
})
if (r.code === 200) {
+ localStorage.removeItem("rememberData");
+ if (rememberMe) {
+ setRememberData({
+ username: values.username,
+ password: values.password
+ })
+ }
message.success(intl.formatMessage({
- id: 'pages.login.success',
+ id: 'login.success',
defaultMessage: '鐧诲綍鎴愬姛锛�',
}));
setToken(r.data.accessToken, values.autoLogin);
@@ -82,14 +146,12 @@
history.push(urlParams.get('redirect') || '/');
return;
}
- setUserLoginState({
- status: r.code,
- type: type,
- })
+ setStatus(r.code);
+ setErrDesc(r.msg);
} catch (error) {
console.log(error);
message.error(intl.formatMessage({
- id: 'pages.login.failure',
+ id: 'login.failure',
defaultMessage: '鐧诲綍澶辫触锛岃閲嶈瘯锛�',
}));
}
@@ -103,22 +165,19 @@
}}
>
<LoginFormPage
- backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
+ form={form}
logo={logo}
- backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
+ backgroundVideoUrl={logoBg}
// title="闄嗘檽娑�"
// subTitle="闄嗘檽娑�..."
containerStyle={{
backgroundColor: 'rgba(0, 0, 0,0.65)',
backdropFilter: 'blur(4px)',
}}
- initialValues={{
- username: 'root',
- password: '123456',
- autoLogin: true,
- }}
onFinish={async (values) => {
await handleSubmit(values);
+ }}
+ initialValue={{
}}
>
<Tabs
@@ -126,11 +185,35 @@
activeKey={loginType}
onChange={(activeKey) => setLoginType(activeKey)}
>
- <Tabs.TabPane key={'account'} tab={'璐﹀彿瀵嗙爜鐧诲綍'} />
- <Tabs.TabPane key={'phone'} tab={'鎵嬫満鍙风櫥褰�'} />
+ <Tabs.TabPane key={'account'} tab={intl.formatMessage({
+ id: 'login.accountLogin.tab',
+ defaultMessage: '璐︽埛瀵嗙爜鐧诲綍',
+ })} />
+ <Tabs.TabPane key={'phone'} tab={intl.formatMessage({
+ id: 'login.phoneLogin.tab',
+ defaultMessage: '鎵嬫満鍙风櫥褰�',
+ })} />
</Tabs>
{loginType === 'account' && (
<>
+ <ProFormSelect
+ className="centered-select"
+ name="hostId"
+ placeholder={intl.formatMessage({
+ id: 'login.host',
+ defaultMessage: '鏈烘瀯锛�',
+ })}
+ rules={[
+ {
+ required: true,
+ message: intl.formatMessage({
+ id: 'login.rule.host',
+ defaultMessage: '璇烽�夋嫨鏈烘瀯!',
+ }),
+ },
+ ]}
+ options={hostList}
+ />
<ProFormText
name="username"
fieldProps={{
@@ -144,11 +227,17 @@
/>
),
}}
- placeholder={'鐢ㄦ埛鍚�: root'}
+ placeholder={intl.formatMessage({
+ id: 'login.username',
+ defaultMessage: '鐢ㄦ埛鍚�: ',
+ })}
rules={[
{
required: true,
- message: '璇疯緭鍏ョ敤鎴峰悕!',
+ message: intl.formatMessage({
+ id: 'login.rule.username',
+ defaultMessage: '璇疯緭鍏ョ敤鎴峰悕!',
+ }),
},
]}
/>
@@ -165,11 +254,17 @@
/>
),
}}
- placeholder={'瀵嗙爜: 123456'}
+ placeholder={intl.formatMessage({
+ id: 'login.password',
+ defaultMessage: '瀵嗙爜: ',
+ })}
rules={[
{
required: true,
- message: '璇疯緭鍏ュ瘑鐮侊紒',
+ message: intl.formatMessage({
+ id: 'login.rule.password',
+ defaultMessage: '璇疯緭鍏ュ瘑鐮侊紒!',
+ }),
},
]}
/>
@@ -177,11 +272,32 @@
)}
{status !== 200 && loginType === 'account' && (
<LoginMessage
- content={'璐︽埛鎴栧瘑鐮侀敊璇�'}
+ content={intl.formatMessage({
+ id: 'login.accountLogin.errorMessage',
+ defaultMessage: '璐︽埛鎴栧瘑鐮侀敊璇�',
+ })}
/>
)}
{loginType === 'phone' && (
<>
+ <ProFormSelect
+ className="centered-select"
+ name="hostId"
+ placeholder={intl.formatMessage({
+ id: 'login.host',
+ defaultMessage: '鏈烘瀯锛�',
+ })}
+ rules={[
+ {
+ required: true,
+ message: intl.formatMessage({
+ id: 'login.rule.host',
+ defaultMessage: '璇烽�夋嫨鏈烘瀯!',
+ }),
+ },
+ ]}
+ options={hostList}
+ />
<ProFormText
fieldProps={{
size: 'large',
@@ -195,15 +311,26 @@
),
}}
name="mobile"
- placeholder={'鎵嬫満鍙�'}
+ placeholder={intl.formatMessage({
+ id: 'login.phoneNumber.placeholder',
+ defaultMessage: '鎵嬫満鍙�',
+ })}
rules={[
{
required: true,
- message: '璇疯緭鍏ユ墜鏈哄彿锛�',
+ message:
+ <FormattedMessage
+ id="login.phoneNumber.required"
+ defaultMessage="璇疯緭鍏ユ墜鏈哄彿锛�"
+ />,
},
{
pattern: /^1\d{10}$/,
- message: '鎵嬫満鍙锋牸寮忛敊璇紒',
+ message:
+ <FormattedMessage
+ id="login.phoneNumber.invalid"
+ defaultMessage="鎵嬫満鍙锋牸寮忛敊璇紒"
+ />,
},
]}
/>
@@ -222,29 +349,47 @@
captchaProps={{
size: 'large',
}}
- placeholder={'璇疯緭鍏ラ獙璇佺爜'}
+ placeholder={intl.formatMessage({
+ id: 'login.captcha.placeholder',
+ defaultMessage: '璇疯緭鍏ラ獙璇佺爜',
+ })}
captchaTextRender={(timing, count) => {
if (timing) {
- return `${count} ${'鑾峰彇楠岃瘉鐮�'}`;
+ return `${count} ${intl.formatMessage({
+ id: 'pages.getCaptchaSecondText',
+ defaultMessage: 'sec(绉�)',
+ })}`;
}
- return '鑾峰彇楠岃瘉鐮�';
+ return intl.formatMessage({
+ id: 'login.phoneLogin.getVerificationCode',
+ defaultMessage: '鑾峰彇楠岃瘉鐮�',
+ });
}}
name="captcha"
rules={[
{
required: true,
- message: '璇疯緭鍏ラ獙璇佺爜锛�',
+ message:
+ <FormattedMessage
+ id="login.captcha.required"
+ defaultMessage="璇疯緭鍏ラ獙璇佺爜锛�"
+ />,
},
]}
onGetCaptcha={async () => {
- // message.success('鑾峰彇楠岃瘉鐮佹垚鍔燂紒楠岃瘉鐮佷负锛�1234');
- message.warning('鏈紑鍚墜鏈哄彿鐧诲綍! ');
+ message.warning(intl.formatMessage({
+ id: 'login.phoneLogin.none',
+ defaultMessage: '鏈紑鍚墜鏈哄彿鐧诲綍',
+ }));
}}
/>
</>
)}
<div
style={{
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
marginBlockEnd: 24,
}}
>
@@ -255,8 +400,12 @@
setRememberMe(e.target.checked);
}}
>
- 鑷姩鐧诲綍
+ {intl.formatMessage({
+ id: 'login.rememberMe',
+ defaultMessage: '鑷姩鐧诲綍',
+ })}
</ProFormCheckbox>
+ <Lang />
</div>
</LoginFormPage>
</div>
@@ -269,4 +418,4 @@
<Page />
</ProConfigProvider>
);
-};
\ No newline at end of file
+};
--
Gitblit v1.9.1