import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Icon, Input, Button, Checkbox, Tabs } from 'antd'
|
|
import './index.scss'
|
|
const { TabPane } = Tabs
|
|
class LoginTabForm extends Component {
|
static propTpyes = {
|
dict: PropTypes.object,
|
loginWays: PropTypes.array,
|
}
|
|
state = {
|
activeKey: 'uname_pwd',
|
username: '',
|
password: '',
|
loginWays: [],
|
smsId: '',
|
verdisabled: false
|
}
|
|
UNSAFE_componentWillMount () {
|
const { loginWays } = this.props
|
|
let smsId = ''
|
let _loginWays = []
|
loginWays.forEach(item => {
|
if (item.type === 'sms_vcode') {
|
smsId = item.smsId
|
_loginWays.push(item)
|
} else if (item.type === 'uname_pwd') {
|
_loginWays.push(item)
|
}
|
})
|
|
this.setState({
|
smsId: smsId,
|
loginWays: _loginWays,
|
activeKey: _loginWays[0].type,
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (!is(fromJS(this.props.loginWays), fromJS(nextProps.loginWays))) {
|
let smsId = ''
|
let _loginWays = []
|
nextProps.loginWays.forEach(item => {
|
if (item.type === 'sms_vcode') {
|
smsId = item.smsId
|
_loginWays.push(item)
|
} else if (item.type === 'uname_pwd') {
|
_loginWays.push(item)
|
}
|
})
|
|
this.setState({
|
smsId: smsId,
|
loginWays: _loginWays,
|
activeKey: _loginWays[0].type
|
})
|
}
|
}
|
|
onChangeTab = (activeKey) => {
|
this.setState({activeKey})
|
}
|
|
/**
|
* @description 组件销毁,清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
render() {
|
const { activeKey, verdisabled, loginWays } = this.state
|
|
return (
|
<Form className="login-edit-form">
|
<Tabs type="card" activeKey={activeKey} onChange={this.onChangeTab}>
|
{loginWays.map(item => (<TabPane tab={item.label} key={item.type}></TabPane>))}
|
</Tabs>
|
<div className="form-item-wrap">
|
{activeKey === 'uname_pwd' ? <Form.Item>
|
<Input
|
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
|
placeholder="用户名"
|
autoComplete="off"
|
/>
|
</Form.Item> : null}
|
{activeKey === 'uname_pwd' ? <Form.Item>
|
<Input.Password placeholder="密码" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} />
|
</Form.Item> : null}
|
{activeKey === 'sms_vcode' ? <Form.Item>
|
<Input
|
placeholder="手机号"
|
autoComplete="off"
|
/>
|
</Form.Item> : null}
|
{activeKey === 'sms_vcode' ? <Form.Item>
|
<Input
|
addonAfter={
|
<Button type="link" className="vercode" size="small" disabled={verdisabled}>
|
获取验证码
|
</Button>
|
}
|
placeholder="验证码"
|
autoComplete="off"
|
/>
|
</Form.Item> : null}
|
{activeKey === 'uname_pwd' ? <Form.Item className="minline">
|
<Checkbox>记住密码</Checkbox>
|
</Form.Item> : null}
|
{['uname_pwd', 'sms_vcode'].includes(activeKey) ? <Form.Item className="btn-login">
|
<Button type="primary" htmlType="submit" className="login-form-button">
|
登录
|
</Button>
|
</Form.Item> : null}
|
</div>
|
</Form>
|
)
|
}
|
}
|
|
export default LoginTabForm
|