| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Form, Input, Button, Checkbox } from 'antd' |
| | | import { Form, Input, Button, Checkbox, notification } from 'antd' |
| | | import { QrcodeOutlined, UserOutlined, LockOutlined } from '@ant-design/icons' |
| | | |
| | | import asyncElementComponent from '@/utils/asyncComponent' |
| | |
| | | |
| | | class LoginTabForm extends Component { |
| | | static propTpyes = { |
| | | menuId: PropTypes.string, |
| | | loginWays: PropTypes.array, |
| | | wrap: PropTypes.array, |
| | | wrap: PropTypes.object, |
| | | changeway: PropTypes.func |
| | | } |
| | | |
| | | state = { |
| | |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { loginWays, wrap } = this.props |
| | | const { 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 |
| | | |
| | | 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(item) |
| | | loginWays.push(scanWay) |
| | | } |
| | | }) |
| | | |
| | | loginWays.sort((a, b) => a.sort - b.sort) |
| | | |
| | | this.setState({ |
| | | loginWays: _loginWays, |
| | | activeWay: _loginWays[0], |
| | | loginWays: loginWays, |
| | | activeWay: loginWays[0], |
| | | scanWay |
| | | }) |
| | | } |
| | |
| | | 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 |
| | | 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(item) |
| | | loginWays.push(scanWay) |
| | | } |
| | | }) |
| | | loginWays.sort((a, b) => a.sort - b.sort) |
| | | |
| | | this.setState({ |
| | | loginWays: _loginWays, |
| | | activeWay: _loginWays[0], |
| | | loginWays: loginWays, |
| | | activeWay: loginWays[0], |
| | | scanWay |
| | | }) |
| | | } |
| | |
| | | } |
| | | |
| | | changeMenu = () => { |
| | | const { wrap, menuId } = this.props |
| | | const { wrap } = this.props |
| | | |
| | | if (!wrap.linkmenu) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '请设置关联菜单!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | MKEmitter.emit('changeEditMenu', { |
| | | MenuID: wrap.link === 'linkmenu' ? wrap.linkmenu : menuId, |
| | | MenuID: wrap.linkmenu, |
| | | copyMenuId: '', |
| | | MenuNo: '', |
| | | MenuName: '' |
| | |
| | | } |
| | | |
| | | 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"> |
| | | <div className="login-way-title">{activeWay.label}</div> |
| | | {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="用户名" |
| | | placeholder="用户名/手机号/邮箱" |
| | | autoComplete="off" |
| | | /> |
| | | </Form.Item> |
| | | <Form.Item> |
| | | <Input.Password placeholder="密码" prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} /> |
| | | <Input.Password placeholder="密码" visibilityToggle={wrap.vispwd !== 'false'} prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} /> |
| | | </Form.Item> |
| | | {!activeWay.shortcut || activeWay.shortcut === 'remember' ? <Form.Item className="minline"> |
| | | <Checkbox>记住密码</Checkbox> |
| | |
| | | <Checkbox>自动登录</Checkbox> |
| | | </Form.Item> : null} |
| | | <Form.Item className="btn-login"> |
| | | <Button type="primary" onDoubleClick={() => this.changeMenu()} className="login-form-button"> |
| | | <Button type="primary" style={style} onDoubleClick={() => this.changeMenu()} className="login-form-button"> |
| | | 登录 |
| | | </Button> |
| | | </Form.Item> |
| | |
| | | /> |
| | | </Form.Item> |
| | | <Form.Item className="btn-login"> |
| | | <Button type="primary" onDoubleClick={() => this.changeMenu()} className="login-form-button"> |
| | | <Button type="primary" style={style} onDoubleClick={() => this.changeMenu()} className="login-form-button"> |
| | | 登录 |
| | | </Button> |
| | | </Form.Item> |
| | |
| | | </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 |