quickapp_front/src/views/Catalog/index.ux

<template>
  <list id="catalog" class="catalog-wrap" @scrollbottom="loadCatalog" @scrolltop="loadPrev" v-if="list.length>0">
    <block for="list">
      <list-item type="catalog-item" class="catalog-item {{$idx == chapter_sequence_index ? 'checked' : ''}}" @click='jumpReader($item)'>
        <text class="catalog-name {{$idx == chapter_sequence_index ? 'catalog-name__check' : ''}}">{{$item.chapter_name}}</text>
        <image show='{{$item.chapter_is_vip}}' src="../../assets/imgs/book-vip.png"></image>
      </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>

<script>
import { getCatalog } from "../../api";
import router from '@system.router';
import prompt from '@system.prompt';

const PER_PAGE_NUM = 50;

export default {
  protected: {
    bid: "",
    chapter_sequence: "",
  },
  private: {
    list: [],
    meta: {},
    chapter_sequence_index: 0,
    startpage: 1,
    loading: false,
    end: false,
  },
  onInit() {
    // let page = 1
    // var chapter_sequence_index = 0
    // if (this.chapter_sequence) {
    //   var chapter_sequence = this.chapter_sequence
    //   chapter_sequence_index = chapter_sequence % PER_PAGE_NUM - 1
    //   this.chapter_sequence_index = chapter_sequence_index
    //   page = Math.ceil(chapter_sequence / PER_PAGE_NUM)
    // }
    // this.startpage = page;
    // getCatalog({ bid: this.bid, page: page, page_size: PER_PAGE_NUM }).then(r => {
    //   this.list = r.list
    //   this.meta = r.meta
    //   setTimeout(() => {
    //     this.$element('catalog').scrollTo({ index: chapter_sequence_index })
    //   }, 500)

    // })
  },
  onShow() {
    let page = 1
    var chapter_sequence_index = 0
    if (this.chapter_sequence) {
      var chapter_sequence = this.chapter_sequence
      chapter_sequence_index = chapter_sequence % PER_PAGE_NUM - 1
      this.chapter_sequence_index = chapter_sequence_index
      page = Math.ceil(chapter_sequence / PER_PAGE_NUM)
    }
    this.startpage = page;
    getCatalog({ bid: this.bid, page: page, page_size: PER_PAGE_NUM }).then(r => {
      this.list = r.list
      this.meta = r.meta
      setTimeout(() => {
        this.$element('catalog').scrollTo({ index: chapter_sequence_index })
      }, 500)

    })
  },
  jumpReader(info) {
    if (info.is_need_charge == 1) {
      this.chapter_sequence = info.chapter_sequence
      router.push({
        uri: "/views/Pay",
        params: {
          bid: info.bid,
        }
      })
      return
    }
    router.push({
      uri: "/views/Reader",
      params: {
        bid: info.bid,
        chapter_id: info.chapter_id
      }
    })
  },
  loadCatalog() {
    if (this.meta.last_page < (this.meta.current_page + 1)) {
      prompt.showToast({ message: '已经到底啦' });
      this.end = true;
      return;
    }
    let params = {
      bid: this.bid,
      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: '已经到顶啦' });
    let params = {
      bid: this.bid,
      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;
      }
    })
  }
}
</script>

<style lang="less">
@import "../../assets/less/catalog.less";
</style>