2025-07-16

king

1 天以前 b09b821ef36fd1ea979e9a5daa98e95732ac81d5

 src/pc/components/login/normal-login/loginform.jsx

@@ -1,71 +1,129 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Icon, Input, Button, Checkbox, Tabs } from 'antd'
import { Form, Input, Button, Checkbox, notification } from 'antd'
import { QrcodeOutlined, UserOutlined, LockOutlined } from '@ant-design/icons'

import asyncElementComponent from '@/utils/asyncComponent'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const { TabPane } = Tabs
const QrCode = asyncElementComponent(() => import('@/components/qrcode'))

class LoginTabForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,
    loginWays: PropTypes.array,
    wrap: PropTypes.object,
    changeway: PropTypes.func
  }

  state = {
    activeKey: 'uname_pwd',
    username: '',
    password: '',
    activeWay: null,
    loginWays: [],
    smsId: '',
    verdisabled: false
    scanWay: null
  }

  UNSAFE_componentWillMount () {
    const { loginWays } = this.props
    const { wrap } = this.props

    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)
    let scanWay = null

    let loginWays = []
    wrap.loginWays.forEach(way => {
      if (way === 'sms_vcode') {
        loginWays.push({
          type: 'sms_vcode',
          label: '短信登录',
          tempId: wrap.tempId,
          sort: 2
        })
      } else if (way === 'uname_pwd') {
        loginWays.push({
          type: 'uname_pwd',
          label: '账号登录',
          shortcut: wrap.shortcut,
          sort: 1
        })
      } else if (way === 'app_scan') {
        scanWay = {
          type: 'app_scan',
          label: '扫码登录',
          sort: 3
        }
        loginWays.push(scanWay)
      }
    })

    loginWays.sort((a, b) => a.sort - b.sort)

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

  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)
    const { wrap } = this.props

    if (!is(fromJS(wrap), fromJS(nextProps.wrap))) {
      let scanWay = null
      let loginWays = []
      nextProps.wrap.loginWays.forEach(way => {
        if (way === 'sms_vcode') {
          loginWays.push({
            type: 'sms_vcode',
            label: '短信登录',
            tempId: wrap.tempId,
            sort: 2
          })
        } else if (way === 'uname_pwd') {
          loginWays.push({
            type: 'uname_pwd',
            label: '账号登录',
            shortcut: wrap.shortcut,
            sort: 1
          })
        } else if (way === 'app_scan') {
          scanWay = {
            type: 'app_scan',
            label: '扫码登录',
            sort: 3
          }
          loginWays.push(scanWay)
        }
      })
      loginWays.sort((a, b) => a.sort - b.sort)

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

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

  changeMenu = () => {
    const { wrap } = this.props

    if (!wrap.linkmenu) {
      notification.warning({
        top: 92,
        message: '请设置关联菜单！',
        duration: 5
      })
      return
    }

    MKEmitter.emit('changeEditMenu', {
      MenuID: wrap.linkmenu,
      copyMenuId: '',
      MenuNo: '',
      MenuName: ''
    })
  }

  /**
@@ -78,49 +136,77 @@
  }

  render() {
    const { activeKey, verdisabled, loginWays } = this.state
    const { wrap } = this.props
    const { activeWay, loginWays, scanWay } = this.state

    let style = {}
    if (wrap.borderRadius) {
      style.borderRadius = wrap.borderRadius
    }

    return (
      <Form className="login-edit-form">
        <Tabs type="card" activeKey={activeKey} onChange={this.onChangeTab}>
          {loginWays.map(item => (<TabPane tab={item.label} key={item.type}></TabPane>))}
        </Tabs>
        <div className="form-item-wrap">
          {activeKey === 'uname_pwd' ? <Form.Item>
        {wrap.topTip !== 'hidden' ? <div className="login-way-title">{activeWay.label}</div> : null}
        {scanWay && activeWay.type !== 'app_scan' ? <div className="scan-icon" onClick={() => this.onChangeTab(scanWay)}><QrcodeOutlined /></div> : null}
        {activeWay.type === 'uname_pwd' ? <div className={'form-item-wrap ' + (activeWay.shortcut === 'none' ? 'no-short' : '')}>
          <Form.Item>
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="用户名"
              prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="用户名/手机号/邮箱"
              autoComplete="off"
            />
          </Form.Item>
          <Form.Item>
            <Input.Password placeholder="密码" visibilityToggle={wrap.vispwd !== 'false'} prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} />
          </Form.Item>
          {!activeWay.shortcut || activeWay.shortcut === 'remember' ? <Form.Item className="minline">
            <Checkbox>记住密码</Checkbox>
          </Form.Item> : null}
          {activeKey === 'uname_pwd' ? <Form.Item>
            <Input.Password placeholder="密码" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} />
          {activeWay.shortcut === 'autologon' ? <Form.Item className="minline">
            <Checkbox>自动登录</Checkbox>
          </Form.Item> : null}
          {activeKey === 'sms_vcode' ? <Form.Item>
          <Form.Item className="btn-login">
            <Button type="primary" style={style} onDoubleClick={() => this.changeMenu()} className="login-form-button">
              登录
            </Button>
          </Form.Item>
        </div> : null}
        {activeWay.type === 'sms_vcode' ? <div className="form-item-wrap">
          <Form.Item>
            <Input
              placeholder="手机号"
              autoComplete="off"
            />
          </Form.Item> : null}
          {activeKey === 'sms_vcode' ? <Form.Item>
          </Form.Item>
          <Form.Item style={{marginBottom: '35px'}}>
            <Input
              addonAfter={
                <Button type="link" className="vercode" size="small" disabled={verdisabled}>
                <Button type="link" className="vercode" size="small">
                  获取验证码
                </Button>
              }
              placeholder="验证码"
              autoComplete="off"
            />
          </Form.Item> : null}
          {activeKey === 'uname_pwd' ? <Form.Item className="minline">
            <Checkbox>记住密码</Checkbox>
          </Form.Item> : null}
          {['uname_pwd', 'sms_vcode'].includes(activeKey) ? <Form.Item className="btn-login">
            <Button type="primary" htmlType="submit" className="login-form-button">
          </Form.Item>
          <Form.Item className="btn-login">
            <Button type="primary" style={style} onDoubleClick={() => this.changeMenu()} className="login-form-button">
              登录
            </Button>
          </Form.Item> : null}
          </Form.Item>
        </div> : null}
        {activeWay.type === 'app_scan' ? <div className="form-scan-wrap">
          <div className="qr-wrap">
            <QrCode card={{qrWidth: 500, color: '#000000'}} value={'minkesoft'}/>
          </div>
          请使用客户端扫一扫登录
        </div> : null}
        {wrap.classify !== 'login' ? <span className="mk-jump-way" onClick={() => this.props.changeway()}>没有账号，去注册？</span> : null}
        <div className={'login-ways ' + (activeWay.type === 'app_scan' ? 'center' : '')}>
          {loginWays.map(item => {
            if (item.type === 'app_scan' || activeWay.type === item.type) return null
            return (<span key={item.type} onClick={() => this.onChangeTab(item)}>{item.label}</span>)
          })}
        </div>
      </Form>
    )