tongchengred/pages/applic/donaSuccess.vue

<template>
	<view class="content">
		<view class="bgimg">
			<image src="../../static/img/thanks.png" mode=""></image>
		</view>

		<view class="box">
			<view class="music">
				<view class="player playing" :class="playing?'none':'keepgo'" @click.stop="play">
					<image src="../../static/img/music.png" style="width: 68rpx;height: 68rpx;" :animation="animationData"></image>
					<!-- <view class="">
						<image src="../../static/img/forbid.png" mode="" style="width: 52rpx;height: 52rpx;"></image>
					</view> -->
				</view>
				<!-- <view class="page-section page-section-gap" style="text-align: center;"> -->
					<!-- <audio style="text-align: left" :src="current.src" 
					 :action="audioAction" controls></audio> -->
				<!-- </view> -->
			</view>
			<view class="title">
				感谢信
			</view>
			<view class="main">
				<view class="box-2">
					感谢您积极参与咸宁市红十字会志愿服务各项活动，关爱他人、无私付出，为有需要的人送去温暖，用实际行动诠释了“人道、博爱、奉献”的红十字精神。
				</view>
				<view class="box-2">
					祝您及您的家人新年吉祥!身体健康!万事顺意!
				</view>
			</view>
			<view class="footer" @click="demo">
				<view class="box-1">
					此致
				</view>
				<view class="box-1">
					谨表谢意
				</view>
				<view class="box-1">
					咸宁市红十字会
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				playing: false,
				current: {
					src: '../../static/audio/xx.mp3',
				},
				rotateIndex: '',
				animation: {},
				animationData: {},
				audioAction: {
					method: 'pause'
				},
				ran: -1,
				isStop: true,
				demo: 0
			}
		},
		onShow() {
		var animation = uni.createAnimation()
		            this.animation = animation
		            if (this.isStop) {
		                // 使用动画
		                this.scaleAndScale()
		                this.timer = setInterval(()=>{  //创建定时器,3秒执行异一次
		                    this.scaleAndScale()
		                    console.log('每三秒执行一次 , 达到往复运动的效果')
		                },1000)
		            } else {
		                this.noscaleAndScale()
		            }
		},
		onLoad() {
			console.log(223)
			this.ScanAudio()
			// app.audioMusic.src = '../../static/audio/xx.png';
			// const innerAudioContext = uni.createInnerAudioContext();
			// innerAudioContext.autoplay = true;
			// innerAudioContext.src = '../../static/audio/xx.png';
			// console.log(1123);
			// innerAudioContext.onPlay(() => {
			//   console.log('开始播放');
			// });
			// innerAudioContext.onError((res) => {
			// 	console.log('出错了');
			//   console.log(res);
			//   // console.log(res);
			// });
		},
		 onHide() { //在页面隐藏时也要清除定时器  
			if(this.timer){
							console.log('清除定时器-' + this.timer)
							clearInterval(this.timer)
					}
			},
			onUnload(){ //在页面卸载时清除定时器 避免出现多个定时器连续创建动画
					if(this.timer){
							console.log('清除定时器-' + this.timer)
							clearInterval(this.timer)
					}
			},
		methods: {
			musicClick() {
				// if (this.isRoate) {
				// 	this.isRoate = false
				// 	this.stopScanAudio()
				// } else {
				// 	this.isRoate = true
				// 	this.ScanAudio()
				// }
			},
			play() {
				var music = uni.createInnerAudioContext();
				music.src= "../../static/audio/xx.mp3"; //选择播放的音频
				  music.onPause(); //暂停播放
					console.log('暂停播放')
				// console.log('dianjizanting')
				// this.stopAudio()
				// this.playing = !this.playing; //背景音乐点击，暂停或继续
			},
			// 定义动画内容
			scaleAndScale() {
					// 定义动画内容
					// this.animation.scale(1.2, 1.2).step() //先放大1,2倍
					// this.animation.scale(1, 1).step() //缩小至原来的大小
					// 导出动画数据传递给data层
					// this.animationData = this.animation.export(); //每次执行导出动画时 会覆盖之前的动画
					this.animation.rotate(this.demo).step({
						duration: 1000
					})
					    this.animationData = this.animation.export()
							this.demo += 360;
			},
			noscaleAndScale() {
					this.animation.scale(1, 1).step()
					this.animationData = this.animation.export()
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		// background-color: pink;
		width: 100%;
		height: 100%;
		position: relative;

		.bgimg {
			width: 100%;
			height: 100%;

			// background-color: pink;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.box {
			position: absolute;
			left: 0;
			top: 0;
			// background-color: pink;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #FFFFFF;
			padding: 0rpx 32rpx 0 32rpx;

			.music {
				// width: 55rpx;
				// height: 55rpx;
				border-radius: 28rpx;
				// background-color: pink;
				position: absolute;
				left: 12rpx;
				top: 250rpx;
			}

			.title {
				margin-top: 234rpx;
				font-size: 54rpx;
			}

			.main {
				margin-top: 20rpx;
				font-size: 32rpx;

				.box-2 {
					text-indent: 68rpx;
					margin-top: 12rpx;
				}
			}

			.footer {
				margin-top: 32rpx;
				// background-color: pink;
				width: 100%;

				.box-1 {
					display: flex;
					justify-content: flex-end;
					font-size: 28rpx;
					// padding-right: 14rpx;
				}
			}
		}

		// .playing {
		// 		animation: run 10s linear 0s infinite;
		// 	}

		// .player {

		// 	width: 65rpx;
		// 	height: 65rpx;
		// 	border-radius: 50%;
		// 	background-color: rgba(0, 0, 0, 0.1);
		// 	z-index: 999999;
		// }

		.keepgo {
			animation-play-state: paused;
		}








	}
</style>