init

components/ItemComponent/roadshowItem.vue

@@ -3,6 +3,7 @@
     <view class="global_title" @click="goDetails">
       <mp-html :content="richTextClamp(2) + list.Title + '</div>'" />
     </view>
+    <view @click="joinPlaylist(list)">加入播放列表</view>
     <view class="cover-item" :style="{ 'background-image': 'url(' + list.BackgroundImg + ')' }">
       <block v-if="list.Type == 2 || list.Type == 3">
         <image class="img-bg" @click="handelPlay(list)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon_index.png"></image>
@@ -181,6 +182,20 @@ export default {
         val == 7 ? "min-height: 50px;" : ""
       }line-clamp: ${val};-webkit-line-clamp: ${val};text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;word-wrap: break-word;word-break: break-all;">`;
     },
+    // 加入播放列表
+    joinPlaylist(item) {
+      let dataList = {
+        Url: item.ResourceUrl,
+        Name: item.Title,
+        PlaySeconds: +item.PlaySeconds,
+        indexId: item.ActivityId,
+        activityTitle: item.Title,
+      };
+      const playlist = this.$store.state.audioJoinPlaylist.playlist.some((key) => key.indexId === dataList.indexId);
+      if (!playlist) {
+        this.$store.commit("audioJoinPlaylist/addPlaylist", { dataList });
+      }
+    },
   },
 };
 </script>

components/audioModule/index.vue

@@ -1,7 +1,10 @@
 <template>
-  <view class="container global-audio-box" v-if="showAudioPop">
+  <!-- v-if="showAudioPop" -->
+  <view class="container global-audio-box">
     <view class="bg-overlay" @click="isShowMaskHandler"></view>
+
     <view class="audio-box">
+      <view @click="showTabulation = true"> 最后不要忘了删除 </view>
       <view class="activity-title">
         {{ activityTitle }}
         <view class="icon-cross" @click.stop="isShowMaskHandler">
@@ -9,7 +12,7 @@
         </view>
       </view>
       <view class="audio-card">
-        <view class="card-title text_oneLine">
+        <view class="card-title text_oneLine" @click="showTabulation = true">
           {{ title }}
         </view>
         <view class="slider-paly">
@@ -47,6 +50,14 @@
         </view>
       </view>
     </view>
+    <van-popup :show="showTabulation" closeable position="bottom" round custom-style="height: 50%;" @close="onCloseHandler">
+      <view>
+        <view class="global_title">播放列表</view>
+        <view v-for="item in playlistData" :key="item.indexId" @click="palyHandler(item)">
+          {{ item.Name }}
+        </view>
+      </view>
+    </van-popup>
   </view>
 </template>
 
@@ -86,6 +97,7 @@ export default {
         { name: "2倍", value: 2 },
       ],
       isRecord: true, //是否记录播放
+      showTabulation: true,
     };
   },
   computed: {
@@ -108,6 +120,9 @@ export default {
     isEnded() {
       return this.$store.state.audioBg.isAudioEnded;
     },
+    playlistData() {
+      return this.$store.state.audioJoinPlaylist.playlist;
+    },
   },
   watch: {
     audioInit: {
@@ -287,6 +302,29 @@ export default {
     touchstartHandler() {
       this.$store.commit("audioBg/setSlide", true);
     },
+    // 关闭播放列表
+    onCloseHandler() {
+      this.showTabulation = false;
+    },
+    palyHandler(item) {
+      console.log(item,this.$store.state.audioBg.indexId);
+      if (this.$store.state.audioBg.indexId == item.indexId) {
+        if (this.globalBgAudioManager.paused) {
+          this.globalBgAudioManager.play();
+        } else {
+          this.globalBgAudioManager.pause();
+        }
+      } else {
+        console.log(112233);
+        let VoiceList = {
+          Url: item.Url,
+          Name: item.Name,
+          PlaySeconds: item.PlaySeconds,
+        };
+        this.$store.commit("audioBg/addAudio", { list: VoiceList, indexId: item.indexId, activityTitle: item.activityTitle });
+        this.init()
+      }
+    },
   },
 };
 </script>

pages/material/material.vue

@@ -99,7 +99,7 @@ export default {
   data() {
     return {
       topTabBars: [],
-      topTabsActive: 2, //一级top的tabs
+      topTabsActive: 4, //一级top的tabs
       secondActive: "", //二级的tabs
       secondBars: [], //二级的tabs数组
       chartChildren: [], //二级的tabs下的标签

store/index.js

@@ -3,6 +3,7 @@ import Vuex from "vuex";
 import { checkToken, User } from "@/config/api.js";
 import audioBg from "./modules/audioBg";
 import videoPlay from "./modules/videoPlay";
+import audioJoinPlaylist from "./modules/audioPlaylist";
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
@@ -123,7 +124,7 @@ const store = new Vuex.Store({
     },
   },
   getters: {},
-  modules: { audioBg, videoPlay },
+  modules: { audioBg, videoPlay, audioJoinPlaylist },
 });
 
 export default store;

store/modules/audioPlaylist.js

@@ -0,0 +1,49 @@
+// 全局音频背景播放状态管理模块
+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: 0,
+      },
+      {
+        Name: "昊轩京剧-吴昊 - 走卒 (戏腔女版).mp3",
+        PlaySeconds: 213,
+        Url: "https://hongze.oss-accelerate.aliyuncs.com/static/audio/202311/20231101/EkvvFI7CGn8cLjCB62scauahvDkw.mp3",
+        activityTitle: "昊轩京剧-吴昊 - 走卒 (戏腔女版).mp3",
+        indexId: 0,
+      },
+      {
+        Name: "林俊杰 .mp3",
+        PlaySeconds: 237,
+        Url: "https://hongze.oss-accelerate.aliyuncs.com/static/audio/202310/20231031/h229ufVmjpOXSKJQeKr2B6RcCpOS.mp3",
+        activityTitle: "林俊杰 .mp3",
+        indexId: 0,
+      },
+      {
+        Name: "郁可唯 - 水中花 (Live).mp3",
+        PlaySeconds: 210,
+        Url: "https://hongze.oss-accelerate.aliyuncs.com/static/audio/202310/20231030/SiI1jCNPGg0xJgY0Cn9tH9DCkUOL.mp3",
+        activityTitle: "郁可唯 - 水中花 (Live).mp3",
+        indexId: 0,
+      },
+    ],
+  },
+  mutations: {
+    addPlaylist(state, payload) {
+      state.playlist.push(payload.dataList);
+      console.log(state.playlist);
+    },
+
+    //删除当前音频播放
+    removeAudio(state, payload) {
+      state.playlist = [];
+    },
+  },
+};
+
+export default audioJoinPlaylist;