import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { InputItem, Icon, Checkbox, List, Button, Picker } from 'antd-mobile'
|
import { createForm } from 'rc-form'
|
|
import './index.scss'
|
|
const CheckboxItem = Checkbox.CheckboxItem
|
|
class MobLogin extends Component {
|
static propTpyes = {
|
config: PropTypes.object
|
}
|
|
state = {
|
langs: [
|
{value: 'zh-CN', label: '简体中文'},
|
{value: 'en-US', label: 'English'}
|
],
|
lang: 'zh-CN',
|
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) => {
|
this.setState({
|
lang: value
|
})
|
}
|
|
render () {
|
const { config } = this.props
|
const { getFieldProps } = this.props.form
|
const { rember, langs, lang } = 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: '',
|
})}
|
disabled={true}
|
>
|
<Icon type="check-circle-o" />
|
</InputItem>
|
<InputItem
|
placeholder="Password"
|
prefixListCls="mk-login-item am-list"
|
{...getFieldProps('password', {
|
initialValue: '',
|
})}
|
type={'password'}
|
disabled={true}
|
>
|
<Icon type="check-circle" />
|
</InputItem>
|
<div className="other-setting">
|
<CheckboxItem checked={rember} onChange={this.onChange}>
|
<span onClick={this.onChange}>记住密码</span>
|
</CheckboxItem>
|
<Picker data={langs} value={lang} cols={1} onChange={this.onChangeLang} className="forss">
|
<List.Item>{lang}</List.Item>
|
</Picker>
|
<div className="clear-both"></div>
|
</div>
|
<Button
|
type="primary"
|
className="login"
|
onDoubleClick={() => this.props.doubleClickconfig(config.login)}
|
style={config.login.style}
|
onClick={this.editLogin}
|
>
|
{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)
|
