优化朋友圈视频

src/views/im/components/Discover/Discover.vue

@@ -93,6 +93,9 @@
                   :user-id="item.user_id"
                   @update:comments="setComments(i, $event)">
                 </Remark>
+
+                <!-- 视频弹框 -->
+                <VideoDialog :visible="showVideo" :url="videoUrl" @close="showVideo = false"></VideoDialog>
               </div>
             </div>
           </div>
@@ -106,9 +109,10 @@
 import { dynamicList, dynamicLike,dynamicDetail } from "@/api/path/im.api";
 import { showToast, showImagePreview } from 'vant';
 import Remark from '../remarkList/index.vue';
+import VideoDialog from '../VideoDialog/index.vue';
 
 export default {
-  components: { Remark },
+  components: { Remark,VideoDialog },
   data() {
     return {
       list: [],
@@ -119,6 +123,9 @@ export default {
       refreshing: false,
       showActionsMap: {},
       remarkRefs: [],
+      showVideo: false,
+      videoUrl: '',
+      videoName: ''
     }
   },
   methods: {
@@ -228,13 +235,16 @@ export default {
     },
     handlePlay(item) {
       console.log(item)
-      this.$router.push({
-        path: '/videoPlayer',
-        query: {
-          name: item.filename,
-          src: encodeURIComponent(item.video)
-        }
-      })
+      // this.$router.push({
+      //   path: '/videoPlayer',
+      //   query: {
+      //     name: item.filename,
+      //     src: encodeURIComponent(item.video)
+      //   }
+      // })
+      this.videoUrl = item.video
+      this.videoName = item.filename
+      this.showVideo = true;
     },
     gotoRecord() {
       this.$router.push('record');

src/views/im/components/VideoDialog/index.vue

@@ -0,0 +1,58 @@
+<template>
+    <div v-if="visible" class="video-dialog">
+        <div class="video-container">
+            <div class="header">
+                <van-button type="primary" size="small" @click="close">关闭视频</van-button>
+            </div>
+            <video class="video-box" :src="url" controls autoplay></video>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'VideoDialog',
+    props: {
+        visible: { type: Boolean, default: false },
+        url: { type: String, default: '' }
+    },
+    methods: {
+        close() {
+            // 通知父组件
+            this.$emit('close');
+        }
+    }
+};
+</script>
+
+<style scoped>
+.video-dialog {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+}
+.video-container {
+    background: #000;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+.header {
+    padding: 8px;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 10;
+}
+  
+.video-box {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+</style>