story#6462,列表添加发布省市和发布时间筛选项
This commit is contained in:
@ -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;
|
||||
|
Reference in New Issue
Block a user