更改功德箱未显示完

src/App.vue

@@ -145,6 +145,14 @@ export default {
     justify-content: center;
 }
 
+.read-more{
+    height: 1.3rem;
+    text-align: center;
+    font-size: .4rem;
+    line-height: 1.3rem;
+    color: #888;
+}
+
 @keyframes loading {
     from{
         transform: rotateZ(0);

src/api/index.js

@@ -129,7 +129,7 @@ const getDynamicDetail = (dynamic_id = '') => service.get(`/api/dynamic/detail?i
 const getCommonGoods = (temple_id = '', page, size = 10) => service.get(`/api/common/get-list?temple_id=${temple_id}&page=${page}&size=${size}`);
 
 // 获取订单榜
-const getOrderCompare = (temple_id = '1', type = '', goods_id = '', goods_type = '') => service.get(`/api/order/get-compare?temple_id=${temple_id}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}`);
+const getOrderCompare = (temple_id = '1', page = 1,  type = '', goods_id = '', goods_type = '') => service.get(`/api/order/get-compare?temple_id=${temple_id}&page=${page}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}`);
 
 // 根据agent_id获取订单榜
 const getOrderCompareByAgentId = (agent_id = '1', type = '', goods_id = '', goods_type = '') => service.get(`/api/order/get-compare?agent_id=${agent_id}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}`);

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;
         },
     }
 }