mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-12 11:09:54 +08:00
89 lines
1.6 KiB
Vue
89 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
import api from '@/api'
|
|
import type { MediaInfo } from '@/api/types'
|
|
import MediaCard from '@/components/cards/MediaCard.vue'
|
|
|
|
// 输入参数
|
|
const props = defineProps({
|
|
apipath: String,
|
|
})
|
|
|
|
// 组件加载完成
|
|
const componentLoaded = ref(false)
|
|
|
|
// 数据列表
|
|
const dataList = ref<MediaInfo[]>([])
|
|
|
|
// 获取订阅列表数据
|
|
async function fetchData() {
|
|
try {
|
|
if (!props.apipath)
|
|
return
|
|
|
|
dataList.value = await api.get(props.apipath)
|
|
if (dataList.value.length > 0)
|
|
componentLoaded.value = true
|
|
}
|
|
catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
|
|
// 加载时获取数据
|
|
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
|
|
: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"
|
|
/>
|
|
</template>
|
|
</VSlideGroup>
|
|
</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>
|