增加预览功能

src/views/components/element/VideoElement/VideoPlayer/index.vue

@@ -35,8 +35,8 @@
       ></video>
       <div class="bezel">
         <span class="bezel-icon" :class="{ 'bezel-transition': bezelTransition }" @animationend="bezelTransition = false">
-          <IconPause v-if="paused" />
-          <IconPlayOne v-else />
+          <IconPlayOne v-if="paused" />
+          <IconPause v-else />
         </span>
       </div>
     </div>

src/views/components/element/enjoyElement/enjoyPlayer.vue

@@ -194,6 +194,9 @@ function handleChangeMusic(type: "pre" | "next") {
         src: enjoyData.src
       }
     })
+    currentTime.value = 0
+    duration.value = 0
+    loaded.value = 0
   }
 }
 
@@ -209,6 +212,9 @@ function handlePlayMusic(item: Record<string, any>) {
         src: item.src
       }
     })
+    currentTime.value = 0
+    duration.value = 0
+    loaded.value = 0
   }
 }
 

src/views/components/element/enjoyElement/resourcesList/resourcesList.vue

@@ -104,10 +104,10 @@
         <div class="musicListConBox" v-loading="loading">
           <div class="musicList" :class="{ empty: !musicList.length && !loading }">
             <div class="musicListBox" v-if="musicList.length && !loading">
-              <div class="musicCon" v-for="item in musicList" :key="item.id">
+              <div class="musicCon" v-for="item in musicList" :key="item.id" @click="handlePreview(item)">
                 <div class="coverImgCon">
                   <img v-if="item.sourceFrom === 'PLATFORM'" class="jxImg" src="./imgs/jxImg.png" alt="" />
-                  <div class="addBtn" @click="handleAddResources(item)">添加</div>
+                  <div class="addBtn" @click.stop="handleAddResources(item)">添加</div>
                   <img class="coverImg" :src="item.coverImg" />
                 </div>
                 <div class="musicDetails">
@@ -121,7 +121,7 @@
                     <img
                       v-if="queryParams.fromType !== 'PLATFORM'"
                       class="sc"
-                      @click="handleFavorite(item)"
+                      @click.stop="handleFavorite(item)"
                       :src="item.favoriteFlag ? scActImg : scImg"
                       alt=""
                     />
@@ -137,6 +137,33 @@
         </div>
       </div>
     </div>
+    <Modal
+      :contentStyle="{
+        width: '800px',
+        height: '600px',
+        boxShadow: '0px 2px 10px 0px rgba(0,0,0,0.08)',
+        borderRadius: '12px',
+        padding: '0'
+      }"
+      v-model:visible="previewData.previewVisible"
+    >
+      <div class="previewContent">
+        <div class="preHeadCon">
+          <div class="headTitle">{{ previewData.name }}</div>
+          <div class="headright">
+            <img @click="previewData.previewVisible = true" class="closeBtn" src="../../cloudCoachElement/cloudCoachList/imgs/close.png" alt="" />
+          </div>
+        </div>
+        <div class="preCon">
+          <img v-if="previewData.type === 'IMG'" class="coverImg" :src="previewData.content" />
+          <template v-else-if="previewData.type === 'SONG'">
+            <img class="coverImg" :src="previewData.coverImg" />
+            <AudioPlayer class="audioPlayer" :src="previewData.content" :loop="false" />
+          </template>
+          <VideoPlayer v-else-if="previewData.type === 'VIDEO'" class="videoPlayer" :src="previewData.content" :width="100" :height="100" />
+        </div>
+      </div>
+    </Modal>
   </div>
 </template>
 
@@ -157,6 +184,9 @@ import audioImg from "./imgs/audio.png"
 import imgImg from "./imgs/img.png"
 import videoImg from "./imgs/video.png"
 import { CODE_ERR_CANCELED } from "@/libs/auth"
+import Modal from "@/components/Modal.vue"
+import AudioPlayer from "../../AudioElement/AudioPlayer.vue"
+import VideoPlayer from "../../VideoElement/VideoPlayer/index.vue"
 
 const emits = defineEmits<{
   (event: "update", item: Record<string, any>): void
@@ -167,6 +197,22 @@ function handleAddResources(item: Record<string, any>) {
   emits("update", item)
 }
 
+const previewData = reactive({
+  previewVisible: false,
+  type: "",
+  name: "",
+  content: "",
+  coverImg: ""
+})
+
+function handlePreview(item: Record<string, any>) {
+  previewData.previewVisible = true
+  previewData.type = item.type
+  previewData.name = item.name
+  previewData.content = item.content
+  previewData.coverImg = item.coverImg
+}
+
 const tabData =
   queryParams.fromType === "PLATFORM"
     ? [
@@ -742,4 +788,61 @@ const highlightedText = (text: string, query: string) => {
     }
   }
 }
+.previewContent {
+  width: 100%;
+  height: 100%;
+  .preHeadCon {
+    display: flex;
+    justify-content: flex-end;
+    height: 50px;
+    position: relative;
+    .headTitle {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      font-weight: 600;
+      font-size: 18px;
+      color: #131415;
+      width: 600px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: center;
+    }
+    .headright {
+      display: flex;
+      align-items: center;
+      margin-right: 20px;
+      .closeBtn {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+  .preCon {
+    width: 100%;
+    height: calc(100% - 50px);
+    position: relative;
+    .coverImg {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    .audioPlayer {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+    .videoPlayer {
+      width: 100% !important;
+      height: 100% !important;
+    }
+  }
+}
 </style>