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

<template>
  <page-pane>
    <div class="stack">
      <div class="stack-left">
        <sidebar @select="handleSelect" />
      </div>

      <div class="stack-main">
        <el-breadcrumb
          class="stack-breadcrumb"
          :separator-icon="ArrowRight"
          style="width: 100%"
        >
          <el-breadcrumb-item v-for="item in breadcrumb" :key="item.id">{{
            item.name
          }}</el-breadcrumb-item>
        </el-breadcrumb>

        <el-scrollbar
          v-loading="loading"
          style="flex: 1; width: 100%; height: 0; margin: 18px 0"
        >
          <ul class="stack-list">
            <li v-for="item in list" :key="item.id">
              <book-card type="row" size="large" :item="item" />
            </li>
          </ul>

          <el-empty v-if="noData" description="暂无数据" />
        </el-scrollbar>

        <el-pagination
          hide-on-single-page
          background
          layout="prev, pager, next"
          :total="total"
          @change="handlePage"
        />
      </div>
    </div>
  </page-pane>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouteQuery } from "@vueuse/router";
import { ArrowRight } from "@element-plus/icons-vue";
import { usePagination } from "@lsq/base";
import { getBookListApi } from "@/api";
import Sidebar from "./components/Sidebar/index.vue";
import BookCard from "@/components/BookCard/index.vue";

const breadcrumb = ref([]);
const activeTab = useRouteQuery("active");
const searchKey = useRouteQuery("keyword");

const { pageNum, total, loading, list, noData, getList } = usePagination(
  async (params) => {
    const p = {
      ...params,
      searchKey: searchKey.value,
    };
    const id = breadcrumb.value[breadcrumb.value.length - 1].id;
    if (activeTab.value === "collection" && id > -1) {
      p.exhibitTypeId = id;
    } else if (id > -1) {
      p.storageId = id;
    }
    return getBookListApi(p);
  }
);

const handlePage = (page) => {
  pageNum.value = page;
  getList();
};

const resetSearch = () => {
  pageNum.value = 1;
  getList();
};

const handleSelect = (type, data) => {
  if (type === "classify") {
    // 切换分类
    breadcrumb.value = data;
  }
  resetSearch();
};

watch(breadcrumb, (v) => {
  pageNum.value = 1;
  v.length && getList();
});
</script>

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