GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-28 11:50:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

MediaCardSlideView slot

Browse Source
This commit is contained in:
jxxghp
2023-07-01 07:40:35 +08:00
parent 80ea36e17d
commit 1496379fa1
3 changed files with 78 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/pages/ranking.vue
View File

@@ -1,64 +1,85 @@
<script setup lang="ts">
import MediaCardSlideView from "@/views/discover/MediaCardSlideView.vue";
import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue';
</script>
<template>
<div>
<div class="slider-header">
<RouterLink to="/browse/tmdb/trending" class="slider-title">
<span>流行趋势</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
<MediaCardSlideView apipath="tmdb/trending" class="mb-3" />
<MediaCardSlideView apipath="tmdb/trending" class="mb-3">
<template #title="{ loaded }">
<div class="slider-header" v-if="loaded">
<RouterLink to="/browse/tmdb/trending" class="slider-title">
<span>流行趋势</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
</template>
</MediaCardSlideView>
<div class="slider-header">
<RouterLink to="/browse/tmdb/movies" class="slider-title">
<span>热门电影</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
<MediaCardSlideView apipath="tmdb/movies" class="mb-3" />
<MediaCardSlideView apipath="tmdb/movies" class="mb-3">
<template #title="{ loaded }">
<div class="slider-header" v-if="loaded">
<RouterLink to="/browse/tmdb/movies" class="slider-title">
<span>热门电影</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
</template>
</MediaCardSlideView>
<div class="slider-header">
<RouterLink to="/browse/tmdb/tvs" class="slider-title">
<span>热门电视剧</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
<MediaCardSlideView apipath="tmdb/tvs" class="mb-3" />
<MediaCardSlideView apipath="tmdb/tvs" class="mb-3">
<template #title="{ loaded }">
<div class="slider-header" v-if="loaded">
<RouterLink to="/browse/tmdb/tvs" class="slider-title">
<span>热门电视剧</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
</template>
</MediaCardSlideView>
<div class="slider-header">
<RouterLink to="/browse/douban/movies" class="slider-title">
<span>最新电影</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
<MediaCardSlideView apipath="douban/movies" class="mb-3" />
<MediaCardSlideView apipath="douban/movies" class="mb-3">
<template #title="{ loaded }">
<div class="slider-header" v-if="loaded">
<RouterLink to="/browse/douban/movies" class="slider-title">
<span>最新电影</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
</template>
</MediaCardSlideView>
<div class="slider-header">
<RouterLink to="/browse/douban/tvs" class="slider-title">
<span>最新电视剧</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
<MediaCardSlideView apipath="douban/tvs" class="mb-3" />
<MediaCardSlideView apipath="douban/tvs" class="mb-3">
<template #title="{ loaded }">
<div class="slider-header" v-if="loaded">
<RouterLink to="/browse/douban/tvs" class="slider-title">
<span>最新电视剧</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
</template>
</MediaCardSlideView>
<div class="slider-header">
<RouterLink to="/browse/douban/tv_weekly_chinese" class="slider-title">
<span>国产剧集榜</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
<MediaCardSlideView apipath="douban/tv_weekly_chinese" class="mb-3" />
<MediaCardSlideView apipath="douban/tv_weekly_chinese" class="mb-3">
<template #title="{ loaded }">
<div class="slider-header" v-if="loaded">
<RouterLink to="/browse/douban/tv_weekly_chinese" class="slider-title">
<span>国产剧集榜</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
</template>
</MediaCardSlideView>
<div class="slider-header">
<RouterLink to="/browse/douban/tv_weekly_global" class="slider-title">
<span>全球剧集榜</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
<MediaCardSlideView apipath="douban/tv_weekly_global" class="mb-3" />
<MediaCardSlideView apipath="douban/tv_weekly_global" class="mb-3">
<template #title="{ loaded }">
<div class="slider-header" v-if="loaded">
<RouterLink to="/browse/douban/tv_weekly_global" class="slider-title">
<span>全球剧集榜</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
</template>
</MediaCardSlideView>
</div>
</template>

6
src/views/discover/MediaCardSlideView.vue
View File

@@ -8,6 +8,10 @@ const props = defineProps({
apipath: String,
});
// 组件加载完成
const componentLoaded = ref(false);
// 数据列表
const dataList = ref<MediaInfo[]>([]);
@@ -18,6 +22,7 @@ const fetchData = async () => {
return;
}
dataList.value = await api.get(props.apipath);
componentLoaded.value = true;
} catch (error) {
console.error(error);
}
@@ -28,6 +33,7 @@ onMounted(fetchData);
</script>
<template>
<slot name="title" :loaded="componentLoaded"></slot>
<VSlideGroup show-arrows="false">
<template #prev>
<VBtn class="rounded-circle shadow-none" icon="mdi-chevron-left" color="grey" />

1
src/views/subscribe/SubscribeListView.vue
View File

@@ -8,6 +8,7 @@ const props = defineProps({
type: String,
});
// 数据列表
const dataList = ref<Subscribe[]>([]);