mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-17 16:37:34 +08:00
142 lines
3.6 KiB
Vue
142 lines
3.6 KiB
Vue
<script lang="ts" setup>
|
||
import api from '@/api'
|
||
import type { MediaInfo } from '@/api/types'
|
||
import MediaCard from '@/components/cards/MediaCard.vue'
|
||
import NoDataFound from '@/components/NoDataFound.vue'
|
||
|
||
// 输入参数
|
||
const props = defineProps({
|
||
type: String,
|
||
})
|
||
|
||
// 判断是否有滚动条
|
||
function hasScroll() {
|
||
return document.body.scrollHeight - (window.innerHeight || document.documentElement.clientHeight) > 2
|
||
}
|
||
|
||
// API
|
||
const apipath = 'subscribe/popular'
|
||
|
||
// 当前页码
|
||
const page = ref(1)
|
||
|
||
// 是否加载中
|
||
const loading = ref(false)
|
||
|
||
// 是否加载完成
|
||
const isRefreshed = ref(false)
|
||
|
||
// 数据列表
|
||
const dataList = ref<MediaInfo[]>([])
|
||
const currData = ref<MediaInfo[]>([])
|
||
|
||
// 拼装参数
|
||
function getParams() {
|
||
let params = {
|
||
stype: props.type,
|
||
page: page.value,
|
||
count: 30,
|
||
}
|
||
return params
|
||
}
|
||
|
||
// 获取列表数据
|
||
async function fetchData({ done }: { done: any }) {
|
||
try {
|
||
// 如果正在加载中，直接返回
|
||
if (loading.value) {
|
||
done('ok')
|
||
return
|
||
}
|
||
|
||
// 加载到满屏或者加载出错
|
||
if (!hasScroll()) {
|
||
// 加载多次
|
||
while (!hasScroll()) {
|
||
// 设置加载中
|
||
loading.value = true
|
||
// 请求API
|
||
currData.value = await api.get(apipath, {
|
||
params: getParams(),
|
||
})
|
||
// 取消加载中
|
||
loading.value = false
|
||
// 标计为已请求完成
|
||
isRefreshed.value = true
|
||
if (currData.value.length === 0) {
|
||
// 如果没有数据，跳出
|
||
done('empty')
|
||
return
|
||
}
|
||
// 合并数据
|
||
dataList.value = [...dataList.value, ...currData.value]
|
||
// 页码+1
|
||
page.value++
|
||
// 返回加载成功
|
||
done('ok')
|
||
}
|
||
} else {
|
||
// 加载一次
|
||
// 设置加载中
|
||
loading.value = true
|
||
// 请求API
|
||
currData.value = await api.get(apipath, {
|
||
params: getParams(),
|
||
})
|
||
// 标计为已请求完成
|
||
isRefreshed.value = true
|
||
if (currData.value.length === 0) {
|
||
// 如果没有数据，跳出
|
||
done('empty')
|
||
} else {
|
||
// 合并数据
|
||
dataList.value = [...dataList.value, ...currData.value]
|
||
// 页码+1
|
||
page.value++
|
||
// 返回加载成功
|
||
done('ok')
|
||
}
|
||
}
|
||
// 取消加载中
|
||
loading.value = false
|
||
} catch (error) {
|
||
console.error(error)
|
||
// 返回加载失败
|
||
done('error')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
|
||
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData">
|
||
<template #loading />
|
||
<template #empty />
|
||
<div v-if="dataList.length > 0" class="grid gap-4 grid-media-card mx-3" tabindex="0">
|
||
<div v-for="data in dataList" :key="data.tmdb_id || data.douban_id">
|
||
<MediaCard :media="data" />
|
||
<div class="mt-2 flex flex-row justify-center align-center text-subtitle-2">
|
||
<VIcon icon="mdi-fire" color="error" />
|
||
<span> {{ data.popularity }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<NoDataFound
|
||
v-if="dataList.length === 0 && isRefreshed"
|
||
error-code="404"
|
||
error-title="没有数据"
|
||
error-description="未获取到热门订阅数据，未开启数据分享或服务器无法连接。"
|
||
/>
|
||
</VInfiniteScroll>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
.grid-media-card {
|
||
grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
|
||
}
|
||
|
||
.v-tabs:not(.v-tabs-pill).v-tabs--horizontal {
|
||
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||
}
|
||
</style>
|