切换

components/ItemComponent/roadshowItem.vue

@@ -90,7 +90,8 @@ export default {
   },
   watch: {},
   created() {},
-  mounted() {},
+  mounted() {
+  },
   methods: {
     //播放的权限判断
     async handelPlay(item) {

components/audioModule/index.vue

@@ -53,10 +53,14 @@
       </view>
     </view>
     <van-popup :show="showTabulation" closeable position="bottom" round custom-style="height: 50%;" @close="onCloseHandler">
-      <view>
+      <view class="play-ul">
         <view class="global_title">播放列表</view>
-        <view v-for="item in playlistData" :key="item.indexId" @click="palyHandler(item)">
-          {{ item.Name }}
+        <view class="play-li" v-for="(item, index) in playlistData" :key="item.indexId" @click="palyHandler(item)">
+          <view class="text_oneLine">{{ item.Name }}</view>
+          <view>
+            <van-icon name="audio" style="margin-right: 10rpx" v-if="audioInit.indexId == item.indexId" />
+            <van-icon name="cross" style="padding: 20rpx" @click.native.stop="removeAudioListHandler(item, index)" />
+          </view>
         </view>
       </view>
     </van-popup>
@@ -129,7 +133,7 @@ export default {
     // 上、下一首歌曲禁用
     PreviousNextSong() {
       const curAudio = this.$store.state.audioBg.list;
-      let indexId = this.$store.state.audioBg.indexId;
+      let indexId = this.audioInit.indexId;
       let indexPlay = this.playlistData.findIndex((_) => _.Name === curAudio.Name && _.indexId === indexId);
       return indexPlay;
     },
@@ -161,6 +165,7 @@ export default {
     //数据初次加载
     init() {
       const curAudio = this.$store.state.audioBg.list;
+      this.isExistList(curAudio);
       if ((this.globalBgAudioManager.src != curAudio.Url && curAudio.Url) || (this.isEnded && this.isosName !== "ios" && curAudio.Url)) {
         this.$store.commit("audioBg/setAudioEnd", false);
         this.globalBgAudioManager.playbackRate = 1;
@@ -221,7 +226,7 @@ export default {
       // 音频onEnded
       this.globalBgAudioManager.onEnded(() => {
         const curAudio = this.$store.state.audioBg.list;
-        let indexId = this.$store.state.audioBg.indexId;
+        let indexId = this.audioInit.indexId;
         this.onEndedpalyHandler(curAudio, indexId);
         console.log("音频onEnded");
         this.backAudioPlay();
@@ -294,7 +299,7 @@ export default {
     // 播放了记录
     backAudioPlay() {
       // let recordList = this.$store.state.audioBg.recordList;
-      // if ((this.$store.state.audioBg.activityId || this.$store.state.audioBg.indexId) && this.palyTime >= 0) {
+      // if ((this.$store.state.audioBg.activityId || this.audioInit.indexId) && this.palyTime >= 0) {
       //   activity.backAudioPlay({
       //     SourceId: recordList.SourceId || recordList.ActivityId,
       //     SourceType: recordList.Type ? recordList.Type : 1,
@@ -319,7 +324,7 @@ export default {
     },
     // 点击了播放列表
     palyHandler(item) {
-      if (this.$store.state.audioBg.indexId == item.indexId) {
+      if (this.audioInit.indexId == item.indexId) {
         if (this.globalBgAudioManager.paused) {
           this.globalBgAudioManager.play();
         } else {
@@ -343,6 +348,8 @@ export default {
     },
     // 上一首 下一首
     isPreviousNextSongHandler(isPlay, type) {
+      console.log("触发你了？");
+
       if (isPlay) return;
       let item = this.playlistData[type == "上" ? this.PreviousNextSong - 1 : this.PreviousNextSong + 1];
       this.playlistDataInit(item);
@@ -359,6 +366,31 @@ export default {
         this.init();
       }
     },
+    // 数据是否存在
+    isExistList(item) {
+      const playlist = this.playlistData.some((key) => key.indexId === this.audioInit.indexId);
+      if (!playlist && item.Url) {
+        let dataList = {
+          Url: item.Url,
+          Name: item.Name,
+          PlaySeconds: item.PlaySeconds,
+          indexId: this.audioInit.indexId,
+          activityTitle: item.Name,
+          recordList: this.$store.state.audioBg.recordList,
+        };
+        this.$store.commit("audioJoinPlaylist/addUnshiftPlaylist", { dataList });
+      }
+    },
+    // 点击删除列表
+    removeAudioListHandler(item, index) {
+      let list = this.playlistData.filter((_) => _.indexId != item.indexId);
+      this.$store.commit("audioJoinPlaylist/removeAudio", { list });
+      if (index === this.playlistData.length) {
+        this.globalBgAudioManager.stop();
+      } else {
+        this.playlistDataInit(this.playlistData[index]);
+      }
+    },
   },
 };
 </script>
@@ -465,5 +497,25 @@ export default {
       }
     }
   }
+  .play-ul {
+    padding: 30rpx 20rpx;
+    .play-li {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 60rpx;
+      background-color: #eaeaea;
+      margin-bottom: 10rpx;
+      padding: 0 20rpx;
+      :nth-child(2) {
+        width: 100prx;
+        flex-shrink: 0;
+      }
+      :nth-child(1) {
+        flex: 1;
+        flex-shrink: 0;
+      }
+    }
+  }
 }
 </style>

store/modules/audioPlaylist.js

@@ -2,46 +2,20 @@
 const audioJoinPlaylist = {
   namespaced: true,
   state: {
-    playlist: [
-      {
-        Name: "血液灌流器械.mp3",
-        PlaySeconds: 190,
-        Url: "https://hongze.oss-accelerate.aliyuncs.com/static/audio/202311/20231101/Hz6rdgtHCwQtDoDUR9p4ImNJ12ZZ.mp3",
-        activityTitle: "血液灌流器械.mp3",
-        indexId: 7,
-      },
-      {
-        Name: "昊轩京剧-吴昊 - 走卒 (戏腔女版).mp3",
-        PlaySeconds: 213,
-        Url: "https://hongze.oss-accelerate.aliyuncs.com/static/audio/202311/20231101/EkvvFI7CGn8cLjCB62scauahvDkw.mp3",
-        activityTitle: "昊轩京剧-吴昊 - 走卒 (戏腔女版).mp3",
-        indexId: 6,
-      },
-      {
-        Name: "林俊杰 .mp3",
-        PlaySeconds: 237,
-        Url: "https://hongze.oss-accelerate.aliyuncs.com/static/audio/202310/20231031/h229ufVmjpOXSKJQeKr2B6RcCpOS.mp3",
-        activityTitle: "林俊杰 .mp3",
-        indexId: 3,
-      },
-      {
-        Name: "郁可唯 - 水中花 (Live).mp3",
-        PlaySeconds: 210,
-        Url: "https://hongze.oss-accelerate.aliyuncs.com/static/audio/202310/20231030/SiI1jCNPGg0xJgY0Cn9tH9DCkUOL.mp3",
-        activityTitle: "郁可唯 - 水中花 (Live).mp3",
-        indexId: 2,
-      },
-    ],
+    playlist: [],
   },
   mutations: {
     addPlaylist(state, payload) {
-      state.playlist.push(payload.dataList);
-      console.log(state.playlist);
+      state.playlist.length == 0 ? (state.playlist = [payload.dataList]) : state.playlist.push(payload.dataList);
+    },
+    addUnshiftPlaylist(state, payload) {
+      state.playlist.unshift(payload.dataList);
     },
 
     //删除当前音频播放
     removeAudio(state, payload) {
-      state.playlist = [];
+      console.log(payload);
+      state.playlist = payload.list;
     },
   },
 };