feat(frontend): Align admin and user API integration
This commit is contained in:
@@ -1,11 +1,17 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<!-- 顶部导航 -->
|
||||
<van-nav-bar title="HAOVP" fixed placeholder>
|
||||
<template #right>
|
||||
<van-icon name="search" size="22" @click="router.push('/search')" />
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
<section class="hero-panel">
|
||||
<div class="hero-copy">
|
||||
<span class="hero-tag">热门精选</span>
|
||||
<h1>发现值得反复观看的优质内容</h1>
|
||||
<p>围绕技术分享、知识学习与生活记录构建内容分发首页，提供推荐、热门与分类浏览体验。</p>
|
||||
</div>
|
||||
<div class="hero-metrics">
|
||||
<div class="metric"><strong>{{ videos.length || 12 }}</strong><span>精选视频</span></div>
|
||||
<div class="metric"><strong>{{ categories.length || 5 }}</strong><span>内容分区</span></div>
|
||||
<div class="metric"><strong>24h</strong><span>热度更新</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 分类导航 -->
|
||||
<div class="category-nav">
|
||||
@@ -42,7 +48,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast } from 'vant'
|
||||
import VideoCard from '@/components/video/VideoCard.vue'
|
||||
@@ -69,7 +75,7 @@ const pageSize = 20
|
||||
// 加载分类
|
||||
const loadCategories = async () => {
|
||||
try {
|
||||
const res = await categoryApi.getList()
|
||||
const res = await categoryApi.getCategoryList()
|
||||
categories.value = res
|
||||
} catch (error) {
|
||||
console.error('加载分类失败:', error)
|
||||
@@ -87,18 +93,27 @@ const loadVideos = async (isRefresh = false) => {
|
||||
loading.value = true
|
||||
try {
|
||||
let res
|
||||
const params = {
|
||||
page: currentPage.value,
|
||||
size: pageSize,
|
||||
...(typeof activeCategory.value === 'number' && { categoryId: activeCategory.value })
|
||||
}
|
||||
|
||||
if (activeCategory.value === 'recommend') {
|
||||
res = await recommendApi.getHome(params)
|
||||
// 首页推荐返回列表
|
||||
const list = await recommendApi.getHomeRecommend(currentPage.value, pageSize)
|
||||
res = { records: list, total: list.length }
|
||||
// 推荐接口数据较少时标记完成
|
||||
if (list.length < pageSize) {
|
||||
finished.value = true
|
||||
}
|
||||
} else if (activeCategory.value === 'hot') {
|
||||
res = await recommendApi.getHot(params)
|
||||
// 热门推荐返回列表，periodType: 1-日榜
|
||||
const list = await recommendApi.getHotRecommend(1, pageSize)
|
||||
res = { records: list, total: list.length }
|
||||
finished.value = true // 热门榜只加载一次
|
||||
} else {
|
||||
res = await videoApi.getList(params)
|
||||
// 分类视频返回分页对象，参数名为 pageNum 和 pageSize
|
||||
res = await videoApi.getVideoPublicList({
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize,
|
||||
categoryId: activeCategory.value as number
|
||||
})
|
||||
}
|
||||
|
||||
if (isRefresh) {
|
||||
@@ -153,7 +168,7 @@ onMounted(() => {
|
||||
<style scoped lang="scss">
|
||||
.home-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
background: #f6f7fb;
|
||||
padding-bottom: 60px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -161,45 +176,101 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
margin: 20px auto 12px;
|
||||
padding: 30px 28px;
|
||||
border-radius: 24px;
|
||||
color: #fff;
|
||||
max-width: 1380px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(255, 255, 255, 0.28), transparent 24%),
|
||||
linear-gradient(135deg, #fb7299 0%, #ff85ad 32%, #3da5ff 100%);
|
||||
box-shadow: 0 24px 52px rgba(251, 114, 153, 0.18);
|
||||
|
||||
.hero-copy h1 {
|
||||
margin: 10px 0;
|
||||
font-size: 28px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
margin: 0;
|
||||
max-width: 760px;
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-tag {
|
||||
display: inline-flex;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-metrics {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.metric {
|
||||
min-width: 92px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.category-nav {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
position: sticky;
|
||||
top: 46px;
|
||||
top: var(--header-height);
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
margin-bottom: 6px;
|
||||
|
||||
:deep(.van-tabs__nav) {
|
||||
padding: 0 12px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:deep(.van-tab) {
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
padding: 0 16px;
|
||||
font-size: 15px;
|
||||
color: #61666d;
|
||||
}
|
||||
|
||||
:deep(.van-tabs__line) {
|
||||
background: #00a1d6;
|
||||
background: #fb7299;
|
||||
}
|
||||
}
|
||||
|
||||
.video-list {
|
||||
padding: 12px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 12px 12px 20px;
|
||||
}
|
||||
|
||||
.video-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 18px 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user