import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Input, Button, Checkbox } from 'antd'
|
import { QrcodeOutlined, UserOutlined, LockOutlined } from '@ant-design/icons'
|
|
import asyncElementComponent from '@/utils/asyncComponent'
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const QrCode = asyncElementComponent(() => import('@/components/qrcode'))
|
|
class LoginTabForm extends Component {
|
static propTpyes = {
|
menuId: PropTypes.string,
|
loginWays: PropTypes.array,
|
wrap: PropTypes.array,
|
}
|
|
state = {
|
activeWay: null,
|
loginWays: [],
|
scanWay: null
|
}
|
|
UNSAFE_componentWillMount () {
|
const { loginWays, wrap } = this.props
|
|
let _loginWays = []
|
let scanWay = null
|
loginWays.forEach(item => {
|
if (!wrap.loginWays || wrap.loginWays.includes(item.type)) {
|
if (item.type === 'sms_vcode') {
|
item.label = '短信登录'
|
} else if (item.type === 'uname_pwd') {
|
item.label = '账号登录'
|
} else if (item.type === 'app_scan') {
|
scanWay = item
|
}
|
_loginWays.push(item)
|
}
|
})
|
|
this.setState({
|
loginWays: _loginWays,
|
activeWay: _loginWays[0],
|
scanWay
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
const { wrap } = this.props
|
|
if (!is(fromJS(wrap), fromJS(nextProps.wrap))) {
|
let _loginWays = []
|
let scanWay = null
|
nextProps.loginWays.forEach(item => {
|
if (!nextProps.wrap.loginWays || nextProps.wrap.loginWays.includes(item.type)) {
|
if (item.type === 'sms_vcode') {
|
item.label = '短信登录'
|
} else if (item.type === 'uname_pwd') {
|
item.label = '账号登录'
|
} else if (item.type === 'app_scan') {
|
scanWay = item
|
}
|
_loginWays.push(item)
|
}
|
})
|
|
this.setState({
|
loginWays: _loginWays,
|
activeWay: _loginWays[0],
|
scanWay
|
})
|
}
|
}
|
|
onChangeTab = (activeWay) => {
|
this.setState({activeWay})
|
}
|
|
changeMenu = () => {
|
const { wrap, menuId } = this.props
|
|
MKEmitter.emit('changeEditMenu', {
|
MenuID: wrap.link === 'linkmenu' ? wrap.linkmenu : menuId,
|
copyMenuId: '',
|
MenuNo: '',
|
MenuName: ''
|
})
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
render() {
|
const { activeWay, loginWays, scanWay } = this.state
|
|
return (
|
<Form className="login-edit-form">
|
<div className="login-way-title">{activeWay.label}</div>
|
{scanWay && activeWay.type !== 'app_scan' ? <div className="scan-icon" onClick={() => this.onChangeTab(scanWay)}><QrcodeOutlined /></div> : null}
|
{activeWay.type === 'uname_pwd' ? <div className={'form-item-wrap ' + (activeWay.shortcut === 'none' ? 'no-short' : '')}>
|
<Form.Item>
|
<Input
|
prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
|
placeholder="用户名"
|
autoComplete="off"
|
/>
|
</Form.Item>
|
<Form.Item>
|
<Input.Password placeholder="密码" prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} />
|
</Form.Item>
|
{!activeWay.shortcut || activeWay.shortcut === 'remember' ? <Form.Item className="minline">
|
<Checkbox>记住密码</Checkbox>
|
</Form.Item> : null}
|
{activeWay.shortcut === 'autologon' ? <Form.Item className="minline">
|
<Checkbox>自动登录</Checkbox>
|
</Form.Item> : null}
|
<Form.Item className="btn-login">
|
<Button type="primary" onDoubleClick={() => this.changeMenu()} className="login-form-button">
|
登录
|
</Button>
|
</Form.Item>
|
</div> : null}
|
{activeWay.type === 'sms_vcode' ? <div className="form-item-wrap">
|
<Form.Item>
|
<Input
|
placeholder="手机号"
|
autoComplete="off"
|
/>
|
</Form.Item>
|
<Form.Item style={{marginBottom: '35px'}}>
|
<Input
|
addonAfter={
|
<Button type="link" className="vercode" size="small">
|
获取验证码
|
</Button>
|
}
|
placeholder="验证码"
|
autoComplete="off"
|
/>
|
</Form.Item>
|
<Form.Item className="btn-login">
|
<Button type="primary" onDoubleClick={() => this.changeMenu()} className="login-form-button">
|
登录
|
</Button>
|
</Form.Item>
|
</div> : null}
|
{activeWay.type === 'app_scan' ? <div className="form-scan-wrap">
|
<div className="qr-wrap">
|
<QrCode card={{qrWidth: 500, color: '#000000'}} value={'minkesoft'}/>
|
</div>
|
请使用客户端扫一扫登录
|
</div> : null}
|
<div className={'login-ways ' + (activeWay.type === 'app_scan' ? 'center' : '')}>
|
{loginWays.map(item => {
|
if (item.type === 'app_scan' || activeWay.type === item.type) return null
|
return (<span key={item.type} onClick={() => this.onChangeTab(item)}>{item.label}</span>)
|
})}
|
</div>
|
</Form>
|
)
|
}
|
}
|
|
export default LoginTabForm
|
