张雄 3 years ago
parent a53ce96429
commit 0de76e2404

@ -41,6 +41,36 @@
background-color: #1B4163 !important; background-color: #1B4163 !important;
border: 1px solid #63AECC !important; border: 1px solid #63AECC !important;
} }
.ant-cascader-picker {
background: #1B4163 !important;
color: #fff !important;
&:hover {
background-color: #010B19 !important;
color: #fff !important;
}
}
.ant-cascader-picker-arrow svg {
color: #63AECC;
}
.ant-cascader-menu{
background-color:#010B19 !important;
box-shadow: 0px 0px 10px 0px #3373CC !important;
overflow: hidden;
li{// 鼠标 hover 效果
color: #fff;
border-top: 1px solid #3373CC !important;
background-color:#010B19 !important;
&:hover {
color: #63AECC;
background-color:#010B19 !important;
}
&:first-child {
border-top-style: none !important;
}
}
}
.ant-calendar-range-picker-input { .ant-calendar-range-picker-input {
color: #fff !important; color: #fff !important;
} }

@ -64,7 +64,11 @@ export default {
}, },
created() { created() {
this.form.token = this.getToken; this.form.token = this.getToken;
this.getData(); if(this.$route.query.mark) {
this.getMore();
} else {
this.getData();
}
}, },
methods: { methods: {
getData() { getData() {
@ -101,6 +105,40 @@ export default {
this.load = false this.load = false
}) })
}, },
getMore() {
this.load = true;
getCheZhuCountTime({token: this.getToken}).then(res => {
let data = res.data;
this.form.sStartTime = data.Data[data.Data.length-1].Time;
this.form.sEndTime = data.Data[data.Data.length-1].Time;
this.selTime[0] = data.Data[data.Data.length-1].Time;
this.selTime[1] = data.Data[data.Data.length-1].Time;
this.dDate = data.Data[data.Data.length-1].Time;
let obj = {
token: this.getToken,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
}
//
getCheZhuCarSpecidRankingAll(obj).then(res => {
let data = res.data;
this.lvList = data;
});
//
getCheZhuCarSpecidChart(obj).then(res => {
let data = res.data;
let dx = [];
let ds = [];
data.forEach(ele => {
dx.push(ele.key);
ds.push(ele.value);
})
this.opt = createOpt(dx,ds);
})
this.load = false
})
},
// //
onTable() { onTable() {
this.visible = true; this.visible = true;

@ -4,6 +4,7 @@
<v-btn @click="goBack"></v-btn> <v-btn @click="goBack"></v-btn>
</v-label-div> </v-label-div>
<div class="d2"> <div class="d2">
<!-- <a-range-picker format="YYYY-MM" v-model="selTime" :mode="['month', 'month']"></a-range-picker> -->
<a-month-picker style="width: 160px" v-model="selTime[0]" :disabled-date="disabledDate" valueFormat="YYYY-MM" placeholder="请选择开始日期"></a-month-picker> <a-month-picker style="width: 160px" v-model="selTime[0]" :disabled-date="disabledDate" valueFormat="YYYY-MM" placeholder="请选择开始日期"></a-month-picker>
<a-month-picker style="width: 160px;margin-left:40px" v-model="selTime[1]" :disabled-date="disabledDate" valueFormat="YYYY-MM" placeholder="请选择结束日期"></a-month-picker> <a-month-picker style="width: 160px;margin-left:40px" v-model="selTime[1]" :disabled-date="disabledDate" valueFormat="YYYY-MM" placeholder="请选择结束日期"></a-month-picker>
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button> <a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
@ -97,6 +98,8 @@ export default {
this.tbData = data; this.tbData = data;
this.tableLoad = false this.tableLoad = false
}) })
} else if (this.$route.query.mark) {
this.getMore()
} else { } else {
this.getData() this.getData()
} }
@ -128,6 +131,32 @@ export default {
}) })
}); });
}, },
getMore() {
this.tableLoad = true;
let o = {token: this.getToken};
getCheZhuCountTime(o).then(res => {
let data = res.data;
this.form.sStartTime = data.Data[data.Data.length-1].Time;
this.form.sEndTime = data.Data[data.Data.length-1].Time;
this.selTime[0] = data.Data[data.Data.length-1].Time;
this.selTime[1] = data.Data[data.Data.length-1].Time;
this.dDate = data.Data[data.Data.length-1].Time;
let obj = {
token: this.getToken,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
iPageIndex: 1,
iPageSize: 20,
}
getCheZhuCarBrandRanking(obj).then(res => {
let data = res.data;
this.pagination.total = res.totalNum
this.tbData = data;
this.tableLoad = false
})
});
},
// //
goBack() { goBack() {
this.$router.go(-1); this.$router.go(-1);

@ -46,7 +46,12 @@ export default {
}) })
}, },
moreBrand() { moreBrand() {
this.$router.push("/saleRank/brandSale"); this.$router.push({
path: "/saleRank/brandSale",
query: {
mark: 'more'
}
});
} }
} }
} }

@ -46,7 +46,12 @@ export default {
}) })
}, },
moreInfo() { moreInfo() {
this.$router.push("/saleRank/aLevel"); this.$router.push({
path: "/saleRank/aLevel",
query: {
mark: 'more'
}
});
} }
} }
} }

@ -46,7 +46,12 @@ export default {
}) })
}, },
moreSeries() { moreSeries() {
this.$router.push("/saleRank/seriesSale"); this.$router.push({
path: "/saleRank/seriesSale",
query: {
mark: 'more'
}
});
} }
} }
} }

@ -5,9 +5,19 @@
</v-label-div> </v-label-div>
<div class="d2"> <div class="d2">
<v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerTime"></v-tab-group> <v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerTime"></v-tab-group>
<a-select placeholder="请选择城市" v-if="activeIndex == 1" style="width: 160px;margin-left:20px"> <a-select class="choose-brand" v-model="form.sBrand" placeholder="请选择品牌" @dropdownVisibleChange="brandDrawer" :dropdownMatchSelectWidth="false" allowClear>
<div slot="dropdownRender"></div>
</a-select> </a-select>
<a-select class="choose-brand" v-model="form.sSeriesName" placeholder="请选择车型" allowClear>
<a-select-option v-for="(item,index) in seriesList" :value="item.name" :key="index">
{{item.name}}
</a-select-option>
</a-select>
<a-select class="choose-series" v-model="form.sBrandType" placeholder="请选择类型">
<a-select-option v-for="(item,index) in brandTypeList" :value="item.key" :key="index">
{{item.value}}
</a-select-option>
</a-select>
<a-month-picker style="width: 160px;margin-left:20px" v-model="selTime[0]" :disabled-date="disabledDate" valueFormat="YYYY-MM" placeholder="请选择开始日期"></a-month-picker> <a-month-picker style="width: 160px;margin-left:20px" v-model="selTime[0]" :disabled-date="disabledDate" valueFormat="YYYY-MM" placeholder="请选择开始日期"></a-month-picker>
<a-month-picker style="width: 160px;margin-left:40px" v-model="selTime[1]" :disabled-date="disabledDate" valueFormat="YYYY-MM" placeholder="请选择结束日期"></a-month-picker> <a-month-picker style="width: 160px;margin-left:40px" v-model="selTime[1]" :disabled-date="disabledDate" valueFormat="YYYY-MM" placeholder="请选择结束日期"></a-month-picker>
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button> <a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
@ -40,27 +50,45 @@
<v-table v-if="cValue == 1" ref="rtable" :columns="columnsCitySeries" :data="dataCitySeries"> <v-table v-if="cValue == 1" ref="rtable" :columns="columnsCitySeries" :data="dataCitySeries">
</v-table> </v-table>
</a-modal> </a-modal>
<a-drawer :visible="drVisible" title="请选择品牌" placement="left" @close="drClose">
<div class="drawer">
<a-anchor style="width: 15%" @click="anchorClick">
<a-anchor-link v-for="(item, index) in letters" :key="index" :href="`#${item}`" :title="item"></a-anchor-link>
</a-anchor>
<vue-scroll ref="vs">
<div class="drawer-right" id='content'>
<div v-for="(item, index) in brandList" :key="index">
<span :id="'#'+letters[index]" class="drawer-letter">{{letters[index]}}</span>
<div v-for="(it, id) in item" :key="id">
<a class="drawer-link" @click="drawerChooseBrand(it.label)">{{it.label}}</a>
</div>
</div>
</div>
</vue-scroll>
</div>
</a-drawer>
</div> </div>
</template> </template>
<script> <script>
import {getSalesType1,getSalesType0} from "@/api/SaleRankCity"; import tbEvent from "./tbEvent"
import {getSalesType6,getSalesType7} from "@/api/SaleRankCity";
import {getExcleTime} from "@/api/SaleRankCity";
import {getSalesCity} from "@/api/SaleRankCity";
import moment from "moment";
export default { export default {
name: 'CitySale', name: 'CitySale',
data() { data() {
return { return {
dd: false,
form: { form: {
token: '', token: '',
sTimeType: 4, sTimeType: 4,
sStartTime: '', sStartTime: '',
sEndTime: '', sEndTime: '',
sBrandType: '', sBrandType: undefined,
iPageIndex: 1, iPageIndex: 1,
sBrand: undefined,
sSeriesName: undefined,
}, },
seriesList:[],
brandTypeList:[],
selTime: [], selTime: [],
time: '城市销量排行榜', time: '城市销量排行榜',
tValue: 0, tValue: 0,
@ -128,163 +156,19 @@ export default {
{title: "销量",dataIndex: "value",key: "value",width: 120}, {title: "销量",dataIndex: "value",key: "value",width: 120},
], ],
dataCitySeries: [], dataCitySeries: [],
//
drVisible: false,
brandList: [],
letters: [],
} }
}, },
created() { created() {
this.form.token = this.getToken; this.form.token = this.getToken;
this.getApi();
this.getData() this.getData()
}, },
methods: { methods: {
getData() { ...tbEvent
this.tableLoad = true;
let o = {token: this.getToken};
getExcleTime(o).then(res => {
let data = res.data;
this.form.sStartTime = data.startTime.slice(0,7);
this.form.sEndTime = data.endTime.slice(0,7);
this.selTime[0] = data.startTime.slice(0,7);
this.selTime[1] = data.endTime.slice(0,7);
this.dDate = data.endTime;
let obj = {
token: this.getToken,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
sBrandType: '',
iPageIndex: 1,
}
getSalesType1(obj).then(res => {
let data = res.data;
this.pagination.total = res.totalNum
this.tbData = data
this.tableLoad = false;
});
getSalesType0(obj).then(res => {
let data = res.data;
this.pagination2.total = res.totalNum
this.tbData2 = data;
this.tableLoad = false;
})
});
getSalesCity(o).then(res => {
let data = res.data;
console.log(data)
})
},
//
handlerTime(activeIndex) {
this.activeIndex = activeIndex
},
//
goBack() {
this.$router.go(-1);
},
disabledDate(current) {
return (current > moment(this.dDate)) && moment(this.dDate);
},
//
onSearch() {
this.tableLoad = true;
this.form.sStartTime = this.selTime[0];
this.form.sEndTime = this.selTime[1];
getSalesType1(this.form).then(res => {
let data = res.data;
this.pagination.total = res.totalNum
this.tbData = data
this.tableLoad = false;
});
getSalesType0(this.form).then(res => {
let data = res.data;
this.pagination2.total = res.totalNum
this.tbData2 = data;
this.tableLoad = false;
})
},
//
onSalePro(record) {
let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
sBrandType: '',
iPageIndex: 1,
sProv: record.key
}
getSalesType0(obj).then(res => {
let data = res.data;
this.dataProCity = data
})
getSalesType6(obj).then(res => {
console.log(res)
let data = res.data;
this.dataProBrand = data
})
getSalesType7(obj).then(res => {
let data = res.data;
this.dataProSeries = data
})
this.visible = true;
},
onSaleCity(record) {
let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
sBrandType: '',
iPageIndex: 1,
sCity: record.key
}
getSalesType6(obj).then(res => {
let data = res.data;
this.dataCityBrand = data
})
getSalesType7(obj).then(res => {
let data = res.data;
this.dataCitySeries = data
})
this.visible2 = true;
},
//
handlerPagnation(page) {
this.tableLoading = true;
let cur = page.current;
this.pagination.current = cur;
this.form.iPageIndex = cur;
getSalesType1(this.form).then(res => {
let data = res.data;
this.pagination.total = res.totalNum
this.tbData = data;
this.tableLoading = false
})
},
handlerPagnation2(page) {
this.tableLoading = true;
let cur = page.current;
this.pagination.current = cur;
this.form.iPageIndex = cur;
getSalesType0(this.form).then(res => {
let data = res.data;
this.pagination2.total = res.totalNum
this.tbData = data;
this.tableLoading = false
})
},
//
handlerProMode(activeIndex) {
this.pValue = activeIndex
},
handlerCityMode(activeIndex) {
this.cValue = activeIndex
},
//
onClose() {
this.visible = false
},
onClose2() {
this.visible2 = false
}
} }
} }
</script> </script>
@ -303,4 +187,19 @@ export default {
padding: 16px; padding: 16px;
} }
} }
.brand-list {
color: white;
width: 600px;
height: 320px;
background: rgb(11, 25, 47);
}
.choose-brand {
width: 150px;
}
.choose-series {
width: 150px;
margin-right: 16px;
}
</style> </style>

@ -0,0 +1,205 @@
import {getSalesType1,getSalesType0} from "@/api/SaleRankCity";
import {getSalesType6,getSalesType7} from "@/api/SaleRankCity";
import {getExcleTime} from "@/api/SaleRankCity";
import {getBrandType, getUserBrand, getUserSeriesName} from "@/api/comm"
import moment from "moment";
export default {
getApi() {
getBrandType({token: this.getToken}).then(res => {
let data = res.data;
this.brandTypeList = data
}),
getUserBrand({token: this.getToken}).then(res => {
let data = res.data;
let brandList = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]];
let letters = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
for(let i = 0; i<data.length;i++) {
let index = letters.indexOf(data[i].firstword)
if(index >= 0) {
let obj = {
label: data[i].brandname,
value: data[i].brandname,
}
brandList[index].push(obj)
}
}
this.brandList = brandList;
this.letters = letters;
})
},
getData() {
this.tableLoad = true;
let o = {token: this.getToken};
getExcleTime(o).then(res => {
let data = res.data;
this.form.sStartTime = data.startTime.slice(0,7);
this.form.sEndTime = data.endTime.slice(0,7);
this.selTime[0] = data.startTime.slice(0,7);
this.selTime[1] = data.endTime.slice(0,7);
this.dDate = data.endTime;
let obj = {
token: this.getToken,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
sBrandType: this.form.sBrandType,
iPageIndex: 1,
}
getSalesType1(obj).then(res => {
let data = res.data;
this.pagination.total = res.totalNum
this.tbData = data
this.tableLoad = false;
});
getSalesType0(obj).then(res => {
let data = res.data;
this.pagination2.total = res.totalNum
this.tbData2 = data;
this.tableLoad = false;
})
});
},
//切换类型
handlerTime(activeIndex) {
this.activeIndex = activeIndex
},
//返回
goBack() {
this.$router.go(-1);
},
disabledDate(current) {
return (current > moment(this.dDate)) && moment(this.dDate);
},
//查询
onSearch() {
this.tableLoad = true;
this.form.sStartTime = this.selTime[0];
this.form.sEndTime = this.selTime[1];
getSalesType1(this.form).then(res => {
let data = res.data;
this.pagination.total = res.totalNum
this.tbData = data
this.tableLoad = false;
});
getSalesType0(this.form).then(res => {
let data = res.data;
this.pagination2.total = res.totalNum
this.tbData2 = data;
this.tableLoad = false;
})
},
//点击明细
onSalePro(record) {
let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
sBrandType: this.form.sBrandType,
iPageIndex: 1,
sProv: record.key
}
let o = {
sBrand: this.form.sBrand,
sSeriesName: this.form.sSeriesName
}
getSalesType0(Object.assign({},obj,o)).then(res => {
let data = res.data;
this.dataProCity = data
})
getSalesType6(obj).then(res => {
let data = res.data;
this.dataProBrand = data
})
getSalesType7(obj).then(res => {
let data = res.data;
this.dataProSeries = data
})
this.visible = true;
},
onSaleCity(record) {
let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
sBrandType: this.form.sBrandType,
iPageIndex: 1,
sCity: record.key
}
getSalesType6(obj).then(res => {
let data = res.data;
this.dataCityBrand = data
})
getSalesType7(obj).then(res => {
let data = res.data;
this.dataCitySeries = data
})
this.visible2 = true;
},
//改变页面数据
handlerPagnation(page) {
this.tableLoading = true;
let cur = page.current;
this.pagination.current = cur;
this.form.iPageIndex = cur;
getSalesType1(this.form).then(res => {
let data = res.data;
this.pagination.total = res.totalNum
this.tbData = data;
this.tableLoading = false
})
},
handlerPagnation2(page) {
this.tableLoading = true;
let cur = page.current;
this.pagination.current = cur;
this.form.iPageIndex = cur;
getSalesType0(this.form).then(res => {
let data = res.data;
this.pagination2.total = res.totalNum
this.tbData = data;
this.tableLoading = false
})
},
//改变窗口模式
handlerProMode(activeIndex) {
this.pValue = activeIndex
},
handlerCityMode(activeIndex) {
this.cValue = activeIndex
},
//关闭窗口
onClose() {
this.visible = false
},
onClose2() {
this.visible2 = false
},
//抽屉
brandDrawer() {
this.drVisible = true
},
drClose() {
this.drVisible = false
},
//锚点
anchorClick(e, link) {
// 阻止点击的默认事件修改路由
e.preventDefault();
if(link.href) {
document.getElementById(link.href).scrollIntoView();
}
},
drawerChooseBrand(val) {
this.form.sBrand = val;
let o = {token: this.getToken, sBrandName: this.form.sBrand};
getUserSeriesName(o).then(res => {
let data = res.data;
this.seriesList = data;
this.form.sSeriesName = undefined;
})
this.drVisible = false;
},
}

@ -5,7 +5,7 @@
<v-btn @click="goBack"></v-btn> <v-btn @click="goBack"></v-btn>
</v-label-div> </v-label-div>
<div class="d3"> <div class="d3">
<v-table ref="rtable" :columns="columns" :loading="tableLoad" :data="tbData" :pagination="pagination" @change="handlerPagnation" rowKey="rowKey"> <v-table ref="rtable" :columns="columns" :loading="tableLoad" :data="tbData" :pagination="pagination" @change="handlerPagnation" :rowKey="(record,index)=>{return index}">
</v-table> </v-table>
</div> </div>
<a-modal :title="tableTitle" width="1200px" :footer="null" @cancel="onClose" :visible="visible"> <a-modal :title="tableTitle" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
@ -189,7 +189,9 @@ export default {
}, },
// //
goBack() { goBack() {
this.$router.go(-1); this.$router.push({
path: 'seriesSale'
});
}, },
// //
handlerPagnation(page) { handlerPagnation(page) {

@ -86,6 +86,8 @@ export default {
this.tbData = data; this.tbData = data;
this.tableLoad = false this.tableLoad = false
}) })
} else if(this.$route.query.mark) {
this.getMore()
} else { } else {
this.getData() this.getData()
} }
@ -117,6 +119,32 @@ export default {
}) })
}); });
}, },
getMore() {
let o = {token: this.getToken};
this.tableLoading = true;
getCheZhuCountTime(o).then(res => {
let data = res.data;
this.form.sStartTime = data.Data[data.Data.length-1].Time;
this.form.sEndTime = data.Data[data.Data.length-1].Time;
this.selTime[0] = data.Data[data.Data.length-1].Time;
this.selTime[1] = data.Data[data.Data.length-1].Time;
this.dDate = data.Data[data.Data.length-1].Time;
let obj = {
token: this.getToken,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
iPageIndex: 1,
iPageSize: 20,
}
getCheZhuCarSeriesRanking(obj).then(res => {
let data = res.data;
this.pagination.total = res.totalNum
this.tbData = data;
this.tableLoading = false
})
});
},
// //
onTable() {}, onTable() {},
// //

@ -1,8 +1,8 @@
<template> <template>
<div class="d-container"> <div class="d-container" >
<div class="sr-outter"> <div class="sr-outter">
<div class="sr-top"> <div class="sr-top">
<a-select class="choose-brand" v-model="chosenBrand" placeholder="请选择品牌" :dropdownMatchSelectWidth="dd"> <!-- <a-select class="choose-brand" v-model="chosenBrand" placeholder="请选择品牌" :dropdownMatchSelectWidth="dd">
<div slot="dropdownRender" class="brand-list"> <div slot="dropdownRender" class="brand-list">
<vue-scroll> <vue-scroll>
<div class="brand-items" v-for="(item, index) in letters" :key="index"> <div class="brand-items" v-for="(item, index) in letters" :key="index">
@ -15,18 +15,19 @@
</template> </template>
</div> </div>
</div> </div>
<!-- <div class="brand-items">
<div class="left-letter">A</div>
<div class="right-letter">
<template v-for="(item, index) in brandList[0]">
<span class="right" :key="index">
<a-button type="primary" @click="onBrand(item.brandname)" v-if="item.firstword=='A'">{{item.brandname}}</a-button>
</span>
</template>
</div>
</div> -->
</vue-scroll> </vue-scroll>
</div> </div>
</a-select> -->
<!-- <a-cascader class="choose-brand"
expandTrigger="hover"
:options="brandOption"
v-model="chosenBrand"
placeholder="请选择品牌"
@click="brandDrawer"
@change="handlerBrand(chosenBrand)">
</a-cascader> -->
<a-select class="choose-brand" v-model="chosenBrand" placeholder="请选择品牌" @dropdownVisibleChange="brandDrawer" :dropdownMatchSelectWidth="dd">
<div slot="dropdownRender"></div>
</a-select> </a-select>
<a-select class="choose-series" :disabled="isLoading" v-model="chosenSeries" placeholder="请选择车型" @change="onSeries" allowClear> <a-select class="choose-series" :disabled="isLoading" v-model="chosenSeries" placeholder="请选择车型" @change="onSeries" allowClear>
<a-select-option v-for="(item,index) in seriesList" :value="item.name" :key="index"> <a-select-option v-for="(item,index) in seriesList" :value="item.name" :key="index">
@ -45,9 +46,6 @@
<a-menu-item key="aLevel"> <a-menu-item key="aLevel">
<router-link to="/saleRank/aLevel">所有级别</router-link> <router-link to="/saleRank/aLevel">所有级别</router-link>
</a-menu-item> </a-menu-item>
<!-- <a-menu-item v-for="(item) in specList" :key="item.key">
<router-link :to="'/saleRank/'+item.key">{{item.value}}</router-link>
</a-menu-item> -->
<a-menu-item v-for="(item, index) in specList" :key="item.key"> <a-menu-item v-for="(item, index) in specList" :key="item.key">
<router-link :to="'/saleRank/level'+(index+1)">{{item.value}}</router-link> <router-link :to="'/saleRank/level'+(index+1)">{{item.value}}</router-link>
</a-menu-item> </a-menu-item>
@ -80,9 +78,29 @@
</a-menu> </a-menu>
</div> </div>
<div class="sr-view"> <div class="sr-view">
<router-view></router-view> <vue-scroll>
<router-view></router-view>
</vue-scroll>
</div> </div>
</div> </div>
<!-- 选择品牌抽屉 -->
<a-drawer :visible="visible" title="请选择品牌" @close="onClose" :drawerStyle="drawerStyle">
<div class="drawer">
<a-anchor style="width: 15%" @click="anchorClick" :getContainer="()=>this.$refs.content" >
<a-anchor-link v-for="(item, index) in letters" :key="index" :href="`#${item}`" :title="item"></a-anchor-link>
</a-anchor>
<vue-scroll ref="vs">
<div class="drawer-right" ref="content">
<div v-for="(item, index) in brandList" :key="index">
<span :id="letters[index]" class="drawer-letter">{{letters[index]}}</span>
<div v-for="(it, id) in item" :key="id">
<a class="drawer-link" @click="drawerChooseBrand(it.label)">{{it.label}}</a>
</div>
</div>
</div>
</vue-scroll>
</div>
</a-drawer>
</div> </div>
</div> </div>
</template> </template>
@ -99,6 +117,7 @@ export default {
}, },
data() { data() {
return { return {
x: 0,
isLoading: false, isLoading: false,
dd: false, // dd: false, //
form: { form: {
@ -107,6 +126,7 @@ export default {
sEndTime: '' sEndTime: ''
}, },
brandList: [], // brandList: [], //
brandOption: [],
letters: [], letters: [],
seriesList: [], // seriesList: [], //
specList: [], // specList: [], //
@ -115,8 +135,12 @@ export default {
chosenBrand: undefined, chosenBrand: undefined,
chosenSeries: undefined, chosenSeries: undefined,
//// ////
window: '' window: '',
//// //
visible: false,
drawerStyle: {
backgroud: 'blue'
}
}; };
}, },
created() { created() {
@ -144,7 +168,7 @@ export default {
} }
.sr-content { .sr-content {
width: 100%; width: 100%;
height: auto; height: 100%;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
margin-top: 8px; margin-top: 8px;
@ -154,15 +178,16 @@ export default {
}; };
.sr-view { .sr-view {
margin-top: 16px; margin-top: 16px;
height: 773px;
} }
} }
} }
.choose-brand { .choose-brand {
width: 400px; width: 250px;
} }
.choose-series { .choose-series {
width: 200px; width: 250px;
margin-right: 16px; margin-right: 16px;
} }
@ -184,4 +209,16 @@ export default {
} }
} }
} }
.drawer {
display: flex;
height: 800px;
justify-content: flex-start;
.drawer-right {
margin-left: 30px;
height: 100%;
.drawer-letter {
font-size: 24px;
}
}
}
</style> </style>

@ -13,14 +13,26 @@ export default {
let index = letters.indexOf(data[i].firstword) let index = letters.indexOf(data[i].firstword)
if(index >= 0) { if(index >= 0) {
let obj = { let obj = {
brandname: data[i].brandname, // brandname: data[i].brandname,
brandid: data[i].brandid, // brandid: data[i].brandid,
firstword: data[i].firstword, // firstword: data[i].firstword,
label: data[i].brandname,
value: data[i].brandname,
} }
brandList[index].push(obj) brandList[index].push(obj)
} }
} }
this.brandList = brandList; this.brandList = brandList;
let options = []
for(let i = 0; i < brandList.length; i++) {
let obj = {
value: letters[i],
label: letters[i],
children: brandList[i]
};
options.push(obj)
}
this.brandOption = options;
this.letters = letters; this.letters = letters;
}) })
getSpec(obj).then(res => { getSpec(obj).then(res => {
@ -37,8 +49,36 @@ export default {
}) })
}, },
//选择品牌 //选择品牌
onBrand(val) { // onBrand(val) {
// this.isLoding = true;
// this.chosenBrand = val;
// let o = {token: this.getToken, sBrandName: this.chosenBrand};
// getUserSeriesName(o).then(res => {
// let data = res.data;
// this.seriesList = data;
// this.chosenSeries = undefined;
// this.isLoding = false;
// })
// },
handlerBrand(val) {
this.isLoding = true; this.isLoding = true;
let chosenBrand = val[1];
let o = {token: this.getToken, sBrandName: chosenBrand};
getUserSeriesName(o).then(res => {
let data = res.data;
this.seriesList = data;
this.chosenSeries = undefined;
this.isLoding = false;
})
},
brandDrawer() {
this.visible = true
},
onClose() {
this.visible = false
},
//抽屉选择品牌
drawerChooseBrand(val) {
this.chosenBrand = val; this.chosenBrand = val;
let o = {token: this.getToken, sBrandName: this.chosenBrand}; let o = {token: this.getToken, sBrandName: this.chosenBrand};
getUserSeriesName(o).then(res => { getUserSeriesName(o).then(res => {
@ -47,6 +87,15 @@ export default {
this.chosenSeries = undefined; this.chosenSeries = undefined;
this.isLoding = false; this.isLoding = false;
}) })
this.visible = false;
},
//锚点
anchorClick(e, link) {
// 阻止点击的默认事件修改路由
e.preventDefault();
if(link.href) {
document.getElementById(link.title).scrollIntoView();
}
}, },
//选择车型 //选择车型
onSeries(val) { onSeries(val) {
@ -65,6 +114,7 @@ export default {
} }
} }
); );
this.reload();
} else if (this.chosenBrand != undefined && this.chosenSeries != undefined) { } else if (this.chosenBrand != undefined && this.chosenSeries != undefined) {
this.$router.push( this.$router.push(
{ {
@ -75,6 +125,7 @@ export default {
} }
} }
); );
this.reload();
} else { } else {
this.$message.warning('请选择品牌'); this.$message.warning('请选择品牌');
return; return;

Loading…
Cancel
Save