add loading status in catalog

src/assets/less/catalog.less

@@ -38,4 +38,15 @@
       margin-right: 20px;
     }
   }
+
+  .loading-wrap {
+    justify-content: center;
+    align-items: center;
+    height: 105px;
+    
+    text {
+      color: #999;
+      font-size: 26px;
+    }
+  }
 }

src/views/Catalog/index.ux

@@ -9,6 +9,13 @@
         </div>
       </list-item>
     </block>
+    <list-item type="loading-text" class="loading-wrap" if="!end">
+      <progress type="circular"></progress>
+      <text>加载中...</text>
+    </list-item>
+    <list-item type="loading-text" class="loading-wrap" else>
+      <text>已经到底了</text>
+    </list-item>
   </list>
 </template>
 
@@ -29,6 +36,8 @@ export default {
     meta: {},
     chapter_sequence_index: 0,
     startpage: 1,
+    loading: false,
+    end: false
   },
   onInit() {
     let page = 1
@@ -39,7 +48,7 @@ export default {
       this.chapter_sequence_index = chapter_sequence_index
       page = Math.ceil(chapter_sequence / PER_PAGE_NUM)
     }
-    this.startpage = page
+    this.startpage = page;
     getCatalog({ bid: this.bid, page: page, page_size: PER_PAGE_NUM }).then(r => {
       this.list = r.list
       this.meta = r.meta
@@ -62,20 +71,48 @@ export default {
   },
   loadCatalog() {
     console.log("load data");
-    if (this.meta.last_page < (this.meta.current_page + 1)) return prompt.showToast({ message: '已经到底啦' })
-    getCatalog({ bid: '5pNo6A7wqQmB1WgQygDjkOM9VZn2vXeY', page: this.meta.current_page + 1, page_size: PER_PAGE_NUM }).then(r => {
-      console.log(...r.list)
-      this.list.push(...r.list)
-      this.meta = r.meta
-    })
+    if (this.meta.last_page < (this.meta.current_page + 1)) {
+      prompt.showToast({ message: '已经到底啦' });
+      this.end = true;
+      return;
+    };
+    let params = {
+      bid: '5pNo6A7wqQmB1WgQygDjkOM9VZn2vXeY',
+      page: this.meta.current_page + 1,
+      page_size: PER_PAGE_NUM
+    }
+    this.initCatalog(params);
+    // getCatalog({ bid: '5pNo6A7wqQmB1WgQygDjkOM9VZn2vXeY', page: this.meta.current_page + 1, page_size: PER_PAGE_NUM }).then(r => {
+    //   console.log(...r.list)
+    //   this.list.push(...r.list)
+    //   this.meta = r.meta
+    // })
   },
   loadPrev() {
     console.log("get prev catalog");
-    if ((this.startpage - 1) < 1) return prompt.showToast({ message: '已经到顶啦' })
-    getCatalog({ bid: '5pNo6A7wqQmB1WgQygDjkOM9VZn2vXeY', page: this.startpage - 1, page_size: PER_PAGE_NUM }).then(r => {
-      console.log(...r.list)
-      this.list.unshift(...r.list)
-      this.startpage = r.meta.current_page
+    if ((this.startpage - 1) < 1) return prompt.showToast({ message: '已经到顶啦' });
+    let params = {
+      bid: '5pNo6A7wqQmB1WgQygDjkOM9VZn2vXeY',
+      page: this.startpage - 1,
+      page_size: PER_PAGE_NUM
+    }
+    this.initCatalog(params, true);
+    // getCatalog({ bid: '5pNo6A7wqQmB1WgQygDjkOM9VZn2vXeY', page: this.startpage - 1, page_size: PER_PAGE_NUM }).then(r => {
+    //   console.log(...r.list)
+    //   this.list.unshift(...r.list)
+    //   this.startpage = r.meta.current_page
+    // })
+  },
+  initCatalog(params, isLoadPrev = false) {
+    this.end = false;
+    getCatalog(params).then(r => {
+      if (isLoadPrev) {
+        this.list.unshift(...r.list)
+        this.startpage = r.meta.current_page
+      } else {
+        this.list.push(...r.list)
+        this.meta = r.meta;
+      }
     })
   }
 }