jimu-mobile/dist/components/selectcar/selectcar.js

积木组件库助力移动端开发

'use strict';

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 _index = require('../brand/index');

var _index2 = _interopRequireDefault(_index);

var _index3 = require('../carlist/index');

var _index4 = _interopRequireDefault(_index3);

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 SelectCar = function (_Component) {
  _inherits(SelectCar, _Component);

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

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

    _this.state = {
      carBrandShow: true, // 是否显示车辆品牌
      carTypeShow: false, // 是否显示车辆型号
      carColorShow: undefined, // 是否显示颜色
      selectBrand: null, // 已选择的车辆品牌
      selectCarType: null, // 已选择的车辆型号
      selectColor: null // 已选择的车辆颜色
    };
    _this.brandClick = _this.brandClick.bind(_this);
    _this.carTypeClick = _this.carTypeClick.bind(_this);
    _this.carColorClick = _this.carColorClick.bind(_this);
    _this.brandTouchmove = _this.brandTouchmove.bind(_this);
    _this.carTypeTouchmove = _this.carTypeTouchmove.bind(_this);
    return _this;
  }

  _createClass(SelectCar, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(props) {
      this.setState({
        carBrandShow: props.show
      });
    }
  }, {
    key: 'brandClick',
    value: function brandClick(obj) {
      var self = this;
      var staticImgURL = this.props.staticImgURL;
      var carColorShow = this.state.carColorShow;
      var _props = this.props,
          brandClick = _props.brandClick,
          brandDataURL = _props.brandDataURL;


      obj.imgurl = '' + staticImgURL + obj.id + '.jpg';

      fetch('' + brandDataURL + obj.id + '.json').then(function (response) {
        return response.json();
      }).then(function (data) {
        var list = data.result.allSellSeries;

        var arr = [];
        list.map(function (ele) {
          arr = arr.concat(ele.SeriesItems);
        });
        self.setState({
          carTypeShow: true,
          carColorShow: carColorShow ? false : undefined,
          selectBrand: obj,
          carTypeArr: arr
        });
      });
      brandClick && brandClick(obj);
    }
  }, {
    key: 'carTypeClick',
    value: function carTypeClick(obj) {
      var selectBrand = this.state.selectBrand;
      var carTypeClick = this.props.carTypeClick;

      this.setState({
        carColorShow: true,
        selectCarType: obj
      });
      carTypeClick && carTypeClick([selectBrand, obj]);
    }
  }, {
    key: 'carColorClick',
    value: function carColorClick(obj) {
      var _state = this.state,
          selectBrand = _state.selectBrand,
          selectCarType = _state.selectCarType;
      var carColorClick = this.props.carColorClick;

      this.setState({
        carBrandShow: false,
        carTypeShow: false,
        carColorShow: false,
        selectColor: obj
      });

      carColorClick && carColorClick([selectBrand, selectCarType, obj]);
    }
  }, {
    key: 'brandTouchmove',
    value: function brandTouchmove() {
      var carColorShow = this.state.carColorShow;

      this.setState({
        carTypeShow: false,
        carColorShow: carColorShow ? false : undefined
      });
    }
  }, {
    key: 'carTypeTouchmove',
    value: function carTypeTouchmove() {
      this.setState({
        carColorShow: false
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _state2 = this.state,
          carTypeShow = _state2.carTypeShow,
          carColorShow = _state2.carColorShow,
          carTypeArr = _state2.carTypeArr,
          carBrandShow = _state2.carBrandShow;
      var _props2 = this.props,
          show = _props2.show,
          brandArr = _props2.brandArr,
          showWrap = _props2.showWrap,
          colorArr = _props2.colorArr,
          hotCarBrand = _props2.hotCarBrand,
          carBrandDataAttrName = _props2.carBrandDataAttrName,
          carTypeDataAttrName = _props2.carTypeDataAttrName,
          carColorDataAttrName = _props2.carColorDataAttrName;

      if (!show) {
        return null;
      }
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(_index2.default, {
          staticImgURL: this.props.staticImgURL,
          carArr: brandArr,
          show: carBrandShow,
          hotCarBrandData: hotCarBrand,
          onTouchMove: carTypeShow && !showWrap ? this.brandTouchmove : null,
          dataAttrName: carBrandDataAttrName,
          callBack: this.brandClick
        }),
        _react2.default.createElement(_index4.default, {
          show: carTypeShow,
          listData: carTypeArr,
          showWrap: showWrap,
          onTouchMove: carColorShow && !showWrap ? this.carTypeTouchmove : null,
          dataAttrName: carTypeDataAttrName,
          width: '70',
          onClick: this.carTypeClick
        }),
        _react2.default.createElement(_index4.default, {
          width: '30',
          show: carColorShow,
          showWrap: showWrap,
          colorData: colorArr,
          dataAttrName: carColorDataAttrName,
          onClick: this.carColorClick
        })
      );
    }
  }]);

  return SelectCar;
}(_react.Component);

SelectCar.defaultProps = {
  brandDataURL: '//es-static.xiaojukeji.com/static/web/activity/pile/car/json/',
  staticImgURL: '//es-static.xiaojukeji.com/static/web/activity/pile/car/brand/',
  carBrandDataAttrName: {
    id: 'id',
    name: 'name',
    firstChar: 'firstChar'
  },
  carTypeDataAttrName: {
    id: 'id',
    name: 'name'
  },
  carColorDataAttrName: {
    id: 'id',
    name: 'name'
  },
  hotCarBrand: [{
    id: 1,
    name: '大众'
  }, {
    id: 12,
    name: '现代'
  }, {
    id: 3,
    name: '丰田'
  }, {
    id: 8,
    name: '福特'
  }, {
    id: 38,
    name: '别克'
  }, {
    id: 14,
    name: '本田'
  }, {
    id: 33,
    name: '奥迪'
  }, {
    id: 63,
    name: '日产'
  }],
  showWrap: false,
  colorArr: [{
    name: '白色',
    id: 1,
    color: '#fff'
  }, {
    name: '红色',
    id: 1,
    color: '#ff7878'
  }, {
    name: '黑色',
    id: 1,
    color: '#7c7c7c'
  }, {
    name: '银色',
    id: 1,
    color: '#ccc'
  }, {
    name: '金色',
    id: 1,
    color: '#fed02e'
  }, {
    name: '灰色',
    id: 1,
    color: '#C3C3C5'
  }, {
    name: '蓝色',
    id: 1,
    color: '#507cb7'
  }, {
    name: '黄色',
    color: '#feee34'
  }, {
    name: '绿色',
    color: '#60a470'
  }, {
    name: '其它',
    color: '#f7f7f7'
  }],
  brandArr: {
    A: [{ name: '奥迪', id: '33' }, { name: '阿斯顿·马丁', id: '35' }, { name: 'AC Schnitzer', id: '117' }, { name: '阿尔法·罗密欧', id: '34' }, { name: 'ALPINA', id: '276' }, { name: 'ARCFOX', id: '272' }], B: [{ name: '奔驰', id: '36' }, { name: '宝马', id: '15' }, { name: '本田', id: '14' }, { name: '别克', id: '38' }, { name: '比亚迪', id: '75' }, { name: '宝骏', id: '120' }, { name: '标致', id: '13' }, { name: '保时捷', id: '40' }, { name: '北京', id: '27' }, { name: '宾利', id: '39' }, { name: '奔腾', id: '95' }, { name: '北汽绅宝', id: '173' }, { name: '北汽幻速', id: '203' }, { name: '北汽新能源', id: '208' }, { name: '北汽制造', id: '154' }, { name: '巴博斯', id: '140' }, { name: '北汽昌河', id: '79' }, { name: '宝沃', id: '231' }, { name: '布加迪', id: '37' }, { name: '北汽威旺', id: '143' }, { name: '比速汽车', id: '271' }, { name: '北汽道达', id: '301' }], C: [{ name: '长安', id: '76' }, { name: '长城', id: '77' }, { name: '长安欧尚', id: '163' }, { name: '成功汽车', id: '196' }, { name: '长安跨越', id: '299' }, { name: '长安轻型车', id: '294' }], D: [{ name: '大众', id: '1' }, { name: '东风风行', id: '165' }, { name: '东风', id: '32' }, { name: '东风风神', id: '113' }, { name: '东风风光', id: '259' }, { name: 'DS', id: '169' }, { name: '道奇', id: '41' }, { name: '东南', id: '81' }, { name: '东风风度', id: '187' }, { name: '东风小康', id: '142' }, { name: '电咖', id: '280' }, { name: '东风瑞泰特', id: '326' }], E: [], F: [{ name: '丰田', id: '3' }, { name: '福特', id: '8' }, { name: '法拉利', id: '42' }, { name: '菲亚特', id: '11' }, { name: '福田', id: '96' }, { name: '福迪', id: '141' }, { name: '福汽启腾', id: '197' }, { name: '福田乘用车', id: '282' }], G: [{ name: '广汽传祺', id: '82' }, { name: 'GMC', id: '112' }, { name: '观致', id: '152' }, { name: '广汽吉奥', id: '108' }, { name: '广汽集团', id: '329' }, { name: '广汽新能源', id: '313' }, { name: '国金汽车', id: '304' }, { name: '光冈', id: '116' }], H: [{ name: '哈弗', id: '181' }, { name: '红旗', id: '91' }, { name: '海马', id: '86' }, { name: '黄海', id: '97' }, { name: '华泰', id: '87' }, { name: '华颂', id: '220' }, { name: '华凯', id: '245' }, { name: '华泰新能源', id: '260' }, { name: '恒天', id: '164' }, { name: '海格', id: '150' }, { name: '汉腾汽车', id: '267' }, { name: '哈飞', id: '24' }, { name: '华骐', id: '184' }, { name: '悍马', id: '43' }, { name: '华普', id: '85' }], I: [], J: [{ name: '吉利汽车', id: '25' }, { name: 'Jeep', id: '46' }, { name: '捷豹', id: '44' }, { name: '江淮', id: '84' }, { name: '金杯', id: '83' }, { name: '江铃', id: '119' }, { name: '金旅', id: '175' }, { name: '江铃集团新能源', id: '270' }, { name: '金龙', id: '145' }, { name: '江铃集团轻汽', id: '210' }, { name: '九龙', id: '151' }, { name: '君马汽车', id: '297' }, { name: '捷途', id: '319' }], K: [{ name: '凯迪拉克', id: '47' }, { name: '克莱斯勒', id: '9' }, { name: '开瑞', id: '101' }, { name: '康迪全球鹰', id: '219' }, { name: '卡升', id: '224' }, { name: 'KTM', id: '109' }, { name: '科尼赛克', id: '100' }, { name: '卡威', id: '199' }, { name: '凯翼', id: '214' }, { name: '卡尔森', id: '156' }], L: [{ name: '雷克萨斯', id: '52' }, { name: '路虎', id: '49' }, { name: '铃木', id: '53' }, { name: '林肯', id: '51' }, { name: '猎豹汽车', id: '78' }, { name: '领克', id: '279' }, { name: '雷诺', id: '10' }, { name: '劳斯莱斯', id: '54' }, { name: '陆风', id: '88' }, { name: '兰博基尼', id: '48' }, { name: 'LOCAL MOTORS', id: '241' }, { name: '力帆汽车', id: '80' }, { name: '路特斯', id: '50' }, { name: '理念', id: '124' }, { name: '莲花汽车', id: '89' }, { name: 'Lorinser', id: '118' }, { name: '陆地方舟', id: '204' }], M: [{ name: '马自达', id: '58' }, { name: '名爵', id: '20' }, { name: '玛莎拉蒂', id: '57' }, { name: 'MINI', id: '56' }, { name: '迈凯伦', id: '129' }, { name: '摩根', id: '168' }, { name: '迈巴赫', id: '55' }], N: [{ name: '纳智捷', id: '130' }, { name: '南京金龙', id: '213' }], O: [{ name: '讴歌', id: '60' }, { name: '欧朗', id: '146' }, { name: '欧宝', id: '59' }, { name: '欧尚汽车', id: '332' }], P: [{ name: '帕加尼', id: '61' }, { name: 'Polestar', id: '308' }], Q: [{ name: '起亚', id: '62' }, { name: '奇瑞', id: '26' }, { name: '启辰', id: '122' }, { name: '乔治·巴顿', id: '222' }, { name: '庆铃汽车', id: '312' }, { name: '前途', id: '235' }], R: [{ name: '日产', id: '63' }, { name: '荣威', id: '19' }, { name: '如虎', id: '174' }, { name: '瑞驰新能源', id: '296' }, { name: '瑞麒', id: '103' }], S: [{ name: '斯柯达', id: '67' }, { name: '三菱', id: '68' }, { name: '斯巴鲁', id: '65' }, { name: '上汽大通', id: '155' }, { name: 'smart', id: '45' }, { name: '斯达泰克', id: '238' }, { name: '陕汽通家', id: '149' }, { name: '双龙', id: '69' }, { name: '赛麟', id: '205' }, { name: '思铭', id: '162' }, { name: 'SWM斯威汽车', id: '269' }, { name: '世爵', id: '66' }, { name: '双环', id: '90' }], T: [{ name: '特斯拉', id: '133' }, { name: '腾势', id: '161' }, { name: '泰卡特', id: '202' }], U: [], V: [], W: [{ name: '沃尔沃', id: '70' }, { name: '五菱汽车', id: '114' }, { name: 'WEY', id: '283' }, { name: '五十铃', id: '167' }, { name: '潍柴英致', id: '192' }, { name: '蔚来', id: '284' }, { name: '威马汽车', id: '291' }, { name: '威麟', id: '102' }, { name: '威兹曼', id: '99' }], X: [{ name: '现代', id: '12' }, { name: '雪佛兰', id: '71' }, { name: '雪铁龙', id: '72' }, { name: '新凯', id: '185' }, { name: '鑫源', id: '306' }, { name: '西雅特', id: '98' }, { name: '小鹏汽车', id: '275' }, { name: '新特汽车', id: '324' }], Y: [{ name: '英菲尼迪', id: '73' }, { name: '一汽', id: '110' }, { name: '依维柯', id: '144' }, { name: '野马汽车', id: '111' }, { name: '驭胜', id: '263' }, { name: '永源', id: '93' }, { name: '宇通客车', id: '298' }, { name: '裕路', id: '307' }, { name: '云度', id: '286' }, { name: '御捷', id: '232' }, { name: '云雀汽车', id: '317' }], Z: [{ name: '众泰', id: '94' }, { name: '中华', id: '22' }, { name: '中兴', id: '74' }, { name: '知豆', id: '206' }, { name: '之诺', id: '182' }]
  }
};
module.exports = SelectCar;