apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

二手车交易，首页添加价格区间的筛选

Browse Source
This commit is contained in:
zhouxueli
2025-03-13 15:10:05 +08:00
parent ca6d1ef728
commit 18bfc4517e
1 changed files with 50 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/views/secondHandCar/indexList.vue
View File

@ -4,7 +4,6 @@
<img class="bg" src="@/assets/secondHandCar/bg.png" />
<img class="mine" src="@/assets/secondHandCar/mine.png" @click="goMine" />
<el-input
@input="getList"
placeholder="请输入"
v-model.trim="topSearch">
<img slot="suffix" class="search" src="@/assets/secondHandCar/search.png"/>
@ -22,7 +21,7 @@
</div>
</div>
<div class="filterWrap">
<el-select @change="getList" v-model="licenseType" placeholder="牌照类型" :class="{'customSel':true , 'has-value': licenseType }" clearable>
<el-select v-model="licenseType" placeholder="牌照类型" :class="{'customSel':true , 'has-value': licenseType }" clearable>
<el-option
v-for="item in licenseTypeOption"
:key="item.value"
@ -30,7 +29,7 @@
:value="item.value">
</el-option>
</el-select>
<el-select @change="getList" v-model="vehicleType" placeholder="车辆类型" :class="{'customSel':true , 'has-value': vehicleType }" clearable>
<el-select v-model="vehicleType" placeholder="车辆类型" :class="{'customSel':true , 'has-value': vehicleType }" clearable>
<el-option
v-for="item in vehicleTypeOption"
:key="item.value"
@ -38,7 +37,15 @@
:value="item.label">
</el-option>
</el-select>
<el-select @change="getList" v-model="emissionStandard" placeholder="排放标准" :class="{'customSel':true , 'has-value': emissionStandard }" clearable>
<div class="customSel priceSel" @click.stop="changePrice">
<span :class="{'has-price': priceSort }">价格</span>
<span class="iconSpan">
<van-icon :class="{'has-price': priceSort==1 ,'icon':true}" name="arrow-up" />
<van-icon :class="{'has-price': priceSort==2 ,'icon':true}" name="arrow-down" />
</span>
<span v-show="priceSort"><van-icon @click.stop="clearPrice" :class="{'has-price': priceSort ,'icon':true}" name="close" /></span>
</div>
<el-select v-model="emissionStandard" placeholder="排放标准" :class="{'customSel':true , 'has-value': emissionStandard }" clearable>
<el-option
v-for="item in emissionStandardOption"
:key="item.value"
@ -46,7 +53,7 @@
:value="item.value">
</el-option>
</el-select>
<el-select @change="getList" v-model="boardType" placeholder="落板方式" :class="{'customSel':true , 'has-value': boardType }" clearable>
<el-select v-model="boardType" placeholder="落板方式" :class="{'customSel':true , 'has-value': boardType }" clearable>
<el-option
v-for="item in boardTypeOption"
:key="item.value"
@ -54,14 +61,6 @@
:value="item.value">
</el-option>
</el-select>
<el-select @change="getList" v-model="price" placeholder="价格区间" :class="{'customSel':true , 'has-value': price }" clearable>
<el-option
v-for="item in priceOption"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="contentWrap" v-show="!showEmpty">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
@ -152,9 +151,7 @@ export default {
isLoading:false,
licenseType:'',
vehicleType:'',
minPrice:'',
maxPrice:'',
price:'',
priceSort:'',
emissionStandard:'',
boardType:'',
licenseTypeOption:[
@ -189,10 +186,27 @@ export default {
});
},
methods:{
changePrice(){
if(!this.priceSort){
this.priceSort=1
}
if( this.priceSort==1){
this.priceSort=2
}else{
this.priceSort=1
}
this.getList();
},
clearPrice(){
this.priceSort=''
this.setSearchVal()
this.getList();
},
setSearchVal(){
sessionStorage.setItem('indexActiveTab',String(this.activeTab) );
sessionStorage.setItem('topSearch',this.topSearch);
sessionStorage.setItem('vehicleType',this.vehicleType);
sessionStorage.setItem('priceSort',this.priceSort);
sessionStorage.setItem('indexActiveTab',String(this.activeTab) );
sessionStorage.setItem('licenseType',String(this.licenseType));
sessionStorage.setItem('emissionStandard',String(this.emissionStandard));
sessionStorage.setItem('boardType',String(this.boardType));
@ -201,6 +215,7 @@ export default {
this.activeTab = Number(sessionStorage.getItem('indexActiveTab')) || 0;
this.topSearch = sessionStorage.getItem('topSearch') || '';
this.vehicleType = sessionStorage.getItem('vehicleType') || '';
this.priceSort = Number(sessionStorage.getItem('priceSort')) || '';
this.licenseType = Number(sessionStorage.getItem('licenseType')) || '';
this.emissionStandard = Number(sessionStorage.getItem('emissionStandard')) || '';
this.boardType = Number(sessionStorage.getItem('boardType')) || '';
@ -253,8 +268,7 @@ export default {
topSearch:this.topSearch,
licenseType:this.licenseType,
vehicleType:this.vehicleType,
minPrice:this.minPrice,
maxPrice:this.maxPrice,
priceSort:this.priceSort,
boardType:this.boardType,
emissionStandard:this.emissionStandard,
// brandModel:this.brandModel,
@ -389,10 +403,27 @@ export default {
background: #F1F6FF ;
color: #007BE9;
font-weight: bold;
padding-left: 8px;
}
.has-value ::v-deep .el-input__icon{
color: #007BE9;
}
.priceSel{
display: flex;
justify-content: space-around;
align-items: center;
color: #C0C4CC;
.iconSpan{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 8px;
}
}
.has-price{
color: #007BE9 !important;
}
}
.contentWrap{
width: 100%;