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

<template>
  <div class="home2">
    <div v-if="isLogin" class="home2-top">
      <div class="w1100">
        <div class="home2-top-lf">
          <div>
            <p>我的书架</p>
            <p>
              <span>{{ collectedCount }}</span
              >本<img
                draggable="false"
                src="./images/icon_more-min.png"
                @click="$router.push({ name: 'bookshelf' })"
              />
            </p>
          </div>

          <el-button class="home2-top__pick" type="primary">去挑书 +</el-button>
        </div>

        <div class="home2-top-main">
          <book-card
            v-for="item in bookList.slice(0, 4)"
            :key="item.id"
            :item="item"
            type="column"
            :show-like="item.isCollect === 1"
            :show-read="item.isCollect === 0"
          />
        </div>

        <el-empty
          v-if="!bookList.length && !bookLoading"
          description="暂无收藏"
        >
          <template #image><div /></template>
        </el-empty>
      </div>
    </div>

    <div class="home2-main w1100">
      <rank-panel
        v-loading="recommendLoading"
        sub-title="用户最喜爱的文献"
        :list="recommendList"
      >
        <template #title-prepend>
          <img draggable="false" src="./images/text_recommend-min.png" />
        </template>
      </rank-panel>

      <rank-panel
        v-loading="readLoading"
        sub-title="阅读量最多的文献"
        :list="readList"
      >
        <template #title-prepend>
          <img draggable="false" src="./images/text_readomg-min.png" />
        </template>
      </rank-panel>
    </div>

    <news />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { storeToRefs } from "pinia";
import { useBaseStore } from "@/stores";
import {
  getRecommendListApi,
  getReadListApi,
  getMyBookListApi,
  getUserCollectedBookCountApi,
} from "@/api";
import BookCard from "@/components/BookCard/index.vue";
import RankPanel from "@/components/RankPanel/index.vue";
import News from "./components/News.vue";

const baseStore = useBaseStore();
const { isLogin } = storeToRefs(baseStore);
const recommendLoading = ref(false);
const recommendList = ref([]);
const readLoading = ref(false);
const readList = ref([]);
const bookLoading = ref(false);
const bookList = ref([]);
const collectedCount = ref("-");

onMounted(() => {
  getRecommendList();
  getReadList();
  getUserCollectedBookCount();
});

const getUserCollectedBookCount = async () => {
  const data = await getUserCollectedBookCountApi();
  collectedCount.value = data;
};

const getMyBookList = async () => {
  try {
    bookLoading.value = true;
    const data = await getMyBookListApi();
    bookList.value = data;
  } finally {
    bookLoading.value = false;
  }
};

const getReadList = async () => {
  try {
    readLoading.value = true;
    const data = await getReadListApi();
    readList.value = data;
  } finally {
    readLoading.value = false;
  }
};

const getRecommendList = async () => {
  try {
    recommendLoading.value = true;
    const data = await getRecommendListApi({
      pageNum: 1,
      pageSize: 10,
      type: "rank",
    });
    recommendList.value = data;
  } finally {
    recommendLoading.value = false;
  }
};

watch(
  isLogin,
  () => {
    if (isLogin.value) {
      getMyBookList();
    }
  },
  {
    immediate: true,
  }
);
</script>

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