2022-07-29

king

2022-07-29 02546bc3c0ed7a4e471df15b80792008563d1d10

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

@@ -2,27 +2,58 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Input, Button, notification, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { UserOutlined, LockOutlined, MobileOutlined, WechatOutlined } from '@ant-design/icons'

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

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

  state = {
    activeWay: null,
    appType: sessionStorage.getItem('appType'),
    signWays: []
  }

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

    let signWays = []
    wrap.signWays.forEach(way => {
      if (way === 'sms_vcode') {
        signWays.push({
          type: 'sms_vcode',
          label: '手机号注册',
          icon: <MobileOutlined />,
          tempId: wrap.signTempId,
          sort: 2
        })
      } else if (way === 'uname_pwd') {
        signWays.push({
          type: 'uname_pwd',
          label: '账号注册',
          icon: <LockOutlined />,
          sort: 1
        })
      } else if (way === 'weixin') {
        signWays.push({
          type: 'weixin',
          label: '微信登录',
          icon: <WechatOutlined />,
          sort: 3
        })
      }
    })

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

    this.setState({
      signWays: wrap.signWays,
      activeWay: wrap.signWays[0]
      signWays: signWays,
      activeWay: signWays[0]
    })
  }

@@ -30,14 +61,42 @@
    const { wrap } = this.props

    if (!is(fromJS(wrap), fromJS(nextProps.wrap))) {
      let signWays = []
      nextProps.wrap.signWays.forEach(way => {
        if (way === 'sms_vcode') {
          signWays.push({
            type: 'sms_vcode',
            label: '手机号注册',
            tempId: nextProps.wrap.signTempId,
            sort: 2
          })
        } else if (way === 'uname_pwd') {
          signWays.push({
            type: 'uname_pwd',
            label: '账号注册',
            sort: 1
          })
        } else if (way === 'weixin') {
          signWays.push({
            type: 'weixin',
            label: '微信登录',
            sort: 3
          })
        }
      })

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

      this.setState({
        signWays: nextProps.wrap.signWays,
        activeWay: nextProps.wrap.signWays[0]
        signWays: signWays,
        activeWay: signWays[0]
      })
    }
  }

  onChangeTab = (activeWay) => {
    if (activeWay.type === 'weixin') return

    this.setState({activeWay})
  }

@@ -72,11 +131,12 @@

  render() {
    const { wrap } = this.props
    const { activeWay, signWays } = this.state
    const { activeWay, signWays, appType } = this.state

    return (
      <Form className="login-edit-form">
        {activeWay === 'uname_pwd' ? <div className="form-item-wrap">
        {appType === 'pc' ? <div className="login-way-title">{activeWay.label}</div> : null}
        {activeWay.type === 'uname_pwd' ? <div className="form-item-wrap">
          <Form.Item>
            <Input
              prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
@@ -87,8 +147,8 @@
          <Form.Item>
            <Input.Password placeholder="密码" prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} />
          </Form.Item>
          {wrap.groups ? <div className={'protocol-wrap '}>
            <Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span className="protocol" key={i}>《{item.label}》</span>))}
          {wrap.groups ? <div className="protocol-wrap">
            <Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span><span className="protocol" key={i}>《{item.label}》</span>{wrap.groups.length > i + 1 ? (wrap.groups.length > i + 2 ? '、' : '和') : null}</span>))}
          </div> : null}
          <Form.Item className="btn-login">
            <Button type="primary" onDoubleClick={() => this.changeMenu()} className="sign-form-button">
@@ -96,14 +156,14 @@
            </Button>
          </Form.Item>
        </div> : null}
        {activeWay === 'sms_vcode' ? <div className="form-item-wrap">
        {activeWay.type === 'sms_vcode' ? <div className="form-item-wrap">
          <Form.Item>
            <Input
              placeholder="手机号"
              autoComplete="off"
            />
          </Form.Item>
          <Form.Item style={{marginBottom: '35px'}}>
          <Form.Item style={{marginBottom: wrap.groups ? '15px' : '35px'}}>
            <Input
              addonAfter={
                <Button type="link" className="vercode" size="small">
@@ -114,8 +174,8 @@
              autoComplete="off"
            />
          </Form.Item>
          {wrap.groups ? <div className={'protocol-wrap '}>
            <Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span className="protocol" key={i}>《{item.label}》</span>))}
          {wrap.groups ? <div className="protocol-wrap">
            <Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span><span className="protocol" key={i}>《{item.label}》</span>{wrap.groups.length > i + 1 ? (wrap.groups.length > i + 2 ? '、' : '和') : null}</span>))}
          </div> : null}
          <Form.Item className="btn-login">
            <Button type="primary" onDoubleClick={() => this.changeMenu()} className="sign-form-button">
@@ -123,12 +183,32 @@
            </Button>
          </Form.Item>
        </div> : null}
        <div className={'login-ways '}>
          <div>其他登录方式</div>
        {activeWay.type === 'weixin' ? <div className="form-item-wrap">
          <Form.Item className="btn-login" style={{marginBottom: wrap.groups ? '0px' : '15px'}}>
            <Button type="primary" onDoubleClick={() => this.changeMenu()} className="sign-form-button">
              微信一键登录
            </Button>
          </Form.Item>
          {wrap.groups ? <div className="protocol-wrap">
            <Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span><span className="protocol" key={i}>《{item.label}》</span>{wrap.groups.length > i + 1 ? (wrap.groups.length > i + 2 ? '、' : '和') : null}</span>))}
          </div> : null}
        </div> : null}
        {wrap.classify !== 'signin' ? <span className="mk-jump-way" onClick={() => this.props.changeway()}>已有账号，去登陆？</span> : null}
        {appType === 'mob' && signWays.length > 1 ? <div className="sign-ways">
          <div className="title">其他登录方式</div>
          <div className="content">
          {signWays.map((item, i) => {
            return (<span key={i} onClick={() => this.onChangeTab(item)}>{item}</span>)
              if (activeWay.type === item.type) return null
              return (<div key={i} className="item" onClick={() => this.onChangeTab(item)}>{item.icon}<span className="name">{item.label}</span></div>)
          })}
        </div>
        </div> : null}
        {appType === 'pc' && signWays.length > 1 ? <div className="login-ways">
          {signWays.map(item => {
            if (activeWay.type === item.type) return null
            return (<span key={item.type} onClick={() => this.onChangeTab(item)}>{item.label}</span>)
          })}
        </div> : null}
      </Form>
    )
  }