hongze_yb_xcx/pages-report/components/audioBox.vue

<template>
    <!-- <view class="pop-audio-box">
        <view class="name">{{title}}</view>
        <view class="flex">
            <text>{{currentTime|formatVoiceTime}}</text>
            <slider
                activeColor="#e3b377"
                :max="audioTime" 
                :value="currentTime" 
                @change="handleAudioSliderChange($event)"
                block-size="16"
                class="slider"
            />
            <text>{{audioTime|formatVoiceTime}}</text>
            <image 
                class="small-img"  
                :src="play?'../static/audio-play.png':'../static/audio-pause.png'" 
                mode="aspectFill" 
                v-if="audioData.list.length==1"
                @click="handleChangePlayStatus"
            />
        </view>
        <view class="btn" v-if="audioData.list.length>1">
            <image 
                :src="audioData.index==0?'../static/audio-change-grey.png':'../static/audio-change.png'" 
                mode="aspectFill" 
                class="aside"
                @click="handleAudioChange('before')"
            />
            <image 
                :src="play?'../static/audio-play.png':'../static/audio-pause.png'" 
                mode="aspectFill" 
                class="center"
                @click="handleChangePlayStatus"
            />
            <image 
                :src="audioData.index==audioData.list.length-1?'../static/audio-change-grey.png':'../static/audio-change.png'" 
                mode="aspectFill" 
                class="aside" 
                style="transform: rotate(180deg)"
                @click="handleAudioChange('next')"
            />
        </view>
    </view> -->
    <view class="pop-audio-wrap">
        <view class="flex small-box" @click="handleOpenBig">
            <image class="bg-img" :src="img" mode="aspectFill" />
            <view class="flex con">
                <view style="flex:1;overflow: hidden;">
                    <view class="van-ellipsis name">{{title}}</view>
                    <view class="time">时长 {{audioTime|formatVoiceTime}}</view>
                </view>
                <image 
                    class="pause-img"  
                    :src="play?'../static/audio-play.png':'../static/audio-pause.png'" 
                    mode="aspectFill"
                    @click.stop="handleChangePlayStatus"
                />
                <van-icon @click.stop="handleClosePopAudio" name="cross" size="18" color="#BBC3C9" />
            </view>
            <van-progress 
                color="#D4AC78" 
                track-color="#fff"
                :show-pivot="false" 
                stroke-width="2px" 
                custom-class="bot-progress" 
                :percentage="percentage" 
            />
        </view>
        <view class="big-box" v-if="showBig">
            <van-icon class="big-arrow-down" name="arrow-down" size="18" color="#BBC3C9" @click="showBig=false" />
            <van-icon class="big-cross" @click.stop="handleClosePopAudio" name="cross" size="18" color="#BBC3C9"/>
            <view class="name">{{title}}</view>
            <view class="flex center-box">
                <text>{{currentTime|formatVoiceTime}}</text>
                <slider
                    activeColor="#e3b377"
                    :max="audioTime" 
                    :value="currentTime" 
                    @change="handleAudioSliderChange($event)"
                    block-size="16"
                    class="slider"
                />
                <text>{{audioTime|formatVoiceTime}}</text>
            </view>
            <view class="btn">
                <image 
                    :src="audioData.index==0?'../static/audio-change-grey.png':'../static/audio-change.png'" 
                    mode="aspectFill" 
                    class="aside"
                    @click="handleAudioChange('before')"
                />
                <image 
                    :src="play?'../static/audio-play.png':'../static/audio-pause.png'" 
                    mode="aspectFill" 
                    class="center"
                    @click="handleChangePlayStatus"
                />
                <image 
                    :src="audioData.index==audioData.list.length-1?'../static/audio-change-grey.png':'../static/audio-change.png'" 
                    mode="aspectFill" 
                    class="aside" 
                    style="transform: rotate(180deg)"
                    @click="handleAudioChange('next')"
                />
            </view>
        </view>
    </view>
</template>

<script>
export default {
    computed: {
        audioData(){
            return this.$store.state.report.audioData
        },
        percentage(){
            return parseInt((this.currentTime/this.audioTime)*100)
        }
    },
    watch: {
        'audioData.reportId':{
            handler(nval,oval){
                console.log('音频的报告id：',nval,oval);
                this.init()
            },
            immediate:true
        }
    },
    data () {
        return {
            title:'',
            img:'',
            audioTime:0,
            currentTime:0,
            play:false,

            showBig:false
        }
    },
    methods: {
        init(type){
            let curAudio=this.$store.state.report.audioData.list[this.$store.state.report.audioData.index]
            if(this.globalBgMusic.src!=curAudio.video_url){
                this.globalBgMusic.src=curAudio.video_url
                this.globalBgMusic.title=curAudio.video_name
            }
            
            this.title=curAudio.video_name
            this.img=curAudio.video_img
            this.audioTime=curAudio.video_play_seconds
            this.currentTime=parseInt(this.globalBgMusic.currentTime)
            this.play=!this.globalBgMusic.paused
            this.handleAudioFun()
        },

        // 音频事件
        handleAudioFun(){
            this.globalBgMusic.onPlay(()=>{
                this.play=true
                this.$store.commit('updateAudioPause',false)
            })
            this.globalBgMusic.onPause(()=>{
                this.play=false
                this.$store.commit('updateAudioPause',true)
            })
            this.globalBgMusic.onStop(()=>{
                this.$store.commit('removeAudio')
            })
            this.globalBgMusic.onEnded(()=>{
                console.log('onEnded');
                // this.play=false
                let index=this.$store.state.report.audioData.index
                if(index==this.$store.state.report.audioData.list.length-1){
                    this.$store.commit('removeAudio')
                }else{
                    this.handleAudioChange('next')
                }
            })
            this.globalBgMusic.onError((e)=>{
                console.log('onError',e);
                uni.showToast({
                    title: '音频播放错误',
                    icon: 'none'
                })
            })
            this.globalBgMusic.onTimeUpdate(()=>{
                // console.log('时间更新');
                this.currentTime=parseInt(this.globalBgMusic.currentTime)
            })
        },

        //音频点击暂停播放
        handleChangePlayStatus(){
            if(this.play){
                this.globalBgMusic.pause()
            }else{
                this.globalBgMusic.play()
            }
        },

        //音频切换
        handleAudioChange(type){
            let temIndex=this.$store.state.report.audioData.index
            if(type=='before'){
                if(temIndex>0){
                    let index=temIndex-1
                    this.$store.commit('updateAudioIndex', index)
                    this.init()
                }
            }else{
                if(temIndex<this.$store.state.report.audioData.list.length-1){
                    let index=temIndex+1
                    this.$store.commit('updateAudioIndex', index)
                    this.init()
                }
            }
        },

        //拖动进度条
        handleAudioSliderChange(e){
            const value=e.detail.value
            this.globalBgMusic.seek(value)
        },

        //关闭弹窗
        handleClosePopAudio(){
            this.globalBgMusic.stop()
        },

        //点击展开
        handleOpenBig(){
            this.showBig=true
        }
    }
}
</script>


<style>
.bot-progress{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.big-arrow-down{
    position: absolute;
    left: 25rpx;
    top: 25rpx;
}
.big-cross{
    position: absolute;
    top: 25rpx;
    right: 25rpx;
}
</style>
<style lang="scss" scoped>
.pop-audio-wrap{
    .small-box{
        position: fixed;
        z-index: 99;
        height: 120rpx;
        left: 50%;
        width: calc(100vw - 40rpx);
        bottom: 67rpx;
        transform: translateX(-50%);
        background: #FFFFFF;
        box-shadow: 0px 0px 40rpx 1px rgba(50,35,17,0.25);
        border: 1px solid #E4E4E4;
        overflow: hidden;
        .bg-img{
            width: 90rpx;
            height: 100%;
            // background-color: #ccc;
            flex-shrink: 0;
            margin-right: 20rpx;
        }
        .con{
            flex: 1;
            padding-right: 40rpx;
            overflow: hidden;
            align-items: center;
            .name{
                font-size: 28rpx;
                margin-bottom: 11rpx;
            }
            .time{
                font-size: 24rpx;
                color: #666;
            }
            .pause-img{
                width: 60rpx;
                height: 60rpx;
                flex-shrink: 0;
                margin-right: 44rpx;
            }
        }
    }
    .big-box{
        position: fixed;
        z-index: 100;
        left: 50%;
        width: calc(100vw - 40rpx);
        bottom: 67rpx;
        transform: translateX(-50%);
        background: #FFFFFF;
        box-shadow: 0px 0px 33rpx 1px rgba(50,35,17,0.25);
        border: 1px solid #E4E4E4;
        overflow: hidden;
        padding: 25rpx;
        .name{
            padding: 0 35rpx;
            font-size: 23rpx;
            text-align: center;
            margin-bottom: 20rpx;
        }
        .center-box{
            align-items: center;
            text{
                flex-shrink: 0;
                font-size: 20rpx;
                color: #666;
            }
            .slider{
                flex: 1;
                margin: 0 20rpx;
            }
        }
        .btn{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20rpx;
            image{
                display: block;
            }
            .aside{
                width: 49rpx;
                height: 49rpx;
            }
            .center{
                width: 49rpx;
                height: 49rpx;
                margin: 0 49rpx;
            }
        }
    }
}

.pop-audio-box{
    position: fixed;
    width: 90vw;
    min-height: 50rpx;
    left: 5vw;
    bottom: 30rpx;
    z-index: 99;
    background-color: #fff;
    border: 2px solid rgba(240, 234, 226, 0.32);
    border-radius: 8rpx;
    padding: 10rpx 15rpx;
    .name{
        text-align: center;
        font-size: 24rpx;
    }
    .flex{
        align-items: center;
        text{
            flex-shrink: 0;
            font-size: 20rpx;
        }
        .slider{
            flex: 1;
            margin: 0 20rpx;
        }
        .small-img{
            width: 36rpx;
            height: 36rpx;
            display: block;
            margin-left: 10rpx;
            flex-shrink: 0;
        }
    }
    .btn{
        display: flex;
        justify-content: center;
        align-items: center;
        image{
            display: block;
        }
        .aside{
            width: 36rpx;
            height: 36rpx;
        }
        .center{
            width: 44rpx;
            height: 44rpx;
            margin: 0 20rpx;
        }
    }
}
</style>