hongze_yb_xcx/pages-report/reportBgAudio.vue

<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>