|
|
|
@ -16,246 +16,137 @@ const FormItem = Form.Item; |
|
|
|
|
|
|
|
let codCountDownInterval = null |
|
|
|
const Login = props => { |
|
|
|
const { dispatch, user, error, isRequesting } = props |
|
|
|
const [username, setUserName] = useState('') |
|
|
|
const [password, setPassword] = useState('') |
|
|
|
const [phone, setPhone] = useState('') |
|
|
|
const [code, setCode] = useState('') |
|
|
|
const [inputChanged, setInputChanged] = useState(false) |
|
|
|
const [curTabKey, setCurTabKey] = useState(1) |
|
|
|
const [codSending, setCodSending] = useState(false) |
|
|
|
const [codCountDown, setCodeCountDown] = useState(60) |
|
|
|
const codCountDownRef = useRef(0) |
|
|
|
const { dispatch, user, error, isRequesting } = props |
|
|
|
const [username, setUserName] = useState('') |
|
|
|
const [password, setPassword] = useState('') |
|
|
|
const [phone, setPhone] = useState('') |
|
|
|
const [code, setCode] = useState('') |
|
|
|
const [inputChanged, setInputChanged] = useState(false) |
|
|
|
const [curTabKey, setCurTabKey] = useState(1) |
|
|
|
const [codSending, setCodSending] = useState(false) |
|
|
|
const [codCountDown, setCodeCountDown] = useState(60) |
|
|
|
const codCountDownRef = useRef(0) |
|
|
|
const [form] = Form.useForm(); |
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
}, []) |
|
|
|
|
|
|
|
}, []) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (user && user.authorized) { |
|
|
|
dispatch(push('/projectRegime/information')); |
|
|
|
} |
|
|
|
}, [user]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (user && user.authorized) { |
|
|
|
dispatch(push('/projectRegime/information')); |
|
|
|
} |
|
|
|
}, [user]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (codSending) { |
|
|
|
setCodeCountDown(59) |
|
|
|
codCountDownRef.current = 59 |
|
|
|
codCountDownInterval = setInterval(() => { |
|
|
|
codCountDownRef.current -= 1 |
|
|
|
if (codCountDownRef.current == 0) { |
|
|
|
setCodSending(false) |
|
|
|
setCodeCountDown(60) |
|
|
|
clearInterval(codCountDownInterval) |
|
|
|
codCountDownInterval = null |
|
|
|
} else { |
|
|
|
setCodeCountDown(codCountDownRef.current) |
|
|
|
} |
|
|
|
}, 1000); |
|
|
|
} else { |
|
|
|
if (codCountDownInterval) { |
|
|
|
clearInterval(codCountDownInterval) |
|
|
|
codCountDownInterval = null |
|
|
|
setCodeCountDown(60) |
|
|
|
useEffect(() => { |
|
|
|
if (codSending) { |
|
|
|
setCodeCountDown(59) |
|
|
|
codCountDownRef.current = 59 |
|
|
|
codCountDownInterval = setInterval(() => { |
|
|
|
codCountDownRef.current -= 1 |
|
|
|
if (codCountDownRef.current == 0) { |
|
|
|
setCodSending(false) |
|
|
|
setCodeCountDown(60) |
|
|
|
clearInterval(codCountDownInterval) |
|
|
|
codCountDownInterval = null |
|
|
|
} else { |
|
|
|
setCodeCountDown(codCountDownRef.current) |
|
|
|
} |
|
|
|
} |
|
|
|
}, [codSending]) |
|
|
|
}, 1000); |
|
|
|
} else { |
|
|
|
if (codCountDownInterval) { |
|
|
|
clearInterval(codCountDownInterval) |
|
|
|
codCountDownInterval = null |
|
|
|
setCodeCountDown(60) |
|
|
|
} |
|
|
|
} |
|
|
|
}, [codSending]) |
|
|
|
|
|
|
|
const doLogin = () => { |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
<div |
|
|
|
id='loginContainer' |
|
|
|
style={{ |
|
|
|
height: '100vh', |
|
|
|
display: 'flex', |
|
|
|
alignItems: 'center', |
|
|
|
justifyContent: 'center', |
|
|
|
color: 'aliceblue', |
|
|
|
backgroundImage: 'url(/assets/images/login/login_b.png)', |
|
|
|
backgroundSize: 'cover', |
|
|
|
position: 'relative', |
|
|
|
}} |
|
|
|
> |
|
|
|
{/* <img src='/assets/images/logo.png' style={{ height: 42, borderRadius: 4, position: 'fixed', top: 32, left: 32 }} /> */} |
|
|
|
|
|
|
|
const doLogin = () => { |
|
|
|
if (curTabKey == 1) { |
|
|
|
if (!username || !password) |
|
|
|
dispatch({ |
|
|
|
type: LOGIN_ERROR, |
|
|
|
payload: { error: '请输入账号名和密码' } |
|
|
|
}); |
|
|
|
setInputChanged(false) |
|
|
|
dispatch(login({ username, password })); |
|
|
|
} else { |
|
|
|
if (!phone || !code) |
|
|
|
dispatch({ |
|
|
|
type: LOGIN_ERROR, |
|
|
|
payload: { error: '请输入手机号和验证码' } |
|
|
|
}); |
|
|
|
dispatch(login({ phone, code })); |
|
|
|
} |
|
|
|
} |
|
|
|
<div style={{ |
|
|
|
width: 556, height: 434, backgroundColor: '#rgba(255,255,255,0.50)', |
|
|
|
borderRadius: '2px 2px 0 0', boxShadow: 'inset 0 0 8px 0 rgba(50,131,255,0.25)', |
|
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'absolute', right: 150, top: 'calc(50% - 217px)' |
|
|
|
}}> |
|
|
|
<div style={{ |
|
|
|
width: 410, |
|
|
|
height: 322, |
|
|
|
backgroundColor: '' |
|
|
|
}}> |
|
|
|
<img src={'/assets/images/login/login_a.png'} style={{ width: 124, height: 37, display: 'inline-block', marginBottom: 40 }} /> |
|
|
|
|
|
|
|
const enterHandler = e => { |
|
|
|
if (e.key === 'Enter') { |
|
|
|
doLogin() |
|
|
|
} |
|
|
|
}; |
|
|
|
<Form |
|
|
|
form={form} |
|
|
|
onFinish={r => { |
|
|
|
// console.log(r);
|
|
|
|
form.validateFields().then(r => { |
|
|
|
dispatch(login({ username: r.username, password: r.password })); |
|
|
|
}) |
|
|
|
.catch(err => { |
|
|
|
dispatch({ |
|
|
|
type: LOGIN_ERROR, |
|
|
|
payload: { error: '请输入账号名和密码' } |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
}} |
|
|
|
> |
|
|
|
|
|
|
|
<Form.Item label='' name="username" rules={[{ required: true, message: '请输入点位名称' },]}> |
|
|
|
<Input placeholder="用户名" /> |
|
|
|
</Form.Item> |
|
|
|
|
|
|
|
<Form.Item label='' name="password" rules={[{ required: true, message: '请输入点位名称' },]}> |
|
|
|
<Input placeholder="密码" /> |
|
|
|
</Form.Item> |
|
|
|
|
|
|
|
<Form.Item |
|
|
|
> |
|
|
|
<Button type="primary" htmlType="submit" style={{ width: 410, height: 50 }}> |
|
|
|
登录 |
|
|
|
</Button> |
|
|
|
</Form.Item> |
|
|
|
</Form> |
|
|
|
|
|
|
|
return ( |
|
|
|
<div |
|
|
|
id='loginContainer' |
|
|
|
style={{ |
|
|
|
height: '100vh', |
|
|
|
display: 'flex', |
|
|
|
alignItems: 'center', |
|
|
|
justifyContent: 'center', |
|
|
|
color: 'aliceblue', |
|
|
|
backgroundImage: 'url(/assets/images/login_bg.png)' |
|
|
|
}} |
|
|
|
> |
|
|
|
<img src='/assets/images/logo.png' style={{ height: 42, borderRadius: 4, position: 'fixed', top: 32, left: 32 }} /> |
|
|
|
|
|
|
|
<div style={{ width: 1000, backgroundColor: '#01316d', borderRadius: 24 }}> |
|
|
|
<Row> |
|
|
|
<Col span={12} style={{}}> |
|
|
|
<img src='/assets/images/login.png' width={'100%'} /> |
|
|
|
</Col> |
|
|
|
<Col span={12}> |
|
|
|
<div style={{ |
|
|
|
width: '100%', |
|
|
|
height: '100%', |
|
|
|
padding: 30, |
|
|
|
display: 'flex', |
|
|
|
flexDirection: 'column', |
|
|
|
justifyContent: 'space-around' |
|
|
|
}}> |
|
|
|
<p style={{ fontSize: 30, fontWeight: 'bold', textAlign: 'center' }}> |
|
|
|
中鼎国际工程项目指挥调度系统 |
|
|
|
</p> |
|
|
|
<Tabs defaultActiveKey="1" animated={true} onChange={(k) => { |
|
|
|
setCurTabKey(k) |
|
|
|
}}> |
|
|
|
<Tabs.TabPane tab="用户名登录" key="1"> |
|
|
|
<Form onKeyDown={enterHandler}> |
|
|
|
<div style={{ fontSize: 10, fontWeight: 'bold' }}> |
|
|
|
用户名 |
|
|
|
</div> |
|
|
|
<FormItem name="username"> |
|
|
|
<Input |
|
|
|
type="text" |
|
|
|
size="large" |
|
|
|
value={username} |
|
|
|
placeholder="用户名" |
|
|
|
onChange={e => { |
|
|
|
setUserName(e.target.value) |
|
|
|
setInputChanged(true) |
|
|
|
}} |
|
|
|
/> |
|
|
|
</FormItem> |
|
|
|
<div style={{ fontSize: 10, fontWeight: 'bold' }}> |
|
|
|
密码 |
|
|
|
</div> |
|
|
|
<FormItem name="password"> |
|
|
|
<Input |
|
|
|
type="password" |
|
|
|
size="large" |
|
|
|
value={password} |
|
|
|
placeholder="密码" |
|
|
|
onChange={e => { |
|
|
|
setPassword(e.target.value) |
|
|
|
setInputChanged(true) |
|
|
|
}} |
|
|
|
/> |
|
|
|
</FormItem> |
|
|
|
</Form> |
|
|
|
</Tabs.TabPane> |
|
|
|
<Tabs.TabPane tab="手机登录" key="2" disabled> |
|
|
|
<Form onKeyDown={enterHandler}> |
|
|
|
<div style={{ fontSize: 10, fontWeight: 'bold' }}> |
|
|
|
手机号 |
|
|
|
</div> |
|
|
|
<FormItem name="phone" rules={[{ pattern: /^1[3|4|5|7|8|9]\d{9}$/, message: '请输入正确的手机号码' }]}> |
|
|
|
<Input |
|
|
|
type="text" |
|
|
|
size="large" |
|
|
|
value={username} |
|
|
|
onChange={e => { |
|
|
|
setPhone(e.target.value) |
|
|
|
setInputChanged(true) |
|
|
|
}} |
|
|
|
/> |
|
|
|
</FormItem> |
|
|
|
<div style={{ fontSize: 10, fontWeight: 'bold' }}> |
|
|
|
验证码 |
|
|
|
</div> |
|
|
|
<FormItem name="code"> |
|
|
|
<Input.Group compact> |
|
|
|
<Input |
|
|
|
size="large" |
|
|
|
style={{ width: 'calc(100% - 112px)' }} |
|
|
|
onChange={e => { |
|
|
|
setCode(e.target.value) |
|
|
|
setInputChanged(true) |
|
|
|
}} |
|
|
|
/> |
|
|
|
<Button |
|
|
|
size="large" |
|
|
|
onClick={() => { |
|
|
|
setCodSending(true) |
|
|
|
const random = Math.floor(Math.random() * Math.pow(10, 4)); |
|
|
|
const sig = Hex.stringify(SHA1(phone + random)); |
|
|
|
setInputChanged(false) |
|
|
|
Request.post(ApiTable.validatePhone, { |
|
|
|
phone: phone, |
|
|
|
r: random, |
|
|
|
sig: sig |
|
|
|
}).then(res => { |
|
|
|
|
|
|
|
}, err => { |
|
|
|
let message = err.response.body?.message |
|
|
|
console.log(message); |
|
|
|
dispatch({ |
|
|
|
type: LOGIN_ERROR, |
|
|
|
payload: { error: message || '获取验证码失败' } |
|
|
|
}); |
|
|
|
setCodSending(false) |
|
|
|
}); |
|
|
|
}} |
|
|
|
loading={codSending} |
|
|
|
style={{ width: 112 }} |
|
|
|
> |
|
|
|
{codSending ? codCountDown + ' s' : '发送验证码'} |
|
|
|
</Button> |
|
|
|
</Input.Group> |
|
|
|
</FormItem> |
|
|
|
</Form> |
|
|
|
</Tabs.TabPane> |
|
|
|
</Tabs> |
|
|
|
|
|
|
|
<Row style={{ |
|
|
|
textAlign: 'left' |
|
|
|
}}> |
|
|
|
{ |
|
|
|
inputChanged || !error ? |
|
|
|
<span style={{ |
|
|
|
visibility: 'hidden' |
|
|
|
}}>-</span> : |
|
|
|
<span> |
|
|
|
<ExclamationCircleOutlined style={{ color: 'red' }} />{error} |
|
|
|
</span> |
|
|
|
} |
|
|
|
</Row> |
|
|
|
<Button |
|
|
|
shape="round" |
|
|
|
size="large" |
|
|
|
style={{ width: '100%' }} |
|
|
|
loading={isRequesting} |
|
|
|
onClick={doLogin} |
|
|
|
> |
|
|
|
登录 |
|
|
|
</Button> |
|
|
|
</div> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</div> |
|
|
|
</div > |
|
|
|
); |
|
|
|
|
|
|
|
</div> |
|
|
|
</div > |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
|
const { auth } = state; |
|
|
|
console.log(auth.error); |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
error: auth.error, |
|
|
|
isRequesting: auth.isRequesting |
|
|
|
} |
|
|
|
const { auth } = state; |
|
|
|
console.log(auth.error); |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
error: auth.error, |
|
|
|
isRequesting: auth.isRequesting |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
export default connect(mapStateToProps)(Login); |
