二手车交易,首页列表和我的发布加加载分页功能

This commit is contained in:
2025-03-13 15:27:02 +08:00
parent 18bfc4517e
commit 5a236926d7
3 changed files with 145 additions and 85 deletions

View File

@ -13,46 +13,52 @@
</div>
</div>
</div>
<div class="contentWrap" v-show="!showEmpty">
<div class="contentWrap" v-show="!show">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
<div class="contentItem">
<div class="item" v-for="(item,index) in pageList" :key="index" @click.stop="itemHandle(item)">
<div class="left">
<!-- <img class="bigImg" src="@/assets/secondHandCar/45angle.png" />-->
<img v-if="item.vehicleAnglePhoto" class="img" :src="item.vehicleAnglePhoto" />
<div v-else class="qiugou">{{item.vehicleType?.substring(0,2)}}</div>
<img v-if="item.type==1" class="smallImg" src="@/assets/secondHandCar/mine_cheyuan.png" />
<img v-else class="smallImg" src="@/assets/secondHandCar/mine_qiugou.png" />
</div>
<div class="right">
<div class="title">
<span>{{item.vehicleType}}</span>
<img class="titleImg" :src="getStatus(item.status?.code)" />
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div class="contentItem">
<div class="item" v-for="(item,index) in pageList" :key="index" @click.stop="itemHandle(item)">
<div class="left">
<img v-if="item.vehicleAnglePhoto" class="img" :src="item.vehicleAnglePhoto" />
<div v-else class="qiugou">{{item.vehicleType?.substring(0,2)}}</div>
<img v-if="item.type==1" class="smallImg" src="@/assets/secondHandCar/mine_cheyuan.png" />
<img v-else class="smallImg" src="@/assets/secondHandCar/mine_qiugou.png" />
</div>
<div v-if="activeTab==0" class="type">{{ item.boardType?.label }} | {{ item.licenseType?.label }} |
{{ item.mileage }}km | {{item.emissionStandard?.label}}</div>
<div class="right">
<div class="title">
<span>{{item.vehicleType}}</span>
<img class="titleImg" :src="getStatus(item.status?.code)" />
</div>
<div v-if="activeTab==0" class="type">{{ item.boardType?.label }} | {{ item.licenseType?.label }} |
{{ item.mileage }}km | {{item.emissionStandard?.label}}</div>
<div v-else class="type">{{ item.boardType?.label }} |
{{item.vehicleType }} | {{item.emissionStandard?.label}}</div>
<div v-if="item.type==1" class="price"><span>{{formatNumber(item.maxPrice) }}</span> <span></span> </div>
<div v-else class="priceRange">
<span class="num">{{formatNumber(item.minPrice) }}</span> <span class="danwei"></span>
<span class="su">~</span>
<span class="num">{{formatNumber(item.maxPrice) }}</span> <span class="danwei"></span>
<div v-else class="type">{{ item.boardType?.label }} |
{{item.vehicleType }} | {{item.emissionStandard?.label}}</div>
<div v-if="item.type==1" class="price"><span>{{formatNumber(item.maxPrice) }}</span> <span></span> </div>
<div v-else class="priceRange">
<span class="num">{{formatNumber(item.minPrice) }}</span> <span class="danwei"></span>
<span class="su">~</span>
<span class="num">{{formatNumber(item.maxPrice) }}</span> <span class="danwei"></span>
</div>
<div class="btnWrap">
<img v-if="(activeTab==1 && item.status?.code==3) || activeTab==2" @click.stop="noMultipleClicks(reviseHandle,item)" class="revise" src="@/assets/secondHandCar/revise.png" />
<img v-if="(activeTab==1 && item.status?.code==1) || activeTab==2" @click.stop="noMultipleClicks(xiajiaHandle,item)" class="xiajia" src="@/assets/secondHandCar/xiajia.png" />
<img v-if="(activeTab==3 && item.status?.code==7) || activeTab==2" @click.stop="noMultipleClicks(polishHandle,item)" class="polish" src="@/assets/secondHandCar/polish.png" />
<img v-if="activeTab==3 && item.type==1 && item.downReason=='不卖了' " @click.stop="noMultipleClicks(reShangJiaHandle,item)" class="reshangjia" src="@/assets/secondHandCar/reshangjia.png" />
</div>
<div class="line"></div>
</div>
<div class="btnWrap">
<img v-if="(activeTab==1 && item.status?.code==3) || activeTab==2" @click.stop="noMultipleClicks(reviseHandle,item)" class="revise" src="@/assets/secondHandCar/revise.png" />
<img v-if="(activeTab==1 && item.status?.code==1) || activeTab==2" @click.stop="noMultipleClicks(xiajiaHandle,item)" class="xiajia" src="@/assets/secondHandCar/xiajia.png" />
<img v-if="(activeTab==3 && item.status?.code==7) || activeTab==2" @click.stop="noMultipleClicks(polishHandle,item)" class="polish" src="@/assets/secondHandCar/polish.png" />
<img v-if="activeTab==3 && item.type==1 && item.downReason=='不卖了' " @click.stop="noMultipleClicks(reShangJiaHandle,item)" class="reshangjia" src="@/assets/secondHandCar/reshangjia.png" />
</div>
<div class="line"></div>
</div>
</div>
</div>
</van-list>
</van-pull-refresh>
</div>
<div class="empty" v-show="showEmpty">
<div class="empty" v-show="show">
<img src="@/assets/empty.png" />
</div>
<van-popup v-model="poupShow" closeable round :style="{ width: '70%',height:'18%' }" class="poupWrap">
@ -88,6 +94,11 @@ export default {
showEmpty:false,
isLoading:false,
xiajiaInfo:'',
loading: false,
finished: false,
pageNum:1,
pageSize:10,
total:'',
}
},
async mounted() {
@ -96,8 +107,16 @@ export default {
await this.getList()
},
methods:{
async onLoad(){
this.pageNum++;
await this.getList()
this.loading = false;
if (this.pageList.length >= this.total) {
this.finished = true;
}
},
onRefresh() {
this.getList()
this.pageNum=1
setTimeout(() => {
this.$toast('刷新成功');
this.isLoading = false;
@ -111,14 +130,19 @@ export default {
sessionStorage.setItem('mineActiveTab',String(this.activeTab) )
},
async getList(){
await this.getCount()
let res= await minePublishPageList({
pageNum:this.pageNum,
pageSize:this.pageSize,
queryType:this.activeTab
})
this.pageList=res?.data;
if(this.pageList?.length === 0){
this.showEmpty = true
}else {
this.showEmpty = false
this.total=res.total
if(this.pageNum == 1){// 第一页直接赋值
this.pageList=res.data
}else{// 第二页数据拼接
let preList = this.pageList;
let arr = res.data;
this.pageList = preList.concat(arr)
}
},
async getCount(){//获取审核不通数量
@ -166,9 +190,12 @@ export default {
this.poupShow=true
this.xiajiaInfo=item
},
tabClickHandle(i) {
async tabClickHandle(i) {
this.activeTab = i.value
this.getList()
this.pageNum = 1
this.pageList = [];
this.total=0
await this.getList()
},
getStatus(i){
switch (i){
@ -184,7 +211,12 @@ export default {
return require('@/assets/secondHandCar/nopass.png')
}
},
}
},
computed:{
show() {
return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
},
},
}
</script>