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

千米公有云业务组件库

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _modal = require('antd/lib/modal');

var _modal2 = _interopRequireDefault(_modal);

var _QMConst2 = require('qm-ux/lib/QMConst');

var _QMConst3 = _interopRequireDefault(_QMConst2);

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _qrcode = require('./qrcode.js');

var _qrcode2 = _interopRequireDefault(_qrcode);

var _webapi = require('../webapi.js');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var MobileImageUpload = function (_React$Component) {
  _inherits(MobileImageUpload, _React$Component);

  function MobileImageUpload(props) {
    _classCallCheck(this, MobileImageUpload);

    var _this = _possibleConstructorReturn(this, (MobileImageUpload.__proto__ || Object.getPrototypeOf(MobileImageUpload)).call(this, props));

    _this._setInterval = function () {
      var time = 120;
      var that = _this;
      var interval = setInterval(function () {
        if (time >= 1) {
          time--;
          that.setState({ countDown: time });
        } else {
          clearInterval(that.state.interval);
          that.setState({
            countDown: 120,
            visible: false,
            interval: null
          });
          var cancel = _this.props.cancel;

          if (cancel) {
            cancel();
          }
        }
      }, 1000);

      _this.setState({ interval: interval });
    };

    _this._onCancel = function () {
      _this.setState({
        visible: false,
        countDown: 120
      });
      clearInterval(_this.state.interval);
      var cancel = _this.props.cancel;

      if (cancel) {
        cancel();
      }
    };

    _this.state = {
      //可见状态
      visible: false,
      countDown: 120,
      interval: null,
      key: '',
      value: ''
    };
    return _this;
  }

  _createClass(MobileImageUpload, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.visible != this.props.visible) {
        this.setState({ visible: nextProps.visible });
        if (nextProps.visible) {
          this._setInterval();
        }
      }
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _this2 = this;

      // 前端自己还拿不到用户session, 靠服务端解析返回奔溃
      (0, _webapi.getUserSession)().then(function (res) {
        if (res.data) {
          _this2.setState({
            key: res.data.key,
            value: res.data.value.replace(';', '')
          });
        }
      });
    }
    /**
     * 验证码倒计时
     */

  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps, prevState) {
      var _state = this.state,
          visible = _state.visible,
          key = _state.key,
          value = _state.value,
          qrcode = _state.qrcode;

      var str = _QMConst3.default.getIn(['host', 'v_oss_path_img']);
      var index = str.indexOf('test');
      var env = str.substr(index + 4, 1) || '';
      if (prevState.visible != visible) {
        if (visible && !qrcode) {
          var newQrcode = new _qrcode2.default(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);
        }
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if (this.state.interval) {
        clearInterval(this.state.interval);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        _modal2.default,
        {
          title: this.props.title,
          visible: this.state.visible,
          footer: null,
          onCancel: this._onCancel,
          width: '630' },
        _react2.default.createElement(
          'div',
          { className: 'mobileUpload' },
          _react2.default.createElement(
            'div',
            { style: { marginTop: '8px', marginBottom: '16px' } },
            _react2.default.createElement(
              'span',
              { style: { fontSize: '22px', color: '#333' } },
              '\u5012\u8BA1\u65F6\uFF1A'
            ),
            _react2.default.createElement(
              'span',
              { style: { fontSize: '22px', color: '#FE7622' } },
              this.state.countDown,
              's'
            )
          ),
          _react2.default.createElement(
            'div',
            { style: { fontSize: '16px', color: '#666', marginBottom: '20px' } },
            '\u4E0A\u4F20\u8FC7\u7A0B\u4E2D\u8BF7\u52FF\u5173\u95ED\u8BE5\u7A97\u53E3\uFF0C\u5426\u5219\u53EF\u80FD\u4E0A\u4F20\u5931\u8D25'
          ),
          _react2.default.createElement('div', { ref: 'qrcode', style: { marginBottom: 100 } })
        )
      );
    }
  }]);

  return MobileImageUpload;
}(_react2.default.Component);

exports.default = MobileImageUpload;