<template>
<section class="wrap">
<Button class="btn" type="primary" @click="openAll()">品牌、车系、车型 </Button>
<dlr-car ref="dlrCar" v-model="ui.showCar" :fixed="true">
<dlr-car-brand slot="dlrCarBrand"
:data="brandData"
:selected-id="currentBrandId"
@on-select-brand="selectBrandHandler">
<dlr-car-brand-group slot="dlrCarBrandGroup" v-for="(item) in brandData" :key="item.id" :alpha="item.alpha" >
<dlr-car-brand-group-item slot="dlrCarBrandGroupItem" v-for="(si) in item.list" :key="si.id"
:data="si"
:lazy="true"
:item-id="si.id"
:item-img="si.src"
:item-name="si.name">
</dlr-car-brand-group-item>
</dlr-car-brand-group>
</dlr-car-brand>
<dlr-car-series slot="dlrCarSeries"
@on-select-series="selectSeriesHandler"
:selected-id="currentSeriesId">
<dlr-car-series-group slot="dlrCarSeriesGroup" v-for="(item) in seriesData" :key="item.id"
:alpha="item.name">
<dlr-car-series-group-item slot="dlrCarSeriesGroupItem" v-for="(si) in item.list" :key="si.id"
:data="si"
:item-id="si.id"
:item-name="si.name + 'X5'">
</dlr-car-series-group-item>
</dlr-car-series-group>
</dlr-car-series>
<dlr-car-spec slot="dlrCarSpec"
@on-select-spec="selectSpecHandler"
:selected-id="currentSpecId">
<dlr-car-spec-group slot="dlrCarSpecGroup" v-for="(item) in specData" :key="item.id"
:alpha="item.name">
<dlr-car-spec-group-item
slot="dlrCarSpecGroupItem"
v-for="(si) in item.list" :key="si.id"
:data="si"
:item-id="si.id"
:item-price="si.price"
:item-name="si.name + 'X5 运动版'">
</dlr-car-spec-group-item>
</dlr-car-spec-group>
</dlr-car-spec>
</dlr-car>
</section>
</template>
<script>
export default {
data () {
return {
currentBrandId: 105,
currentSeriesId: 102,
currentSpecId: 108,
ui: {
showCar: false
},
brandData: [],
seriesData: [],
specData: []
}
},
mounted () {
this.loadBrandData()
},
methods: {
loadBrandData () {
let arr = []
for (let i = 1; i < 6; i++) {
let p = { id: i, name: '品牌' + i, alpha: i, list: [] }
arr.push(p)
for (let m = 100; m < 120; m++) {
let item = { id: (i * m + i), name: '宝马' + (i * m + i), src: 'http://image.bitautoimg.com/bt/car/default/images/logo/masterbrand/png/100/m_8_100.png' }
p.list.push(item)
}
}
this.brandData = arr
if (arr.length === 0) {
this.brandData = []
const step = 1
this.$refs['dlrCar'].showNullText(step, '木有数据啦。。')
}
},
loadSeriesData () {
let arr = []
for (let i = 1; i < 6; i++) {
let p = { id: i, name: '车系' + i, list: [] }
arr.push(p)
for (let m = 100; m < 120; m++) {
let item = { id: (i * m + i), name: '宝马' + (i * m + i) }
p.list.push(item)
}
}
this.seriesData = arr
},
loadSpecData () {
let arr = []
for (let i = 1; i < 6; i++) {
let p = { id: i, name: '车型' + i, list: [] }
arr.push(p)
for (let m = 100; m < 120; m++) {
let item = { id: (i * m + i), name: '宝马' + (i * m + i), price: '45万' }
p.list.push(item)
}
}
this.specData = arr
},
openAll () {
this.ui.showCar = true
},
selectBrandHandler (data) {
console.log('brand:', data)
this.currentBrandId = data.data.id
this.seriesData = []
setTimeout(() => {
this.loadSeriesData()
}, 1500)
},
selectSeriesHandler (data) {
console.log('series:', data)
this.specData = []
setTimeout(() => {
this.loadSpecData()
}, 1000)
},
selectSpecHandler (data) {
console.log('spec:', data)
}
}
}
</script>