|
|
|
@ -16,8 +16,55 @@
|
|
|
|
|
<ul class="sb-ul">
|
|
|
|
|
<span class="liSn">按品牌拼音首字母查找:</span>
|
|
|
|
|
<li v-for="(item,index) in letterArr" :key="index" :class="activeLi === index ? 'lactive': ''" @click="handlerLi(index)">{{item}}</li>
|
|
|
|
|
<li @click="selectAll">全选</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div style="clear: both"></div>
|
|
|
|
|
<div class="sb-tabs">
|
|
|
|
|
<a-form-model layout="inline" style="margin-left: 16px">
|
|
|
|
|
<a-form-model-item label="数据筛选">
|
|
|
|
|
<a-select style="width: 154px" mode="multiple" v-model="countries" placeholder="选择国别" allowClear>
|
|
|
|
|
<a-select-option v-for="(item) in countryList" :value="item.key" :key="item.value">
|
|
|
|
|
{{item.value}}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-opt-group v-for="(it,id) in countryList" :key="id*10" :label="it.value">
|
|
|
|
|
<a-select-option v-for="(item) in it.data" :value="item.key" :key="item.value">
|
|
|
|
|
{{item.value}}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select-opt-group>
|
|
|
|
|
</a-select>
|
|
|
|
|
<a-select style="margin-left: 8px;width: 154px" mode="multiple" v-model="energies" placeholder="选择能源" allowClear>
|
|
|
|
|
<a-select-option v-for="(item) in energyList" :value="item.key" :key="item.value">
|
|
|
|
|
{{item.value}}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
<a-select style="margin-left: 8px;width: 154px" mode="multiple" v-model="prices" placeholder="选择价格" allowClear>
|
|
|
|
|
<a-select-option v-for="(item) in priceList" :value="item.key" :key="item.value">
|
|
|
|
|
{{item.value}}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
<a-select style="margin-left: 8px;width: 154px" mode="multiple" v-model="specs" placeholder="选择级别" allowClear>
|
|
|
|
|
<a-select-option v-for="(item) in specList" :value="item.key" :key="item.value">
|
|
|
|
|
{{item.value}}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-opt-group v-for="(it,id) in specList" :key="id*10" :label="it.value">
|
|
|
|
|
<a-select-option v-for="(item) in it.data" :value="item.key" :key="item.value">
|
|
|
|
|
{{item.value}}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select-opt-group>
|
|
|
|
|
</a-select>
|
|
|
|
|
<a-select style="margin-left: 8px;width: 154px" mode="multiple" v-model="displacements" placeholder="选择排量" allowClear>
|
|
|
|
|
<a-select-option v-for="(item) in displacementList" :value="item.key" :key="item.value">
|
|
|
|
|
{{item.value}}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
<a-select style="margin-left: 8px;width: 154px" mode="multiple" v-model="seats" placeholder="选择座位数" allowClear>
|
|
|
|
|
<a-select-option v-for="(item) in seatList" :value="item.key" :key="item.value">
|
|
|
|
|
{{item.value}}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
<a-button type="primary" style="margin-left: 16px" @click="onSearch">查询</a-button>
|
|
|
|
|
</a-form-model-item>
|
|
|
|
|
</a-form-model>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sb-body">
|
|
|
|
|
<div class="sb-dd">
|
|
|
|
|
<vue-scroll>
|
|
|
|
@ -31,13 +78,12 @@
|
|
|
|
|
</div>
|
|
|
|
|
</vue-scroll>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="sb-dd-right">
|
|
|
|
|
<vue-scroll>
|
|
|
|
|
<div class="sb-bd" v-loading="load">
|
|
|
|
|
<div class="sb-b-item" :class="list.indexOf(item.name) != -1 ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)">
|
|
|
|
|
<div v-if="item.name.length > 12" style="font-size: 15px">{{item.name}}</div>
|
|
|
|
|
<div v-else>{{item.name}}</div>
|
|
|
|
|
<div class="sb-b-item" :class="list.indexOf(item.seriesname) != -1 ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)">
|
|
|
|
|
<div v-if="item.seriesname.length > 12" style="font-size: 15px">{{item.seriesname}}</div>
|
|
|
|
|
<div v-else>{{item.seriesname}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</vue-scroll>
|
|
|
|
@ -52,7 +98,8 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getUserBrand, getUserSeriesName } from "@/api/comm";
|
|
|
|
|
import {getCountryS,getPriceRangeS,getSpecName1,getSeatS,getDisplacementS,getEnergyS} from "@/api/SaleRankMarketCommon";
|
|
|
|
|
import { getUserBrand, getSeriesNameByCategory } from "@/api/comm";
|
|
|
|
|
export default {
|
|
|
|
|
name: "iSwitchModel",
|
|
|
|
|
props: {
|
|
|
|
@ -84,6 +131,8 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.searchForm.token = this.getToken;
|
|
|
|
|
this.getApi();
|
|
|
|
|
this.brandname = this.brand;
|
|
|
|
|
this.modelName = this.model;
|
|
|
|
|
this.getBrands().then(() => {
|
|
|
|
@ -104,6 +153,18 @@ export default {
|
|
|
|
|
token: "",
|
|
|
|
|
sBrandName: ""
|
|
|
|
|
},
|
|
|
|
|
searchForm: {
|
|
|
|
|
token: '',
|
|
|
|
|
sBrand: '',
|
|
|
|
|
sType: 'Series',
|
|
|
|
|
sFirstword: '',
|
|
|
|
|
sSpec: '',
|
|
|
|
|
sPriceRangeS: '',
|
|
|
|
|
sDisplacementS: '',
|
|
|
|
|
sSeatS: '',
|
|
|
|
|
sEnergyType: '',
|
|
|
|
|
sCountryS: '',
|
|
|
|
|
},
|
|
|
|
|
letterArr: [
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
@ -114,10 +175,44 @@ export default {
|
|
|
|
|
chooseBrand: null,
|
|
|
|
|
chooseModel: null,
|
|
|
|
|
modelName: "",
|
|
|
|
|
brandname: ""
|
|
|
|
|
brandname: "",
|
|
|
|
|
// 筛选项
|
|
|
|
|
countryList: [],
|
|
|
|
|
energyList: [],
|
|
|
|
|
priceList: [],
|
|
|
|
|
specList: [],
|
|
|
|
|
displacementList: [],
|
|
|
|
|
seatList: [],
|
|
|
|
|
// 中间数组
|
|
|
|
|
countries: [],
|
|
|
|
|
energies: [],
|
|
|
|
|
prices: [],
|
|
|
|
|
specs: [],
|
|
|
|
|
seats: [],
|
|
|
|
|
displacements: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getApi() {
|
|
|
|
|
getCountryS({token: this.getToken}).then(res => {
|
|
|
|
|
this.countryList = res.data
|
|
|
|
|
});
|
|
|
|
|
getEnergyS({token: this.getToken}).then(res => {
|
|
|
|
|
this.energyList = res.data
|
|
|
|
|
});
|
|
|
|
|
getPriceRangeS({token: this.getToken}).then(res => {
|
|
|
|
|
this.priceList = res.data
|
|
|
|
|
});
|
|
|
|
|
getSpecName1({token: this.getToken}).then(res => {
|
|
|
|
|
this.specList = res.data
|
|
|
|
|
});
|
|
|
|
|
getDisplacementS({token: this.getToken}).then(res => {
|
|
|
|
|
this.displacementList = res.data
|
|
|
|
|
});
|
|
|
|
|
getSeatS({token: this.getToken}).then(res => {
|
|
|
|
|
this.seatList = res.data
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 关闭
|
|
|
|
|
handlerClose() {
|
|
|
|
|
this.show = false;
|
|
|
|
@ -128,6 +223,12 @@ export default {
|
|
|
|
|
this.activeLi = n;
|
|
|
|
|
let key = this.letterArr[n];
|
|
|
|
|
this.showCars = this.cars.filter((ele) => ele.firstword === key);
|
|
|
|
|
// if(n != 0) {
|
|
|
|
|
// this.searchForm.sFirstword = key
|
|
|
|
|
// } else {
|
|
|
|
|
// this.searchForm.sFirstword = ''
|
|
|
|
|
// };
|
|
|
|
|
// this.getUserSeriesName(this.brandname)
|
|
|
|
|
},
|
|
|
|
|
// 获取品牌
|
|
|
|
|
getBrands() {
|
|
|
|
@ -169,35 +270,46 @@ export default {
|
|
|
|
|
// 选择品牌
|
|
|
|
|
handlerChoose(n, row) {
|
|
|
|
|
this.showActive = row.brandid;
|
|
|
|
|
this.chooseBrand = row;
|
|
|
|
|
this.brandname = this.chooseBrand.brandname;
|
|
|
|
|
if(row.brandname == this.brandname) { //反选
|
|
|
|
|
this.brandname = "";
|
|
|
|
|
} else {
|
|
|
|
|
this.brandname = row.brandname;
|
|
|
|
|
}
|
|
|
|
|
this.getUserSeriesName(this.brandname)
|
|
|
|
|
},
|
|
|
|
|
// 选择车型
|
|
|
|
|
handlerModel(n, row) {
|
|
|
|
|
this.$emit("choose", row.name);
|
|
|
|
|
this.$emit("choose", row.seriesname);
|
|
|
|
|
},
|
|
|
|
|
// 确定车型
|
|
|
|
|
handlerSubmit() {
|
|
|
|
|
// if(this.chooseBrand && this.chooseModel) {
|
|
|
|
|
// this.$emit("change", [this.chooseBrand, this.chooseModel]);
|
|
|
|
|
// this.handlerClose();
|
|
|
|
|
// } else {
|
|
|
|
|
// this.$message.warning('请选择车型');
|
|
|
|
|
// }
|
|
|
|
|
this.$emit("change", this.list);
|
|
|
|
|
},
|
|
|
|
|
// 获取车型
|
|
|
|
|
getUserSeriesName(brandName) {
|
|
|
|
|
if(!this.getToken) return;
|
|
|
|
|
this.form.token = this.getToken;
|
|
|
|
|
this.form.sBrandName = brandName;
|
|
|
|
|
this.load = true;
|
|
|
|
|
getUserSeriesName(this.form).then(res => {
|
|
|
|
|
this.load = true;
|
|
|
|
|
this.searchForm.sBrand = brandName;
|
|
|
|
|
this.searchForm.sSpec = this.specs.join(',');
|
|
|
|
|
this.searchForm.sPriceRangeS = this.prices.join(',');
|
|
|
|
|
this.searchForm.sDisplacementS = this.displacements.join(',');
|
|
|
|
|
this.searchForm.sSeatS = this.seats.join(',');
|
|
|
|
|
this.searchForm.sEnergyType = this.energies.join(',');
|
|
|
|
|
this.searchForm.sCountryS = this.countries.join(',');
|
|
|
|
|
getSeriesNameByCategory(this.searchForm).then(res => {
|
|
|
|
|
let data = res.data || [];
|
|
|
|
|
this.models = data;
|
|
|
|
|
this.load = false;
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
onSearch() {
|
|
|
|
|
this.getUserSeriesName(this.brandname)
|
|
|
|
|
},
|
|
|
|
|
selectAll() {
|
|
|
|
|
let arr = [];
|
|
|
|
|
this.models.forEach(ele => {
|
|
|
|
|
arr.push(ele.seriesname)
|
|
|
|
|
})
|
|
|
|
|
this.$emit("selectAll", arr);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
@ -206,7 +318,11 @@ export default {
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.sb-body {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 30px);
|
|
|
|
|
height: calc(100% - 80px);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
}
|
|
|
|
|
.sb-tabs {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
}
|
|
|
|
|