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

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

@ -11,10 +11,10 @@
</div>
<div class="firstTab">
<div>
<img class="big com" v-show="activeTab === 0" src="@/assets/secondHandCar/cheyuanBig.png" @click="activeTab = 0" />
<img class="small com" v-show="activeTab === 1" src="@/assets/secondHandCar/cheyuanSmall.png" @click="activeTab = 0"/>
<img class="big" v-show="activeTab === 1" src="@/assets/secondHandCar/qiugouBig.png" @click="activeTab = 1"/>
<img class="small" v-show="activeTab === 0" src="@/assets/secondHandCar/qiugouSmall.png" @click="activeTab = 1"/>
<img class="big com" v-show="activeTab === 0" src="@/assets/secondHandCar/cheyuanBig.png" @click="tabClick(0)" />
<img class="small com" v-show="activeTab === 1" src="@/assets/secondHandCar/cheyuanSmall.png" @click="tabClick(0)"/>
<img class="big" v-show="activeTab === 1" src="@/assets/secondHandCar/qiugouBig.png" @click="tabClick(1)"/>
<img class="small" v-show="activeTab === 0" src="@/assets/secondHandCar/qiugouSmall.png" @click="tabClick(1)"/>
</div>
<div @click="poupShow = true">
<img class="suggest" src="@/assets/secondHandCar/suggest.png" />
@ -62,34 +62,41 @@
</el-option>
</el-select>
</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="viewCarSource(item)">
<div class="left">
<img class="img" v-if="item.vehicleAnglePhoto" :src="item.vehicleAnglePhoto" />
<div v-else class="qiugou">{{item.vehicleType?.substring(0,2)}}</div>
</div>
<div class="right">
<div class="title">{{item.vehicleType}}</div>
<div v-if="activeTab==0" class="type">{{ item.boardType?.label }} | {{ item.licenseType?.label }} |
{{ item.brandModel?.match(/^[\u4e00-\u9fa5]+/)?.[0]?.replace(/$/, '') }} | {{ item.mileage }}km | {{item.emissionStandard?.label}}</div>
<div v-else class="type">{{ item.boardType?.label }} |
{{item.vehicleType }} | {{item.emissionStandard?.label}}</div>
<div class="date" v-show="activeTab==0 && item.registerDate">注册日期 {{item.registerDate?.substring(0,10)}}</div>
<div v-if="activeTab==0" class="price"><span></span> <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>
<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="viewCarSource(item)">
<div class="left">
<img class="img" v-if="item.vehicleAnglePhoto" :src="item.vehicleAnglePhoto" />
<div v-else class="qiugou">{{item.vehicleType?.substring(0,2)}}</div>
</div>
<div class="right">
<div class="title">{{item.vehicleType}}</div>
<div v-if="activeTab==0" class="type">{{ item.boardType?.label }} | {{ item.licenseType?.label }} |
{{ item.brandModel?.match(/^[\u4e00-\u9fa5]+/)?.[0]?.replace(/$/, '') }} | {{ item.mileage }}km | {{item.emissionStandard?.label}}</div>
<div v-else class="type">{{ item.boardType?.label }} |
{{item.vehicleType }} | {{item.emissionStandard?.label}}</div>
<div class="date" v-show="activeTab==0 && item.registerDate">注册日期 {{item.registerDate?.substring(0,10)}}</div>
<div v-if="activeTab==0" class="price"><span></span> <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="line"></div>
</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>
<img v-show="activeTab==0" @click="releaseHandle(1)" class="fixImg" src="@/assets/secondHandCar/sellCar.png" />
@ -113,8 +120,6 @@ import {myMixins} from "@/utils/myMixins"
import {appPageList,userFeedback } from "@/api/secondHandCar"
export default {
name: "indexList",
computed: {
},
mixins:[myMixins],
watch:{
activeTab(){
@ -147,8 +152,12 @@ export default {
pageList:[],
topSearch:'',
activeTab:0,
showEmpty:false,
isLoading:false,
isLoading:"",
loading: false,
finished: false,
pageNum:1,
pageSize:10,
total:'',
licenseType:'',
vehicleType:'',
priceSort:'',
@ -185,7 +194,23 @@ export default {
}
});
},
methods:{
async tabClick(type){
this.activeTab=type
this.pageNum = 1
this.pageList = [];
this.total=0
await this.getList()
},
async onLoad(){
this.pageNum++;
await this.getList()
this.loading = false;
if (this.pageList.length >= this.total) {
this.finished = true;
}
},
changePrice(){
if(!this.priceSort){
this.priceSort=1
@ -256,14 +281,17 @@ export default {
this.$toast('反馈建议提交成功')
},
onRefresh() {
this.getList()
this.pageNum=1
setTimeout(() => {
this.$toast('刷新成功');
this.isLoading = false;
}, 1000);
},
async getList(){
let res= await appPageList({
pageNum:this.pageNum,
pageSize:this.pageSize,
type:this.activeTab==0 ? 1 : 2,
topSearch:this.topSearch,
licenseType:this.licenseType,
@ -271,13 +299,14 @@ export default {
priceSort:this.priceSort,
boardType:this.boardType,
emissionStandard:this.emissionStandard,
// brandModel:this.brandModel,
})
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)
}
},
goApp(){
@ -290,7 +319,12 @@ export default {
window.android.sendMessage("goBack");
}
},
}
},
computed:{
show() {
return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
},
},
}
</script>
<style scoped lang="scss">

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>

View File

@ -170,19 +170,13 @@ export default {
pageSize:this.pageSize,
queryType:this.activeIndex+1,
})
// this.pageList=res.data
// console.log("===",this.pageList)
this.total=res.total
if(this.pageNum == 1){// 第一页直接赋值
this.pageList=res.data
}else{// 第二页数据拼接
console.log("第二页数据拼接")
let preList = this.pageList;
// console.log("preList",preList)
let arr = res.data;
// console.log("arr",arr)
this.pageList = preList.concat(arr)
console.log("this.pageList====",this.pageList)
}
},
goPageDetail(item){