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

src/views/secondHandCar/indexList.vue

@@ -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:'',
+      priceSort:'',
-      maxPrice:'',
-      price:'',
       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,
+        priceSort:this.priceSort,
-        maxPrice:this.maxPrice,
         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%;