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

重写SlideView组件

Browse Source
This commit is contained in:
叮叮当
2023-08-03 15:12:21 +08:00
parent 592d746914
commit 8eb8fef4f9
6 changed files with 246 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,10 +2,13 @@
import api from '@/api'
import type { MediaInfo } from '@/api/types'
import MediaCard from '@/components/cards/MediaCard.vue'
import SlideView from '@/components/slide/SlideView.vue'
// 输入参数
const props = defineProps({
apipath: String,
linkurl: String,
title: String,
})
// 组件加载完成
@@ -34,55 +37,21 @@ onMounted(fetchData)
</script>
<template>
<slot
name="title"
:loaded="componentLoaded"
/>
<VSlideGroup show-arrows="false">
<template #prev>
<VBtn
class="rounded-circle shadow-none"
icon="mdi-chevron-left"
color="grey"
/>
</template>
<VSlideGroupItem
v-for="data in dataList"
:key="data.tmdb_id"
>
<MediaCard
<SlideView
v-if="componentLoaded"
v-bind="props"
>
<template #content>
<template
v-for="data in dataList"
:key="data.tmdb_id || data.douban_id"
:media="data"
height="15rem"
width="10rem"
/>
</VSlideGroupItem>
<template #next>
<VBtn
class="rounded-circle shadow-none"
icon="mdi-chevron-right"
color="grey"
/>
>
<MediaCard
:media="data"
height="15rem"
width="10rem"
/>
</template>
</template>
</VSlideGroup>
</SlideView>
</template>
<style lang="scss">
.v-slide-group .v-card {
@apply m-2;
}
.v-slide-group__prev {
@apply absolute right-11;
z-index: 3;
margin-block-start: -40px;
}
.v-slide-group__next {
@apply absolute right-1;
z-index: 3;
margin-block-start: -40px;
}
</style>

45
src/views/discover/MediaDetailView.vue
View File

@@ -573,40 +573,25 @@ onBeforeMount(() => {
</div>
</div>
<div v-if="mediaDetail.tmdb_id">
<PersonCardSlideView :apipath="`tmdb/credits/${mediaDetail.tmdb_id}/${mediaProps.type}`">
<template #title="{ loaded }">
<div v-if="loaded" class="slider-header">
<RouterLink :to="`/credits/tmdb/credits/${mediaDetail.tmdb_id}/${mediaProps.type}?title=演员阵容`" class="slider-title">
<span>演员阵容</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
</template>
</PersonCardSlideView>
<PersonCardSlideView
:apipath="`tmdb/credits/${mediaDetail.tmdb_id}/${mediaProps.type}`"
:linkurl="`/credits/tmdb/credits/${mediaDetail.tmdb_id}/${mediaProps.type}?title=演员阵容`"
title="演员阵容"
/>
</div>
<div v-if="mediaDetail.tmdb_id">
<MediaCardSlideView :apipath="`tmdb/recommend/${mediaDetail.tmdb_id}/${mediaProps.type}`">
<template #title="{ loaded }">
<div v-if="loaded" class="slider-header">
<RouterLink :to="`/browse/tmdb/recommend/${mediaDetail.tmdb_id}/${mediaProps.type}?title=推荐`" class="slider-title">
<span>推荐</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
</template>
</MediaCardSlideView>
<MediaCardSlideView
:apipath="`tmdb/recommend/${mediaDetail.tmdb_id}/${mediaProps.type}`"
:linkurl="`/browse/tmdb/recommend/${mediaDetail.tmdb_id}/${mediaProps.type}?title=推荐`"
title="推荐"
/>
</div>
<div v-if="mediaDetail.tmdb_id">
<MediaCardSlideView :apipath="`tmdb/similar/${mediaDetail.tmdb_id}/${mediaProps.type}`">
<template #title="{ loaded }">
<div v-if="loaded" class="slider-header">
<RouterLink :to="`/browse/tmdb/similar/${mediaDetail.tmdb_id}/${mediaProps.type}?title=类似`" class="slider-title">
<span>类似</span>
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
</RouterLink>
</div>
</template>
</MediaCardSlideView>
<MediaCardSlideView
:apipath="`tmdb/similar/${mediaDetail.tmdb_id}/${mediaProps.type}`"
:linkurl="`/browse/tmdb/similar/${mediaDetail.tmdb_id}/${mediaProps.type}?title=类似`"
title="类似"
/>
</div>
</div>
</div>

67
src/views/discover/PersonCardSlideView.vue
View File

@@ -2,10 +2,13 @@
import PersionCard from '@/components/cards/PersonCard.vue'
import api from '@/api'
import type { TmdbPerson } from '@/api/types'
import SlideView from '@/components/slide/SlideView.vue'
// 输入参数
const props = defineProps({
apipath: String,
linkurl: String,
title: String,
})
// 组件加载完成
@@ -34,55 +37,21 @@ onMounted(fetchData)
</script>
<template>
<slot
name="title"
:loaded="componentLoaded"
/>
<VSlideGroup show-arrows="false">
<template #prev>
<VBtn
class="rounded-circle shadow-none"
icon="mdi-chevron-left"
color="grey"
/>
</template>
<VSlideGroupItem
v-for="data in dataList"
:key="data.id"
>
<PersionCard
<SlideView
v-if="componentLoaded"
v-bind="props"
>
<template #content>
<template
v-for="data in dataList"
:key="data.id"
:person="data"
height="15rem"
width="10rem"
/>
</VSlideGroupItem>
<template #next>
<VBtn
class="rounded-circle shadow-none"
icon="mdi-chevron-right"
color="grey"
/>
>
<PersionCard
:person="data"
height="15rem"
width="10rem"
/>
</template>
</template>
</VSlideGroup>
</SlideView>
</template>
<style lang="scss">
.v-slide-group .v-card {
@apply m-2;
}
.v-slide-group__prev {
@apply absolute right-11;
z-index: 3;
margin-block-start: -40px;
}
.v-slide-group__next {
@apply absolute right-1;
z-index: 3;
margin-block-start: -40px;
}
</style>