周报章节列表增加音频播放

src/store/modules/hzyb.js

@@ -3,10 +3,8 @@ const hzybStore={
     state:{
         audioData:{
             INS:null,
-            url:'',//音频链接
-            videoTime:0,//音频时长
-            videoName:'',//音频名称
-            videoImg:'',//音频图片
+            list:[],
+            index:0,
             paused:true,//音频是否在暂停
             show:false,// 显示音频弹窗
             videoCtime:0,//音频当前播放时间
@@ -15,29 +13,42 @@ const hzybStore={
     mutations: {
         // 点击播放音频
         addAudio(state,e){
-            state.audioData.url=e.video_url
-            state.audioData.videoTime=e.video_play_seconds
-            state.audioData.videoName=e.video_name
-            state.audioData.videoImg=e.video_img
+            state.audioData.list=e.list
+            state.audioData.index=e.index||0
             state.audioData.INS.play()
             state.audioData.show=true
         },
         // 更新音频播放状态
         upateAudioStatus(state,e){
             if(e==='end'){
-                state.audioData.url=''
-                state.audioData.show=false
+                if(state.audioData.list.length-1==state.audioData.index){
+                    // 最后一首
+                    state.audioData.show=false
+                    state.audioData.INS=null 
+                    state.audioData.list=[]
+                    state.audioData.index=0
+                    state.audioData.paused=true
+                }else{
+                    state.audioData.index++
+                }
+
             }else if(e==='play'){
                 state.audioData.paused=false
             }else if(e==='paused'){
                 state.audioData.paused=true
             }
         },
+        // 切换音频
+        changeAudioIndex(state,e){
+            console.log(e);
+            state.audioData.index=e
+        },
         //关闭音频弹窗
         closeAudioPop(state){
             state.audioData.show=false
             state.audioData.INS=null 
-            state.audioData.url=''
+            state.audioData.list=[]
+            state.audioData.index=0
             state.audioData.paused=true
         },
         showAudioPop(state){

src/views/hzyb/Index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {ref} from 'vue'
+import {computed, ref} from 'vue'
 import { Slider,Icon as VanIcon,Progress as VanProgress } from 'vant';
 import { useStore } from "vuex";
 
@@ -7,6 +7,8 @@ const store=useStore()
 
 const audioIconPlaysmall=new URL('../../assets/hzyb/report/audio-play-small.png', import.meta.url).href
 const audioIconPausesmall=new URL('../../assets/hzyb/report/audio-pause-small.png', import.meta.url).href
+const audioIconChange=new URL('../../assets/hzyb/report/audio-change-small.png', import.meta.url).href
+const audioIconChangeGrey=new URL('../../assets/hzyb/report/audio-change-small-grey.png', import.meta.url).href
 
 const formatVoiceTime = (e) => {
   let minus = parseInt(e / 60);
@@ -14,6 +16,10 @@ const formatVoiceTime = (e) => {
   return `${minus > 9 ? minus : "0" + minus}:${sec > 9 ? sec : "0" + sec}`;
 };
 
+const curAudioData=computed(()=>{
+    return store.state.hzyb.audioData.list[store.state.hzyb.audioData.index]
+})
+
 let currentTime=ref(0)
 let showBigAudio=ref(false)
 const audioIns=ref('')
@@ -64,6 +70,17 @@ const handleCloseAudioPup=()=>{
     store.commit('hzyb/closeAudioPop')
 }
 
+// 切换音频
+const handleAudioChange=(type)=>{
+    const cindex=store.state.hzyb.audioData.index
+    if(type==='before'&&cindex!=0){
+        store.commit('hzyb/changeAudioIndex',cindex-1)
+    }
+    if(type==='next'&&(cindex!=store.state.hzyb.audioData.list.length-1)){
+        store.commit('hzyb/changeAudioIndex',cindex+1)
+    }
+}
+
 </script>
 
 
@@ -72,7 +89,7 @@ const handleCloseAudioPup=()=>{
     <audio
         ref="audioIns"
         autoplay
-        :src="$store.state.hzyb.audioData.url"
+        :src="curAudioData?.url"
         @error="audioError"
         @play="audioPlay"
         @pause="audioPause"
@@ -83,11 +100,11 @@ const handleCloseAudioPup=()=>{
     <!-- 悬浮音频模块 -->
     <div class="popup-audio-box" v-if="$store.state.hzyb.audioData.show">
         <div class="small-box" v-if="!showBigAudio" @click="showBigAudio=true">
-            <img :src="$store.state.hzyb.audioData.videoImg" class="bg-img">
+            <img :src="curAudioData.videoImg" class="bg-img">
             <div class="small-con">
                 <div class="audio-name-box" style="flex:1;overflow: hidden;">
-                    <div class="van-ellipsis title">{{$store.state.hzyb.audioData.videoName}}</div>
-                    <div style="color:#666">时长 {{ formatVoiceTime($store.state.hzyb.audioData.videoTime) }}</div>
+                    <div class="van-ellipsis title">{{curAudioData.videoName}}</div>
+                    <div style="color:#666">时长 {{ formatVoiceTime(curAudioData.videoTime) }}</div>
                 </div>
                 <img class="btn-img" :src="$store.state.hzyb.audioData.paused?audioIconPausesmall:audioIconPlaysmall" @click.stop="handleClickAudio" alt="">
                 <van-icon name="cross" color="#BBC3C9" size="16" @click.stop="handleCloseAudioPup" />
@@ -96,40 +113,40 @@ const handleCloseAudioPup=()=>{
                 class="bot-progress" 
                 stroke-width="1px" 
                 color="#D4AC78" 
-                :percentage="(currentTime/$store.state.hzyb.audioData.videoTime)*100" 
+                :percentage="(currentTime/curAudioData.videoTime)*100" 
                 :show-pivot="false" 
             />
         </div>
         <div class="big-box" v-else>
             <van-icon name="arrow-down" color="#BBC3C9" size="16" class="arrow-d" @click="showBigAudio=false" />
             <van-icon name="cross" color="#BBC3C9" size="16" class="arrow-c" @click.stop="handleCloseAudioPup" />
-            <div class="title">{{$store.state.hzyb.audioData.videoName}}</div>
+            <div class="title">{{curAudioData.videoName}}</div>
             <div class="flex">
                 <span>{{formatVoiceTime(currentTime)}}</span>
                 <Slider 
                     button-size="14px" 
                     v-model="currentTime" 
-                    :max="$store.state.hzyb.audioData.videoTime" 
+                    :max="curAudioData.videoTime" 
                     active-color="#D5AD79" 
                     inactive-color="#E9E9E9"
                     @change="SliderChange" 
                     class="slider"
                 ></Slider>
-                <span>{{ formatVoiceTime($store.state.hzyb.audioData.videoTime) }}</span>
+                <span>{{ formatVoiceTime(curAudioData.videoTime) }}</span>
             </div>
             <div class="flex" style="justify-content: center;">
-                <img src="@/assets/hzyb/report/audio-change-small-grey.png">
+                <img 
+                    :src="$store.state.hzyb.audioData.index==0?audioIconChangeGrey:audioIconChange"
+                    @click="handleAudioChange('before')"
+                >
                 <img :src="$store.state.hzyb.audioData.paused?audioIconPausesmall:audioIconPlaysmall" @click="handleClickAudio" style="margin:0 20px">
-                <img src="@/assets/hzyb/report/audio-change-small-grey.png" style="transform: rotate(180deg)">
+                <img 
+                    :src="$store.state.hzyb.audioData.index==($store.state.hzyb.audioData.list.length-1)?audioIconChangeGrey:audioIconChange" 
+                    style="transform: rotate(180deg)"
+                    @click="handleAudioChange('next')"
+                >
             </div>
         </div>
-        <!-- <div>{{$store.state.hzyb.audioData.videoName}}</div>
-        <div class="flex">
-            <span>{{formatVoiceTime(currentTime)}}</span>
-            <Slider button-size="10px" v-model="currentTime" :max="$store.state.hzyb.audioData.videoTime" active-color="#D5AD79" @change="SliderChange" class="slider"></Slider>
-            <span>{{ formatVoiceTime($store.state.hzyb.audioData.videoTime) }}</span>
-            <img :src="$store.state.hzyb.audioData.paused?audioIconPausesmall:audioIconPlaysmall"  alt="" @click="handleClickAudio">
-        </div> -->
     </div>
 </template>
 

src/views/hzyb/report/Detail.vue

@@ -1,6 +1,6 @@
 <template>
 <van-pull-refresh v-model="loading" disabled style="min-height:100vh">
-    <div class="report-detail-page" v-if="info" :style="{paddingBottom:$store.state.hzyb.audioData.url&&'80px'}">
+    <div class="report-detail-page" @click="closeAttention" v-if="info" :style="{paddingBottom:$store.state.hzyb.audioData.url&&'80px'}">
         <!-- 晨报、周报章节 -->
         <div class="chapter-list-wrap" v-if="['晨报','周报'].includes(info.report_info.classify_name_first)">
             <div class="top-box" :style="'background-image:url(' + info.report_info.banner_url + ')'">
@@ -14,11 +14,16 @@
                             <div>{{formatChapterTime(info.report_info.publish_time,'year-month')}}</div>
                         </div>
                     </div>
-                    <div class="num">第{{info.report_info.stage}}期</div>
+                    <div class="audio-play-list-box" @click="handleGoSetAudioList">播放清单</div>
+                    <div class="attention-box" v-if="showAttention">
+                        点击<span style="color:#E3B377">播放清单</span>，打开章节列表，进行<span style="color:#E3B377">播放清单配置</span>
+                        <img class="close-icon" src="@/assets/hzyb/report/close.png" alt="" @click.stop="closeAttention">
+                    </div>
                 </div>
+                <div class="stage-num">第{{info.report_info.stage}}期</div>
             </div>
             <div class="list-box">
-                <div class="flex item" v-for="(item,index) in chapterList" :key="item.report_chapter_id" @click="goChapterDetail(item)">
+                <div class="flex item" v-for="item in chapterList" :key="item.report_chapter_id" @click="goChapterDetail(item)">
                     <div class="img-box">
                         <van-image class="img" :src="item.report_chapter_type_thumb" mode="aspectFill" />
                     </div>
@@ -29,6 +34,11 @@
                         </div>
                         <div class="van-multi-ellipsis--l2 sub-title">{{item.title}}</div>
                         <div class="update-time">更新至：{{formatChapterTime(item.publish_time,'year-month-day')}}</div>
+                        <div 
+                            :class="['audio-icon-box',item.video_url==$store.state.hzyb.audioData.list[$store.state.hzyb.audioData.index]?.url?'audio-icon-box_active':'']" 
+                            v-if="info.report_info.classify_name_first=='周报'&&item.is_close==0"
+                            @click.stop="handlePlayWeekAudio(item)"
+                        ></div>
                     </div>
                 </div>
             </div>
@@ -228,7 +238,9 @@ export default {
             shareData:{},//分享的数据传给ppt页
 
             collectIcon,
-            collectIcons
+            collectIcons,
+
+            showAttention:false,//是否显示配置播放清单提示
         }
     },
     beforeCreate(){
@@ -242,6 +254,13 @@ export default {
         this.fromPage = this.$route.query.fromPage || ''
         this.getDetail()
         this.getUserInfo()
+
+        const showAtt=localStorage.getItem('showAttention')||""
+        if(showAtt){
+            this.showAttention=false
+        }else{
+            this.showAttention=true
+        }
     },
     mounted(){
         $(document).on('click', '.rich-content img',function(event) {
@@ -262,6 +281,42 @@ export default {
         window.removeEventListener('scroll',this.loadMoreHandle)
     },
     methods: {
+        // 点击开始播放周报的列表中的音频
+        handlePlayWeekAudio(e){
+            const arr=[]
+            this.chapterList.forEach(item=>{
+                if(item.is_close==0){
+                    arr.push({
+                        url:item.video_url,
+                        videoTime:item.video_play_seconds,
+                        videoName:item.video_name,
+                        videoImg:item.report_chapter_type_thumb
+                    })
+                }
+            })
+            console.log(arr);
+            let index=0
+            arr.forEach((_item,idx)=>{
+                if(_item.url==e.video_url) index=idx
+            })
+            this.$store.commit('hzyb/addAudio',{
+                list:arr,
+                index:index
+            })
+        },
+
+        // 设置周报的播放清单
+        handleGoSetAudioList(){
+            wx.miniProgram.navigateTo({
+                url:`/pages-report/audioPlayListSet?reportId=${this.reportId}`,
+            })
+        },
+
+        closeAttention(){
+            localStorage.setItem('showAttention','true')
+            this.showAttention=false
+        },
+
         //背景音频播放报告音频
         handlePlayAudioBG(){
             wx.miniProgram.navigateTo({
@@ -812,7 +867,7 @@ export default {
                 left: 34px;
                 right: 34px;
                 justify-content: space-between;
-                align-items: flex-end;
+                align-items: center;
                 .time-box{
                     align-items: center;
                     font-size: 24px;
@@ -823,8 +878,50 @@ export default {
                         margin-right: 15px;
                     }
                 }
-                
+                .audio-play-list-box{
+                    background-color: #E3B377;
+                    color: #fff;
+                    font-size: 24px;
+                    width: 180px;
+                    line-height: 52px;
+                    border-radius: 25px;
+                    text-align: center;
+                }
+                .attention-box{
+                    position: absolute;
+                    bottom: 110%;
+                    background-color: #fff;
+                    color: #333;
+                    box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.16);
+                    padding: 20px 54px 20px 20px;
+                    border-radius: 8px;
+                    .close-icon{
+                        width: 24px;
+                        height: 24px;
+                        position: absolute;
+                        top: 50%;
+                        transform: translateY(-50%);
+                        right: 20px;
+                    }
+                    &::after{
+                        content: '';
+                        display:block;
+                        width: 0;
+                        height: 0;
+                        border: 10px solid transparent;
+                        border-top-color: #fff;
+                        position: absolute;
+                        bottom: -20px;
+                        right: 20px;
+                    }
+                }
             }
+            .stage-num{
+                position: absolute;
+                top: 30px;
+                right: 34px;
+            }
+            
         }
         .list-box{
             margin-top: -50px;
@@ -883,11 +980,21 @@ export default {
                         color: #999;
                     }
                     .update-time{
+                        color: #D4D4D4;
+                        font-size: 20px;
+                        margin-top: 5px;
+                    }
+                    .audio-icon-box{
                         position: absolute;
                         top: 0;
                         right: 0;
-                        color: #D4D4D4;
-                        font-size: 20px;
+                        width: 44px;
+                        height: 40px;
+                        background-image: url('@/assets/hzyb/report/icon-1.png');
+                        background-size: cover;
+                    }
+                    .audio-icon-box_active{
+                        background-image: url('@/assets/hzyb/report/icon-2.png');
                     }
                 }
             }

src/views/hzyb/report/components/AudioBox.vue

@@ -20,7 +20,7 @@ const audioIconPause=new URL('../../../../assets/hzyb/report/audio-pause.png', i
 
 
 const handleClickAudio=()=>{
-    if(store.state.hzyb.audioData.url==props.audioData.video_url){
+    if(store.state.hzyb.audioData.list[store.state.hzyb.audioData.index]?.url==props.audioData.video_url){
       if(store.state.hzyb.audioData.paused){
         store.state.hzyb.audioData.INS.play()
         store.commit('hzyb/showAudioPop')
@@ -28,7 +28,12 @@ const handleClickAudio=()=>{
         store.state.hzyb.audioData.INS.pause()
       }
     }else{
-        store.commit('hzyb/addAudio',props.audioData)
+        store.commit('hzyb/addAudio',{list:[{
+          url:props.audioData.video_url,
+          videoTime:props.audioData.video_play_seconds,
+          videoName:props.audioData.video_name,
+          videoImg:props.audioData.video_img
+        }]})
     }
 }
 
@@ -38,7 +43,7 @@ const handleClickAudio=()=>{
 <template>
   <div class="flex audio-wrap">
     <img style="opacity: 0.3" src="@/assets/hzyb/report/audio-pause.png" mode="aspectFill" v-if="!audioData.auth_ok" />
-    <img :src="$store.state.hzyb.audioData.url==audioData.video_url&&!$store.state.hzyb.audioData.paused?audioIconPlay:audioIconPause" @click="handleClickAudio" v-else />
+    <img :src="$store.state.hzyb.audioData.list[$store.state.hzyb.audioData.index]?.url==audioData.video_url&&!$store.state.hzyb.audioData.paused?audioIconPlay:audioIconPause" @click="handleClickAudio" v-else />
     <div style="flex:1;overflow:hidden">
       <div class="van-multi-ellipsis--l2">{{ audioData.video_name }}</div>
       <div style="color: #999999">{{ formatVoiceTime(audioData.video_play_seconds) }}</div>