import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
// import { is, fromJS } from 'immutable'
|
import { InputItem, Checkbox, Button, Picker, Toast } from 'antd-mobile'
|
import { createForm } from 'rc-form'
|
|
// import Api from '@/api'
|
import './index.scss'
|
|
const CheckboxItem = Checkbox.CheckboxItem
|
const CustomChildren = props => (
|
<div onClick={props.onClick} style={{display: 'inline-block', width: '50%', textAlign: 'right'}}>
|
<div className="test" style={{ display: 'flex', height: '45px', lineHeight: '45px' }}>
|
<div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{props.children}</div>
|
</div>
|
</div>
|
)
|
|
class MobLogin extends Component {
|
static propTpyes = {
|
config: PropTypes.object
|
}
|
|
state = {
|
langs: [
|
{value: 'zh-CN', label: '简体中文'},
|
{value: 'en-US', label: 'English'}
|
],
|
lang: {value: 'zh-CN', label: '简体中文'},
|
loading: false,
|
rember: true
|
}
|
|
UNSAFE_componentWillMount () {
|
|
}
|
|
// shouldComponentUpdate (nextProps, nextState) {
|
// return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
// }
|
|
onChange = (e) => {
|
const { rember } = this.state
|
e.stopPropagation()
|
|
this.setState({
|
rember: !rember
|
})
|
}
|
|
onChangeLang = (value) => {
|
const { langs } = this.state
|
let lang = null
|
|
langs.forEach(cell => {
|
if (cell.value === value[0]) {
|
lang = cell
|
}
|
})
|
Toast.success('切换成功', 3)
|
|
this.setState({
|
lang: lang
|
})
|
}
|
|
execLogin = () => {
|
const { config } = this.props
|
// const { getFieldProps } = this.props.form
|
// const { loading } = this.state
|
|
// if (loading) return
|
|
// let userName = getFieldProps('userName')
|
// let password = getFieldProps('password')
|
|
// if (!userName.value) {
|
// this.UserName.focus()
|
// } else if (!password.value) {
|
// this.Password.focus()
|
// } else {
|
// this.setState({loading: true})
|
// Api.getusermsg(userName.value, password.value).then((res) => {
|
// if (res.status) {
|
// sessionStorage.setItem('UserID', res.UserID)
|
// sessionStorage.setItem('LoginUID', res.LoginUID)
|
// this.setState({loading: false})
|
// } else {
|
// this.setState({loading: false})
|
// Toast.fail(res.message, 3)
|
// }
|
// })
|
this.props.history.replace({pathname: `/loading/${config.NextMenuID}`})
|
// }
|
}
|
|
execEnter = (e) => {
|
if (e.nativeEvent.keyCode === 13) {
|
this.execLogin()
|
}
|
}
|
|
render () {
|
const { config } = this.props
|
const { getFieldProps } = this.props.form
|
const { rember, langs, lang, loading } = this.state
|
|
return (
|
<div className="mob-login-1" style={config.box.style}>
|
<div className="mob-login-body">
|
{config.logo ? <div className="logo" style={config.logo.style}>
|
<img src={config.logo.content} alt=""/>
|
</div> : null}
|
{config.title ? <div className="plat-name" style={config.title.style}>
|
{config.title.content}
|
</div> : null}
|
<InputItem
|
placeholder="UserName"
|
prefixListCls="mk-login-item am-list"
|
{...getFieldProps('userName', {
|
initialValue: '',
|
})}
|
ref={el => this.UserName = el}
|
onKeyPress={this.execEnter}
|
>
|
<i className="minke-user" />
|
</InputItem>
|
<InputItem
|
placeholder="Password"
|
prefixListCls="mk-login-item am-list"
|
{...getFieldProps('password', {
|
initialValue: '',
|
})}
|
type={'password'}
|
ref={el => this.Password = el}
|
onKeyPress={this.execEnter}
|
>
|
<i className="minke-lock" />
|
</InputItem>
|
<div className="other-setting">
|
<CheckboxItem checked={rember} onChange={this.onChange}>
|
<span onClick={this.onChange}>记住密码</span>
|
</CheckboxItem>
|
<Picker data={langs} cols={1} onChange={this.onChangeLang} className="forss">
|
<CustomChildren>{lang.label}</CustomChildren>
|
</Picker>
|
<div className="clear-both"></div>
|
</div>
|
<Button
|
type="primary"
|
className="login"
|
style={config.login.style}
|
loading={loading}
|
onClick={this.execLogin}
|
>
|
{config.login.content}
|
</Button>
|
</div>
|
{config.copyright ? <div className="company-msg" style={config.copyright.style}>
|
{config.copyright.content}
|
</div> : null}
|
</div>
|
)
|
}
|
}
|
|
export default createForm()(MobLogin)
|
