quickapp_front/src/views/Consume/index.ux

<import name="x-page" src="../../components/page/page.ux"></import>

<template>
  <div class="consume-record__wrap">
    <div class="tabbar-wrap">
      <block for="(index, tab) in tabs">
        <div class="tab-item" @click="tabChange(index)">
          <text class="{{index === curTab ? 'active' : ''}}">{{tab}}</text>
          <text class="tab-active__border {{index === curTab ? 'tab-active__border--active' : ''}}"></text>
        </div>
      </block>
    </div>
    <list class="consume-wrap">
      <block if="curTab === 0">
        <block for="{{chapter.list}}">
          <list-item type="chapter" class="consume-item">
            <div class="consume-info">
              <text class="name">{{$item.book_name}}</text>
              <text class="chapter">{{$item.chapter_name}}</text>
              <text class="create">{{$item.created_at}}</text>
            </div>
            <text class="consume-price">{{$item.fee}}书币</text>
          </list-item>
        </block>
      </block>
      <block elif="curTab === 1">
        <block for="{{book.list}}">
          <list-item type="book" class="consume-item">
            <div class="consume-info">
              <text class="name">{{$item.book_name}}</text>
              <text class="create">{{$item.created_at}}</text>
            </div>
            <text class="consume-price">{{$item.fee}}书币</text>
          </list-item>
        </block>
      </block>
      <list-item type="page" class="consume-wrap">
        <x-page current="{{currentPage.current}}" total="{{currentPage.total}}" @prev="prev" @next="next"></x-page>
      </list-item>
    </list>
  </div>
</template>

<script>
import { chapterApi, bookApi } from "../../api/index";
export default {
  private: {
    curTab: 0,
    tabs: ["章节", "整本"],
    chapter: {
      list: [],
      page: {
        total: 0,
        current: 1
      },
    },
    book: {
      list: [],
      page: {
        total: 0,
        current: 1
      },
    },
    currentPage: {
      total: 0,
      current: 1
    }

  },
  onInit() {
    this.getOrderChapter();
  },
  async getOrderChapter(page = 1, page_size = 10) {
    let res = await chapterApi({ page: page, page_size });
    let { list, meta } = res;
    let pages = { total: meta.last_page, current: meta.current_page };
    this.chapter = { ...this.chapter, list, page: pages };
    this.currentPage = pages;
  },
  async getOrderBook(page = 1, page_size = 2) {
    let res = await bookApi({ page: page, page_size });
    let { list, meta } = res;
    let pages = { total: meta.last_page, current: meta.current_page };
    this.book = { ...this.book, list, page: pages };
    this.currentPage = pages;
  },
  tabChange(index) {
    this.curTab = index;
    switch (index) {
      case 0:
        this.getOrderChapter();
        break;
      case 1:
        this.getOrderBook();
        break;
    }
  },
  prev() {
    switch (this.curTab) {
      case 0:
        this.getOrderChapter(--this.currentPage.current);
        break;
      case 1:
        this.getOrderBook(--this.currentPage.current);
        break;
    }
  },
  next() {
    switch (this.curTab) {
      case 0:
        this.getOrderChapter(++this.currentPage.current);
        break;
      case 1:
        this.getOrderBook(++this.currentPage.current);
        break;
    }
  }
}
</script>

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