2022-04-26

king

2022-04-26 5046d0d13dc6a8563b8e54e31913bc44cfa1072f

 src/views/login/loginform.jsx

@@ -1,28 +1,25 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Icon, Input, Button, Checkbox, Select, Modal, message } 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 Utils from '@/utils/utils.js'
import options from '@/store/options.js'
import asyncLoadComponent from '@/utils/asyncLoadComponent'
import './index.scss'

const { warning } = Modal
let LoginVerCodeTimer = null
const QrCode = asyncLoadComponent(() => import('@/components/qrcode'))

class LoginTabForm extends Component {
  static propTpyes = {
    isDisabled: PropTypes.bool,
    changelang: PropTypes.func,
    handleSubmit: PropTypes.func,
    authLogin: PropTypes.func,
    dict: PropTypes.object,
    auth: PropTypes.bool,
    authError: PropTypes.string,
    touristLogin: PropTypes.bool,
    lang: PropTypes.string,
    langList: PropTypes.array,
@@ -32,19 +29,14 @@

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

  timer = null
  splitTime = 0

  UNSAFE_componentWillMount () {
    const { loginWays } = this.props
@@ -52,6 +44,9 @@
    let _url = window.location.href.split('#')[0]
    
    if (localStorage.getItem(_url + 'remember') === 'false') {
      remember = false
    }
    if (!window.GLOB.keepKey) {
      remember = false
    }

@@ -63,64 +58,36 @@
        _loginWays.push(item)
      } else if (item.type === 'uname_pwd') {
        _loginWays.push(item)
      } else if (item.type === 'app_scan') {
        _loginWays.push(item)
      }
    })

    let activeKey = _loginWays[0].type

    this.setState({
      smsId: smsId,
      loginWays: _loginWays,
      activeKey,
      scanId: activeKey === 'app_scan' ? Utils.getuuid() : '',
      timeout: false,
      activeKey: _loginWays[0].type,
      remember
    })

    if (activeKey === 'app_scan') {
      this.splitTime = 0
      this.timer = setTimeout(() => {
        this.checkResult()
      }, 10000)
    }
  }

  checkResult = () => {
    const { scanId } = this.state

    this.splitTime += 10000

    let _param = {
      func: 'webapi_get_binding_key',
      scan_type: 'pc',
      id: scanId,
      UserName: ''
    }

    _param.userid = sessionStorage.getItem('visitorUserID')
    _param.LoginUID = sessionStorage.getItem('visitorLoginUID')

    if (this.splitTime >= 180000) {
      this.setState({
        timeout: true
  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)
        }
      })
      return
    }

    Api.getSystemConfig(_param).then(res => {
      if (!res.status) {
        message.warning(res.message)
        return
      } else if (res.thd_party_appid && res.thd_party_member_id && res.thd_party_openid) {
        this.props.authLogin(res.thd_party_appid, res.thd_party_openid, res.thd_party_member_id, scanId)
      } else {
        this.timer = setTimeout(() => {
          this.checkResult()
        }, 10000)
      }
    })
      this.setState({
        smsId: smsId,
        loginWays: _loginWays,
        activeKey: _loginWays[0].type
      })
    }
  }

  handleConfirm = () => {
@@ -147,9 +114,9 @@
    e.preventDefault()
    if (!this.props.auth) {
      warning({
        title: this.props.authError || this.props.dict['login.auth.tip'],
        okText: this.props.dict['login.ok'],
        cancelText: this.props.dict['login.cancel'],
        title: this.props.dict['login.auth.tip'],
        okText: this.props.dict['login.auth.ok'],
        cancelText: this.props.dict['login.auth.cancel'],
        onOk() {},
        onCancel() {}
      })
@@ -194,7 +161,7 @@
    if (_user) {
      try {
        _user = JSON.parse(window.decodeURIComponent(window.atob(_user)))
      } catch (e) {
      } catch {
        console.warn('Parse Failure')
        _user = ''
      }
@@ -219,29 +186,7 @@
  }

  onChangeTab = (activeKey) => {
    this.setState({activeKey, scanId: activeKey === 'app_scan' ? Utils.getuuid() : ''})

    if (this.state.activeKey === 'app_scan') {
      this.timer && clearTimeout(this.timer)
    }

    if (activeKey === 'app_scan') {
      this.splitTime = 0
      this.setState({timeout: false})
      this.timer = setTimeout(() => {
        this.checkResult()
      }, 10000)
    }
  }

  reCode = () => {
    this.splitTime = 0

    this.setState({timeout: false, scanId: Utils.getuuid()})

    this.timer = setTimeout(() => {
      this.checkResult()
    }, 10000)
    this.setState({activeKey})
  }

  getvercode = () => {
@@ -351,20 +296,15 @@
    this.setState = () => {
      return
    }
    this.timer && clearTimeout(this.timer)
  }

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

    return (
      <Form className="login-form" id="login-form" onSubmit={this.handleSubmit}>
        <div className={'login-way-wrap ' + (loginWays.length === 1 ? 'simple' : '')}>
          {loginWays.map(item => (
            <div className={'login-way' + (activeKey === item.type ? ' active' : '')} onClick={() => this.onChangeTab(item.type)} key={item.type}>{item.label}</div>
          ))}
        </div>
      <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', {
@@ -372,7 +312,7 @@
              initialValue: this.state.username || '',
            })(
              <Input
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder={this.props.dict['login.username']}
                autoComplete="off"
              />,
@@ -421,41 +361,17 @@
              />
            )}
          </Form.Item> : null}
          {activeKey === 'uname_pwd' ? <Form.Item className="minline">
          {/* {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}
          {activeKey !== 'app_scan' && this.props.langList && this.props.langList.length > 0 ? <Form.Item className="minline right">
            {getFieldDecorator('lang', {
              initialValue: this.props.lang,
            })(
              <Select
                onChange={(value) => {this.changelang(value)}}
                getPopupContainer={() => document.getElementById('login-form')}
              >
                {this.props.langList.map((item, index) => {
                  return <Select.Option key={index} value={item.Lang}>{item.LangName}</Select.Option>
                })}
              </Select>
            )}
          </Form.Item> : null}
          </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}
          {activeKey === 'app_scan' ? <div className="form-scan-wrap">
            <div className="qr-wrap">
              {scanId ? <QrCode card={{qrWidth: 500, color: '#000000'}} value={`mkpcscan,${window.GLOB.appkey},${scanId}`}/> : null}
              {timeout ? <div className="qrcode-out">
                <Icon onClick={this.reCode} type="redo" />
                二维码已失效。
              </div> : null}
            </div>
            请使用客户端扫一扫登录
          </div> : 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>