播放器组件重写

WebVue/src/views/master/PreviewAudio.vue

@@ -1,14 +1,15 @@
 <template>
-    <div class="page" :style="{
+    <div class="pa-page" :style="{
         height: bsInfo.height - 120 + 'px',
     }">
-        <APlayer :audio="audio" ref="aplayer" />
+        <VinylAudioPlayer :tracks="audios" @close="onClose" />
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
-import APlayer from "@worstone/vue-aplayer";
+import VinylAudioPlayer from "@/components/basic/VinylAudioPlayer.vue";
+import type { VinylTrack } from "@/components/basic/VinylAudioPlayer.vue";
 import publishAudioService from "@/service/master/publishAudioService";
 import { PublishAudioData } from "@/data/auto/publishAudioData";
 import { useRoute, useRouter } from 'vue-router';
@@ -20,6 +21,7 @@ import { SearchFilter } from "@/data/auto/searchFilter";
 import { FileTypePolicy } from "@/policy/custom/fileTypePolicy";
 import { bsInfo } from "@/utils/browser"
 
+
 const route = useRoute();
 const router = useRouter();
 
@@ -27,20 +29,17 @@ const publishName = ref<string>(route.params.id as string)
 
 const mode = ref<string>(route.params.mode as string)
 
-const aplayer = ref(APlayer);
-// 设置 2 个或 2 个以上的歌曲信息
-const audio = ref([]);
+// 播放器曲目（VinylAudioPlayer 负责界面与播放）
+const audios = ref<VinylTrack[]>([]);
 
 onMounted(async () => {
     // 加载歌曲信息
     loadAudios()
 });
 
-
 const loadAudios = async () => {
 
     let data: PublishAudioData = new PublishAudioData();
-    let audios: any = [];
     try {
         //从网盘中心加载歌曲信息
         if (mode.value == "list") {
@@ -65,12 +64,10 @@ const loadAudios = async () => {
 
             if (dr && dr.Datas && dr.Datas.length > 0) {
                 dr.Datas.forEach((item: DmsFileUploadViewDisplayData) => {
-                    audios.push({
+                    audios.value.push({
                         name: item.OrgFileName.indexOf(".") > 0 ? item.OrgFileName.substring(0, item.OrgFileName.indexOf(".")) : item.OrgFileName,
                         author: '有家相册',
                         url: item.Url,
-                        type: "normal",
-                        // lrc: item.FormattedLrc,
                         cover: '/public/images/logo.png',
                     });
                 });
@@ -85,11 +82,10 @@ const loadAudios = async () => {
 
         if (data && data.Details) {
             data.Details.forEach((item: any) => {
-                audios.push({
+                audios.value.push({
                     name: item.Title,
                     author: item.Author,
                     url: item.FormattedUrl,
-                    type: "normal",
                     lrc: item.FormattedLrc,
                     cover: item.FormattedPic,
                 });
@@ -99,50 +95,20 @@ const loadAudios = async () => {
     } catch (error) {
         console.log(error); // for debug
     }
+};
 
-    aplayer.value.addList(audios);
-    aplayer.value.showList();
-}
+// 收起播放器：返回来源页；没有历史时回首页
+const onClose = (() => {
+    if (window.history.length > 1) {
+        router.back();
+    }
+    else {
+        router.push('/');
+    }
+});
 </script>
-<style>
-.page {
-    overflow: auto;
-    background-color: bisque;
-    padding-left: 16px;
-    padding-right: 16px;
-    padding-top: 8px;
-    margin-right: 8px;
-    background-image: url('/images/main/p3.png');
-    background-size: cover;
+<style scoped>
+.pa-page {
     width: 100%;
 }
-
-.aplayer {
-    margin-left: -5px !important;
-    margin-top: 0px !important;
-}
-
-.aplayer .aplayer-notice {
-    z-index: -999 !important;
-    ;
-    display: none !important;
-}
-
-.aplayer .aplayer-lrc p.aplayer-lrc-current {
-    font-size: 24px !important;
-    padding-top: 4px !important;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    -o-text-overflow: ellipsis;
-    line-height: 24px !important;
-}
-
-.aplayer-list {
-    max-height: 560px !important;
-}
-
-.aplayer-list ol {
-    max-height: 560px !important;
-}
 </style>