qm-bus/src/GalleryBox/components/MobileImageUpload.js

千米公有云业务组件库

import React from 'react'
import { Modal } from 'antd'
import { QMConst } from 'qm-ux'

import QRCode from './qrcode.js'
import { getUserSession } from '../webapi.js'

export default class MobileImageUpload extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      //可见状态
      visible: false,
      countDown: 120,
      interval: null,
      key: '',
      value: '',
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.visible != this.props.visible) {
      this.setState({ visible: nextProps.visible })
      if (nextProps.visible) {
        this._setInterval()
      }
    }
  }

  componentWillMount() {
    // 前端自己还拿不到用户session, 靠服务端解析返回奔溃
    getUserSession().then(res => {
      if (res.data) {
        this.setState({
          key: res.data.key,
          value: res.data.value.replace(';', ''),
        })
      }
    })
  }
  /**
   * 验证码倒计时
   */
  _setInterval = () => {
    let time = 120
    var that = this
    var interval = setInterval(() => {
      if (time >= 1) {
        time--
        that.setState({ countDown: time })
      } else {
        clearInterval(that.state.interval)
        that.setState({
          countDown: 120,
          visible: false,
          interval: null,
        })
        const { cancel } = this.props
        if (cancel) {
          cancel()
        }
      }
    }, 1000)

    this.setState({ interval })
  }

  _onCancel = () => {
    this.setState({
      visible: false,
      countDown: 120,
    })
    clearInterval(this.state.interval)
    const { cancel } = this.props
    if (cancel) {
      cancel()
    }
  }

  componentDidUpdate(prevProps, prevState) {
    const { visible, key, value, qrcode } = this.state
    const str = QMConst.getIn(['host', 'v_oss_path_img'])
    let index = str.indexOf('test')
    let env = str.substr(index + 4, 1) || ''
    if (prevState.visible != visible) {
      if (visible && !qrcode) {
        var newQrcode = new QRCode(this.refs.qrcode, {
          width: 200,
          height: 200,
        })
        this.setState({ qrcode: newQrcode })
        newQrcode.makeCode(`http://h5.1000.com/#/upload-img?env=${env}&key=${key}&value=${value}`)
      }
    }
  }

  componentWillUnmount() {
    if (this.state.interval) {
      clearInterval(this.state.interval)
    }
  }

  render() {
    return (
      <Modal
        title={this.props.title}
        visible={this.state.visible}
        footer={null}
        onCancel={this._onCancel}
        width="630">
        <div className="mobileUpload">
          <div style={{ marginTop: '8px', marginBottom: '16px' }}>
            <span style={{ fontSize: '22px', color: '#333' }}>倒计时：</span>
            <span style={{ fontSize: '22px', color: '#FE7622' }}>{this.state.countDown}s</span>
          </div>
          <div style={{ fontSize: '16px', color: '#666', marginBottom: '20px' }}>
            上传过程中请勿关闭该窗口，否则可能上传失败
          </div>
          <div ref="qrcode" style={{ marginBottom: 100 }}></div>
        </div>
      </Modal>
    )
  }
}