更改功德箱未显示完

src/pages/goods-detail/index.vue

@@ -33,11 +33,13 @@
             <div class="support-head">
                 <span class="label">感恩功德</span>
                 <ul class="external">
-                    <li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType)">{{lType.name}}</li>
+                    <li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType.id, 1)">{{lType.name}}</li>
                 </ul>
             </div>
             <div>
                 <user-merit v-for="pay in payList" :key="pay.id" :data="pay"></user-merit>
+                <div class="read-more" v-if="noMore">没有更多了</div>
+                <div class="read-more" v-else @click="loadMoreFn">查看更多</div>
             </div>
         </div>
 
@@ -120,6 +122,8 @@ export default {
                 { id: 3, name: '总榜', },
             ],
             payList: [],
+            page: 1,
+            noMore: false,
         }
     },
     computed: {
@@ -204,7 +208,7 @@ export default {
             const { goods_id, temple_id } = this.$route.query;
             const response = await getGoodsDetail(type, goods_id, temple_id);
             this.data = response;
-            await this.getPayRecords({ id: 1});
+            await this.getPayRecords(this.lTypeId, 1);
             this.$nextTick(() => {
                 this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight()
             })
@@ -213,12 +217,21 @@ export default {
                 link: location.href
             })
         },
+        // 获取更多感恩功德1
+        loadMoreFn(){
+            this.page += 1;
+            this.getPayRecords(this.lTypeId, this.page)
+        },
         // 获取感恩功德
-        async getPayRecords(lType){
-            this.listType = lType.id;
-            const res = await getOrderCompare(this.query.temple_id, this.listType, this.query.goods_id, 3 );
-            console.log('pay record', res)
-            this.payList = res.list;
+        async getPayRecords(lTypeId, page){
+            this.page = page;
+            this.lTypeId = lTypeId;
+            const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, 3 );
+            if(this.page === 1){
+                this.payList = [];
+            }
+            this.payList = this.payList.concat(res.list);
+            this.noMore = res.list.length === 0;
         },
     }
 }