lsq-book/packages/mobile/src/views/Stack/index.vue

<template>
  <svg-icon
    class="stack__search"
    name="icon_search"
    width="24px"
    height="24px"
    color="var(--van-primary-color)"
    @click="$router.push({ name: 'search' })"
  />

  <van-tabs v-model:active="activeTab" swipeable shrink class="stack">
    <template #nav-bottom>
      <classify-scroll
        :active-tab="activeTab"
        :storage-init-val="storageId"
        :exhibit-init-val="exhibitId"
        @storageId="handleStorage"
        @exhibitId="handleExhibit"
        @tab-change="handleChange"
      />
    </template>

    <van-tab title="按书籍分类">
      <RecycleScroller
        class="stack-scroller"
        :items="bookList"
        :item-size="167 + 24"
        @scroll-end="handleBookEnd"
      >
        <template v-slot="{ item }">
          <BookCard2 :item="item" />
        </template>

        <template v-if="bookNoData" #empty>
          <van-empty description="暂无数据" />
        </template>

        <template v-if="bookLoading" #after>
          <van-loading style="text-align: center" />
        </template>
      </RecycleScroller>
    </van-tab>

    <van-tab title="按藏品分类">
      <RecycleScroller
        class="stack-scroller"
        :items="exhibitList"
        :item-size="167 + 24"
        @scroll-end="handleExhibitEnd"
      >
        <template v-slot="{ item }">
          <BookCard2 :item="item" />
        </template>

        <template v-if="exhibitNoData" #empty>
          <van-empty description="暂无数据" />
        </template>

        <template v-if="exhibitLoading" #after>
          <van-loading style="text-align: center" />
        </template>
      </RecycleScroller>
    </van-tab>
  </van-tabs>
</template>

<script setup>
import { usePagination, PaginationType } from "@lsq/base";
import { useRouteQuery } from "@vueuse/router";
import { getBookListApi, getStorageSonListApi } from "@/api";
import { RecycleScroller } from "vue-virtual-scroller";
import BookCard2 from "@/components/BookCard2.vue";
import ClassifyScroll from "./components/ClassifyScroll.vue";

const activeTab = useRouteQuery("active", 0, { transform: Number });
const storageId = useRouteQuery("storage", 0, { transform: Number });
const exhibitId = useRouteQuery("exhibit", 0, { transform: Number });

const {
  loading: bookLoading,
  list: bookList,
  noData: bookNoData,
  noMore: bookNoMore,
  pageNum: bookPage,
  getList: getBookList,
  resetParams: resetBookParams,
} = usePagination(async (params) => {
  // 查找书籍分类指定分类
  if (storageId.value) {
    const data = await getStorageSonListApi(storageId.value);

    // 模拟分页
    return {
      pages: 1,
      total: data.length,
      records: data.slice(
        (params.pageNum - 1) * params.pageSize,
        params.pageNum * params.pageSize
      ),
    };
  }

  return getBookListApi({
    ...params,
    storageId: storageId.value || null,
  });
}, PaginationType.CONCAT);

const {
  loading: exhibitLoading,
  list: exhibitList,
  noData: exhibitNoData,
  noMore: exhibitNoMore,
  pageNum: exhibitPage,
  getList: getExhibitList,
  resetParams: resetExhibitParams,
} = usePagination(async (params) => {
  return getBookListApi({
    ...params,
    exhibitTypeId: exhibitId.value || null,
  });
}, PaginationType.CONCAT);

const handleStorage = (id) => {
  if (id === storageId.value) return;

  storageId.value = id;
  resetBookParams();
  getBookList();
};

const handleBookEnd = () => {
  if (!bookNoMore.value && !bookLoading.value) {
    bookPage.value++;
    getBookList();
  }
};

const handleExhibit = (id) => {
  if (id === exhibitId.value) return;

  exhibitId.value = id;
  resetExhibitParams();
  getExhibitList();
};

const handleExhibitEnd = () => {
  if (!exhibitNoMore.value && !exhibitLoading.value) {
    exhibitPage.value++;
    getExhibitList();
  }
};

const handleChange = () => {
  if (activeTab.value === 0) {
    // 按书籍分类
    !bookList.value.length && getBookList();
  } else {
    // 按藏品分类
    !exhibitList.value.length && getExhibitList();
  }
};
</script>

<style lang="scss">
@import "./index.scss";
</style>