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

This commit is contained in:
2025-05-21 10:55:16 +08:00
parent 6a53749cdc
commit de252fceb2

View File

@ -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()
}
},
data(){
return{
pageList:[],
topSearch:'',
activeTab:0,
isLoading:"",
loading: false,
finished: false,
pageNum:1,
pageSize:10,
total:'',
licenseType:'',
vehicleType:'',
priceSort:'',
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:'',
}
},
areaName() {
this.setSearchVal();
this.getList()
},
dateVal(val){
if(val){
let res= this.formatDateTimeRange(val)
this.publishStartTime=res.startTime
this.publishEndTime=res.endTime
}else{
this.publishStartTime=''
this.publishEndTime=''
}
this.setSearchVal();
this.getList()
},
},
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;