jimu-mobile
Version:
积木组件库助力移动端开发
235 lines (226 loc) • 11.8 kB
JavaScript
import React, { Component } from 'react';
import Brand from '../brand/index';
import CarList from '../carlist/index';
class SelectCar extends Component {
constructor(props) {
super(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);
}
componentWillReceiveProps(props) {
this.setState({
carBrandShow: props.show,
});
}
brandClick(obj) {
const self = this;
const { staticImgURL } = this.props;
const { carColorShow } = this.state;
const { brandClick, brandDataURL } = this.props;
obj.imgurl = `${staticImgURL}${obj.id}.jpg`;
fetch(`${brandDataURL}${obj.id}.json`)
.then(response => response.json())
.then((data) => {
const list = data.result.allSellSeries;
let arr = [];
list.map((ele) => {
arr = arr.concat(ele.SeriesItems);
});
self.setState({
carTypeShow: true,
carColorShow: carColorShow ? false : undefined,
selectBrand: obj,
carTypeArr: arr,
});
});
brandClick && brandClick(obj);
}
carTypeClick(obj) {
const { selectBrand } = this.state;
const { carTypeClick } = this.props;
this.setState({
carColorShow: true,
selectCarType: obj,
});
carTypeClick && carTypeClick([selectBrand, obj]);
}
carColorClick(obj) {
const { selectBrand, selectCarType } = this.state;
const { carColorClick } = this.props;
this.setState({
carBrandShow: false,
carTypeShow: false,
carColorShow: false,
selectColor: obj,
});
carColorClick && carColorClick([selectBrand, selectCarType, obj]);
}
brandTouchmove() {
const { carColorShow } = this.state;
this.setState({
carTypeShow: false,
carColorShow: carColorShow ? false : undefined,
});
}
carTypeTouchmove() {
this.setState({
carColorShow: false,
});
}
render() {
const {
carTypeShow, carColorShow, carTypeArr, carBrandShow,
} = this.state;
const {
show, brandArr, showWrap, colorArr, hotCarBrand, carBrandDataAttrName, carTypeDataAttrName,
carColorDataAttrName,
} = this.props;
if (!show) {
return null;
}
return (
<div>
<Brand
staticImgURL={this.props.staticImgURL}
carArr={brandArr}
show={carBrandShow}
hotCarBrandData={hotCarBrand}
onTouchMove={(carTypeShow && !showWrap) ? this.brandTouchmove : null}
dataAttrName={carBrandDataAttrName}
callBack={this.brandClick}
/>
<CarList
show={carTypeShow}
listData={carTypeArr}
showWrap={showWrap}
onTouchMove={(carColorShow && !showWrap) ? this.carTypeTouchmove : null}
dataAttrName={carTypeDataAttrName}
width="70"
onClick={this.carTypeClick}
/>
<CarList
width="30"
show={carColorShow}
showWrap={showWrap}
colorData={colorArr}
dataAttrName={carColorDataAttrName}
onClick={this.carColorClick}
/>
</div>
);
}
}
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;