个人明细页分页功能调试

pages/person-detail/index.vue

@@ -12,12 +12,12 @@
         <div class="content">
           <p class="item">
             <span class="label">累计排名</span>
-            <span class="value">105</span>
+            <span class="value">{{userRank.rank}}</span>
           </p>
           <p class="line"></p>
           <p class="item">
             <span class="label">累计勤奋分 </span>
-            <span class="value">105</span>
+            <span class="value">{{userRank.score}}</span>
           </p>
         </div>
       </div>
@@ -30,7 +30,7 @@
         </div>
         <div class="awards-details">血压计 1 支/温度计 1 支/小米电视4C 2 台/米家洗衣机 1 台/米家冰箱 2 台/华为荣耀Play3 2 部</div>
       </div>-->
-      <div class="detail-list" >
+      <div class="detail-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
         <div class="item" v-for="item in personDetails">
           <div class="left">
             <img :src="detailTaskIcon(item.taskName)" alt="">
@@ -48,12 +48,13 @@
             </div>
           </div>
         </div>
+        <div class="no-more" v-if="noMore">
+          <span class="line"></span>
+          <span class="text">到底啦</span>
+          <span class="line"></span>
+        </div>
       </div>
-     <!-- <div class="no-more">
-        <span class="line"></span>
-        <span class="text">到底啦</span>
-        <span class="line"></span>
-      </div>-->
+
     </div>
   </section>
 </template>
@@ -73,12 +74,17 @@
         barHeight: 0,
         barColor: '#fff',
         personDetails: [],
+        busy: true, //分页参数--start
+        pageNo: 0,
+        noMore: false,//分页参数--end
+        userRank: {}
       };
     },
     computed: {
 
     },
     mounted() {
+      this.pageNo++;
       this.getPersonDetails();
     },
     methods: {
@@ -100,15 +106,39 @@
         }
       },
       getPersonDetails() {
-        getPersonDetails().then(res => {
+        getPersonDetails({
+          pageNo: this.pageNo,
+          activityId: 2
+        }).then(res => {
           console.log(res)
           if(res.code == '000000') {
-            this.personDetails = res.data.personalDetails
+            this.userRank = res.data.userRank
+            if(this.pageNo ==1) {
+              this.personDetails = res.data.personalDetails
+              if(res.data.hasNextPage) {
+                this.noMore = true;
+
+              } else {
+                this.busy = false;
+              }
+            } else {
+              if(res.data.hasNextPage) {
+                this.personDetails = this.personDetails.concat(res.data.personalDetails);
+                this.busy = false;
+              } else {
+                this.noMore = true
+              }
+
+            }
+
           }
         })
       },
       loadMore() {
-
+        this.busy = true;
+        this.pageNo++
+        //this.changeRecordType();
+        this.getPersonDetails()
       }
     },
   };

pages/person-ranking/index.vue

@@ -70,6 +70,7 @@
         title: '个人明细',
         barHeight: 0,
         barColor: '#fff',
+        rankList: []
       };
     },
     computed: {

service/detailsAndRanking.js

@@ -20,7 +20,7 @@ export const getTwoInviteDetails = (params) => {
 // 获取个人明细列表
 export const getPersonDetails = (params) => {
   return request({
-    url: `/campaign/tims/personalDetails?activityId=2`,
+    url: `/campaign/tims/personalDetails`,
     params: params,
     withCredentials: true
   })