添加audiopreview播放器

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@ionic/core": "^4.11.10",
     "@ionic/vue": "0.0.4",
+    "@moefe/vue-aplayer": "^2.0.0-beta.5",
     "axios": "0.18.1",
     "clipboard": "^2.0.6",
     "cropperjs": "^1.5.6",

src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app">
     <router-view />
+    <!-- 全局音乐播放 -->
+    <audio-preview></audio-preview>
     <!-- 将上传组件全局注册 -->
     <global-uploader></global-uploader>
   </div>
@@ -8,12 +10,13 @@
 
 <script>
 
+import AudioPreview from "@/components/preview/AudioPreview";
 import globalUploader from '@/components/SimpleUploader/globalUploader.vue'
 
 export default {
   name: 'App',
   components: {
-    globalUploader
+    AudioPreview,globalUploader
   },
   watch: {
     $route: function(to, from) {

src/components/ShowFile/ShowFile.vue

@@ -331,7 +331,7 @@
     <sim-text-preview :file="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
     <image-viewer :fileList="fileList" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
     <video-preview :file="videoPreviewRow" :status.sync="videoPreviewVisible"></video-preview>
-    <audio-preview :file="audioPreviewRow" :status.sync="audioPreviewVisible"></audio-preview>
+    <!-- <audio-preview :file="audioPreviewRow" :status.sync="audioPreviewVisible"></audio-preview> -->
   </div>
 </template>
 
@@ -1923,8 +1923,9 @@
           }
           if(row.contentType.indexOf('audio') > -1){
             // 音频文件
-            this.audioPreviewVisible = true
-            this.audioPreviewRow = row
+            // this.audioPreviewVisible = true
+            // this.audioPreviewRow = row
+            Bus.$emit('onAddAudio',row)
             return
           }
           if(row.contentType.includes('text')){

src/components/preview/AudioPreview.vue

@@ -1,78 +1,85 @@
 <template>
-<div v-if="show">
+<div ref="audioPreview" v-show="show">
   <div class="audio-player" v-aplayerDrag="{ x: transformX, y: transformY }">
-  <!-- <div class="audio-player"> -->
-    <aplayer 
+<!-- <div class="audio-player">  -->
+  <aplayer
+    ref="audioPlayer"
     autoplay
-    :list="list"
-    :music="musicOperation"
-    :float="true"
-  />
-  </div>
+    listFolded
+    :mini.sync="mini"
+    :audio="audio"
+    :lrc-type="3">
+  </aplayer>
+</div>
 </div>
 </template>
 
 <script>
 import '@/utils/directives.js'
-import Aplayer from 'vue-aplayer'
+import Bus from '@/assets/js/bus'
 export default {
-    name: 'VideoPreview',
+    name: 'AudioPreview',
     components: {
-      Aplayer
     },
     props: {
-      file: {
-        type: Object,
-        default: function () {
-          return {}
-        }
-      },
-      status: {
-        type: Boolean,
-        default: false
-      }
     },
     computed: {
     },
-    data() {
+    data($this) {
       return {
-        transformX: 0,
+        transformX: (document.body.clientWidth-500)/2,
         transformY: 0,
-        show: this.status,
-        list: [],
-        audioProps: {}
+        show: true,
+        audio: [],
+        mini: false,
       }  
     },
+    mounted() {
+      this.onPicClick = this.onPicClick.bind(this);
+      let pic = document.querySelector('.aplayer-pic')
+      pic.addEventListener('click', this.onPicClick);
+      Bus.$on('onAddAudio',function(newFile){
+        console.log(this.$refs)
+        this.show = false
+        // let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + newFile.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + newFile.id
+        // let musicOperation = {
+        //   id: newFile.id,
+        //   name: newFile.name,
+        //   artist: newFile.name,
+        //   url: url,
+        //   type: newFile.contentType,
+        //   cover: 'https://images.unsplash.com/photo-1495420378468-78588a508652?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
+        // }
+        // let musicIndex = this.audio.findIndex(item => item.id===newFile.id)     
+        // if(musicIndex < 0){
+        //   this.audio.push(musicOperation)
+        //   this.$nextTick(()=>{
+        //     this.$refs.audioPlayer.switch(this.audio.length-1)
+        //   })
+        // }else{
+        //   console.log(this.$refs.audioPlayer)
+        //   this.$refs.audioPlayer.switch(musicIndex)
+        // }
+      })
+    },
     watch: {
-      file: function(newFile){
-        let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + newFile.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + newFile.id
-        this.musicOperation = {
-          theme: 'pic',
-          title: newFile.name,
-          artist: 'Silent Siren',
-          src: url,
-          pic: 'https://images.unsplash.com/photo-1495420378468-78588a508652?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
-        }
-        this.list.push(this.musicOperation)
-      },
-      status: function(visible){
-        if(visible){
-          this.show = true
-        }
-      }
     },
     methods: {
       close(){
         this.show = false
-        this.$emit('update:status', false)
-      }
+        // this.$emit('update:status', false)
+      },
+      onPicClick() {
+        // this.mini = !this.mini
+        console.log(this.$refs.audioPlayer)
+      },
     }
 }
 </script>
 
 <style>
 .aplayer {
-  position: fixed;
+  /* position: relative; */
   width: 500px;
 }
 .audio-player {

src/main.js

@@ -26,6 +26,13 @@ import '@/permission' // permission control
 
 import VueTouch from"vue-touch";
 import Viewer from 'v-viewer'
+
+import APlayer from '@moefe/vue-aplayer';
+Vue.use(APlayer, {
+  defaultCover: 'https://github.com/u3u.png', // 设置播放器默认封面图片
+  productionTip: true, // 是否在控制台输出版本信息
+});
+
 Vue.use(Viewer)
 Vue.use(VueTouch, {name:'v-touch'})
 

src/utils/directives.js

@@ -14,7 +14,7 @@ Vue.directive('aplayerDrag', {
     // 鼠标按下事件
     dialogHeaderEl.onmousedown = (e) => {
       // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
-      const disX = e.clientX - dialogHeaderEl.offsetLeft + 76;
+      const disX = e.clientX - dialogHeaderEl.offsetLeft + 102;
       const disY = e.clientY - dialogHeaderEl.offsetTop + 14;
       // 获取到的值带px 正则匹配替换
       let styL, styT;