持证人展示支持分页展示

src/pages/showcase/index.vue

@@ -7,15 +7,20 @@
       </ul>
     </div>
     <div class="tap-item-box" style="padding:40px 0">
-      <div class="avatar-list" v-if="showIndex === 1">
-        <div class="avatar-item" v-for="item in list" :key="item.id">
-          <div class="content">
-            <p>中国PRP持证人</p>
-            <h2>{{ item.name }}</h2>
-            <p>证书编号</p>
-            <p style="color:#cfb181">{{ item.number }}</p>
+      <div v-show="showIndex === 1">
+        <div class="avatar-list">
+          <div class="avatar-item" v-for="item in list" :key="item.id">
+            <div class="content">
+              <p>中国PRP持证人</p>
+              <h2>{{ item.name }}</h2>
+              <p>证书编号</p>
+              <p style="color:#cfb181">{{ item.number }}</p>
+            </div>
+            <img :src="item.avatar + '?x-oss-process=image/resize,m_fill,h_360,w_300'" class="pic" />
           </div>
-          <img :src="item.avatar" class="pic" />
+        </div>
+        <div style="text-align:center" v-if="hasMore">
+          <el-button :loading="false" @click="loadmore">加载更多</el-button>
         </div>
       </div>
       <app-upload-avatar v-if="showIndex === 2"></app-upload-avatar>
@@ -31,7 +36,10 @@ export default {
   data() {
     return {
       showIndex: 1,
-      list: []
+      list: [],
+      page: 1,
+      false: false,
+      hasMore: true
     }
   },
   watch: {
@@ -52,9 +60,21 @@ export default {
       this.showIndex = n
     },
     getAvatarList() {
-      getAvatarList({ page: 1, page_size: 100 }).then(response => {
-        this.list = response.list
-      })
+      this.loading = true
+      getAvatarList({ page: this.page, page_size: 18 })
+        .then(response => {
+          if (response.list.length < 18) {
+            this.hasMore = false
+          }
+          this.list = this.list.concat(response.list)
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    loadmore() {
+      this.page++
+      this.getAvatarList()
     }
   }
 }