样式优化

src/router/im.js

@@ -201,6 +201,17 @@ export const imRoutes = [
                 }, //  聊天搜索或者朋友圈搜索页面
                 component: () => import("@/views/im/chatSearch/index.vue"),
             },
+            {
+                path: "/videoPlayer",
+                name: "videoPlayer",
+                meta: {
+                    title: "",
+                    keepAlive: false,
+                    navbar: false,
+                    leftArrow: true,
+                }, //  聊天搜索或者朋友圈搜索页面
+                component: () => import("@/views/im/videoPlayer/index.vue"),
+            },
         ]
     }
 ]

src/router/system.js

@@ -429,6 +429,17 @@ export const systemRoutes = [
         }, //  聊天搜索或者朋友圈搜索页面
         component: () => import("@/views/im/chatSearch/index.vue"),
       },
+      {
+        path: "/videoPlayer",
+        name: "videoPlayer",
+        meta: {
+          title: "",
+          keepAlive: false,
+          navbar: false,
+          leftArrow: true,
+        }, //  聊天搜索或者朋友圈搜索页面
+        component: () => import("@/views/im/videoPlayer/index.vue"),
+      },
     ],
   },
 ];

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

@@ -41,12 +41,27 @@
                 </div>
 
                 <!-- 视频 -->
-                <video v-if="item.video"
+                <!-- <video v-if="item.video"
                   :src="item.video"
                   controls
                   width="200" height="300"
                   style="border-radius:8px; margin-top:8px;">
-                </video>
+                </video> -->
+                <!-- 视频封面 + 播放按钮 -->
+                <div v-if="item.video" class="course-video" @click="handlePlay(item)">
+                  <!-- 播放按钮蒙层 -->
+                  <div class="relative-shadow">
+                    <van-icon name="play-circle-o" class="play-icon"/>
+                  </div>
+                  <!-- 封面图 -->
+                  <van-image
+                    :src="item.video_thumb || defaultVideoThumb"
+                    fit="cover"
+                    width="200"
+                    height="300"
+                    class="video-thumb"
+                  />
+                </div>
 
                 <!-- 底部点赞评论按钮 -->
                 <div class="item-footer">
@@ -205,6 +220,16 @@ export default {
         startPosition: imgIndex,
       });
     },
+    handlePlay(item) {
+      console.log(item)
+      this.$router.push({
+        path: '/videoPlayer',
+        query: {
+          name: item.filename,
+          src: encodeURIComponent(item.video)
+        }
+      })
+    },
     gotoRecord() {
       this.$router.push('record');
     },
@@ -493,4 +518,28 @@ export default {
     margin: 0 40px !important;
     width: auto !important;
 }
+.course-video {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.relative-shadow {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 300px;
+  z-index: 1;
+  border-radius: 8px;
+}
+
+.play-icon {
+  font-size: 40px;
+  color: #fff;
+}
 </style>

src/views/im/publish/index.vue

@@ -94,7 +94,6 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
 import { addDynamic, hostUploadImg } from "@/api/path/im.api";
 import { showToast } from "vant";
 
@@ -167,7 +166,7 @@ const handleVideoChange = async (event) => {
   videoFile.value = {
     file,
     status: "uploading",
-    url: "",
+    url: URL.createObjectURL(file),
   };
 
   const formData = new FormData();

src/views/im/videoPlayer/index.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="video-model">
+      <!-- 返回按钮 -->
+      <div class="header">
+        <van-button type="primary" size="small" @click="goBack">关闭视频</van-button>
+      </div>
+  
+      <!-- 视频全屏播放 -->
+      <video
+        ref="videoRef"
+        class="video-box"
+        :src="url"
+        controls
+        autoplay
+      ></video>
+  
+      <!-- 底部操作按钮 -->
+      <!-- <div class="opt-model">
+        <van-button round type="success" @click="download">保存到本地</van-button>
+      </div> -->
+    </div>
+  </template>
+  
+  <script setup>
+//   import { useRoute, useRouter } from 'vue-router'
+//   import { Filesystem, Directory } from '@capacitor/filesystem'
+//   import { Share } from '@capacitor/share'
+  
+  const route = useRoute()
+  const router = useRouter()
+  const url = decodeURIComponent(route.query.src || '');
+  const name = route.query.name || 'video.mp4'
+  
+  function goBack() {
+    router.back()
+  }
+  
+//   async function download() {
+//     try {
+//       const response = await fetch(url)
+//       const blob = await response.blob()
+//       const reader = new FileReader()
+//       reader.onload = async () => {
+//         const base64Data = (reader.result).split(',')[1]
+//         await Filesystem.writeFile({
+//           path: name,
+//           data: base64Data,
+//           directory: Directory.Documents
+//         })
+//         await Share.share({
+//           title: '视频已保存',
+//           text: '点击查看视频',
+//           url: url
+//         })
+//       }
+//       reader.readAsDataURL(blob)
+//     } catch (err) {
+//       console.error('下载失败', err)
+//     }
+//   }
+  </script>
+  
+  <style scoped lang="less">
+  .video-model {
+    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;
+  }
+  
+  .opt-model {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+  }
+  </style>
+