GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-07 00:36:41 +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
src/pages/ranking.vue
+71 -50
View File
@@ -1,64 +1,85 @@
<script setup lang="ts"> <script setup lang="ts">
import MediaCardSlideView from "@/views/discover/MediaCardSlideView.vue"; import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue';
</script> </script>
<template> <template>
<div> <div>
<div class="slider-header"> <MediaCardSlideView apipath="tmdb/trending" class="mb-3">
<RouterLink to="/browse/tmdb/trending" class="slider-title"> <template #title="{ loaded }">
<span>流行趋势</span> <div class="slider-header" v-if="loaded">
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" /> <RouterLink to="/browse/tmdb/trending" class="slider-title">
</RouterLink> <span>流行趋势</span>
</div> <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
<MediaCardSlideView apipath="tmdb/trending" class="mb-3" /> </RouterLink>
</div>
</template>
</MediaCardSlideView>
<div class="slider-header"> <MediaCardSlideView apipath="tmdb/movies" class="mb-3">
<RouterLink to="/browse/tmdb/movies" class="slider-title"> <template #title="{ loaded }">
<span>热门电影</span> <div class="slider-header" v-if="loaded">
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" /> <RouterLink to="/browse/tmdb/movies" class="slider-title">
</RouterLink> <span>热门电影</span>
</div> <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
<MediaCardSlideView apipath="tmdb/movies" class="mb-3" /> </RouterLink>
</div>
</template>
</MediaCardSlideView>
<div class="slider-header"> <MediaCardSlideView apipath="tmdb/tvs" class="mb-3">
<RouterLink to="/browse/tmdb/tvs" class="slider-title"> <template #title="{ loaded }">
<span>热门电视剧</span> <div class="slider-header" v-if="loaded">
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" /> <RouterLink to="/browse/tmdb/tvs" class="slider-title">
</RouterLink> <span>热门电视剧</span>
</div> <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
<MediaCardSlideView apipath="tmdb/tvs" class="mb-3" /> </RouterLink>
</div>
</template>
</MediaCardSlideView>
<div class="slider-header"> <MediaCardSlideView apipath="douban/movies" class="mb-3">
<RouterLink to="/browse/douban/movies" class="slider-title"> <template #title="{ loaded }">
<span>最新电影</span> <div class="slider-header" v-if="loaded">
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" /> <RouterLink to="/browse/douban/movies" class="slider-title">
</RouterLink> <span>最新电影</span>
</div> <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
<MediaCardSlideView apipath="douban/movies" class="mb-3" /> </RouterLink>
</div>
</template>
</MediaCardSlideView>
<div class="slider-header"> <MediaCardSlideView apipath="douban/tvs" class="mb-3">
<RouterLink to="/browse/douban/tvs" class="slider-title"> <template #title="{ loaded }">
<span>最新电视剧</span> <div class="slider-header" v-if="loaded">
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" /> <RouterLink to="/browse/douban/tvs" class="slider-title">
</RouterLink> <span>最新电视剧</span>
</div> <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
<MediaCardSlideView apipath="douban/tvs" class="mb-3" /> </RouterLink>
</div>
</template>
</MediaCardSlideView>
<div class="slider-header"> <MediaCardSlideView apipath="douban/tv_weekly_chinese" class="mb-3">
<RouterLink to="/browse/douban/tv_weekly_chinese" class="slider-title"> <template #title="{ loaded }">
<span>国产剧集榜</span> <div class="slider-header" v-if="loaded">
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" /> <RouterLink to="/browse/douban/tv_weekly_chinese" class="slider-title">
</RouterLink> <span>国产剧集榜</span>
</div> <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
<MediaCardSlideView apipath="douban/tv_weekly_chinese" class="mb-3" /> </RouterLink>
</div>
</template>
</MediaCardSlideView>
<div class="slider-header"> <MediaCardSlideView apipath="douban/tv_weekly_global" class="mb-3">
<RouterLink to="/browse/douban/tv_weekly_global" class="slider-title"> <template #title="{ loaded }">
<span>全球剧集榜</span> <div class="slider-header" v-if="loaded">
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" /> <RouterLink to="/browse/douban/tv_weekly_global" class="slider-title">
</RouterLink> <span>全球剧集榜</span>
</div> <VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
<MediaCardSlideView apipath="douban/tv_weekly_global" class="mb-3" /> </RouterLink>
</div>
</template>
</MediaCardSlideView>
</div> </div>
</template> </template>
src/views/discover/MediaCardSlideView.vue
+6
View File
@@ -8,6 +8,10 @@ const props = defineProps({
apipath: String, apipath: String,
}); });
// 组件加载完成
const componentLoaded = ref(false);
// 数据列表 // 数据列表
const dataList = ref<MediaInfo[]>([]); const dataList = ref<MediaInfo[]>([]);
@@ -18,6 +22,7 @@ const fetchData = async () => {
return; return;
} }
dataList.value = await api.get(props.apipath); dataList.value = await api.get(props.apipath);
componentLoaded.value = true;
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
@@ -28,6 +33,7 @@ onMounted(fetchData);
</script> </script>
<template> <template>
<slot name="title" :loaded="componentLoaded"></slot>
<VSlideGroup show-arrows="false"> <VSlideGroup show-arrows="false">
<template #prev> <template #prev>
<VBtn class="rounded-circle shadow-none" icon="mdi-chevron-left" color="grey" /> <VBtn class="rounded-circle shadow-none" icon="mdi-chevron-left" color="grey" />
src/views/subscribe/SubscribeListView.vue
+1
View File
@@ -8,6 +8,7 @@ const props = defineProps({
type: String, type: String,
}); });
// 数据列表 // 数据列表
const dataList = ref<Subscribe[]>([]); const dataList = ref<Subscribe[]>([]);