tplus-pos/dist/components/product/index.js

pos module

'use strict';

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

var _InputGroup3 = require('tinper-bee/dist/InputGroup');

var _InputGroup4 = _interopRequireDefault(_InputGroup3);

var _FormControl2 = require('tinper-bee/dist/FormControl');

var _FormControl3 = _interopRequireDefault(_FormControl2);

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _class2, _temp;

require('tinper-bee/dist/InputGroup/index.css');

require('tinper-bee/dist/FormControl/index.css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _mobx = require('mobx');

var _store2 = require('./store');

var _store3 = _interopRequireDefault(_store2);

var _api = require('./api');

var _api2 = _interopRequireDefault(_api);

var _mutantsMicrofx = require('mutants-microfx');

var _swiper = require('swiper/dist/js/swiper.js');

var _swiper2 = _interopRequireDefault(_swiper);

require('swiper/dist/css/swiper.min.css');

require('./index.less');

var _tplusComponentsTouch = require('tplus-components-touch');

var _getCard = require('./getCard');

var _getCard2 = _interopRequireDefault(_getCard);

var _getPageCard = require('./getPageCard');

var _getPageCard2 = _interopRequireDefault(_getPageCard);

var _detail = require('./detail');

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _mutantsUtil = require('mutants-util');

var _tplusPoslogin = require('tplus-poslogin');

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

var Product = (0, _mutantsMicrofx.observer)(_class = (_temp = _class2 = function (_Component) {
  (0, _inherits3.default)(Product, _Component);

  function Product(props, context) {
    var _this2 = this;

    (0, _classCallCheck3.default)(this, Product);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Product.__proto__ || (0, _getPrototypeOf2.default)(Product)).call(this, props, context));

    _this.getLevel = function () {
      //加载左侧菜单
      var items = [];

      var _ref = _this.store || {},
          level_1 = _ref.level_1,
          level_2 = _ref.level_2,
          productLevel = _ref.productLevel,
          getSecondLevelChildClass = _ref.getSecondLevelChildClass;

      if (productLevel && productLevel.length > 0) {
        items = [].concat((0, _toConsumableArray3.default)(productLevel));
      }
      if (getSecondLevelChildClass && getSecondLevelChildClass.length > 0) {
        items = [].concat((0, _toConsumableArray3.default)(getSecondLevelChildClass));
      }
      if (items && items.length > 0) {
        return items.map(function (item) {
          var _ref2 = item || {},
              ID = _ref2.ID,
              ChildClass = _ref2.ChildClass;

          return _react2.default.createElement(
            'div',
            {
              onClick: level_2 ? _this.secondLevelClick.bind(_this, ID) : _this.firstLevelClick.bind(_this, ID), key: ID,
              className: 'first-item swiper-slide ' + ((level_2 ? level_2 : level_1) == ID ? 'first-item-active' : '') },
            _react2.default.createElement(
              'span',
              { className: 'first-txt' },
              item.Name
            ),
            ChildClass && ChildClass.length > 0 && _react2.default.createElement(
              'span',
              { className: 'first-arrows' },
              '\xA0'
            )
          );
        });
      } else {
        return null;
      }
    };

    _this.getFirshLevel = function () {
      // 右侧的一级菜单
      var level = _this.store.productLevel;
      return level.map(function (item) {
        return _react2.default.createElement(
          'div',
          {
            onClick: _this.firstLevelClick.bind(_this, item.ID), key: item.ID,
            className: 'first-item swiper-slide text-1line-overflow ' + (_this.store.level_1 == item.ID ? 'first-item-active' : '') },
          item.Name
        );
      });
    };

    _this.getSecondLevel = function () {
      // 上方的二级菜单
      var secondLevelChildClass = _this.store.getSecondLevelChildClass;
      return secondLevelChildClass ? secondLevelChildClass.map(function (item) {
        return _react2.default.createElement(
          'div',
          { onClick: _this.secondLevelClick.bind(_this, item.ID),
            key: item.ID,
            className: 'swiper-slide second-item ' + (_this.store.level_2 == item.ID ? 'second-item-active' : '') },
          item.Name
        );
      }) : null;
    };

    _this.cardClick = function (item, x, y, dom, isDefault) {
      // this.clearKeyboard();
      _this.props.onClick && _this.props.onClick(item, x, y, dom, isDefault);
      if (_this.isHorizontalPad) return;
      _this.input && _this.input.input && _this.input.input.select();
    };

    _this.retrunFirsterLevel = function (ID) {
      _this.store.retrunFirsterLevel(ID);
      _this.clearKeyboard();
    };

    _this.firstLevelClick = function (ID) {
      _this.store.changeFirshLevel(ID);
      _this.setState({
        activePage: 1
      });
      _this.clearKeyboard();
    };

    _this.secondLevelClick = function (ID) {
      _this.store.changeSecondLevel(ID);
      _this.clearKeyboard();
    };

    _this.inputChange = function (value) {
      _this.setState({ value: value });
      _this.timer && clearTimeout(_this.timer);
      _this.timer = setTimeout(function () {
        _this.store.changeParams("key", value);
      }, 600);
    };

    _this.clearKeyboard = function () {
      _this.setState({
        value: ''
      });
    };

    _this.onScroll = function (e) {
      var clientHeight = e.target.clientHeight;
      var scrollHeight = e.target.scrollHeight;
      var scrollTop = e.target.scrollTop;
      if (clientHeight + scrollTop + 80 >= scrollHeight) {
        _this.loadMoreTimer && clearTimeout(_this.loadMoreTimer);
        _this.loadMoreTimer = setTimeout((0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
          return _regenerator2.default.wrap(function _callee$(_context) {
            while (1) {
              switch (_context.prev = _context.next) {
                case 0:
                  _context.next = 2;
                  return _this.store.getMoreProductList();

                case 2:
                  _this.setState({
                    additionalNumber: Math.floor(_this.box.clientWidth / _this.state.type) - _this.store.getToJsProductList.length % Math.floor(_this.box.clientWidth / _this.state.type)
                  });

                case 3:
                case 'end':
                  return _context.stop();
              }
            }
          }, _callee, _this2);
        })), 200);
      }
    };

    _this.handleOk = function (value) {
      _this.setState({ aa: value });
    };

    _this.reset = function () {
      // 重置product，比如选中一个商品后，
      _this.clearKeyboard();
      _this.store.changeParams("key", '');
    };

    _this.changeKeyboardShowOrHide = function () {
      var isKeyboardShow = void 0;
      if (document.getElementById("product-keyboard-button") && document.getElementById("ByProduct")) {
        isKeyboardShow = false;
        _tplusComponentsTouch.Keyboard.close2();
      } else if (document.getElementById("product-keyboard-button") && document.getElementById("ByMember")) {
        isKeyboardShow = true;
        _tplusComponentsTouch.Keyboard.open2(_this.onKeyboardChange, _this.onKeyDown.bind(_this, { keyCode: 13 }), _tplusComponentsTouch.Keyboard.close2, 'ByProduct', _mutantsMicrofx.localStore.get('ByProduct'));
      } else if (!document.getElementById("product-keyboard-button")) {
        isKeyboardShow = true;

        _tplusComponentsTouch.Keyboard.open2(_this.onKeyboardChange, _this.onKeyDown.bind(_this, { keyCode: 13 }), _tplusComponentsTouch.Keyboard.close2, 'ByProduct', _mutantsMicrofx.localStore.get('ByProduct'));
      }
      if (!_this.isHorizontalPad && isKeyboardShow == true) {
        _this.input.input.focus();
      }
      _this.setState({
        isKeyboardShow: isKeyboardShow
      });
      _mutantsMicrofx.localStore.set('product-keyboard', isKeyboardShow);
    };

    _this.changeScanProduct = function () {
      if (_this.scanObj) _this.scanObj.startScan();
    };

    _this.onScanResult = function (res) {
      _this.setState({
        value: res
      }, function () {
        _this.onKeyDown({ keyCode: 13 });
      });
    };

    _this.onKeyboardChange = function (key) {
      var value = _this.state.value;

      var newValue = _tplusComponentsTouch.Keyboard.getNewValue(_this.input.input, value, key);
      _this.setState({
        value: newValue
      }, function () {
        _this.inputChange(_this.state.value);
      });
    };

    _this.onKeyDown = function (e) {
      var value = _this.state.value;

      if (e.keyCode == 13 && value) {
        if (_this.timer) {
          clearTimeout(_this.timer);
        }
        _api2.default.searchInventory({
          Key: value, // 存货条码录入框输入的值，可以是助记码、存货编码，也可以是条形码
          SearchType: 0, // “0”不指定，1：“条形码” 2：“非条形码”
          IdinventoryClass: -2, // 存货分类Id，-1代表常用分类，-2代表全部分类，其他以数据库的为准
          PageNo: 1, // 当前页号 从1开始
          PageSize: 20, // 每页大小
          isReturn: _this.props.isReturn,
          Idmember: _this.props.idMember || '',
          IsSelfCash: _mutantsUtil.platform.isVerticalTouch,
          Idstore: _this.props.configure.idStore || '',
          posCode: _this.posCode
        }).then(function (_ref4) {
          var RetailDetailData = _ref4.RetailDetailData,
              InventoryData = _ref4.InventoryData,
              TotalCount = _ref4.TotalCount,
              IsBarCode = _ref4.IsBarCode,
              IsSerialNumber = _ref4.IsSerialNumber;

          if (TotalCount == 0) {
            _tplusComponentsTouch.Message.info('无此商品信息', {}, 'warn');
            _this.reset();
          } else if (TotalCount == 1) {
            // 只有一个商品
            var fn = _this.props.justOneResultCallBack;
            if (IsBarCode || IsSerialNumber) {
              // 条形码、序列号
              fn && fn(RetailDetailData, IsSerialNumber);
            } else {
              if (RetailDetailData) {
                fn && fn(RetailDetailData, IsSerialNumber);
              } else {
                _this.props.onClick && _this.props.onClick(InventoryData[0], 0, 0, null, true);
              }
            }
            _this.clearKeyboard();
            _this.store.changeParams("key", '');
          } else {
            _this.store.changeParams("key", value);
          }
        });
      }
    };

    _this.scrollProgress = function (progress) {
      if (progress >= 1 && !_this.store.dataLoading) {
        _this.store.getMoreProductList();
      }
    };

    _this.prevPage = function () {
      var activePage = _this.state.activePage;

      if (activePage !== 1) {
        _this.setState({
          activePage: activePage - 1
        });
        _this.store.getCurrentProductList(_this.state.activePage - 2);
      }
    };

    _this.nextPage = function () {
      var activePage = _this.state.activePage;
      var pageTotalCount = _this.store.pageTotalCount;

      if (activePage !== pageTotalCount) {
        _this.setState({
          activePage: activePage + 1
        });
        _this.store.getCurrentProductList(_this.state.activePage);
      }
    };

    _this.getUnder1024Render = function () {
      var _this$props = _this.props,
          isReturn = _this$props.isReturn,
          totalVariety = _this$props.totalVariety,
          totalQuantity = _this$props.totalQuantity,
          buyQuantity = _this$props.buyQuantity,
          returnQuantity = _this$props.returnQuantity,
          sumQuantity = _this$props.sumQuantity;

      if (isReturn === true) {
        return _react2.default.createElement(
          'span',
          { className: 'amount-property' },
          _react2.default.createElement(
            'span',
            null,
            '\u5171' + totalVariety + '\u79CD'
          ),
          _react2.default.createElement(
            'span',
            { className: 'span' },
            '\u9500'
          ),
          _react2.default.createElement(
            'span',
            null,
            buyQuantity
          ),
          _react2.default.createElement(
            'span',
            null,
            '\u4EF6'
          ),
          _react2.default.createElement(
            'span',
            { className: 'span' },
            '\u9000'
          ),
          _react2.default.createElement(
            'span',
            null,
            returnQuantity
          ),
          _react2.default.createElement(
            'span',
            null,
            '\u4EF6'
          ),
          _react2.default.createElement(
            'span',
            { className: 'span' },
            '\u5408\u8BA1'
          ),
          _react2.default.createElement(
            'span',
            null,
            sumQuantity
          )
        );
      } else {
        return _react2.default.createElement(
          'span',
          { className: 'amount-property' },
          _react2.default.createElement(
            'span',
            null,
            '\u5171' + totalVariety + '\u79CD'
          ),
          _react2.default.createElement(
            'span',
            { className: 'span' },
            totalQuantity
          ),
          _react2.default.createElement(
            'span',
            null,
            '\u4EF6'
          ),
          _react2.default.createElement(
            'span',
            { className: 'span' },
            '\u5408\u8BA1'
          ),
          _react2.default.createElement(
            'span',
            null,
            sumQuantity
          )
        );
      }
    };

    var _ref5 = _mutantsUtil.platform || {},
        isHorizontalPad = _ref5.isHorizontalPad;

    _this.isHorizontalPad = !!isHorizontalPad;
    _this.store = new _store3.default();
    _this.store.justOneResultCallBack = function (value) {
      _this.clearKeyboard();
      props.justOneResultCallBack(value);
    };
    _this.store.reset = function () {
      _tplusComponentsTouch.Message.warn('无此商品信息');
      _this.clearKeyboard();
      _this.store.setParams('isReturn', _this.props.isReturn);
    };

    // this.store.init();
    _this.size = {
      small: '96',
      middle: '116',
      big: '170'
    };
    _this.state = {
      additionalNumber: 0, // 宽度，用来计算往 detail 中增加多少个无用的div
      pageSize: 12, // 这个页面一打开就是固定的，用宽度算好的，页面改变大小并不会改变 此数据
      type: _this.size[props.type || 'small'],
      isKeyboardShow: false,
      value: '',
      itemStyle: {
        itemHeight: 0,
        itemWidth: 0
      },
      activePage: 1
    };
    _this.posCode = _tplusPoslogin.PosInitData && (0, _tplusPoslogin.PosInitData)('posCode');
    return _this;
  }

  (0, _createClass3.default)(Product, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this3 = this;

      console.log('this.context => ', this.context);
      // 初始化时，页面宽度获取的不对，所以加个setTimeout
      setTimeout(function () {
        var isKeyboardShow = _mutantsMicrofx.localStore.get('product-keyboard') == 'true';
        if (isKeyboardShow) {
          _tplusComponentsTouch.Keyboard.open2(_this3.onKeyboardChange, _this3.onKeyDown.bind(_this3, { keyCode: 13 }), _tplusComponentsTouch.Keyboard.close2, 'ByProduct', _mutantsMicrofx.localStore.get('ByProduct'));
        }
        var width = _this3.box.clientWidth;

        var _getItemHeight = _this3.getItemHeight(),
            itemHeight = _getItemHeight.itemHeight,
            itemWidth = _getItemHeight.itemWidth;

        var pageWidth = Math.floor((_this3.boxFather.clientWidth - 12) / itemWidth);
        var pageHeight = Math.floor(_this3.boxFather.clientHeight / (itemHeight + 20));
        _this3.store.setShowPageCount(pageWidth * pageHeight);
        var POSProductPageStyle = _this3.store.POSProductPageStyle;

        console.log(POSProductPageStyle, 'POSProductPageStyle======');
        // 进行翻页数据处理
        !POSProductPageStyle && _this3.store.getCurrentProductList(0);
        var pageSize = Math.floor(width / _this3.state.type) * 12;
        _this3.store.setParams('PageSize', pageSize);
        _this3.store.setParams('Idmember', _this3.props.idMember || '');
        _this3.store.setParams('isReturn', _this3.props.isReturn);
        _this3.store.setParams('Idstore', _this3.props.configure.idStore);
        _this3.store.init(_this3.props.configure);

        new _swiper2.default('.swiper-container-first', {
          slidesPerView: 'auto',
          spaceBetween: 0,
          freeMode: true,
          centeredSlides: false,
          observer: true, // 二级菜单 切换，会自适应
          observeParents: true,
          observeSlideChildren: true,
          direction: 'vertical'
        });
        window.addEventListener('resize', _this3.resize);
        _this3.setState({
          additionalNumber: 0,
          pageSize: pageSize,
          isKeyboardShow: isKeyboardShow,
          touchScrollHeight: (_this3.boxFather || {}).clientHeight
        });
      });
    }
  }, {
    key: 'resize',
    value: function resize() {
      var _this4 = this;

      // 页面调整大小，商品信息重刷
      if (this.resizeTimer) {
        clearTimeout(this.resizeTimer);
      }
      this.resizeTimer = setTimeout(function () {
        if (!_this4.box) return;
        var clientWidth = _this4.box.clientWidth;
        var pageSize = Math.floor(clientWidth / _this4.state.type) * 12;
        _this4.store.setParams('PageSize', pageSize);
        _this4.store.setParams('PageNo', 1);
      }.bind(this), 400);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      window.removeEventListener('resize', this.resize);
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.store.setParams('isReturn', this.props.isReturn);
      this.store.setParams('Idmember', this.props.idMember || '');
      this.store.setParams('Idstore', this.props.configure.idStore);
    }

    ////////  为了情况 keyboard 值 start  \\\\\\\\\

    ////////  为了情况 keyboard 值 end  \\\\\\\\\

    //移动端：扫描商品

  }, {
    key: 'getItemHeight',
    value: function getItemHeight() {
      var _props = this.props,
          type = _props.type,
          configure = _props.configure;

      var itemHeight = 16;
      var itemWidth = 0;
      if (configure.name) {
        itemHeight += 48;
        if (configure.img) {
          itemHeight += 10;
        }
      }
      if (configure.price) {
        itemHeight += 24;
      }
      if (configure.code) {
        itemHeight += 21;
      }
      if (type === 'big') {
        if (configure.img) {
          itemHeight += 150;
        }
        if (configure.specification) {
          itemHeight += 40;
        }
        itemWidth += 170;
      } else if (type === 'middle') {
        if (configure.img) {
          itemHeight += 96;
        }
        if (configure.specification) {
          itemHeight += 20;
        }
        itemWidth += 116;
      } else {
        if (configure.img) {
          itemHeight += 76;
        }
        if (configure.specification) {
          itemHeight += 20;
        }
        itemWidth += 96;
      }
      return { itemHeight: itemHeight, itemWidth: itemWidth };
    }

    //分辨率低于1024时，需要在商品列表下面展示结算信息

  }, {
    key: 'render',
    value: function render() {
      var _this5 = this;

      var _store = this.store,
          level_1 = _store.level_1,
          level_2 = _store.level_2,
          pageCount = _store.pageCount,
          params = _store.params,
          getToJsProductList = _store.getToJsProductList,
          showPageCount = _store.showPageCount,
          pageTotalCount = _store.pageTotalCount,
          POSProductPageStyle = _store.POSProductPageStyle;
      var _state = this.state,
          isKeyboardShow = _state.isKeyboardShow,
          value = _state.value,
          _state$touchScrollHei = _state.touchScrollHeight,
          touchScrollHeight = _state$touchScrollHei === undefined ? 0 : _state$touchScrollHei,
          activePage = _state.activePage;

      return _react2.default.createElement(
        'div',
        { className: 'product' },
        _react2.default.createElement(
          'div',
          { className: 'product-left' },
          _react2.default.createElement(
            'div',
            { className: 'title' },
            _react2.default.createElement(
              'div',
              { className: 'search' },
              _react2.default.createElement(
                _InputGroup4.default,
                { simple: true, className: 'keyboard' },
                _react2.default.createElement(_FormControl3.default, {
                  id: 'productPoint',
                  type: 'text',
                  value: value,
                  placeholder: '\u626B\u63CF\u6216\u8F93\u5165\u5546\u54C1\u7F16\u7801/\u6761\u7801',
                  onChange: this.inputChange,
                  onBlur: function onBlur(val) {
                    _tplusComponentsTouch.Keyboard.close2();
                    // this.clearKeyboard();
                    var key = _this5.store.getParams("Key");
                    if (key && key != val) {
                      _this5.store.changeParams("key", val);
                    }
                  },
                  onKeyDown: this.onKeyDown,
                  ref: function ref(input) {
                    return _this5.input = input;
                  }
                }),
                _react2.default.createElement(
                  _InputGroup4.default.Button,
                  { shape: 'border' },
                  this.isHorizontalPad ? _react2.default.createElement(_tplusComponentsTouch.Ticon, { type: 'saomiao1', className: 'product-saomiao', onClick: this.changeScanProduct }) : isKeyboardShow ? _react2.default.createElement(_tplusComponentsTouch.Ticon, { type: 'jianpan2', className: 'product-jianpan', onClick: this.changeKeyboardShowOrHide }) : _react2.default.createElement(_tplusComponentsTouch.Ticon, { type: 'jianpan1', className: 'product-jianpan', onClick: this.changeKeyboardShowOrHide })
                )
              ),

              /* 扫描组件 */
              this.isHorizontalPad && _react2.default.createElement(_tplusComponentsTouch.Scan, { ref: function ref(scan) {
                  return _this5.scanObj = scan;
                }, onChange: this.onScanResult })
            ),
            !POSProductPageStyle && _react2.default.createElement(
              'div',
              { className: 'nextPage' },
              activePage === 1 || pageTotalCount === 0 ? _react2.default.createElement(_tplusComponentsTouch.Ticon, { type: 'zuozhihui' }) : _react2.default.createElement(_tplusComponentsTouch.Ticon, { className: 'pageTicon', onClick: this.prevPage, type: 'zuo1' }),
              _react2.default.createElement(
                'span',
                { className: 'txt' },
                pageTotalCount === 0 ? 0 : activePage,
                ' / ',
                pageTotalCount
              ),
              activePage === pageTotalCount || pageTotalCount === 0 ? _react2.default.createElement(_tplusComponentsTouch.Ticon, { type: 'youzhihui' }) : _react2.default.createElement(_tplusComponentsTouch.Ticon, { className: 'pageTicon', onClick: this.nextPage, type: 'you1' })
            )
          ),
          _react2.default.createElement(
            'div',
            { className: 'content' },
            _react2.default.createElement(
              'div',
              { className: 'detail-box-ouside', ref: function ref(boxOuside) {
                  return _this5.boxOuside = boxOuside;
                } },
              _react2.default.createElement(
                'div',
                { className: 'detail-box ' + (this.props.showAmount ? 'detail-box-1024' : ''), ref: function ref(boxFather) {
                    return _this5.boxFather = boxFather;
                  }, onScroll: this.onScroll },
                POSProductPageStyle ? _react2.default.createElement(
                  _tplusComponentsTouch.TouchScroll,
                  { height: touchScrollHeight, scrollProgress: this.scrollProgress },
                  _react2.default.createElement(
                    'div',
                    { className: 'detail-content', ref: function ref(box) {
                        return _this5.box = box;
                      } },
                    _react2.default.createElement(_getCard2.default, {
                      list: getToJsProductList,
                      father: this.box,
                      type: this.props.type || 'small',
                      configure: this.props.configure,
                      pricePrecision: this.props.pricePrecision,
                      click: this.cardClick }),
                    _react2.default.createElement('div', { className: 'detail-bottom ' + (pageCount <= params.PageNo && getToJsProductList.length != 0 ? '' : 'display-none') })
                  )
                ) : _react2.default.createElement(
                  'div',
                  { className: 'detail-content', ref: function ref(box) {
                      return _this5.box = box;
                    } },
                  _react2.default.createElement(_getPageCard2.default, {
                    list: getToJsProductList,
                    father: this.box,
                    type: this.props.type || 'small',
                    configure: this.props.configure,
                    pricePrecision: this.props.pricePrecision,
                    click: this.cardClick }),
                  _react2.default.createElement('div', { className: 'detail-bottom ' + (pageCount <= params.PageNo && getToJsProductList.length != 0 ? '' : 'display-none') })
                )
              ),
              this.props.showAmount ? _react2.default.createElement(
                'div',
                { className: 'amount' },
                _react2.default.createElement(
                  'label',
                  { className: 'amount-label' },
                  '\u672C\u6B21\u5E94\u6536:'
                ),
                _react2.default.createElement(
                  'span',
                  { className: 'amount-money' },
                  (0, _detail.formatNumber)(this.props.totalAmount, this.props.pricePrecision)
                ),
                this.getUnder1024Render()
              ) : null
            )
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'product-right' },
          _react2.default.createElement(
            'div',
            { className: 'product-level' },
            _react2.default.createElement(
              'div',
              { className: 'swiper-container-first' },
              _react2.default.createElement(
                'div',
                { className: 'swiper-wrapper swiper-wrapper-first' },
                level_2 ? _react2.default.createElement(
                  'div',
                  { className: 'return', onClick: this.retrunFirsterLevel.bind(this, level_1) },
                  _react2.default.createElement(_tplusComponentsTouch.Ticon, { type: 'fanhui' }),
                  '\u8FD4\u56DE'
                ) : null,
                this.getLevel()
              )
            )
          )
        ),
        _react2.default.createElement('div', { id: 'product-keyboard', className: 'product-keyboard' })
      );
    }
  }]);
  return Product;
}(_react.Component), _class2.propTypes = {
  type: _propTypes2.default.string, // big middle small
  configure: _propTypes2.default.object.isRequired, // {img: true, price: true, code: true, name: true}
  onClick: _propTypes2.default.func.isRequired, // 普通点击
  justOneResultCallBack: _propTypes2.default.func.isRequired // 扫码
}, _class2.contextTypes = {
  viewModel: _propTypes2.default.object
}, _class2.animate = function (_ref6) {
  var _ref6$x = _ref6.x1,
      x1 = _ref6$x === undefined ? 800 : _ref6$x,
      _ref6$y = _ref6.y1,
      y1 = _ref6$y === undefined ? 800 : _ref6$y,
      _ref6$x2 = _ref6.x2,
      x2 = _ref6$x2 === undefined ? 100 : _ref6$x2,
      _ref6$y2 = _ref6.y2,
      y2 = _ref6$y2 === undefined ? 100 : _ref6$y2,
      url = _ref6.url,
      dom = _ref6.dom,
      isDefault = _ref6.isDefault;

  if (!dom && !isDefault) {
    return;
  }
  var el = document.createElement('div');
  el.id = "productAnimate";
  document.body.appendChild(el);
  dom = dom.cloneNode(true);
  dom.style.width = "100%";
  dom.style.height = "100%";
  dom.style["border-radius"] = "50%";
  dom.border = "2px solid #FFF";

  function ref(m) {
    m.appendChild(dom);
    setTimeout(function () {
      if (isDefault) {
        m.style.width = 24 + "px";
        m.style.height = 24 + "px";
      } else {
        m.style.width = 44 + "px";
        m.style.height = 44 + "px";
      }
      m.style.top = y1 - 100 + "px";
      m.style.left = x1 - 25 + "px";
      m.style.transition = "all 0.3s";
    });
    // setTimeout(() => {
    //   m.style.top = y1 - 75 + "px";
    //   m.style.transition = "all 0.2s";
    // }, 300)
    setTimeout(function () {
      m.style.top = y2 + "px";
      m.style.left = x2 + "px";
      m.style.width = 0;
      m.style.height = 0;
      m.style.transition = "all 0.4s";
      setTimeout(function () {
        document.body.removeChild(el);
      }, 400);
    }, 300);
  }

  _reactDom2.default.render(_react2.default.createElement('div', { className: 'product-animate', ref: ref, style: { width: "0", height: "0", position: "fixed", top: y1, left: x1, zIndex: "100", transition: "all 1s" } }), el);
}, _temp)) || _class;

exports.default = Product;
//# sourceMappingURL=index.js.map