ow

uniapp/youjiala/src/pages/media/video-hall/video-hall.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+/**
+ * 影视厅页（对齐旧 WebVue views/master/PreviewVideo.vue）：
+ * 自绘控制播放器外壳。入参经 query 传：mode=list&key=<目录路径> 播放当前目录视频；
+ * 或 key=<专辑编号> 播放某影视专辑；无 key 走默认专辑。取数逻辑见 composables/useMediaShow。
+ * 隐藏控制区时（v-model:controls）本壳顺带隐掉导航/系统栏做整页沉浸。
+ */
+import type { VideoSource } from "@/components/video-player/video-player.vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import { useMediaShow } from "@/composables";
+
+const { loadVideos } = useMediaShow();
+
+const videos = ref<VideoSource[]>([]);
+const controls = ref(true);
+const loading = ref(true);
+const errorText = ref("");
+
+function closeMe(): void {
+    if (getCurrentPages().length > 1) {
+        uni.navigateBack();
+        return;
+    }
+    uni.switchTab({
+        url: "/pages/tab/media",
+        fail: () => uni.reLaunch({ url: "/pages/tab/media" }),
+    });
+}
+
+onLoad(async (query) => {
+    const mode = String(query?.mode || "");
+    const key = decodeURIComponent(String(query?.key || ""));
+    try {
+        const items = await loadVideos(mode, key);
+        videos.value = items.map(v => ({
+            name: v.name || v.title || "",
+            url: v.url,
+            m3u8: v.m3u8,
+            pic: v.pic,
+        }));
+    } catch (error: any) {
+        errorText.value = error?.message || "加载失败";
+    } finally {
+        loading.value = false;
+    }
+});
+</script>
+
+<template>
+    <app-page :hide-nav="true" :show-tabbar="false">
+        <view v-if="loading" class="show-loading">
+            <text class="show-loading__text">加载中…</text>
+        </view>
+        <view v-else-if="errorText" class="show-loading" @tap="closeMe">
+            <text class="show-loading__text">{{ errorText }}</text>
+        </view>
+        <video-player v-else v-model:controls="controls" :videos="videos" @close="closeMe" />
+    </app-page>
+</template>
+
+<style lang="scss" scoped>
+.show-loading {
+    display: flex;
+    position: fixed;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    background: #0b0d10;
+}
+
+.show-loading__text {
+    font-size: 28rpx;
+    color: #9aa0a6;
+}
+</style>