音视频预览

src/layout/components/LeftWrap.vue

@@ -200,9 +200,13 @@ function getMenuIcon(item){
         &.is-opened{
             :deep(.el-sub-menu__icon-arrow){
                 transform: rotateZ(0deg) !important;
+                border-radius: 4px;
             }
         }
     }
+    :deep(.el-menu-item.is-active){
+        background-color:#F3F9FF ;
+    }
   }
   .user-box {
     background-color: var(--el-menu-hover-bg-color);

src/views/media/AudioList.vue

@@ -2,6 +2,7 @@
 import { ref, reactive } from 'vue'
 import { Search } from '@element-plus/icons-vue'
 import MediaUpload from './components/MediaUpload.vue';
+import MediaPlayer from './components/MediaPlayer.vue';
 
 
 const tableQuery = reactive({
@@ -18,6 +19,23 @@ const tableColumns = [
     {label:'添加时间',key:'time',width:250,sortable:true}
 ]
 let mediaUploadShow = ref(false)
+
+const tableData = ref([])
+function getTableData(){
+    tableData.value = [
+        {
+            name:'aaa',
+            time:'2024-08-02 12:30'
+        }
+    ]
+}
+getTableData()
+function handlePageChange(){}
+
+let mediaPlayerShow = ref(false)
+function handlePreviewAudio(row){
+    mediaPlayerShow.value = true
+}
 </script>
 
 <template>
@@ -32,7 +50,12 @@ let mediaUploadShow = ref(false)
                     align="center"
                     v-for="column in tableColumns" :key="column.key"
                     :prop="column.key" :label="column.label" :sortable="column.sortable" :width="column.width">
-
+                    <template #default="{row}">
+                        <span v-if="column.key==='name'" @click="handlePreviewAudio(row)" style="color:#086CE0;cursor: pointer;">
+                            {{ row.name }}
+                        </span>
+                        <span v-else>{{ row[column.key] }}</span>
+                    </template>
                 </el-table-column>
                 <el-table-column label="操作">
 
@@ -54,6 +77,12 @@ let mediaUploadShow = ref(false)
         mediaType="audio"
         modifyType="add"
     ></MediaUpload>
+    <MediaPlayer 
+        v-model:show="mediaPlayerShow"
+        title="123456"
+        mediaType="audio"
+    >
+    </MediaPlayer>
 </template>
 
 <style scoped lang="scss">

src/views/media/VideoList.vue

@@ -2,6 +2,7 @@
 import { ref, reactive } from 'vue'
 import { Search } from '@element-plus/icons-vue'
 import MediaUpload from './components/MediaUpload.vue';
+import MediaPlayer from './components/MediaPlayer.vue';
 
 
 const tableQuery = reactive({
@@ -10,8 +11,6 @@ const tableQuery = reactive({
     pageSize:10,
     totals:0,
 })
-const tableData = ref([])
-function handlePageChange(){}
 
 const tableColumns = [
     {label:'视频封面',key:'cover',},
@@ -22,6 +21,23 @@ const tableColumns = [
 ]
 
 let mediaUploadShow = ref(false)
+
+const tableData = ref([])
+function getTableData(){
+    tableData.value = [
+        {
+            name:'aaa',
+            time:'2024-08-02 12:30'
+        }
+    ]
+}
+getTableData()
+function handlePageChange(){}
+
+let mediaPlayerShow = ref(false)
+function handlePreviewVideo(row){
+    mediaPlayerShow.value = true
+}
 </script>
 
 <template>
@@ -36,7 +52,12 @@ let mediaUploadShow = ref(false)
                     align="center"
                     v-for="column in tableColumns" :key="column.key"
                     :prop="column.key" :label="column.label" :sortable="column.sortable" :width="column.width">
-
+                    <template #default="{row}">
+                        <span v-if="column.key==='name'" @click="handlePreviewVideo(row)" style="color:#086CE0;cursor: pointer;">
+                            {{ row.name }}
+                        </span>
+                        <span v-else>{{ row[column.key] }}</span>
+                    </template>
                 </el-table-column>
                 <el-table-column label="操作">
 
@@ -60,6 +81,12 @@ let mediaUploadShow = ref(false)
         ImageUploadWidth="192px"
         ImageUploadHeight="108px"
     ></MediaUpload>
+    <MediaPlayer 
+        v-model:show="mediaPlayerShow"
+        title="123456"
+        mediaType="video"
+    >
+    </MediaPlayer>
 </template>
 
 <style scoped lang="scss">

src/views/media/components/MediaPlayer.vue

@@ -1,13 +1,38 @@
 <script setup>
 import { ref, reactive } from 'vue'
+
+const show = defineModel('show', { type: Boolean, default: false })
+const props = defineProps({
+    title:{
+        type:String,
+        default:''
+    },
+    mediaType:{
+        type:String,
+        default:'audio'
+    }
+})
 </script>
 
 <template>
-    <div>
-
-    </div>
+    <el-dialog v-model="show" :title="props.title" width="1100px" draggable destroy-on-close>
+        <div class="content-wrap">
+            <div class="audio-wrap" v-if="props.mediaType==='audio'">
+                <audio style="width: 100%;outline: none;"
+                    controls autoplay src="https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3"></audio>
+            </div>
+            <div class="video-wrap" v-if="props.mediaType==='video'">
+                <video style="width: 100%;height: 100%;max-height: 70vh;outline: none;" 
+                    controls src="https://hzstatic.hzinsights.com/static/yb/video/f6f99470ea7f42b61f91d43c1aa12766.mp4" autoplay>
+                    您的浏览器暂不支持,请更换浏览器
+                </video>
+            </div>
+        </div>
+    </el-dialog>
 </template>
 
 <style scoped lang="scss">
-
+.content-wrap{
+    padding-bottom: 40px;
+}
 </style>