ydd-quyuan-minapp/pages/zhongduxiu/zhongduxiu.vue

<template>
	<view class="container">
		<view class="changeAudio" :class="[audioState?'changeAudioPlay':'']" @click="changeAudio">
			<image :src="audioImgA" v-show="audioState" mode="aspectFit"></image>
			<image :src="audioImgB" v-show="!audioState" mode="aspectFit"></image>
		</view>
		<view class="h5box">
			<web-view :webview-styles="webviewStyles" :src="webUrl"></web-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				audioImgA: "https://dadu.ispush.com/static/zhongduxiu/img/audioOn.png",
				audioImgB: "https://dadu.ispush.com/static/zhongduxiu/img/audioOff.png",
				audioUrl: "",
				webUrl: "https://dadu.ispush.com/api/getHtml",
				audioState: false,
				innerAudioContext: ""
			}
		},
		methods: {
			createAudio() {
				this.innerAudioContext = uni.createInnerAudioContext()
				this.innerAudioContext.autoplay = true
				this.innerAudioContext.loop = true
				this.innerAudioContext.src = `${this.$g.baseUrl}/static/zhongduxiu/audio/audio.mp3`
			},
			changeAudio() {
				if (this.audioState) {
					this.innerAudioContext.pause()
				} else {
					this.innerAudioContext.play()
				}
				this.audioState = !this.audioState
			},
		},
		created() {
			this.createAudio()
		},
		onHide() {
			this.audioState = false
			this.innerAudioContext.pause()
			clearInterval(this.T)
		},
		onShow(){
			if (this.innerAudioContext) {
				this.audioState = true
				this.innerAudioContext.play()
			}
		}
		
	}
</script>

<style scoped>
	.conatiner {
		position: relative;
		width: 100vw;
		height: 100vh;
	}

	.container .changeAudio {
		position: absolute;
		right: 45rpx;
		top: 105rpx;
		width: 47rpx;
		height: 47rpx;
	}
	.container .changeAudio image {
		width: 100%;
		height: 100%;
	}

	.container .changeAudioPlay {
		animation: 1s changeAudioAnime linear infinite; 
	}

	@keyframes changeAudioAnime {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
	.container .h5box{
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		
	}
</style>