2020-06-08

king

2020-06-08 46fa548514ba2a438908586e2b54ed742777e9b0

 src/mob/login/index.jsx

@@ -1,11 +1,25 @@
import React, {Component} from 'react'
// import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
// import { Flex, WhiteSpace, Tabs } from 'antd-mobile'
// import { is, fromJS } from 'immutable'
import { InputItem, Icon, Checkbox, Picker, List, Button } from 'antd-mobile'
import { createForm } from 'rc-form'

import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import mklogo from '@/assets/mobimg/mklogo.png'
import './index.scss'

const CheckboxItem = Checkbox.CheckboxItem
const langs = [
  {
    label: 'zh-CN',
    value: '中文简体',
  },
  {
    label: 'en-US',
    value: 'English',
  }
]

class MobLogin extends Component {
  // static propTpyes = {
@@ -13,20 +27,73 @@
  // }
  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    lang: ['zh-CN'],
    rember: true,
    param: {
      background: {color: '#000000', image: ''},
      logo: {width: ''}
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  onChange = () => {
    const { rember } = this.state

    this.setState({
      rember: !rember
    })
  }

  onChangeLang = (value) => {
    this.setState({
      lang: value
    })
  }

  render () {
    const { getFieldProps } = this.props.form
    const { lang, rember } = this.state

    return (
      <div className="mob-login">
        
        <div className="logo" style={{marginTop: `calc(17vh - 10px)`}}>
          <img src={mklogo} alt=""/>
        </div>
        <div className="plat-name">明科商业智能开放平台</div>
        <InputItem
          placeholder="UserName"
          prefixListCls="mk-login-item am-list"
          {...getFieldProps('userName', {
            initialValue: '8888',
          })}
        >
          <Icon type="check-circle-o" />
        </InputItem>
        <InputItem
          placeholder="Password"
          prefixListCls="mk-login-item am-list"
          {...getFieldProps('password', {
            initialValue: '8888',
          })}
          type={'password'}
        >
          <Icon type="check-circle-o" />
        </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">登录</Button>
        <div className="company-msg">
          <p>Copyright©2017  所有相关版权归  北京明科普华信息技术有限公司</p>
        </div>
      </div>
    )
  }
}

export default MobLogin
export default createForm()(MobLogin)