lsq-book/packages/mobile/src/views/Home/components/SecondPane/index.vue

<template>
  <div class="second-pane">
    <img class="logo" src="@/assets/images/logo@2x-min.png" />

    <search-input
      v-model="keyword"
      @search="$router.push({ name: 'search', query: { keyword } })"
    />

    <rank-pane
      class="second-pane-recommend"
      :list="recommendList"
      :loading="recommendLoading"
    >
      <template #title-prepend>
        <img
          class="second-pane__title-prepend"
          src="../../images/text_recommend@2x-min.png"
        />
      </template>
    </rank-pane>

    <rank-pane class="second-pane-read" :list="readList" :loading="readLoading">
      <template #title-prepend>
        <img
          class="second-pane__title-prepend"
          src="../../images/text_readomg@2x-min.png"
        />
      </template>
    </rank-pane>

    <div class="second-pane-news">
      <div class="second-pane-news-header">
        <img
          class="second-pane__title-prepend"
          src="../../images/text_news@2x-min.png"
        />
        <span>排行榜</span>
      </div>

      <news-list />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getReadListApi, getRecommendListApi } from "@/api";
import SearchInput from "../../../../components/SearchInput.vue";
import RankPane from "../RankPane.vue";
import NewsList from "../NewsList.vue";

const keyword = ref("");

const recommendLoading = ref(false);
const recommendList = ref([]);
const readLoading = ref(false);
const readList = ref([]);

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

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;
  }
};
</script>

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