二手车交易，首页列表和我的发布加加载分页功能
This commit is contained in:
@ -11,10 +11,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="firstTab">
|
<div class="firstTab">
|
||||||
<div>
|
<div>
|
||||||
<img class="big com" v-show="activeTab === 0" src="@/assets/secondHandCar/cheyuanBig.png" @click="activeTab = 0" />
|
<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="activeTab = 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="activeTab = 1"/>
|
<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="activeTab = 1"/>
|
<img class="small" v-show="activeTab === 0" src="@/assets/secondHandCar/qiugouSmall.png" @click="tabClick(1)"/>
|
||||||
</div>
|
</div>
|
||||||
<div @click="poupShow = true">
|
<div @click="poupShow = true">
|
||||||
<img class="suggest" src="@/assets/secondHandCar/suggest.png" />
|
<img class="suggest" src="@/assets/secondHandCar/suggest.png" />
|
||||||
@ -62,34 +62,41 @@
|
|||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</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">
|
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
|
||||||
<div class="contentItem">
|
<van-list
|
||||||
<div class="item" v-for="(item,index) in pageList" :key="index" @click="viewCarSource(item)">
|
v-model="loading"
|
||||||
<div class="left">
|
:finished="finished"
|
||||||
<img class="img" v-if="item.vehicleAnglePhoto" :src="item.vehicleAnglePhoto" />
|
finished-text="没有更多了"
|
||||||
<div v-else class="qiugou">{{item.vehicleType?.substring(0,2)}}</div>
|
@load="onLoad"
|
||||||
</div>
|
>
|
||||||
<div class="right">
|
<div class="contentItem">
|
||||||
<div class="title">{{item.vehicleType}}</div>
|
<div class="item" v-for="(item,index) in pageList" :key="index" @click="viewCarSource(item)">
|
||||||
<div v-if="activeTab==0" class="type">{{ item.boardType?.label }} | {{ item.licenseType?.label }} |
|
<div class="left">
|
||||||
{{ item.brandModel?.match(/^[\u4e00-\u9fa5]+/)?.[0]?.replace(/牌$/, '') }} | {{ item.mileage }}km | {{item.emissionStandard?.label}}</div>
|
<img class="img" v-if="item.vehicleAnglePhoto" :src="item.vehicleAnglePhoto" />
|
||||||
<div v-else class="type">{{ item.boardType?.label }} |
|
<div v-else class="qiugou">{{item.vehicleType?.substring(0,2)}}</div>
|
||||||
{{item.vehicleType }} | {{item.emissionStandard?.label}}</div>
|
</div>
|
||||||
<div class="date" v-show="activeTab==0 && item.registerDate">注册日期： {{item.registerDate?.substring(0,10)}}</div>
|
<div class="right">
|
||||||
<div v-if="activeTab==0" class="price"><span>￥</span> <span>{{formatNumber(item.maxPrice) }}</span> <span>万</span> </div>
|
<div class="title">{{item.vehicleType}}</div>
|
||||||
<div v-else class="priceRange">
|
<div v-if="activeTab==0" class="type">{{ item.boardType?.label }} | {{ item.licenseType?.label }} |
|
||||||
<span class="num">{{formatNumber(item.minPrice) }}</span> <span class="danwei">万</span>
|
{{ item.brandModel?.match(/^[\u4e00-\u9fa5]+/)?.[0]?.replace(/牌$/, '') }} | {{ item.mileage }}km | {{item.emissionStandard?.label}}</div>
|
||||||
<span class="su">~</span>
|
<div v-else class="type">{{ item.boardType?.label }} |
|
||||||
<span class="num">{{formatNumber(item.maxPrice) }}</span> <span class="danwei">万</span>
|
{{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>
|
||||||
<div class="line"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</van-list>
|
||||||
</van-pull-refresh>
|
</van-pull-refresh>
|
||||||
</div>
|
</div>
|
||||||
<div class="empty" v-show="showEmpty">
|
<div class="empty" v-show="show">
|
||||||
<img src="@/assets/empty.png" />
|
<img src="@/assets/empty.png" />
|
||||||
</div>
|
</div>
|
||||||
<img v-show="activeTab==0" @click="releaseHandle(1)" class="fixImg" src="@/assets/secondHandCar/sellCar.png" />
|
<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"
|
import {appPageList,userFeedback } from "@/api/secondHandCar"
|
||||||
export default {
|
export default {
|
||||||
name: "indexList",
|
name: "indexList",
|
||||||
computed: {
|
|
||||||
},
|
|
||||||
mixins:[myMixins],
|
mixins:[myMixins],
|
||||||
watch:{
|
watch:{
|
||||||
activeTab(){
|
activeTab(){
|
||||||
@ -147,8 +152,12 @@ export default {
|
|||||||
pageList:[],
|
pageList:[],
|
||||||
topSearch:'',
|
topSearch:'',
|
||||||
activeTab:0,
|
activeTab:0,
|
||||||
showEmpty:false,
|
isLoading:"",
|
||||||
isLoading:false,
|
loading: false,
|
||||||
|
finished: false,
|
||||||
|
pageNum:1,
|
||||||
|
pageSize:10,
|
||||||
|
total:'',
|
||||||
licenseType:'',
|
licenseType:'',
|
||||||
vehicleType:'',
|
vehicleType:'',
|
||||||
priceSort:'',
|
priceSort:'',
|
||||||
@ -185,7 +194,23 @@ export default {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
methods:{
|
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(){
|
changePrice(){
|
||||||
if(!this.priceSort){
|
if(!this.priceSort){
|
||||||
this.priceSort=1
|
this.priceSort=1
|
||||||
@ -256,14 +281,17 @@ export default {
|
|||||||
this.$toast('反馈建议提交成功')
|
this.$toast('反馈建议提交成功')
|
||||||
},
|
},
|
||||||
onRefresh() {
|
onRefresh() {
|
||||||
this.getList()
|
this.pageNum=1
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.$toast('刷新成功');
|
this.$toast('刷新成功');
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
}, 1000);
|
}, 1000);
|
||||||
},
|
},
|
||||||
|
|
||||||
async getList(){
|
async getList(){
|
||||||
let res= await appPageList({
|
let res= await appPageList({
|
||||||
|
pageNum:this.pageNum,
|
||||||
|
pageSize:this.pageSize,
|
||||||
type:this.activeTab==0 ? 1 : 2,
|
type:this.activeTab==0 ? 1 : 2,
|
||||||
topSearch:this.topSearch,
|
topSearch:this.topSearch,
|
||||||
licenseType:this.licenseType,
|
licenseType:this.licenseType,
|
||||||
@ -271,13 +299,14 @@ export default {
|
|||||||
priceSort:this.priceSort,
|
priceSort:this.priceSort,
|
||||||
boardType:this.boardType,
|
boardType:this.boardType,
|
||||||
emissionStandard:this.emissionStandard,
|
emissionStandard:this.emissionStandard,
|
||||||
// brandModel:this.brandModel,
|
|
||||||
})
|
})
|
||||||
this.pageList=res.data
|
this.total=res.total
|
||||||
if(this.pageList?.length === 0){
|
if(this.pageNum == 1){// 第一页直接赋值
|
||||||
this.showEmpty = true
|
this.pageList=res.data
|
||||||
}else {
|
}else{// 第二页数据拼接
|
||||||
this.showEmpty = false
|
let preList = this.pageList;
|
||||||
|
let arr = res.data;
|
||||||
|
this.pageList = preList.concat(arr)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
goApp(){
|
goApp(){
|
||||||
@ -290,7 +319,12 @@ export default {
|
|||||||
window.android.sendMessage("goBack");
|
window.android.sendMessage("goBack");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
|
computed:{
|
||||||
|
show() {
|
||||||
|
return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@ -13,46 +13,52 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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">
|
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
|
||||||
<div class="contentItem">
|
<van-list
|
||||||
<div class="item" v-for="(item,index) in pageList" :key="index" @click.stop="itemHandle(item)">
|
v-model="loading"
|
||||||
<div class="left">
|
:finished="finished"
|
||||||
<!-- <img class="bigImg" src="@/assets/secondHandCar/45angle.png" />-->
|
finished-text="没有更多了"
|
||||||
<img v-if="item.vehicleAnglePhoto" class="img" :src="item.vehicleAnglePhoto" />
|
@load="onLoad"
|
||||||
<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" />
|
<div class="contentItem">
|
||||||
<img v-else class="smallImg" src="@/assets/secondHandCar/mine_qiugou.png" />
|
<div class="item" v-for="(item,index) in pageList" :key="index" @click.stop="itemHandle(item)">
|
||||||
</div>
|
<div class="left">
|
||||||
<div class="right">
|
<img v-if="item.vehicleAnglePhoto" class="img" :src="item.vehicleAnglePhoto" />
|
||||||
<div class="title">
|
<div v-else class="qiugou">{{item.vehicleType?.substring(0,2)}}</div>
|
||||||
<span>{{item.vehicleType}}</span>
|
<img v-if="item.type==1" class="smallImg" src="@/assets/secondHandCar/mine_cheyuan.png" />
|
||||||
<img class="titleImg" :src="getStatus(item.status?.code)" />
|
<img v-else class="smallImg" src="@/assets/secondHandCar/mine_qiugou.png" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="activeTab==0" class="type">{{ item.boardType?.label }} | {{ item.licenseType?.label }} |
|
<div class="right">
|
||||||
{{ item.mileage }}km | {{item.emissionStandard?.label}}</div>
|
<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 }} |
|
<div v-else class="type">{{ item.boardType?.label }} |
|
||||||
{{item.vehicleType }} | {{item.emissionStandard?.label}}</div>
|
{{item.vehicleType }} | {{item.emissionStandard?.label}}</div>
|
||||||
<div v-if="item.type==1" class="price"><span>{{formatNumber(item.maxPrice) }}</span> <span>万</span> </div>
|
<div v-if="item.type==1" class="price"><span>{{formatNumber(item.maxPrice) }}</span> <span>万</span> </div>
|
||||||
<div v-else class="priceRange">
|
<div v-else class="priceRange">
|
||||||
<span class="num">{{formatNumber(item.minPrice) }}</span> <span class="danwei">万</span>
|
<span class="num">{{formatNumber(item.minPrice) }}</span> <span class="danwei">万</span>
|
||||||
<span class="su">~</span>
|
<span class="su">~</span>
|
||||||
<span class="num">{{formatNumber(item.maxPrice) }}</span> <span class="danwei">万</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>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</van-list>
|
||||||
</van-pull-refresh>
|
</van-pull-refresh>
|
||||||
</div>
|
</div>
|
||||||
<div class="empty" v-show="showEmpty">
|
<div class="empty" v-show="show">
|
||||||
<img src="@/assets/empty.png" />
|
<img src="@/assets/empty.png" />
|
||||||
</div>
|
</div>
|
||||||
<van-popup v-model="poupShow" closeable round :style="{ width: '70%',height:'18%' }" class="poupWrap">
|
<van-popup v-model="poupShow" closeable round :style="{ width: '70%',height:'18%' }" class="poupWrap">
|
||||||
@ -88,6 +94,11 @@ export default {
|
|||||||
showEmpty:false,
|
showEmpty:false,
|
||||||
isLoading:false,
|
isLoading:false,
|
||||||
xiajiaInfo:'',
|
xiajiaInfo:'',
|
||||||
|
loading: false,
|
||||||
|
finished: false,
|
||||||
|
pageNum:1,
|
||||||
|
pageSize:10,
|
||||||
|
total:'',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async mounted() {
|
async mounted() {
|
||||||
@ -96,8 +107,16 @@ export default {
|
|||||||
await this.getList()
|
await this.getList()
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
async onLoad(){
|
||||||
|
this.pageNum++;
|
||||||
|
await this.getList()
|
||||||
|
this.loading = false;
|
||||||
|
if (this.pageList.length >= this.total) {
|
||||||
|
this.finished = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
onRefresh() {
|
onRefresh() {
|
||||||
this.getList()
|
this.pageNum=1
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.$toast('刷新成功');
|
this.$toast('刷新成功');
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
@ -111,14 +130,19 @@ export default {
|
|||||||
sessionStorage.setItem('mineActiveTab',String(this.activeTab) )
|
sessionStorage.setItem('mineActiveTab',String(this.activeTab) )
|
||||||
},
|
},
|
||||||
async getList(){
|
async getList(){
|
||||||
|
await this.getCount()
|
||||||
let res= await minePublishPageList({
|
let res= await minePublishPageList({
|
||||||
|
pageNum:this.pageNum,
|
||||||
|
pageSize:this.pageSize,
|
||||||
queryType:this.activeTab
|
queryType:this.activeTab
|
||||||
})
|
})
|
||||||
this.pageList=res?.data;
|
this.total=res.total
|
||||||
if(this.pageList?.length === 0){
|
if(this.pageNum == 1){// 第一页直接赋值
|
||||||
this.showEmpty = true
|
this.pageList=res.data
|
||||||
}else {
|
}else{// 第二页数据拼接
|
||||||
this.showEmpty = false
|
let preList = this.pageList;
|
||||||
|
let arr = res.data;
|
||||||
|
this.pageList = preList.concat(arr)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async getCount(){//获取审核不通数量
|
async getCount(){//获取审核不通数量
|
||||||
@ -166,9 +190,12 @@ export default {
|
|||||||
this.poupShow=true
|
this.poupShow=true
|
||||||
this.xiajiaInfo=item
|
this.xiajiaInfo=item
|
||||||
},
|
},
|
||||||
tabClickHandle(i) {
|
async tabClickHandle(i) {
|
||||||
this.activeTab = i.value
|
this.activeTab = i.value
|
||||||
this.getList()
|
this.pageNum = 1
|
||||||
|
this.pageList = [];
|
||||||
|
this.total=0
|
||||||
|
await this.getList()
|
||||||
},
|
},
|
||||||
getStatus(i){
|
getStatus(i){
|
||||||
switch (i){
|
switch (i){
|
||||||
@ -184,7 +211,12 @@ export default {
|
|||||||
return require('@/assets/secondHandCar/nopass.png')
|
return require('@/assets/secondHandCar/nopass.png')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
|
computed:{
|
||||||
|
show() {
|
||||||
|
return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -170,19 +170,13 @@ export default {
|
|||||||
pageSize:this.pageSize,
|
pageSize:this.pageSize,
|
||||||
queryType:this.activeIndex+1,
|
queryType:this.activeIndex+1,
|
||||||
})
|
})
|
||||||
// this.pageList=res.data
|
|
||||||
// console.log("===",this.pageList)
|
|
||||||
this.total=res.total
|
this.total=res.total
|
||||||
if(this.pageNum == 1){// 第一页直接赋值
|
if(this.pageNum == 1){// 第一页直接赋值
|
||||||
this.pageList=res.data
|
this.pageList=res.data
|
||||||
}else{// 第二页数据拼接
|
}else{// 第二页数据拼接
|
||||||
console.log("第二页数据拼接")
|
|
||||||
let preList = this.pageList;
|
let preList = this.pageList;
|
||||||
// console.log("preList",preList)
|
|
||||||
let arr = res.data;
|
let arr = res.data;
|
||||||
// console.log("arr",arr)
|
|
||||||
this.pageList = preList.concat(arr)
|
this.pageList = preList.concat(arr)
|
||||||
console.log("this.pageList====",this.pageList)
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
goPageDetail(item){
|
goPageDetail(item){
|
||||||
|
|||||||
Reference in New Issue
Block a user