sourcecode/front/project/www/components/Login/index.js

import React, { Component } from 'react';
import './index.less';
import { Modal, Icon, Button, Tooltip } from 'antd';
import Assets from '@src/components/Assets';
import { Icon as GIcon } from '../Icon';
import { Button as GButton } from '../Button';
import { User } from '../../stores/user';

const LOGIN_PHONE = 'LOGIN_PHONE';
const REGISTER_PHONE = 'REGISTER_PHONE';
const LOGIN_WX = 'LOGIN_WX';
const BIND_PHONE = 'BIND_PHONE';
const BIND_WX = 'BIND_WX';
const BIND_WX_ERROR = 'BIND_WX_ERROR';

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = { type: LOGIN_PHONE };
  }

  close() {
    User.closeLogin();
  }

  render() {
    const { type } = this.state;
    const { user } = this.props;
    return (
      <Modal wrapClassName={`login-modal ${type}`} visible={user.needLogin} footer={null} closable={false} width={470}>
        {this.renderBody(type)}
        <GIcon name="close" onClick={() => this.close()} />
      </Modal>
    );
  }

  renderBody(type) {
    switch (type) {
      case LOGIN_PHONE:
        return this.renderLoginPhone();
      case REGISTER_PHONE:
        return this.renderRegisterPhone();
      case LOGIN_WX:
        return this.renderLoginWx();
      case BIND_PHONE:
        return this.renderBindPhone();
      case BIND_WX:
        return this.renderBindWx();
      case BIND_WX_ERROR:
        return this.renderBindWxError();
      default:
        return this.LOGIN_PHONE();
    }
  }

  renderLoginPhone() {
    return (
      <div className="body">
        <div className="title">手机号登录</div>
        <SelectInput placeholder="请输入手机号" />
        <VerificationInput placeholder="请输入验证码" />
        <Button type="primary" size="large" block>
          登录
        </Button>
        <Tooltip overlayClassName="gray" placement="left" title="微信扫码登录">
          <a className="other">
            <Assets name="code" />
          </a>
        </Tooltip>
      </div>
    );
  }

  renderRegisterPhone() {
    return (
      <div className="body">
        <div className="title">手机号登录</div>
        <div className="tip">
          <Assets name="notice" />
          该手机号尚未注册，将自动为您注册账户
        </div>
        <SelectInput placeholder="请输入手机号" />
        <VerificationInput placeholder="请输入验证码" />
        <Input placeholder="请输入邮箱" />
        <Button type="primary" size="large" block>
          登录
        </Button>
        <Tooltip overlayClassName="gray" placement="left" title="微信扫码登录">
          <a className="other">
            <Assets name="code" />
          </a>
        </Tooltip>
      </div>
    );
  }

  renderLoginWx() {
    return (
      <div className="body">
        <div className="title">微信扫码登录</div>
        <div className="qr-code">
          <Assets name="qrcode" />
          <div className="text">请使用微信扫描二维码登录</div>
        </div>
        <Tooltip overlayClassName="gray" placement="left" title="手机号登录">
          <a className="other">
            <Assets name="phone" />
          </a>
        </Tooltip>
      </div>
    );
  }

  renderBindPhone() {
    return (
      <div className="body">
        <div className="title">绑定手机号</div>
        <div className="tip">
          <Assets name="notice" />
          微信登录成功！为更好的使用服务，请您绑定手机号和邮箱。
        </div>
        <SelectInput placeholder="请输入手机号" />
        <VerificationInput placeholder="请输入验证码" />
        <Input placeholder="请输入邮箱" />
        <Button type="primary" size="large" block>
          绑定
        </Button>
      </div>
    );
  }

  renderBindWx() {
    return (
      <div className="body">
        <div className="title">绑定微信号</div>
        <div className="tip">
          <Assets name="notice" />
          手机号注册成功！为更好的使用服务，建议您绑定微信号。
        </div>
        <div className="qr-code">
          <Assets name="qrcode" />
          <div className="text">请使用微信扫描二维码登录</div>
          <div className="jump">跳过</div>
        </div>
      </div>
    );
  }

  renderBindWxError() {
    return (
      <div className="body">
        <div className="title">绑定失败</div>
        <div className="text">该微信账户已绑定其他手机号，您可直接使用微信登入。</div>
        <div className="btn">
          <GButton radius>Ok</GButton>
        </div>
      </div>
    );
  }
}

class Input extends Component {
  render() {
    const { className = '', onChange, placeholder, error, left, right } = this.props;
    return (
      <div className={`g-input-container ${className}`}>
        <div className={`g-input-wrapper ${error ? 'error' : ''}`}>
          {left && <div className="g-input-left">{left}</div>}
          <input className="g-input" placeholder={placeholder} onChange={data => onChange && onChange(data)} />
          {right && <div className="g-input-right">{right}</div>}
        </div>
        <div hidden={!error} className="g-input-error">
          {error}
        </div>
      </div>
    );
  }
}

class SelectInput extends Component {
  render() {
    const { className = '', onChange, placeholder, value, selectValue, onSelect } = this.props;
    return (
      <Input
        className={className}
        left={
          <span className="g-input-left-select" onClick={() => onSelect && onSelect()}>
            {selectValue}
            <Icon type="down" />
          </span>
        }
        value={value}
        placeholder={placeholder}
        onChange={data => onChange && onChange(data)}
      />
    );
  }
}

class VerificationInput extends Component {
  constructor(props) {
    super(props);
    this.timeKey = null;
    this.state = { loading: 0 };
  }

  componentWillUnmount() {
    if (this.timeKey) clearTimeout(this.timeKey);
  }

  onSend() {
    const { onSend, time = 60 } = this.props;
    if (onSend) {
      onSend();
    }
    this.setTime(time);
  }

  setTime(time) {
    this.setState({ loading: time });
    this.timeKey = setTimeout(() => {
      this.setTime(time - 1);
    }, 1000);
  }

  render() {
    const { loading } = this.state;
    const { className = '', onChange, placeholder, value } = this.props;
    return (
      <Input
        className={className}
        right={
          loading <= 0 ? (
            <span className="g-input-right-verification" onClick={() => this.onSend()}>
              获取验证码
            </span>
          ) : (
            <span className="g-input-right-verification-loading">等待{loading}秒</span>
          )
        }
        value={value}
        placeholder={placeholder}
        onChange={data => onChange && onChange(data)}
      />
    );
  }
}