2022-04-26

king

2022-04-26 5046d0d13dc6a8563b8e54e31913bc44cfa1072f

 src/views/login/loginform.jsx

@@ -1,33 +1,102 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Icon, Input, Button, Checkbox, Select, Modal } from 'antd'
import { is, fromJS } from 'immutable'
import { Form, Icon, Input, Button, Modal, message } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import md5 from 'md5'
import moment from 'moment'

import Api from '@/api'
import options from '@/store/options.js'
import './index.scss'

const { warning } = Modal
let LoginVerCodeTimer = null

class MainSearch extends Component {
class LoginTabForm extends Component {
  static propTpyes = {
    isDisabled: PropTypes.bool,
    changelang: PropTypes.func,
    handleSubmit: PropTypes.func,
    loaded: PropTypes.func,
    dict: PropTypes.object,
    auth: PropTypes.bool,
    touristLogin: PropTypes.bool,
    lang: PropTypes.string,
    langList: PropTypes.array,
    loginWays: PropTypes.array,
    platName: PropTypes.string
  }

  state = {
    activeKey: 'uname_pwd',
    username: '',
    password: ''
    password: '',
    remember: true,
    delay: null,
    loginWays: [],
    smsId: '',
    verdisabled: false
  }

  UNSAFE_componentWillMount () {
    const { loginWays } = this.props
    let remember = true
    let _url = window.location.href.split('#')[0]
    
    if (localStorage.getItem(_url + 'remember') === 'false') {
      remember = false
    }
    if (!window.GLOB.keepKey) {
      remember = false
    }

    let smsId = ''
    let _loginWays = []
    loginWays.forEach(item => {
      if (item.type === 'sms_vcode') {
        smsId = item.smsId
        _loginWays.push(item)
      } else if (item.type === 'uname_pwd') {
        _loginWays.push(item)
      }
    })

    this.setState({
      smsId: smsId,
      loginWays: _loginWays,
      activeKey: _loginWays[0].type,
      remember
    })
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.loginWays), fromJS(nextProps.loginWays))) {
      let smsId = ''
      let _loginWays = []
      nextProps.loginWays.forEach(item => {
        if (item.type === 'sms_vcode') {
          smsId = item.smsId
          _loginWays.push(item)
        } else if (item.type === 'uname_pwd') {
          _loginWays.push(item)
        }
      })

      this.setState({
        smsId: smsId,
        loginWays: _loginWays,
        activeKey: _loginWays[0].type
      })
    }
  }

  handleConfirm = () => {
    const { activeKey } = this.state
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          resolve(values)
          resolve({type: activeKey, ...values})
        } else {
          reject(err)
        }
@@ -40,6 +109,7 @@
  }

  handleSubmit = e => {
    const { activeKey } = this.state
    // 登录参数检验
    e.preventDefault()
    if (!this.props.auth) {
@@ -53,18 +123,34 @@
      return
    }

    if (!this.props.form.getFieldValue('username')) {
      const input = document.getElementById('username')
      if (input) {
        input.focus()
    if (activeKey === 'uname_pwd') {
      if (!this.props.form.getFieldValue('username')) {
        const input = document.getElementById('username')
        if (input) {
          input.focus()
        }
      } else if (!this.props.form.getFieldValue('password')) {
        const input = document.getElementById('password')
        if (input) {
          input.focus()
        }
      } else {
        this.props.handleSubmit()
      }
    } else if (!this.props.form.getFieldValue('password')) {
      const input = document.getElementById('password')
      if (input) {
        input.focus()
    } else if (activeKey === 'sms_vcode') {
      if (!this.props.form.getFieldValue('phone')) {
        const input = document.getElementById('phone')
        if (input) {
          input.focus()
        }
      } else if (!this.props.form.getFieldValue('vercode')) {
        const input = document.getElementById('vercode')
        if (input) {
          input.focus()
        }
      } else {
        this.props.handleSubmit()
      }
    } else {
      this.props.handleSubmit()
    }
  }

@@ -97,65 +183,203 @@
        input.focus()
      }
    }
    this.props.loaded()
  }

  onChangeTab = (activeKey) => {
    this.setState({activeKey})
  }

  getvercode = () => {
    const { smsId } = this.state
    let _phone = this.props.form.getFieldValue('phone')
    if (!_phone) {
      message.warning('请输入手机号！')
      return
    } else if (!/^1[3456789]\d{9}$/.test(_phone)) {
      message.warning('手机号格式错误，请重填！')
      return
    } else if (!this.props.touristLogin) {
      message.warning('未获取验证码设置，请稍后或刷新重试！')
      return
    }

    let _param = {
      func: 'mes_sms_send_code_sso',
      send_type: 'login',
      mob: _phone,
      ID: smsId
    }
    _param.LText = 'minke'
    _param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
    _param.secretkey = md5(`${_param.LText}mingke${_param.timestamp}`)
    
    _param.userid = sessionStorage.getItem('visitorUserID') || ''
    _param.LoginUID = sessionStorage.getItem('visitorLoginUID') || ''

    Api.getSystemConfig(_param).then(res => {
      if (!res.status || !res.n_id) {
        message.warning(res.message || '验证码获取失败！')
        return
      }

      let param = {
        func: 'MSN_sms_send_code',
        send_type: 'login',
        mob: _phone,
        timestamp: moment().format('YYYY-MM-DD HH:mm:ss'),
        ID: smsId,
        n_id: res.n_id
      }
  
      param.LText = md5(`${_phone}mingke${window.GLOB.appkey}${param.timestamp}`)
      param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)

      param.rduri = 'http://sso.mk9h.cn/webapi/dostars'
      param.userid = 'bh0bapabtd45epsgra79segbch6c1ibk'
      param.LoginUID = 'bh0bapabtd45epsgra79segbch6c1ibk'
  
      this.setState({
        verdisabled: true,
        delay: 60
      })
      LoginVerCodeTimer = setTimeout(this.resetVerCodeDelay, 1000)
  
      Api.getLocalConfig(param).then(res => {
        if (res.status) {
  
        } else {
          if (LoginVerCodeTimer) {
            clearTimeout(LoginVerCodeTimer)
          }
          this.setState({
            verdisabled: false,
            delay: null
          })
          message.warning(res.message)
        }
      }, () => {
        if (LoginVerCodeTimer) {
          clearTimeout(LoginVerCodeTimer)
        }
        this.setState({
          verdisabled: false,
          delay: null
        })
      })
    })
  }

  resetVerCodeDelay = () => {
    const { delay } = this.state
    if (delay && delay > 1) {
      this.setState({delay: delay - 1})
      LoginVerCodeTimer = setTimeout(this.resetVerCodeDelay, 1000)
    } else {
      this.setState({
        verdisabled: false,
        delay: null
      })
    }
  }

  rememberChange = (e) => {
    let val = e.target.checked
    let _url = window.location.href.split('#')[0]

    localStorage.setItem(_url + 'remember', val)
  }

  /**
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form
    const { activeKey, verdisabled, delay, loginWays } = this.state

    return (
      <Form onSubmit={this.handleSubmit} className="login-form" id="login-form">
        <h4>{this.props.platName}</h4>
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: this.props.dict['login.username.empty'] }],
            initialValue: this.state.username || '',
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder={this.props.dict['login.username']}
              autoComplete="off"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            initialValue: this.state.password || '',
            rules: [
              {
                required: true,
                message: this.props.dict['login.password.empty'],
              }
            ]
          })(<Input.Password placeholder={this.props.dict['login.password']} prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} />)}
        </Form.Item>
        <Form.Item className="minline">
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(<Checkbox>{this.props.dict['login.remember']}</Checkbox>)}
        </Form.Item>
        <Form.Item className="minline right">
          {getFieldDecorator('lang', {
            initialValue: this.props.lang,
          })(
            <Select
              onChange={(value) => {this.changelang(value)}}
              getPopupContainer={() => document.getElementById('login-form')}
            >
              <Select.Option value="zh-CN">中文简体</Select.Option>
              <Select.Option value="en-US">English</Select.Option>
            </Select>
          )}
        </Form.Item>
        <Form.Item className="btn-login">
          <Button type="primary" htmlType="submit" className="login-form-button" disabled={this.props.isDisabled} loading={this.props.isDisabled}>
            {this.props.dict['login.submit']}
          </Button>
        </Form.Item>
      <Form className={`login-form login-form-${loginWays.length}`} id="login-form" onSubmit={this.handleSubmit}>
        <p className="title">{this.props.platName}</p>
        <div className="form-item-wrap">
          {activeKey === 'uname_pwd' ? <Form.Item>
            {getFieldDecorator('username', {
              rules: [{ required: true, message: this.props.dict['login.username.empty'] }],
              initialValue: this.state.username || '',
            })(
              <Input
                prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder={this.props.dict['login.username']}
                autoComplete="off"
              />,
            )}
          </Form.Item> : null}
          {activeKey === 'uname_pwd' ? <Form.Item>
            {getFieldDecorator('password', {
              initialValue: this.state.password || '',
              rules: [
                {
                  required: true,
                  message: this.props.dict['login.password.empty'],
                }
              ]
            })(<Input.Password placeholder={this.props.dict['login.password']} prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} />)}
          </Form.Item> : null}
          {activeKey === 'sms_vcode' ? <Form.Item>
            {getFieldDecorator('phone', {
              rules: [{ required: true, message: this.props.dict['login.phone.empty'] }],
              initialValue: '',
            })(
              <Input
                placeholder={this.props.dict['login.phone']}
                autoComplete="off"
              />
            )}
          </Form.Item> : null}
          {activeKey === 'sms_vcode' ? <Form.Item className="vercode">
            {getFieldDecorator('vercode', {
              initialValue: '',
              rules: [
                {
                  required: true,
                  message: this.props.dict['login.vercode.empty'],
                }
              ]
            })(
              <Input
                addonAfter={
                  <Button type="link" className="vercode" size="small" disabled={verdisabled} onClick={this.getvercode}>
                    {delay ? this.props.dict['login.vercode.queryagain'].replace('@', delay) : this.props.dict['login.vercode.query']}
                  </Button>
                }
                placeholder={this.props.dict['login.vercode']}
                autoComplete="off"
              />
            )}
          </Form.Item> : null}
          {/* {activeKey === 'uname_pwd' ? <Form.Item className="minline">
            {getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: remember,
            })(<Checkbox onChange={this.rememberChange}>{this.props.dict['login.remember']}</Checkbox>)}
          </Form.Item> : null} */}
          {['uname_pwd', 'sms_vcode'].includes(activeKey) ? <Form.Item className="btn-login">
            <Button type="primary" htmlType="submit" className="login-form-button" disabled={this.props.isDisabled} loading={this.props.isDisabled}>
              {this.props.dict['login.submit']}
            </Button>
          </Form.Item> : null}
          {options.sysType === 'cloud' && options.cdomain.indexOf('mk9h') > -1 ? <Form.Item className="register-line">
            <a href="http://minkesoft.com/#/signup" target="_blank" rel="noopener noreferrer" className="register">注册</a>
            <a href="http://minkesoft.com/#/forgotPwd" target="_blank" rel="noopener noreferrer" className="forgot">忘记密码？</a>
          </Form.Item> : null}
        </div>
      </Form>
    )
  }
}

export default Form.create()(MainSearch)
export default Form.create()(LoginTabForm)