报告详情页增加跳转背景音频播放报告功能

components/audioBox/audioBox.vue

@@ -124,6 +124,7 @@ export default {
                     this.handleUpdateAudioPlayTime()
                     this.globalBgMusic.src=curAudio.url 
                     this.globalBgMusic.title=curAudio.title
+                    this.globalBgMusic.startTime=this.$store.state.audio.startTime
                 }
                 this.audioTime=curAudio.time
                 this.title=curAudio.title

pages-report/reportBgAudio.vue

@@ -0,0 +1,193 @@
+<template>
+    <view class="report-bg-audio-page">
+        <view class="title">{{title}}</view>
+        <view class="time">发布时间：{{PublishTime|formatTime}}</view>
+        <view class="flex audio-box">
+            <image 
+                :src="reportId==curAudioReportId&&!curAudioPaused?require('@/static/voice/playing.png'):require('@/static/voice/pause.png')" 
+                mode="aspectFill" 
+                @click="handlePlayAudio" 
+            />
+            <slider
+                activeColor="#E6B77D"
+                :max="duration" 
+                :value="curTime" 
+                @change="handleAudioSliderChange($event)"
+                block-size="12"
+                class="slider"
+            />
+            <text class="left-time">{{curTime|formatVoiceTime}}</text>
+            <text class="right-time">{{duration|formatVoiceTime}}</text>
+        </view>
+        <view v-show="false"><audioBox v-if="showAudioPop"/></view>
+    </view>
+    
+      
+</template>
+
+<script>
+const dayjs=require('@/utils/dayjs.min')
+import audioBox from '@/components/audioBox/audioBox.vue'
+import {apiReportDetail,apiChapterDetail} from '@/api/report'
+export default {
+    components:{
+        audioBox,
+    },
+    computed:{
+        showAudioPop(){//是否显示音频弹窗
+            return this.$store.state.audio.show
+        },
+        curAudioReportId(){//当前正在播放的音频id
+            return this.$store.state.audio.reportId
+        },
+        curAudioPaused(){//当前音频是否暂停状态
+            return this.$store.state.audio.paused
+        },
+        curTime(){
+            let t=0
+            if(this.reportId==this.$store.state.audio.reportId){
+                t=this.$store.state.audio.curTime
+            }
+            return t
+        }
+    },
+    filters:{
+        formatTime(e){
+            return dayjs(e).format('YYYY-MM-DD HH:mm:ss')
+        },
+        formatVoiceTime(e){
+            let m=parseInt(e/60)
+            let s=parseInt(e%60)
+            return `${m>9?m:'0'+m}:${s>9?s:'0'+s}`
+        }
+    },
+    data() {
+        return {
+            reportId:'',
+            title:'',
+            PublishTime:'',
+            audioData:{},
+            duration:0,
+        }
+    },
+    onLoad(options){
+        this.init(options)
+    },
+    methods: {
+        async init(options){
+            this.reportId=options.reportId||0
+            const res=options.chapterId!='0'?await apiChapterDetail({report_chapter_id:Number(options.chapterId)}):await apiReportDetail({report_id:Number(options.reportId)})
+            if(res.code===200){
+                this.PublishTime=options.chapterId!='0'?res.data.report_chapter_item.publish_time:res.data.report_info.publish_time
+                if(options.chapterId=='0'){
+                    const time=dayjs(res.data.report_info.publish_time).format('MMDD')
+                    if(res.data.report_info.classify_name_second==res.data.report_info.title){
+                        this.title=`【第${res.data.report_info.stage}期】${res.data.report_info.title}（${time}）`
+                    }else{
+                        this.title=`【第${res.data.report_info.stage}期｜${res.data.report_info.classify_name_second}】${res.data.report_info.title}（${time}）`
+                    }
+                    this.audioData={
+                        video_name:res.data.report_info.video_name,
+                        video_play_seconds:res.data.report_info.video_play_seconds,
+                        video_url:res.data.report_info.video_url,
+                        video_img:res.data.report_info.video_img
+                    }
+                }else{
+                    this.audioData={
+                        video_name:res.data.report_chapter_item.video_name,
+                        video_play_seconds:res.data.report_chapter_item.video_play_seconds,
+                        video_url:res.data.report_chapter_item.video_url,
+                        video_img:res.data.report_chapter_item.video_img
+                    }
+                    this.title=`【第${res.data.report_chapter_item.stage}期 | ${res.data.report_chapter_item.classify_name_first} | ${res.data.report_chapter_item.type_name}】${res.data.report_chapter_item.title}（${dayjs(res.data.report_chapter_item.publish_time).format('MMDD')}）`
+                }
+                this.duration=this.audioData.video_play_seconds
+                const startTime=parseInt(options.ctime)||0
+                this.handlePlayAudio(startTime)
+            }
+        },
+
+        //点击播放\暂停音频
+        handlePlayAudio(startTime){
+            if(this.$store.state.audio.reportId==this.reportId){
+                if(this.globalBgMusic.paused){
+                    this.globalBgMusic.play()
+                }else{
+                    this.globalBgMusic.pause()
+                }
+            }else{
+                const list=[{url:this.audioData.video_url,time:this.audioData.video_play_seconds,title:this.audioData.video_name,}]
+                this.$store.commit('audio/addAudio',{
+                    list:list,
+                    reportId:this.reportId,
+                    startTime:startTime||0
+                })
+            }
+        },
+
+        //拖动音频播放进度条
+        handleAudioSliderChange(e){
+            const value=e.detail.value
+            this.globalBgMusic.seek(value)
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+    .report-bg-audio-page{
+        padding: 50rpx 34rpx;
+        .section-name{
+            background: #FDF8F2;
+            border-radius: 8rpx;
+            border: 1px solid #E3B377;
+            display: inline-block;
+            padding: 19rpx 27rpx;
+            margin-bottom: 40rpx;
+        }
+        .title{
+            font-size: 36rpx;
+            line-height: 50rpx;
+            margin-bottom: 20rpx;
+            font-weight: 500;
+        }
+        .time{
+            color: #999;
+            font-size: 28rpx;
+            line-height: 33rpx;
+        }
+        .audio-box{
+            background-color: #FDF8F2;
+            height: 123rpx;
+            align-items: center;
+            margin-top: 50rpx;
+            margin-bottom: 40rpx;
+            padding: 0 30rpx;
+            position: relative;
+            .left-time{
+                position: absolute;
+                bottom: 20rpx;
+                left: 100rpx;
+                color: #999999;
+                font-size: 20rpx;
+            }
+            .right-time{
+                position: absolute;
+                bottom: 20rpx;
+                right: 40rpx;
+                color: #999999;
+                font-size: 20rpx;
+            }
+            image{
+                width: 40rpx;
+                height: 48rpx;
+                flex-shrink: 0;
+                margin-right: 30rpx;
+            }
+            .slider{
+                flex: 1;
+                margin: 0 10rpx;
+            }
+        }
+    }
+</style>

pages.json

@@ -273,6 +273,10 @@
 					"style":{
 						"enablePullDownRefresh": true
 					}
+				},
+				//报告详情背景音频播放页
+				{
+					"path": "reportBgAudio"
 				}
 			]
 		},

store/modules/audio.js

@@ -13,6 +13,7 @@ const audioModules={
         curTime:0,//当前正在播放的音频播放的时间
         recordId:0,//播放记录id
         lastType:0,//上次播放的是那种的音频，用于更新媒体播放记录时长中的source
+        startTime:0,//音频开始播放时间
     },
     mutations: {
         addAudio(state,e){
@@ -22,6 +23,7 @@ const audioModules={
             state.reportId=e.reportId||0
             state.voiceId=e.voiceId||0
             state.questionId=e.questionId||0
+            state.startTime=e.startTime||0
         },
         updateAudioIndex(state,e){
             state.index=e