jxxghp
2024-09-14 11:17:00 +08:00
parent 6e4e6df08f
commit cf9c38fdd5
2 changed files with 29 additions and 50 deletions
+2
View File
@@ -394,6 +394,8 @@ export interface DownloadingInfo {
userid?: string userid?: string
// 下载用户名称 // 下载用户名称
username?: string username?: string
// 剩余时间
left_time?: string
} }
// 缺失剧集信息 // 缺失剧集信息
+27 -50
View File
@@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import api from '@/api' import api from '@/api'
import type { DownloadingInfo } from '@/api/types' import type { DownloadingInfo } from '@/api/types'
import { formatFileSize } from '@/@core/utils/formatters'
// 输入参数 // 输入参数
const props = defineProps({ const props = defineProps({
@@ -17,16 +18,21 @@ function getPercentage() {
// 速度 // 速度
function getSpeedText() { function getSpeedText() {
return `${props.info?.sizeStr}${props.info?.upspeed}/s ↓ ${props.info?.dlspeed}/s ${props.info?.left_time}` return `${formatFileSize(props.info?.size || 0)}${props.info?.upspeed}/s ↓ ${props.info?.dlspeed}/s ${
props.info?.left_time
}`
} }
// 下载状态 // 下载状态
const isDownloading = ref(props.info?.state === 'downloading') const isDownloading = ref(props.info?.state === 'downloading')
// 监听props.info?.state的变化 // 监听props.info?.state的变化
watch(() => props.info?.state, (newValue) => { watch(
isDownloading.value = newValue === 'downloading' () => props.info?.state,
}) newValue => {
isDownloading.value = newValue === 'downloading'
},
)
// 图片是否加载完成 // 图片是否加载完成
const imageLoaded = ref(false) const imageLoaded = ref(false)
@@ -45,14 +51,10 @@ function getTextClass() {
async function toggleDownload() { async function toggleDownload() {
const operation = isDownloading.value ? 'stop' : 'start' const operation = isDownloading.value ? 'stop' : 'start'
try { try {
const result: { [key: string]: any } = await api.get( const result: { [key: string]: any } = await api.get(`download/${operation}/${props.info?.hash}`)
`download/${operation}/${props.info?.hash}`,
)
if (result.success) if (result.success) isDownloading.value = !isDownloading.value
isDownloading.value = !isDownloading.value } catch (error) {
}
catch (error) {
console.error(error) console.error(error)
} }
} }
@@ -62,67 +64,42 @@ async function deleteDownload() {
try { try {
await api.delete(`download/${props.info?.hash}`) await api.delete(`download/${props.info?.hash}`)
cardState.value = false cardState.value = false
} } catch (error) {
catch (error) {
console.error(error) console.error(error)
} }
} }
</script> </script>
<template> <template>
<VCard <VCard v-if="cardState" :key="props.info?.hash">
v-if="cardState"
:key="props.info?.hash"
>
<template #image> <template #image>
<VImg <VImg :src="props.info?.media.image" aspect-ratio="2/3" cover class="brightness-50" @load="imageLoadHandler" />
:src="props.info?.media.image"
aspect-ratio="2/3"
cover
class="brightness-50"
@load="imageLoadHandler"
/>
</template> </template>
<VCardTitle <VCardTitle class="break-words whitespace-normal" :class="getTextClass()">
class="break-words whitespace-normal"
:class="getTextClass()"
>
{{ props.info?.media.title || props.info?.name }} {{ props.info?.media.title || props.info?.name }}
{{ props.info?.media.episode ? `${props.info?.media.season} ${props.info?.media.episode}` : props.info?.season_episode }} {{
props.info?.media.episode
? `${props.info?.media.season} ${props.info?.media.episode}`
: props.info?.season_episode
}}
</VCardTitle> </VCardTitle>
<VCardSubtitle <VCardSubtitle class="break-words whitespace-normal" :class="getTextClass()">
class="break-words whitespace-normal"
:class="getTextClass()"
>
{{ props.info?.title }} {{ props.info?.title }}
</VCardSubtitle> </VCardSubtitle>
<VCardText <VCardText class="text-subtitle-1 pt-3 pb-1" :class="getTextClass()">
class="text-subtitle-1 pt-3 pb-1"
:class="getTextClass()"
>
{{ getSpeedText() }} {{ getSpeedText() }}
</VCardText> </VCardText>
<VCardText <VCardText v-if="getPercentage() > 0" :class="getTextClass()">
v-if="getPercentage() > 0"
:class="getTextClass()"
>
<VProgressLinear :model-value="getPercentage()" /> <VProgressLinear :model-value="getPercentage()" />
</VCardText> </VCardText>
<VCardActions class="justify-space-between"> <VCardActions class="justify-space-between">
<VBtn <VBtn :icon="`${isDownloading ? 'mdi-pause' : 'mdi-play'}`" @click="toggleDownload" />
:icon="`${isDownloading ? 'mdi-pause' : 'mdi-play'}`" <VBtn color="error" icon="mdi-trash-can-outline" @click="deleteDownload" />
@click="toggleDownload"
/>
<VBtn
color="error"
icon="mdi-trash-can-outline"
@click="deleteDownload"
/>
</VCardActions> </VCardActions>
</VCard> </VCard>
</template> </template>