story#6462,列表添加发布省市和发布时间筛选项

src/views/secondHandCar/indexList.vue

@@ -81,6 +81,8 @@
           :value="item.value">
         </el-option>
       </el-select>
+      <el-input @focus="areaShow = true"  v-model="areaName"  placeholder="请选择发布省市" :class="{'customSel':true,'customInput':true , 'has-value': areaName }" clearable></el-input>
+      <el-input @focus="showDatePicker = true"  v-model="dateVal"  placeholder="请选择发布日期" :class="{'customSel':true,'customInput':true , 'has-value': dateVal }" clearable></el-input>
     </div>
     <div class="contentWrap" v-show="!show">
       <van-pull-refresh v-model="isLoading" @refresh="onRefresh"  style="min-height:85vh">
@@ -134,20 +136,71 @@
           </div>
       </div>
     </van-popup>
+    <van-calendar v-model="showDatePicker" type="range" @confirm="onConfirm" />
+    <van-popup
+        v-model="areaShow"
+        closeable
+        position="bottom"
+    >
+      <van-area title="标题" :area-list="areaList" :columns-num="2"  closeable="true" :value="areaCode ? String(areaCode) : ''"
+                @cancel="areaShow = false" @confirm="confirmHandle"/>
+    </van-popup>
   </div>
 </template>
 
 <script>
 import {myMixins} from "@/utils/myMixins"
 import {appPageList,userFeedback } from "@/api/secondHandCar"
+import {areaList} from "@vant/area-data";
 export default {
   name: "indexList",
   mixins:[myMixins],
+  data(){
+    return{
+      areaList: areaList,
+      pageList:[],
+      topSearch:'',
+      activeTab:0,
+      isLoading:"",
+      loading: false,
+      finished: false,
+      pageNum:1,
+      pageSize:10,
+      total:'',
+      licenseType:'',
+      vehicleType:'',
+      priceSort:'',
+      emissionStandard:'',
+      boardType:'',
+      proprietary: '',
+      areaCode:'',
+      areaName:'',
+      publishStartTime:'',
+      publishEndTime:'',
+      licenseTypeOption:[
+        {value:2,label:'黄牌'},{value:3,label:'绿牌'},{value:1,label:'蓝牌'},
+      ],
+      vehicleTypeOption:[
+        {value:1,label:'拖车'},{value:2,label:'地库车'},{value:3,label:'牵引车'},{value:4,label:'随车吊'},{value:5,label:'其他'},
+      ],
+      priceOption:[
+        {value:1,label:'5~6'},{value:2,label:'7~8'},{value:3,label:'8~9'}
+      ],
+      emissionStandardOption:[
+        {value:1,label:'不限'},{value:3,label:'国三'},{value:4,label:'国四'},{value:5,label:'国五'},{value:6,label:'国六'}
+      ],
+      boardTypeOption:[
+        {value:1,label:'全落地'},{value:2,label:'斜落一体'},{value:3,label:'普通斜板'},{value:9,label:'不限'}
+      ],
+      proprietaryOption: [{value: 1, label: '中道自营'}, {value: 0, label: '服务商发布'}],
+      poupShow:false,
+      suggestContent:'',
+      dateVal: '',
+      showDatePicker: false,
+      areaShow:false,
+    }
+  },
   watch:{
-  /*  topSearch(){
-      this.setSearchVal();
-      this.getList()
-    },*/
     licenseType(){
       this.setSearchVal();
       this.getList()
@@ -167,44 +220,23 @@ export default {
     proprietary() {
       this.setSearchVal();
       this.getList()
-    }
+    },
-  },
+    areaName() {
-  data(){
+      this.setSearchVal();
-    return{
+      this.getList()
-      pageList:[],
+    },
-      topSearch:'',
+    dateVal(val){
-      activeTab:0,
+      if(val){
-      isLoading:"",
+        let res= this.formatDateTimeRange(val)
-      loading: false,
+        this.publishStartTime=res.startTime
-      finished: false,
+        this.publishEndTime=res.endTime
-      pageNum:1,
+      }else{
-      pageSize:10,
+        this.publishStartTime=''
-      total:'',
+        this.publishEndTime=''
-      licenseType:'',
+      }
-      vehicleType:'',
+      this.setSearchVal();
-      priceSort:'',
+      this.getList()
-      emissionStandard:'',
+    },
-      boardType:'',
-      proprietary: '',
-      licenseTypeOption:[
-        {value:2,label:'黄牌'},{value:3,label:'绿牌'},{value:1,label:'蓝牌'},
-      ],
-      vehicleTypeOption:[
-        {value:1,label:'拖车'},{value:2,label:'地库车'},{value:3,label:'牵引车'},{value:4,label:'随车吊'},{value:5,label:'其他'},
-      ],
-      priceOption:[
-        {value:1,label:'5~6'},{value:2,label:'7~8'},{value:3,label:'8~9'}
-      ],
-      emissionStandardOption:[
-        {value:1,label:'不限'},{value:3,label:'国三'},{value:4,label:'国四'},{value:5,label:'国五'},{value:6,label:'国六'}
-      ],
-      boardTypeOption:[
-        {value:1,label:'全落地'},{value:2,label:'斜落一体'},{value:3,label:'普通斜板'},{value:9,label:'不限'}
-      ],
-      proprietaryOption: [{value: 1, label: '中道自营'}, {value: 0, label: '服务商发布'}],
-      poupShow:false,
-      suggestContent:'',
-    }
   },
   mounted() {
     this.getSearchVal();
@@ -214,12 +246,30 @@ export default {
       if (state == 'hidden') {  // 用户离开了
       }
       if (state == 'visible') {
-        console.log('visible')
+        // console.log('visible')
       }
     });
   },
-
   methods:{
+    confirmHandle(val){
+      if(val[0].name.includes('市')){
+        this.areaName=val[0].name
+        this.areaCode=val[0].code
+      }else{
+        this.areaName=val[0].name +val[1].name
+        this.areaCode=val[1].code
+      }
+      this.areaShow=false
+      console.log("confirmHandle",this.areaName,this.areaCode)
+    },
+    formatDate(date) {
+      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+    },
+    onConfirm(date) {
+      const [start, end] = date;
+      this.showDatePicker = false;
+      this.dateVal = `${this.formatDate(start)} - ${this.formatDate(end)}`;
+    },
     formatToWan(num) {
       let result = (num / 10000).toString();
       if (result.includes('.')) {
@@ -272,6 +322,9 @@ export default {
       sessionStorage.setItem('emissionStandard',String(this.emissionStandard));
       sessionStorage.setItem('boardType',String(this.boardType));
       sessionStorage.setItem('proprietary',String(this.proprietary));
+      sessionStorage.setItem('areaCode',String(this.areaCode));
+      sessionStorage.setItem('areaName',this.areaName);
+      sessionStorage.setItem('dateVal',this.dateVal);
     },
     getSearchVal(){
       this.activeTab = Number(sessionStorage.getItem('indexActiveTab')) || 0;
@@ -282,6 +335,9 @@ export default {
       this.emissionStandard = Number(sessionStorage.getItem('emissionStandard')) || '';
       this.boardType = Number(sessionStorage.getItem('boardType')) || '';
       this.proprietary = Number(sessionStorage.getItem('proprietary')) || '';
+      this.areaCode=Number(sessionStorage.getItem('areaCode')) || '';
+      this.areaName=sessionStorage.getItem('areaName') || '';
+      this.dateVal=sessionStorage.getItem('dateVal') || '';
     },
     goMine(){//我的发布
       this.$router.push({ name: "mineRelease"})
@@ -360,7 +416,18 @@ export default {
         window.android.sendMessage("goBack");
       }
     },
-  },
+    formatDateTimeRange(str) {
+      const [startStr, endStr] = str.split(' - ').map(s => s.trim());
+      const startDate = new Date(startStr);
+      const startTime = `${startDate.getFullYear()}-${(startDate.getMonth() + 1).toString().padStart(2, '0')}-${startDate.getDate().toString().padStart(2, '0')} 00:00:00`;
+      const endDate = new Date(endStr);
+      const endTime = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padStart(2, '0')}-${endDate.getDate().toString().padStart(2, '0')} 23:59:59`;
+      return {
+        startTime,
+        endTime
+      };
+    },
+},
   computed:{
     show() {
       return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
@@ -489,6 +556,9 @@ export default {
       right: 2px;
     }
   }
+  .customInput{
+    width: 130px;
+  }
   .has-value  ::v-deep .el-input__inner{
     background: #F1F6FF ;
     color: #007BE9;