pc--vr/src/views/more.vue

<script setup>
import { ref, onMounted } from "vue";
import Banner from "~/components/Banner/index.vue";
import IndexTitle from "~/components/IndexTitle/index.vue";
import IndexSection from "~/components/IndexSection/index.vue";
import YXFooter from "~/components/layouts/Footer.vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import * as videoApi from "~/api/video";
import * as articleApi from "~/api/article";
//标题
// 精选视频
let videoList = ref([]);
const __videos__ = async () => {
  try {
    const { data } = await videoApi.list({
      is_page: 0,
      is_boutique: 1,
    });
    videoList.value = data;
    total.value = data.length;
  } catch (error) {}
};
//分页器
const handleCurrentChange = (val) => {
  page.value = val;
  if (title.value == "精选视频") {
    __videos__();
  } else {
    __articles__();
  }
};

//精彩文章
const total = ref(0);
const page = ref(0);
const __articles__ = async () => {
  try {
    const { data } = await articleApi.list({
      page: page.value,
      limit: 12,
      is_page: 0,
      is_boutique: 1,
    });
    videoList.value = data;
    total.value = data.length;
  } catch (error) {}
};
const title = ref("");
title.value = route.query.title;
if (title.value == "精选视频") {
  onMounted(__videos__);
} else {
  onMounted(__articles__);
}
//详情
const todetails = (id, type) => {
  if (title.value == "精选视频") {
    router.push({
      name: "videos",
      query: {
        id: id,
        type: type,
      },
    });
  } else {
    router.push({
      name: "articles",
      query: {
        id: id,
        type: type,
      },
    });
  }
};
</script>

<template>
  <div class="articles-container">
    <div class="title">{{ title }}</div>
    <div class="article-main" style="height: 730px">
      <template v-for="(item, idx) in videoList" :key="idx">
        <IndexSection
          @update="todetails(item.id, !item.image ? 'article' : 'common')"
          :type="!item.image ? 'article' : 'common'"
          :title="item.title"
          :time-ago="item.published_at"
          :descs="item.description"
          :topic-name="item.topic?.title"
          :author="item.user?.username"
          :author-avatar="item.user?.avatar"
          :view_count="item.view_count"
          :comment_count="item.comment_count"
          :collect_count="item.collect_count"
          :share_count="item.share_count"
          :image = item.image
        />
      </template>
    </div>

    <!-- <IndexTitle title="最新视频" />
    <div class="article-main">
      <template v-for="(item, idx) in newList" :key="idx">
        <IndexSection
          @update="todetails(item.id, !item.image ? 'article' : 'common')"
          :type="!item.image ? 'article' : 'common'"
          :title="item.title"
          :time-ago="item.published_at"
          :descs="item.description"
          :topic-name="item.topic?.title"
          :author="item.user?.username"
          :author-avatar="item.user?.avatar"
          :view_count="item.view_count"
          :comment_count="item.comment_count"
          :collect_count="item.collect_count"
          :share_count="item.share_count"
        />
      </template>
    </div> -->

    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="12"
        @current-change="handleCurrentChange"
      />
    </div>
    <YXFooter />
  </div>
</template>

<style lang="scss" scoped>
@import "~/styles/variable.scss";
.title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  line-height: 25px;
  text-align: left;
  font-style: normal;
  margin-bottom: 24px;
}

.articles-container {
  .index-title-container {
    margin-bottom: 20px;
  }

  .content-list {
    margin-bottom: 30px;
    column-gap: 20px;
    flex-wrap: wrap;
    height: 255px;
    overflow: hidden;
  }

  .article-main {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    row-gap: 30px;
  }
}
</style>