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 | 156 ++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 121 insertions(+), 35 deletions(-)
diff --git a/zy-asrs-flow/src/pages/User/Login/index.jsx b/zy-asrs-flow/src/pages/User/Login/index.jsx
index de71cd0..c32f457 100644
--- a/zy-asrs-flow/src/pages/User/Login/index.jsx
+++ b/zy-asrs-flow/src/pages/User/Login/index.jsx
@@ -13,15 +13,23 @@
} from '@ant-design/pro-components';
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 '/public/img/logo.png'
import logoBg from '/public/login-bg.mp4'
+
+const useStyles = createStyles(({ token }) => {
+ return {
+ lang: {
+
+ }
+ }
+})
const LoginMessage = ({ content }) => {
return (
@@ -36,6 +44,15 @@
);
};
+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');
@@ -44,6 +61,7 @@
const [form] = Form.useForm();
const [loginType, setLoginType] = useState('account');
const [status, setStatus] = useState(200);
+ const [errDesc, setErrDesc] = useState('');
const [rememberMe, setRememberMe] = useState(() => {
const storedValue = localStorage.getItem('rememberMe');
return storedValue !== null ? JSON.parse(storedValue) : true;
@@ -72,15 +90,17 @@
useEffect(() => {
const fetchHostList = async () => {
const resp = await Http.doGet('api/auth/host');
- 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
- });
+ 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();
@@ -97,7 +117,6 @@
});
}
};
-
const handleSubmit = async (values) => {
try {
@@ -118,7 +137,7 @@
})
}
message.success(intl.formatMessage({
- id: 'pages.login.success',
+ id: 'login.success',
defaultMessage: '鐧诲綍鎴愬姛锛�',
}));
setToken(r.data.accessToken, values.autoLogin);
@@ -128,10 +147,11 @@
return;
}
setStatus(r.code);
+ setErrDesc(r.msg);
} catch (error) {
console.log(error);
message.error(intl.formatMessage({
- id: 'pages.login.failure',
+ id: 'login.failure',
defaultMessage: '鐧诲綍澶辫触锛岃閲嶈瘯锛�',
}));
}
@@ -165,19 +185,31 @@
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="鏈烘瀯锛�"
+ placeholder={intl.formatMessage({
+ id: 'login.host',
+ defaultMessage: '鏈烘瀯锛�',
+ })}
rules={[
{
required: true,
- message: '璇烽�夋嫨鏈烘瀯!',
+ message: intl.formatMessage({
+ id: 'login.rule.host',
+ defaultMessage: '璇烽�夋嫨鏈烘瀯!',
+ }),
},
]}
options={hostList}
@@ -195,11 +227,17 @@
/>
),
}}
- placeholder={'鐢ㄦ埛鍚�: '}
+ placeholder={intl.formatMessage({
+ id: 'login.username',
+ defaultMessage: '鐢ㄦ埛鍚�: ',
+ })}
rules={[
{
required: true,
- message: '璇疯緭鍏ョ敤鎴峰悕!',
+ message: intl.formatMessage({
+ id: 'login.rule.username',
+ defaultMessage: '璇疯緭鍏ョ敤鎴峰悕!',
+ }),
},
]}
/>
@@ -216,11 +254,17 @@
/>
),
}}
- placeholder={'瀵嗙爜: '}
+ placeholder={intl.formatMessage({
+ id: 'login.password',
+ defaultMessage: '瀵嗙爜: ',
+ })}
rules={[
{
required: true,
- message: '璇疯緭鍏ュ瘑鐮侊紒',
+ message: intl.formatMessage({
+ id: 'login.rule.password',
+ defaultMessage: '璇疯緭鍏ュ瘑鐮侊紒!',
+ }),
},
]}
/>
@@ -228,7 +272,10 @@
)}
{status !== 200 && loginType === 'account' && (
<LoginMessage
- content={'璐︽埛鎴栧瘑鐮侀敊璇�'}
+ content={intl.formatMessage({
+ id: 'login.accountLogin.errorMessage',
+ defaultMessage: '璐︽埛鎴栧瘑鐮侀敊璇�',
+ })}
/>
)}
{loginType === 'phone' && (
@@ -236,11 +283,17 @@
<ProFormSelect
className="centered-select"
name="hostId"
- placeholder="鏈烘瀯锛�"
+ placeholder={intl.formatMessage({
+ id: 'login.host',
+ defaultMessage: '鏈烘瀯锛�',
+ })}
rules={[
{
required: true,
- message: '璇烽�夋嫨鏈烘瀯!',
+ message: intl.formatMessage({
+ id: 'login.rule.host',
+ defaultMessage: '璇烽�夋嫨鏈烘瀯!',
+ }),
},
]}
options={hostList}
@@ -258,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="鎵嬫満鍙锋牸寮忛敊璇紒"
+ />,
},
]}
/>
@@ -285,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,
}}
>
@@ -318,8 +400,12 @@
setRememberMe(e.target.checked);
}}
>
- 鑷姩鐧诲綍
+ {intl.formatMessage({
+ id: 'login.rememberMe',
+ defaultMessage: '鑷姩鐧诲綍',
+ })}
</ProFormCheckbox>
+ <Lang />
</div>
</LoginFormPage>
</div>
--
Gitblit v1.9.1