import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Input, Button, Checkbox, notification } 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 = {
|
wrap: PropTypes.object,
|
changeway: PropTypes.func
|
}
|
|
state = {
|
activeWay: null,
|
loginWays: [],
|
scanWay: null
|
}
|
|
UNSAFE_componentWillMount () {
|
const { wrap } = this.props
|
|
let scanWay = null
|
|
let loginWays = []
|
wrap.loginWays.forEach(way => {
|
if (way === 'sms_vcode') {
|
loginWays.push({
|
type: 'sms_vcode',
|
label: '短信登录',
|
tempId: wrap.tempId,
|
sort: 2
|
})
|
} else if (way === 'uname_pwd') {
|
loginWays.push({
|
type: 'uname_pwd',
|
label: '账号登录',
|
shortcut: wrap.shortcut,
|
sort: 1
|
})
|
} else if (way === 'app_scan') {
|
scanWay = {
|
type: 'app_scan',
|
label: '扫码登录',
|
sort: 3
|
}
|
loginWays.push(scanWay)
|
}
|
})
|
|
loginWays.sort((a, b) => a.sort - b.sort)
|
|
this.setState({
|
loginWays: loginWays,
|
activeWay: loginWays[0],
|
scanWay
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
const { wrap } = this.props
|
|
if (!is(fromJS(wrap), fromJS(nextProps.wrap))) {
|
let scanWay = null
|
let loginWays = []
|
nextProps.wrap.loginWays.forEach(way => {
|
if (way === 'sms_vcode') {
|
loginWays.push({
|
type: 'sms_vcode',
|
label: '短信登录',
|
tempId: wrap.tempId,
|
sort: 2
|
})
|
} else if (way === 'uname_pwd') {
|
loginWays.push({
|
type: 'uname_pwd',
|
label: '账号登录',
|
shortcut: wrap.shortcut,
|
sort: 1
|
})
|
} else if (way === 'app_scan') {
|
scanWay = {
|
type: 'app_scan',
|
label: '扫码登录',
|
sort: 3
|
}
|
loginWays.push(scanWay)
|
}
|
})
|
loginWays.sort((a, b) => a.sort - b.sort)
|
|
this.setState({
|
loginWays: loginWays,
|
activeWay: loginWays[0],
|
scanWay
|
})
|
}
|
}
|
|
onChangeTab = (activeWay) => {
|
this.setState({activeWay})
|
}
|
|
changeMenu = () => {
|
const { wrap } = this.props
|
|
if (!wrap.linkmenu) {
|
notification.warning({
|
top: 92,
|
message: '请设置关联菜单！',
|
duration: 5
|
})
|
return
|
}
|
|
MKEmitter.emit('changeEditMenu', {
|
MenuID: wrap.linkmenu,
|
copyMenuId: '',
|
MenuNo: '',
|
MenuName: ''
|
})
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
render() {
|
const { wrap } = this.props
|
const { activeWay, loginWays, scanWay } = this.state
|
|
let style = {}
|
if (wrap.borderRadius) {
|
style.borderRadius = wrap.borderRadius
|
}
|
|
return (
|
<Form className="login-edit-form">
|
{wrap.topTip !== 'hidden' ? <div className="login-way-title">{activeWay.label}</div> : null}
|
{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" style={style} 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" style={style} 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}
|
{wrap.classify !== 'login' ? <span className="mk-jump-way" onClick={() => this.props.changeway()}>没有账号，去注册？</span> : 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
|
