flat: 暂存

2025-05-13 11:10:38 +08:00
parent 582e432e6a
commit fd74b7d4df
109 changed files with 8644 additions and 5205 deletions
--- a/packageA/pages/post/component/videoPlayer.vue
+++ b/packageA/pages/post/component/videoPlayer.vue
@@ -0,0 +1,158 @@
+<template>
+    <!-- 小窗播放容器 -->
+    <view
+        v-if="visible"
+        class="mini-player"
+        :style="{
+            left: position.x + 'px',
+            top: position.y + 'px',
+            width: isFullScreen ? '100%' : '300rpx',
+            height: isFullScreen ? '100vh' : '200rpx',
+        }"
+        @touchstart="handleTouchStart"
+        @touchmove="handleTouchMove"
+        @touchend="handleTouchEnd"
+        @touchmove.stop.prevent
+    >
+        <!-- 视频组件 -->
+        <video
+            :src="videoUrl"
+            :controls="true"
+            :show-progress="isFullScreen"
+            :style="{
+                width: '100%',
+                height: '100%',
+            }"
+            id="myVideo"
+            @play="onPlay"
+            @pause="onPause"
+        ></video>
+
+        <!-- 控制栏 -->
+        <view class="controls">
+            <!--   <text @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</text>
+            <text @click="toggleFullScreen">{{ isFullScreen ? '退出全屏' : '全屏' }}</text> -->
+            <text @click="close">关闭</text>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { nextTick } from 'vue';
+
+const visible = ref(false);
+const isPlaying = ref(false);
+const isFullScreen = ref(false);
+const videoUrl = ref('');
+const position = reactive({ x: 20, y: 100 });
+const videoContext = ref(null);
+const startPos = reactive({ x: 0, y: 0 });
+const moving = ref(false);
+
+// 初始化视频上下文
+onMounted(() => {
+    videoContext.value = uni.createVideoContext('myVideo');
+});
+
+// 触摸开始
+const handleTouchStart = (e) => {
+    if (isFullScreen.value) return;
+    startPos.x = e.touches[0].clientX - position.x;
+    startPos.y = e.touches[0].clientY - position.y;
+    moving.value = true;
+};
+
+// 触摸移动
+const handleTouchMove = (e) => {
+    if (!moving.value || isFullScreen.value) return;
+
+    const newX = e.touches[0].clientX - startPos.x;
+    const newY = e.touches[0].clientY - startPos.y;
+
+    // 边界检测
+    const maxX = window.innerWidth - 150; // 300rpx换算后的值
+    const maxY = 50 + window.innerHeight - 200;
+
+    position.x = Math.max(0, Math.min(newX, maxX));
+    position.y = Math.max(0, Math.min(newY, maxY));
+};
+
+// 触摸结束
+const handleTouchEnd = () => {
+    moving.value = false;
+};
+
+// 播放状态变化
+const onPlay = () => {
+    isPlaying.value = true;
+};
+
+const onPause = () => {
+    isPlaying.value = false;
+};
+
+// 切换播放状态
+const togglePlay = () => {
+    isPlaying.value ? videoContext.value.pause() : videoContext.value.play();
+};
+
+// 切换全屏
+const toggleFullScreen = () => {
+    isFullScreen.value = !isFullScreen.value;
+    if (!isFullScreen.value) {
+        // 退出全屏时恢复原位
+        position.x = 20;
+        position.y = 100;
+    }
+};
+
+// 关闭播放器
+const close = () => {
+    visible.value = false;
+    videoContext.value.stop();
+    isPlaying.value = false;
+    isFullScreen.value = false;
+};
+
+// 打开播放器方法
+const open = (url) => {
+    videoUrl.value = url;
+    visible.value = true;
+    nextTick(() => {
+        videoContext.value.play();
+    });
+};
+
+// 暴露方法
+defineExpose({ open });
+</script>
+
+<style scoped>
+.mini-player {
+    position: fixed;
+    z-index: 999;
+    background: #000;
+    border-radius: 8rpx;
+    overflow: hidden;
+    box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
+}
+
+.controls {
+    position: absolute;
+    top: 0;
+    right: 0;
+    /* background: rgba(0, 0, 0, 0.7); */
+    padding: 10rpx;
+    display: flex;
+    justify-content: space-around;
+}
+
+.controls text {
+    color: #fff;
+    font-size: 24rpx;
+    padding: 8rpx 16rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4rpx;
+}
+</style>