2020-07-21

king

2020-07-21 fe6e87bacbb4be97260427346321edeeee26258e

 src/components/login/login-1/index.jsx

@@ -1,12 +1,20 @@
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 { is, fromJS } from 'immutable'
import { InputItem, Icon, 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 = {
@@ -18,7 +26,7 @@
      {value: 'zh-CN', label: '简体中文'},
      {value: 'en-US', label: 'English'}
    ],
    lang: 'zh-CN',
    lang: {value: 'zh-CN', label: '简体中文'},
    rember: true
  }

@@ -26,9 +34,9 @@

  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }
  // shouldComponentUpdate (nextProps, nextState) {
  //   return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  // }

  onChange = (e) => {
    const { rember } = this.state
@@ -40,9 +48,45 @@
  }

  onChangeLang = (value) => {
    this.setState({
      lang: value
    const { langs } = this.state
    let lang = null

    langs.forEach(cell => {
      if (cell.value === value[0]) {
        lang = cell
      }
    })
    
    this.setState({
      lang: lang
    })
  }

  execLogin = () => {
    const { getFieldProps } = this.props.form
    let userName = getFieldProps('userName')
    let password = getFieldProps('password')

    if (!userName.value) {
      this.UserName.focus()
    } else if (!password.value) {
      this.Password.focus()
    } else {
      Api.getusermsg(userName.value, password.value).then((res) => {
        if (res.status) {
          sessionStorage.setItem('UserID', res.UserID)
          sessionStorage.setItem('LoginUID', res.LoginUID)
        } else {
          Toast.fail(res.message, 3)
        }
      })
    }
  }

  execEnter = (e) => {
    if (e.nativeEvent.keyCode === 13) {
      this.execLogin()
    }
  }

  render () {
@@ -65,7 +109,8 @@
            {...getFieldProps('userName', {
              initialValue: '',
            })}
            disabled={true}
            ref={el => this.UserName = el}
            onKeyPress={this.execEnter}
          >
            <Icon type="check-circle-o" />
          </InputItem>
@@ -76,7 +121,8 @@
              initialValue: '',
            })}
            type={'password'}
            disabled={true}
            ref={el => this.Password = el}
            onKeyPress={this.execEnter}
          >
            <Icon type="check-circle" />
          </InputItem>
@@ -84,17 +130,16 @@
            <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 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"
            onDoubleClick={() => this.props.doubleClickconfig(config.login)}
            style={config.login.style}
            onClick={this.editLogin}
            onClick={this.execLogin}
          >
            {config.login.content}
          </Button>