Merge branch 'develop'

king

2025-05-08 400fee62fb40006a9839f1c3a8244b82566b5057

 src/views/login/loginform.jsx

@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Button, Checkbox, Select, Modal, message, AutoComplete } from 'antd'
import { Form, Input, Button, Checkbox, Select, Modal, message, AutoComplete, Tooltip } from 'antd'
import { UserOutlined, LockOutlined, QrcodeOutlined, RedoOutlined, CloseCircleOutlined } from '@ant-design/icons'
import md5 from 'md5'
import moment from 'moment'
@@ -9,22 +9,37 @@
import Utils from '@/utils/utils.js'
import options from '@/store/options.js'
import asyncLoadComponent from '@/utils/asyncLoadComponent'
import wxicon from '@/assets/img/wx-icon.png'
import './index.scss'

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

const CheckWrap = ({checked, prolType, onChange, prolCont}) => {
  const change = (e) => {
    onChange(e.target.checked)

    if (prolType === 'once') {
      localStorage.setItem(window.GLOB.sysSign + 'protocol', e.target.checked)
    }
  }

  return (
    <>
      <Checkbox defaultChecked={checked} onChange={change} style={{marginRight: '8px'}}></Checkbox>
      <span dangerouslySetInnerHTML={{__html: prolCont}}></span>
    </>
  )
}

class LoginTabForm extends Component {
  static propTpyes = {
    isDisabled: PropTypes.bool,
    handleSubmit: PropTypes.func,
    authLogin: PropTypes.func,
    dict: PropTypes.object,
    auth: PropTypes.bool,
    authError: PropTypes.string,
    touristLogin: PropTypes.bool,
    lang: PropTypes.string,
    langList: PropTypes.array,
    loginWays: PropTypes.array
  }
@@ -35,24 +50,38 @@
    username: '',
    password: '',
    remember: true,
    protocol: null,
    delay: null,
    loginWays: [],
    smsId: '',
    verdisabled: false,
    hasScan: false,
    timeout: false,
    users: []
    vispwd: window.GLOB.vispwd,
    wayLabels: {},
    dict: window.GLOB.dict,
    users: [],
    lang: sessionStorage.getItem('lang')
  }

  timer = null
  splitTime = 0
  scanParam = null

  UNSAFE_componentWillMount () {
    const { loginWays } = this.props
    const { loginWays, prolType } = this.props

    let protocol = null

    if (prolType === 'once') {
      protocol = localStorage.getItem(window.GLOB.sysSign + 'protocol') === 'true'
    } else if (prolType === 'every_time') {
      protocol = false
    }

    let remember = true
    let _url = window.location.href.split('#')[0]
    
    if (localStorage.getItem(_url + 'remember') === 'false') {
    if (localStorage.getItem(window.GLOB.sysSign + 'remember') === 'false') {
      remember = false
    }
    if (!window.GLOB.keepKey) {
@@ -62,23 +91,28 @@
    let smsId = ''
    let hasScan = false
    let _loginWays = []
    let wayLabels = {app_scan: 'APP扫码', weixin_scan: '微信扫码', uname_pwd: '账号登录', sms_vcode: '短信登录'}

    loginWays.forEach(item => {
      item.label = window.GLOB.dict[item.type] || wayLabels[item.type]
      wayLabels[item.type] = item.label
      if (item.type === 'sms_vcode') {
        item.label = '短信登录'
        smsId = item.smsId
        _loginWays.push(item)
      } else if (item.type === 'uname_pwd') {
        item.label = '账号登录'
        _loginWays.push(item)
      } else if (item.type === 'app_scan') {
        _loginWays.push(item)
        hasScan = true
      } else if (item.type === 'weixin_scan') {
        _loginWays.push(item)
        hasScan = true
      }
    })

    let activeKey = _loginWays[0].type

    let users = localStorage.getItem(_url + 'users')
    
    let users = localStorage.getItem(window.GLOB.sysSign + 'users')
    let _user = null
    
    if (users) {
@@ -91,24 +125,26 @@
      users = []
    }

    if (users[0]) {
    if (users[0] && activeKey === 'uname_pwd') {
      _user = users[0]
    }

    this.setState({
      users: users,
      username: activeKey === 'uname_pwd' && _user ? _user.username : '',
      password: activeKey === 'uname_pwd' && _user ? _user.password : '',
      username: _user ? _user.username : '',
      password: _user ? _user.password : '',
      smsId: smsId,
      loginWays: _loginWays,
      activeKey,
      scanId: activeKey === 'app_scan' ? Utils.getuuid() : '',
      scanId: activeKey === 'app_scan' || activeKey === 'weixin_scan' ? Utils.getuuid() : '',
      timeout: false,
      remember,
      protocol,
      wayLabels,
      hasScan
    })

    if (activeKey === 'app_scan') {
    if (activeKey === 'app_scan' || activeKey === 'weixin_scan') {
      this.splitTime = 0
      this.timer = setTimeout(() => {
        this.checkResult()
@@ -117,9 +153,10 @@
  }

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

    this.splitTime += 10000
    this.scanParam = null

    let _param = {
      func: 'webapi_get_binding_key',
@@ -143,6 +180,14 @@
        message.warning(res.message)
        return
      } else if (res.thd_party_appid && res.thd_party_member_id && res.thd_party_openid) {
        if (protocol === false) {
          this.scanParam = {
            ...res,
            scanId
          }
          message.warning(dict['protocol_check'] || '请阅读并同意协议！')
          return
        }
        this.props.authLogin(res.thd_party_appid, res.thd_party_openid, res.thd_party_member_id, scanId)
      } else {
        this.timer = setTimeout(() => {
@@ -153,7 +198,10 @@
  }

  handleConfirm = () => {
    const { activeKey } = this.state
    const { activeKey, protocol } = this.state

    if (protocol === false) return Promise.reject()

    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
@@ -174,22 +222,20 @@
  }

  changelang = (val) => {
    const _href = window.location.href.split('#')[0]
    localStorage.setItem(_href + 'lang', val)
    localStorage.setItem(window.location.href.split('#')[0] + 'lang', val)
    sessionStorage.setItem('lang', val)

    window.location.reload()
  }

  handleSubmit = e => {
    const { activeKey } = this.state
    const { activeKey, dict } = this.state
    // 登录参数检验
    e && 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.authError || dict['auth_tip'] || '系统未授权，请联系管理员。',
        okText: dict['got_it'] || '知道了',
        onOk() {},
        onCancel() {}
      })
@@ -236,14 +282,20 @@
    }
  }

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

    if (this.state.activeKey === 'app_scan') {
    if (key === 'scan') {
      key = loginWays.filter(item => item.type === 'app_scan' || item.type === 'weixin_scan')[0].type
    }

    this.setState({activeKey: key, scanId: key === 'app_scan' || key === 'weixin_scan' ? Utils.getuuid() : ''})

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

    if (activeKey === 'app_scan') {
    if (key === 'app_scan' || key === 'weixin_scan') {
      this.splitTime = 0
      this.setState({timeout: false})
      this.timer = setTimeout(() => {
@@ -263,16 +315,16 @@
  }

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

@@ -380,9 +432,8 @@

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

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

  complete = (val) => {
@@ -410,9 +461,15 @@
    
    this.setState({users: _users})

    let _url = window.location.href.split('#')[0]
    localStorage.setItem(window.GLOB.sysSign + 'users', window.btoa(window.encodeURIComponent(JSON.stringify(_users))))
  }

    localStorage.setItem(_url + 'users', window.btoa(window.encodeURIComponent(JSON.stringify(_users))))
  changeAgree = (val) => {
    this.setState({protocol: val})

    if (this.scanParam && val) {
      this.props.authLogin(this.scanParam.thd_party_appid, this.scanParam.thd_party_openid, this.scanParam.thd_party_member_id, this.scanParam.scanId)
    }
  }

  /**
@@ -426,19 +483,18 @@
  }

  render() {
    const { langList } = this.props
    const { langList, isDisabled, prolType, prolCont } = this.props
    const { getFieldDecorator } = this.props.form
    const { activeKey, verdisabled, delay, loginWays, remember, scanId, timeout, hasScan, users } = this.state
    const wayLabels = {app_scan: '扫码登录', uname_pwd: '账号登录', sms_vcode: '短信登录'}
    const { activeKey, verdisabled, delay, loginWays, remember, scanId, timeout, hasScan, users, wayLabels, dict, lang, vispwd, protocol } = this.state

    return (
      <Form className="login-form" id="login-form" onSubmit={this.handleSubmit}>
        <div className="login-way-title">{wayLabels[activeKey]}</div>
        {hasScan && activeKey !== 'app_scan' ? <div className="scan-icon" onClick={() => this.onChangeTab('app_scan')}><QrcodeOutlined /></div> : null}
        {hasScan && activeKey !== 'app_scan' && activeKey !== 'weixin_scan' ? <div className="scan-icon" onClick={() => this.onChangeTab('scan')}><QrcodeOutlined /></div> : null}
        {activeKey === 'uname_pwd' ? <div className="form-item-wrap">
          <Form.Item>
            {getFieldDecorator('username', {
              rules: [{ required: true, message: this.props.dict['login.username.empty'] }],
              rules: [{ required: true, message: dict['username_required'] || '请输入用户名' }],
              initialValue: this.state.username || '',
            })(
              <AutoComplete
@@ -455,7 +511,7 @@
              >
                <Input
                  prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder={this.props.dict['login.username']}
                  placeholder={dict['username'] || '用户名'}
                  autoComplete="off"
                />
              </AutoComplete>
@@ -467,20 +523,20 @@
              rules: [
                {
                  required: true,
                  message: this.props.dict['login.password.empty'],
                  message: dict['password_required'] || '请输入密码',
                }
              ]
            })(<Input.Password placeholder={this.props.dict['login.password']} prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} />)}
            })(<Input.Password placeholder={dict['password'] || '密码'} visibilityToggle={vispwd} prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} />)}
          </Form.Item>
          {window.GLOB.keepKey ? <Form.Item className="minline">
            {getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: remember,
            })(<Checkbox onChange={this.rememberChange}>{this.props.dict['login.remember']}</Checkbox>)}
            })(<Checkbox onChange={this.rememberChange}>{dict['remember_me'] || '记住密码'}</Checkbox>)}
          </Form.Item> : <div style={{height: '30px', float: 'left'}}></div>}
          {langList && langList.length > 0 ? <Form.Item className="minline right">
            {getFieldDecorator('lang', {
              initialValue: this.props.lang,
              initialValue: lang,
            })(
              <Select
                onChange={(value) => {this.changelang(value)}}
@@ -492,10 +548,17 @@
              </Select>
            )}
          </Form.Item> : null}
          {prolType ? <Form.Item className="proline">
            <CheckWrap checked={protocol} onChange={(val) => this.setState({protocol: val})} prolCont={prolCont} prolType={prolType}/>
          </Form.Item> : null}
          <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>
            {protocol === false ? <Tooltip overlayStyle={{maxWidth: 500}} placement="top" trigger="click" title={dict['protocol_check'] || '请阅读并同意协议！'}>
              <Button type="primary" htmlType="submit" className="login-form-button disabled">
                {dict['log_in'] || '登录'}
              </Button>
            </Tooltip> : <Button type="primary" htmlType="submit" className="login-form-button" disabled={isDisabled} loading={isDisabled}>
            {dict['log_in'] || '登录'}
            </Button>}
          </Form.Item>
          {window.GLOB.sysType === 'cloud' && options.cdomain.indexOf('mk9h') > -1 ? <Form.Item className="register-line">
            <a href="http://www.minkesoft.com/signup" target="_blank" rel="noopener noreferrer" className="register">注册</a>
@@ -505,11 +568,11 @@
        {activeKey === 'sms_vcode' ? <div className="form-item-wrap">
          <Form.Item>
            {getFieldDecorator('phone', {
              rules: [{ required: true, message: this.props.dict['login.phone.empty'] }],
              rules: [{ required: true, message: dict['phone_no_required'] || '请输入手机号' }],
              initialValue: '',
            })(
              <Input
                placeholder={this.props.dict['login.phone']}
                placeholder={dict['phone_no'] || '手机号'}
                autoComplete="off"
              />
            )}
@@ -520,24 +583,24 @@
              rules: [
                {
                  required: true,
                  message: this.props.dict['login.vercode.empty'],
                  message: dict['vercode_required'] || '请输入验证码',
                }
              ]
            })(
              <Input
                addonAfter={
                  <Button type="link" className="vercode" size="small" disabled={verdisabled} onClick={this.getvercode}>
                    {delay ? `${delay}s后重新获取` : '获取验证码'}
                    {delay ? `${delay}s` : dict['query_vercode'] || '获取验证码'}
                  </Button>
                }
                placeholder={this.props.dict['login.vercode']}
                placeholder={dict['vercode'] || '验证码'}
                autoComplete="off"
              />
            )}
          </Form.Item>
          {langList && langList.length > 0 ? <Form.Item className="minline right">
            {getFieldDecorator('lang', {
              initialValue: this.props.lang,
              initialValue: lang,
            })(
              <Select
                onChange={(value) => {this.changelang(value)}}
@@ -549,14 +612,36 @@
              </Select>
            )}
          </Form.Item> : null}
          {prolType ? <Form.Item className="proline">
            <CheckWrap checked={protocol} onChange={(val) => this.setState({protocol: val})} prolCont={prolCont} prolType={prolType}/>
          </Form.Item> : null}
          <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>
            {protocol === false ? <Tooltip overlayStyle={{maxWidth: 500}} placement="top" trigger="click" title={dict['protocol_check'] || '请阅读并同意协议！'}>
              <Button type="primary" htmlType="submit" className="login-form-button disabled">
                {dict['log_in'] || '登录'}
              </Button>
            </Tooltip> : <Button type="primary" htmlType="submit" className="login-form-button" disabled={isDisabled} loading={isDisabled}>
              {dict['log_in'] || '登录'}
            </Button>}
          </Form.Item>
          {window.GLOB.sysType === 'cloud' && options.cdomain.indexOf('mk9h') > -1 ? <Form.Item className="register-line">
            <a href="http://www.minkesoft.com/signup" target="_blank" rel="noopener noreferrer" className="register">注册</a>
            <a href="http://www.minkesoft.com/forgotPwd" target="_blank" rel="noopener noreferrer" className="forgot">忘记密码？</a>
          </Form.Item> : null}
        </div> : null}
        {activeKey === 'weixin_scan' ? <div className="form-item-wrap">
          <div className="form-scan-wrap">
            <div className="qr-wrap">
              {scanId ? <QrCode card={{qrWidth: 500, color: '#000000'}} value={`https://cloud.mk9h.cn/mob/mknotice.html?originurl=${window.btoa(window.GLOB.baseurl + 'mob/index.html#/wx/' + scanId)}`}/> : null}
              {timeout ? <div className="qrcode-out">
                <RedoOutlined onClick={this.reCode} />
                {dict['code_expired'] || '二维码已失效。'}
              </div> : null}
            </div>
            <img src={wxicon} alt=""/>{dict['wechat_scan'] || '请使用微信扫一扫登录'}
          </div>
          {prolType ? <Form.Item className="proline">
            <CheckWrap checked={protocol} onChange={this.changeAgree} prolCont={prolCont} prolType={prolType}/>
          </Form.Item> : null}
        </div> : null}
        {activeKey === 'app_scan' ? <div className="form-item-wrap">
@@ -565,15 +650,20 @@
              {scanId ? <QrCode card={{qrWidth: 500, color: '#000000'}} value={`mkpcscan,${window.GLOB.appkey},${scanId}`}/> : null}
              {timeout ? <div className="qrcode-out">
                <RedoOutlined onClick={this.reCode} />
                二维码已失效。
                {dict['code_expired'] || '二维码已失效。'}
              </div> : null}
            </div>
            请使用客户端扫一扫登录
            {dict['client_scan'] || '请使用客户端扫一扫登录'}
          </div>
          {prolType ? <Form.Item className="proline">
            <CheckWrap checked={protocol} onChange={this.changeAgree} prolCont={prolCont} prolType={prolType}/>
          </Form.Item> : null}
        </div> : null}
        <div className={'login-ways ' + (activeKey === 'app_scan' ? 'center' : '')}>
        <div className={'login-ways ' + (activeKey === 'app_scan' || activeKey === 'weixin_scan' ? 'center' : '')}>
          {loginWays.map(item => {
            if (item.type === 'app_scan' || activeKey === item.type) return null
            if (activeKey === item.type) return null
            if (item.type === 'app_scan' && activeKey !== 'weixin_scan') return null
            if (item.type === 'weixin_scan' && activeKey !== 'app_scan') return null
            return (<span key={item.type} onClick={() => this.onChangeTab(item.type)}>{item.label}</span>)
          })}
        </div>