Commit 497ea497 authored by 李纪文's avatar 李纪文

feat: 增加验证码formItem,修改大足登录页

parent 3d11bbd9
Pipeline #93760 passed with stages
import 'kit_logger';
import React, { useCallback, useEffect, useState } from 'react';
import { FieldNumberOutlined, ReloadOutlined } from '@ant-design/icons';
import { Button, Form, Input, message } from 'antd';
import omit from 'omit.js';
......@@ -30,6 +30,53 @@ const getFormItemOptions = ({ onChange, defaultValue, customProps = {}, rules })
return options;
};
const ValidateCode = props => {
const [count, setCount] = useState(0);
const codeUrl = window?.globalConfig?.hasGateWay
? '/PandaCore/Identity/GetVerificationCode'
: '/PandaCore/GCK/BussinessAuth/GetVerificationCode';
useEffect(() => {
// eslint-disable-next-line no-use-before-define
window.share.event.on('loginError', handError);
return () => {
// eslint-disable-next-line no-use-before-define
window.share.event.removeListener('loginError', handError);
};
}, []);
const handError = () => {
setCount(Date.now());
};
const handeRefresh = () => {
setCount(Date.now());
};
const handChange = value => {
props?.onChange?.(value);
};
return (
<div className={styles.validate_view}>
<Input
size={props.size || 'large'}
prefix={props?.prefix || <FieldNumberOutlined />}
className={styles.validate_input}
value={props.value || ''}
placeholder={props?.placeholder || '请输入验证码'}
onChange={handChange}
/>
<div className={styles.validate_img}>
<img src={`${codeUrl}?time=${count}`} alt="" />
<div className={styles.validate_refresh} onClick={handeRefresh}>
<ReloadOutlined />
</div>
</div>
</div>
);
};
const LoginItem = props => {
const [count, setCount] = useState(props.countDown || 0);
const [timing, setTiming] = useState(false);
......@@ -149,6 +196,15 @@ const LoginItem = props => {
</FormItem>
);
}
if (type === 'Validate') {
return (
<Form.Item name={name} {...options}>
<ValidateCode {...customProps} {...otherProps} />
</Form.Item>
);
}
return (
<FormItem name={name} {...options}>
<Input {...customProps} {...otherProps} />
......
......@@ -50,5 +50,6 @@ Login.Mobile = LoginItem.Mobile;
Login.Captcha = LoginItem.Captcha;
Login.NewYearMobile = LoginItem.NewYearMobile;
Login.NewYearCaptcha = LoginItem.NewYearCaptcha;
Login.Validate = LoginItem.Validate;
export default Login;
......@@ -74,4 +74,52 @@
width: 100%;
margin-top: 14px;
}
.validate_view {
display: flex;
align-items: center;
.validate_input {
flex: 1;
margin-right: 20px;
}
.validate_img {
width: 92px;
height: 40px;
flex: none;
position: relative;
cursor: pointer;
border: 1px solid #d9d9d9;
border-radius: 2px;
&:hover {
.validate_refresh {
opacity: 1;
background-color: rgba(238, 238, 238, 0.7);
}
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
.validate_refresh {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: flex;
opacity: 0;
align-items: center;
justify-content: center;
cursor: pointer;
color: #666666;
}
}
}
}
......@@ -7,6 +7,7 @@ import {
UserOutlined,
EyeInvisibleOutlined,
EyeTwoTone,
FieldNumberOutlined,
} from '@ant-design/icons';
import styles from './index.less';
......@@ -119,4 +120,18 @@ export default {
},
],
},
Validate: {
props: {
size: 'large',
id: 'validate',
prefix: <FieldNumberOutlined className={styles.prefixIcon} />,
placeholder: '请输入验证码',
},
rules: [
{
required: true,
message: '请输入验证码',
},
],
},
};
......@@ -4,7 +4,7 @@ import { useIntl } from '@wisdom-utils/components';
import LoginForm from '../components/Login';
import LoginMessage from './loginMessage';
/* eslint-disable */
const { UserName, Password, Submit } = LoginForm;
const { UserName, Password, Validate, Submit } = LoginForm;
const useAccount = props => (
<LoginForm onSubmit={props.onSubmit} welcome={props.welcome}>
{props.status === 'error' && props.type === 'account' && !props.submitting && (
......@@ -42,6 +42,7 @@ const useAccount = props => (
},
]}
/>
{props?.isValidate ? <Validate name="validate" /> : null}
<div>
<Checkbox
checked={props.autoLogin}
......
......@@ -34,6 +34,7 @@ const PopOvercontent = () =>{
}
const Login = forwardRef((props, _ref) => {
const isValidate = (window?.globalConfig?.isVerification || 0) * 1 === 1;
const sliVerify = useRef();
const videoRef = useRef();
const loginFormRef = useRef();
......@@ -53,7 +54,7 @@ const Login = forwardRef((props, _ref) => {
/* eslint-disable */
action &&
(type === 'Account'
? action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify)
? action.loginHandlerValidate(values.userName, values.password, null, autoLogin, sliVerify, values?.validate)
: type === 'Mobile'
? action.phoneLoginFormHandler(values.mobile, values.captcha)
: null);
......@@ -108,7 +109,7 @@ const Login = forwardRef((props, _ref) => {
updateLoginMode: props.updateLoginMode,
welcome: null,
};
return <Account {...params} />;
return <Account {...params} isValidate={isValidate} />;
};
/* eslint-disable */
......@@ -205,7 +206,7 @@ const Login = forwardRef((props, _ref) => {
</QueueAnim>
<QueueAnim type="scale" duration={1000}>
<div key={'innerwrapper'} className={classnames(styles['inner-wrapper'])}>
<div className={styles['inner-center']}>
<div className={classnames(styles['inner-center'], isValidate ? styles['inner-center-validate'] : '')}>
<div className={styles['welcome-title']}>
<img src={loginTitlePng} alt="login-title" />
</div>
......
......@@ -89,6 +89,10 @@
border: 1px solid #FFFFFF;
box-shadow: 1px 1px 12px -3px #22222277;
border-radius: 8px 10px 10px 10px;
&.inner-center-validate {
height: 450px;
}
}
.welcome-title {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment