<template> <view class="container global-audio-box" v-if="showAudioPop"> <view class="bg-overlay" @click="isShowMaskHandler"></view> <view class="audio-box"> <view class="activity-title text_oneLine"> {{ activityTitle }} <view class="icon-cross" @click.stop="isShowMaskHandler"> <van-icon name="cross" font-size="32" /> </view> </view> <view class="audio-card"> <view class="card-title text_oneLine"> {{ title }} </view> <slider activeColor="#3385FF" :max="audioTime" :value="curTime" @change="handleAudioSliderChange($event)" block-size="16" class="slider" /> <view class="card-time"> <text class="time">{{ curTime | formatVoiceTime }}</text> <text class="time">{{ audioTime | formatVoiceTime }}</text> </view> <view class="is-paly-card"> <image @click.stop="handleChangePlayStatus" class="" :src="play ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/suspend_icon.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/play_icon.png'" ></image> </view> </view> </view> </view> <!-- </van-overlay> --> </template> <script> import { activity } from "@/config/api"; export default { name: "", filters: { formatVoiceTime(e) { let m = parseInt(e / 60); let s = parseInt(e % 60); return `${m > 9 ? m : "0" + m}:${s > 9 ? s : "0" + s}`; }, }, components: {}, props: { showAudioPop: { type: Boolean, default: false, required: true, }, }, data() { return { curTime: 0, audioTime: 0, //当前音频总时长 title: "", //当前音频标题 activityTitle: "", //当前活动标题 play: false, }; }, computed: { audioInit() { return { activityId: this.$store.state.audioBg.activityId, }; }, }, watch: { audioInit: { handler(nval) { this.init(); }, immediate: true, }, }, created() {}, mounted() { this.init(); }, methods: { //点击隐藏事件 isShowMaskHandler() { this.$emit("update:showAudioPop", false); }, //数据初次加载 init() { const curAudio = this.$store.state.audioBg.list; if (this.globalBgAudioManager.src != curAudio.Url) { this.globalBgAudioManager.src = curAudio.Url; this.globalBgAudioManager.title = curAudio.Name; } this.audioTime = curAudio.PlaySeconds; this.title = curAudio.Name; this.activityTitle = this.$store.state.audioBg.activityTitle; this.curTime = parseInt(this.globalBgAudioManager.currentTime); this.play = !this.globalBgAudioManager.paused; this.listenAudio(); }, //音频播放事件 listenAudio() { this.globalBgAudioManager.onPlay(async () => { this.play = true; this.$store.commit("audioBg/updateAudioPause", false); const res = await activity.backAudioPlay({ ActivityId: this.$store.state.audioBg.activityId, }); }); this.globalBgAudioManager.onPause(() => { console.log("音频暂停"); this.play = false; this.$store.commit("audioBg/updateAudioPause", true); }); this.globalBgAudioManager.onStop(() => { console.log("音频停止"); this.$store.commit("audioBg/removeAudio"); }); this.globalBgAudioManager.onEnded(() => { console.log("音频onEnded"); this.$store.commit("audioBg/removeAudio"); }); this.globalBgAudioManager.onError((e) => { console.log("音频onError", e); this.$store.commit("audioBg/removeAudio"); uni.showToast({ title: "音频播放错误", icon: "none", }); }); //音频的播放时间更新 this.globalBgAudioManager.onTimeUpdate(() => { this.curTime = parseInt(this.globalBgAudioManager.currentTime); this.$store.commit("audioBg/updateAudioTime", this.curTime); }); }, //拖动进度条 handleAudioSliderChange(e) { const value = e.detail.value; this.globalBgAudioManager.seek(value); }, //音频点击暂停播放 handleChangePlayStatus() { if (!this.globalBgAudioManager.paused) { this.globalBgAudioManager.pause(); } else { this.globalBgAudioManager.play(); } }, }, }; </script> <style scoped lang="scss"> .global-audio-box { display: flex; height: 100%; position: fixed; width: 100%; top: 0; left: 0; z-index: 11; .bg-overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); } .activity-title { position: relative; width: 100%; font-size: 30rpx; font-weight: 500; margin-bottom: 35rpx; text-align: center; padding-right: 30rpx; .icon-cross { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 10rpx; } } .audio-box { position: absolute; bottom: 0; left: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); width: 100%; height: 460rpx; background: #ffffff; padding: 30rpx; box-sizing: border-box; border-radius: 30rpx 30rpx 0 0; } .audio-card { width: 100%; height: 282rpx; background: #f5f9ff; border-radius: 16rpx; margin: 0 auto; padding: 30rpx; .slider { width: 100%; margin: 0; } .card-title { color: #3385ff; font-size: 26rpx; padding: 0 66rpx; text-align: center; margin-bottom: 35rpx; } .card-time { display: flex; justify-content: space-between; color: #999999; font-size: 20rpx; } .is-paly-card { width: 100%; text-align: center; image { margin-top: 5rpx; width: 100rpx; height: 100rpx; } } } } </style>