import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Input, Button, notification, Checkbox } from 'antd'
|
import { UserOutlined, LockOutlined, MobileOutlined, WechatOutlined } from '@ant-design/icons'
|
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
class LoginTabForm extends Component {
|
static propTpyes = {
|
wrap: PropTypes.object,
|
changeway: PropTypes.func
|
}
|
|
state = {
|
activeWay: null,
|
appType: sessionStorage.getItem('appType'),
|
signWays: []
|
}
|
|
UNSAFE_componentWillMount () {
|
const { wrap } = this.props
|
|
let signWays = []
|
wrap.signWays.forEach(way => {
|
if (way === 'sms_vcode') {
|
signWays.push({
|
type: 'sms_vcode',
|
label: '手机号注册',
|
icon: <MobileOutlined />,
|
tempId: wrap.signTempId,
|
sort: 2
|
})
|
} else if (way === 'uname_pwd') {
|
signWays.push({
|
type: 'uname_pwd',
|
label: '账号注册',
|
icon: <LockOutlined />,
|
sort: 1
|
})
|
} else if (way === 'weixin') {
|
signWays.push({
|
type: 'weixin',
|
label: '微信登录',
|
icon: <WechatOutlined />,
|
sort: 3
|
})
|
}
|
})
|
|
signWays.sort((a, b) => a.sort - b.sort)
|
|
this.setState({
|
signWays: signWays,
|
activeWay: signWays[0]
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
const { wrap } = this.props
|
|
if (!is(fromJS(wrap), fromJS(nextProps.wrap))) {
|
let signWays = []
|
nextProps.wrap.signWays.forEach(way => {
|
if (way === 'sms_vcode') {
|
signWays.push({
|
type: 'sms_vcode',
|
label: '手机号注册',
|
tempId: nextProps.wrap.signTempId,
|
sort: 2
|
})
|
} else if (way === 'uname_pwd') {
|
signWays.push({
|
type: 'uname_pwd',
|
label: '账号注册',
|
sort: 1
|
})
|
} else if (way === 'weixin') {
|
signWays.push({
|
type: 'weixin',
|
label: '微信登录',
|
sort: 3
|
})
|
}
|
})
|
|
signWays.sort((a, b) => a.sort - b.sort)
|
|
this.setState({
|
signWays: signWays,
|
activeWay: signWays[0]
|
})
|
}
|
}
|
|
onChangeTab = (activeWay) => {
|
if (activeWay.type === 'weixin') return
|
|
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, signWays, appType } = this.state
|
|
return (
|
<Form className="login-edit-form">
|
{appType === 'pc' ? <div className="login-way-title">{activeWay.label}</div> : null}
|
{activeWay.type === 'uname_pwd' ? <div className="form-item-wrap">
|
<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>
|
{wrap.groups ? <div className="protocol-wrap">
|
<Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span><span className="protocol" key={i}>《{item.label}》</span>{wrap.groups.length > i + 1 ? (wrap.groups.length > i + 2 ? '、' : '和') : null}</span>))}
|
</div> : null}
|
<Form.Item className="btn-login">
|
<Button type="primary" onDoubleClick={() => this.changeMenu()} className="sign-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: wrap.groups ? '15px' : '35px'}}>
|
<Input
|
addonAfter={
|
<Button type="link" className="vercode" size="small">
|
获取验证码
|
</Button>
|
}
|
placeholder="验证码"
|
autoComplete="off"
|
/>
|
</Form.Item>
|
{wrap.groups ? <div className="protocol-wrap">
|
<Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span><span className="protocol" key={i}>《{item.label}》</span>{wrap.groups.length > i + 1 ? (wrap.groups.length > i + 2 ? '、' : '和') : null}</span>))}
|
</div> : null}
|
<Form.Item className="btn-login">
|
<Button type="primary" onDoubleClick={() => this.changeMenu()} className="sign-form-button">
|
注册
|
</Button>
|
</Form.Item>
|
</div> : null}
|
{activeWay.type === 'weixin' ? <div className="form-item-wrap">
|
<Form.Item className="btn-login" style={{marginBottom: wrap.groups ? '0px' : '15px'}}>
|
<Button type="primary" onDoubleClick={() => this.changeMenu()} className="sign-form-button">
|
微信一键登录
|
</Button>
|
</Form.Item>
|
{wrap.groups ? <div className="protocol-wrap">
|
<Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span><span className="protocol" key={i}>《{item.label}》</span>{wrap.groups.length > i + 1 ? (wrap.groups.length > i + 2 ? '、' : '和') : null}</span>))}
|
</div> : null}
|
</div> : null}
|
{wrap.classify !== 'signin' ? <span className="mk-jump-way" onClick={() => this.props.changeway()}>已有账号，去登陆？</span> : null}
|
{appType === 'mob' && signWays.length > 1 ? <div className="sign-ways">
|
<div className="title">其他注册方式</div>
|
<div className="content">
|
{signWays.map((item, i) => {
|
if (activeWay.type === item.type) return null
|
return (<div key={i} className="item" onClick={() => this.onChangeTab(item)}>{item.icon}<span className="name">{item.label}</span></div>)
|
})}
|
</div>
|
</div> : null}
|
{appType === 'pc' && signWays.length > 1 ? <div className="login-ways">
|
{signWays.map(item => {
|
if (activeWay.type === item.type) return null
|
return (<span key={item.type} onClick={() => this.onChangeTab(item)}>{item.label}</span>)
|
})}
|
</div> : null}
|
</Form>
|
)
|
}
|
}
|
|
export default LoginTabForm
|
