From 6ab2834fdc268570590f45ea7a5bf3a48f1e4029 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Mon, 12 Jan 2026 15:02:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=96=B0=E5=A2=9En?=
 =?UTF-8?q?s-video-player-popup=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ns-video-player-popup.vue                 | 145 ++++++++++++++++++
 1 file changed, 145 insertions(+)
 create mode 100644 components/ns-video-player-popup/ns-video-player-popup.vue

diff --git a/components/ns-video-player-popup/ns-video-player-popup.vue b/components/ns-video-player-popup/ns-video-player-popup.vue
new file mode 100644
index 0000000..fe86875
--- /dev/null
+++ b/components/ns-video-player-popup/ns-video-player-popup.vue
@@ -0,0 +1,145 @@
+<template>
+    <view class="video-player-popup">
+        <uni-popup ref="videoPopup" type="center" :mask-click="true" @change="onVideoPopupChange">
+            <view class="video-popup-content">
+                <view class="video-popup-header">
+                    <text class="video-popup-title">{{ videoTitle }}</text>
+                    <text class="iconfont icon-close" @click="close"></text>
+                </view>
+                <view class="video-popup-body">
+                    <video 
+                        v-if="videoUrl" 
+                        :src="videoUrl"
+                        controls 
+                        autoplay 
+                        class="video-player"
+                    ></video>
+                    <view v-else class="video-error">视频地址不存在</view>
+                </view>
+            </view>
+        </uni-popup>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'ns-video-player-popup',
+    props: {
+        /**
+         * 当前播放的视频信息
+         * @type {Object}
+         * @property {string} title - 视频标题
+         * @property {string} videoUrl - 视频地址
+         */
+        currentVideo: {
+            type: Object,
+            default: null
+        }
+    },
+    computed: {
+        videoUrl() {
+            return this.currentVideo?.videoUrl || '';
+        },
+
+        videoTitle() {
+            return this.currentVideo?.title || '';
+        },
+        /**
+         * 视频弹窗是否显示
+         * @type {boolean}
+         */
+        isVisible() {
+            return this.$refs.videoPopup?.visible || false;
+        }
+    },
+    methods: {
+        /**
+         * 打开视频弹窗
+         */
+        open() {
+            if (this.$refs.videoPopup) {
+                this.$refs.videoPopup.open();
+            }
+        },
+
+        /**
+         * 关闭视频弹窗
+         */
+        close() {
+            if (this.$refs.videoPopup) {
+                this.$refs.videoPopup.close();
+            }
+        },
+
+        /**
+         * 视频弹窗状态变化
+         * @param {Object} e - 弹窗状态变化事件
+         */
+        onVideoPopupChange(e) {
+            this.$emit('popup-change', e);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+/* 视频播放弹窗样式 */
+.video-player-popup {
+    .video-popup-content {
+        width: 90%;
+        max-width: 600rpx;
+        background-color: #fff;
+        border-radius: 12rpx;
+        overflow: hidden;
+        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
+    }
+
+    .video-popup-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20rpx;
+        border-bottom: 1rpx solid #f0f0f0;
+        background-color: #fafafa;
+
+        .video-popup-title {
+            font-size: 28rpx;
+            font-weight: 600;
+            color: #333;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .icon-close {
+            font-size: 32rpx;
+            color: #999;
+            padding: 0 10rpx;
+        }
+    }
+
+    .video-popup-body {
+        padding: 20rpx;
+
+        .video-player {
+            width: 100%;
+            height: 400rpx;
+            background-color: #000;
+            border-radius: 8rpx;
+        }
+
+        .video-error {
+            width: 100%;
+            height: 400rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #f5f5f5;
+            border-radius: 8rpx;
+            color: #999;
+            font-size: 28rpx;
+        }
+    }
+}
+</style>