二手车交易,首页列表和我的发布加加载分页功能
This commit is contained in:
@ -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>
|
||||
|
||||
|
Reference in New Issue
Block a user