150 lines
3.2 KiB
Vue
150 lines
3.2 KiB
Vue
<template>
|
|
<div class="danmaku-list">
|
|
<van-tabs v-model:active="activeTab">
|
|
<van-tab
|
|
title="弹幕列表"
|
|
name="list"
|
|
>
|
|
<van-list
|
|
v-model:loading="loading"
|
|
:finished="finished"
|
|
finished-text="没有更多弹幕了"
|
|
@load="loadMore"
|
|
>
|
|
<div
|
|
v-for="item in danmakuList"
|
|
:key="item.id"
|
|
class="danmaku-item"
|
|
>
|
|
<div class="danmaku-time">
|
|
{{ formatDanmakuTime(item.time) }}
|
|
</div>
|
|
<div
|
|
class="danmaku-content"
|
|
:style="{ color: item.color }"
|
|
>
|
|
{{ item.content }}
|
|
</div>
|
|
<div class="danmaku-user">
|
|
{{ item.userId }}
|
|
</div>
|
|
</div>
|
|
</van-list>
|
|
</van-tab>
|
|
<van-tab
|
|
title="弹幕设置"
|
|
name="settings"
|
|
>
|
|
<van-cell-group inset>
|
|
<van-cell title="弹幕显示">
|
|
<van-switch v-model="settings.showDanmaku" />
|
|
</van-cell>
|
|
<van-cell title="弹幕透明度">
|
|
<van-slider
|
|
v-model="settings.opacity"
|
|
:min="0"
|
|
:max="100"
|
|
/>
|
|
</van-cell>
|
|
<van-cell title="弹幕大小">
|
|
<van-slider
|
|
v-model="settings.fontSize"
|
|
:min="12"
|
|
:max="36"
|
|
/>
|
|
</van-cell>
|
|
<van-cell title="弹幕速度">
|
|
<van-slider
|
|
v-model="settings.speed"
|
|
:min="1"
|
|
:max="10"
|
|
/>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
</van-tab>
|
|
</van-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { danmakuApi, type Danmaku } from '@/api/danmaku.ts'
|
|
|
|
const props = defineProps<{
|
|
videoId: number
|
|
}>()
|
|
|
|
const activeTab = ref('list')
|
|
const danmakuList = ref<Danmaku[]>([])
|
|
const loading = ref(false)
|
|
const finished = ref(false)
|
|
|
|
const settings = reactive({
|
|
showDanmaku: true,
|
|
opacity: 80,
|
|
fontSize: 24,
|
|
speed: 5
|
|
})
|
|
|
|
const formatDanmakuTime = (seconds: number) => {
|
|
const mins = Math.floor(seconds / 60)
|
|
const secs = Math.floor(seconds % 60)
|
|
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
|
|
}
|
|
|
|
const loadMore = async () => {
|
|
if (finished.value) return
|
|
|
|
loading.value = true
|
|
try {
|
|
const data = await danmakuApi.getAllDanmaku(props.videoId)
|
|
danmakuList.value = data
|
|
finished.value = true
|
|
} catch (error) {
|
|
finished.value = true
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadMore()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.danmaku-list {
|
|
background: #fff;
|
|
padding: 12px;
|
|
|
|
.danmaku-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
font-size: 14px;
|
|
|
|
.danmaku-time {
|
|
width: 50px;
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.danmaku-content {
|
|
flex: 1;
|
|
padding: 0 8px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.danmaku-user {
|
|
width: 60px;
|
|
text-align: right;
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|