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

2025-03-13 15:27:02 +08:00
parent 18bfc4517e
commit 5a236926d7
3 changed files with 145 additions and 85 deletions
--- a/src/views/secondHandCar/indexList.vue
+++ b/src/views/secondHandCar/indexList.vue
@ -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,8 +62,14 @@
        </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">
+        <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">
@ -87,9 +93,10 @@
              </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.total=res.total
+      if(this.pageNum == 1){// 第一页直接赋值
        this.pageList=res.data
-      if(this.pageList?.length === 0){
-        this.showEmpty  = true
-      }else {
-        this.showEmpty = false
+      }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">
--- a/src/views/secondHandCar/mineRelease.vue
+++ b/src/views/secondHandCar/mineRelease.vue
@ -13,12 +13,17 @@
        </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-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 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" />
@ -50,9 +55,10 @@
              </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>

--- a/src/views/vehicle-maintenance/vehicle-maintenance-list.vue
+++ b/src/views/vehicle-maintenance/vehicle-maintenance-list.vue
@ -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){