shcnred/pages/form/donaSuccess.vue

<template>
	<view class="content">
		<view class="box">
			<view class="music" v-if="money*1 < 1000">
				<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>
			</view>
			<canvas v-if="showcanvas" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" />
			<image class="imgbox" v-else :src="img"></image>
		</view>
		<!-- <image class="image" src="../../static/img/thinks.png" mode=""></image> -->
	</view>
</template>

<script>
	import {
		weixindata
	} from '@/utils/wxAuthorized.js';
	export default {
		data() {
			return {
				money: '',
				url: '',
				img: '',
				showcanvas: true,
				loading: true, //是否载入图片中
				size: 180,
				ratio: 1, //页面比例用于计算
				canHeight: '',
				canWeidth: '',
				playing: true,
				current: {
					src: '../../static/audio/xx.mp3'
				},
				rotateIndex: '',
				animation: {},
				animationData: {},
				audioAction: {
					method: 'pause'
				},
				ran: -1,
				isStop: true,
				demo: 0,
				name: '',
				add_time: '',

			};
		},
		onReady() {
			let query = uni.createSelectorQuery();
			let obj = this;
			console.log(999, obj.money);
			// 获取页面比例
			query
				.select('.box')
				.fields({
						size: true
					},
					e => {
						console.log('获取页面比例', e);
						// 保存比例
						this.ratio = e.width / 750;
					}
				)
				.exec();
			// 获取画布宽高信息
			query
				.select('#qrShareBox')
				.fields({
						size: true
					},
					e => {
						console.log('获取画布宽高信息', e);
						obj.canHeight = e.height;
						obj.canWeidth = e.width;
					}
				)
				.exec();
			if (obj.money * 1 >= 1000) {
				let ctxBg = '/static/img/jkzs.jpg'; //画布背景
				let context = uni.createCanvasContext('qrShareBox');
				console.log(context,'context')
				context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
				const codeSize = obj.size * obj.ratio; //计算二维码大小
				const codeX = ((750 - obj.size) * obj.ratio) / 2; //二维码所在x轴位置
				const codeY = 960 * obj.ratio; //二维码所在y轴位置

				const codeBoxColor = '#FFFFFF'; //包裹框颜色
				const codeBoxWidht = 0; //包裹边框宽度
				const codeBoxSize = (codeBoxWidht / 2) * obj.ratio; //计算二维码白色包裹框大小
				const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
				const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
				const codeBoxEnd = codeSize + codeBoxWidht * obj.ratio; //计算包裹框大小
				const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 20) * obj.ratio; //文字距离上边距高度
				const fontSize = 24 * obj.ratio; //文字大小
				const fontText = ''; //文字内容
				const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离
				context.setFillStyle('#000');
				// context.fillText('感谢信', ((750 - obj.size) * obj.ratio) / 2, 260 * obj.ratio)
				context.setFontSize(32 * obj.ratio);
				context.set
				context.fillText(this.name + ' 捐款 ' + (this.money*1) + '元', 80 * obj.ratio, 680 * obj.ratio);
				context.fillText('上海市长宁区红十字会', 365 * obj.ratio, 1010 * obj.ratio);
				context.fillText(obj.add_time, 440 * obj.ratio, 1070 * obj.ratio);
				// 生成
				context.draw(false, e => {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: obj.canWeidth,
						height: obj.canHeight,
						destWidth: obj.canWeidth,
						destHeight: obj.canHeight,
						canvasId: 'qrShareBox',
						success: function(res) {
							console.log(333, res);
							// 在H5平台下，tempFilePath 为 base64
							obj.showcanvas = false;
							obj.img = res.tempFilePath;
						}
					});
				});
			} else {
				let ctxBg = '/static/img/thanks1.png'; //画布背景
				let src = '/static/icon/erweima.jpg'; // 二维码

				let context = uni.createCanvasContext('qrShareBox');
				// 插入背景图片
				console.log('插入背景图片', ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
				context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);

				const codeSize = obj.size * obj.ratio; //计算二维码大小
				const codeX = ((750 - obj.size) * obj.ratio) / 2; //二维码所在x轴位置
				const codeY = 960 * obj.ratio; //二维码所在y轴位置

				const codeBoxColor = '#FFFFFF'; //包裹框颜色
				const codeBoxWidht = 0; //包裹边框宽度
				const codeBoxSize = (codeBoxWidht / 2) * obj.ratio; //计算二维码白色包裹框大小
				const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
				const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
				const codeBoxEnd = codeSize + codeBoxWidht * obj.ratio; //计算包裹框大小
				const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 20) * obj.ratio; //文字距离上边距高度
				const fontSize = 24 * obj.ratio; //文字大小
				const fontText = ''; //文字内容
				const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离

				// // 插入文字
				context.setFontSize(28);
				context.setFillStyle('#d5493b');
				context.fillText('感谢信', ((750 - obj.size) * obj.ratio) / 2, 260 * obj.ratio)
				context.setFontSize(30 * obj.ratio);
				context.fillText('尊敬的' + this.name + ':', 60 * obj.ratio, 350 * obj.ratio);
				context.fillText('衷心感谢您对长宁区红十字事业的信任与支', 120 * obj.ratio, 410 * obj.ratio);
				context.fillText('持！我们已收到您的捐款', 60 * obj.ratio, 465 * obj.ratio);
				// 画横线
				context.moveTo(380 * obj.ratio, 470 * obj.ratio);
				context.lineTo(540 * obj.ratio, 470 * obj.ratio);
				context.stroke();
				context.setTextAlign('center')
				context.fillText('￥' + obj.money, 460 * obj.ratio, 465 * obj.ratio);
				context.setTextAlign('left')
				context.fillText('元。我们承', 540 * obj.ratio, 465 * obj.ratio);
				context.fillText('诺绝不辜负大家的信任，遵照您的意愿，将捐款', 60 * obj.ratio, 520 * obj.ratio);
				context.fillText('全部用于相关救助项目。您的善举将给受助人带', 60 * obj.ratio, 575 * obj.ratio);
				context.fillText('去温暖！', 60 * obj.ratio, 630 * obj.ratio);
				context.fillText('爱心无界，情义无价。谨以此信表达谢意，', 120 * obj.ratio, 680 * obj.ratio);

				context.fillText('我们因您更有力量，因您倍感温暖！', 60 * obj.ratio, 735 * obj.ratio);
				// context.fillText('谨表谢意', (580 * obj.ratio), 680 * obj.ratio)
				// context.setTextAlign('right')
				context.fillText('上海市长宁区红十字会', 385* obj.ratio, 850 * obj.ratio);
				context.fillText(obj.add_time, 455 * obj.ratio, 910 * obj.ratio);
				// 插入二维码
				// console.log(codeX, codeY, codeSize, 999)
				context.drawImage(src, codeX, codeY, codeSize, codeSize);

				// // 生成
				// context.draw(false, e => {
				// 	uni.canvasToTempFilePath({
				// 		x: 0,
				// 		y: 0,
				// 		width: obj.canWeidth,
				// 		height: obj.canHeight,
				// 		destWidth: obj.canWeidth,
				// 		destHeight: obj.canHeight,
				// 		canvasId: 'qrShareBox',
				// 		success: function(res) {
				// 			console.log(333, res);
				// 			// 在H5平台下，tempFilePath 为 base64
				// 			obj.showcanvas = false;
				// 			obj.img = res.tempFilePath;
				// 		}
				// 	});
				// });
				// 生成
				context.draw(false, e => {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: obj.canWeidth,
						height: obj.canHeight,
						destWidth: obj.canWeidth,
						destHeight: obj.canHeight,
						canvasId: 'qrShareBox',
						success: function(res) {
							console.log(333, res);
							// 在H5平台下，tempFilePath 为 base64
							obj.showcanvas = false;
							obj.img = res.tempFilePath;
						}
					});
				});
			}



		},
		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(option) {
			console.log(333, option);
			this.money = option.money;
			this.name = decodeURI(option.name)
			this.add_time = decodeURI(option.time)
			this.IndexShare();
			this.ScanAudio(true);
		},
		onHide() {
			//在页面隐藏时也要清除定时器
			if (this.timer) {
				// console.log('清除定时器-' + this.timer)
				clearInterval(this.timer);
			}
		},
		onUnload() {
			//在页面卸载时清除定时器 避免出现多个定时器连续创建动画
			if (this.timer) {
				console.log('清除定时器-' + this.timer);
				clearInterval(this.timer);
			}
		},
		methods: {
			// 分享
			IndexShare() {
				let obj = this;
				// let money = obj.money;
				let item = {
					link: obj.$store.state.baseURL + '/index/#/pages/form/donaSuccess?money=' + obj.money + '&name=' +
						encodeURI(obj.name) + '&time=' + encodeURI(obj.add_time), // 分享链接
					imgUrl: obj.$store.state.baseURL + '/index/static/img/002.png',
					desc: '弘扬红十字精神，传播红十字观念，宣传红十字工作，这是一个汇聚爱心、救助之家力量的平台！',
					title: '来自长宁区红十字会的感谢信',
					success: console.log('分享加载成功')
				};
				console.log('分享加', item);
				weixindata(item);
			},
			musicClick() {
				// if (this.isRoate) {
				// 	this.isRoate = false
				// 	this.stopScanAudio()
				// } else {
				// 	this.isRoate = true
				// 	this.ScanAudio()
				// }
			},
			play() {
				this.playing = !this.playing;
				this.ScanAudio(this.playing);
				if (this.playing == true) {
					this.timer = setInterval(() => {
						//创建定时器,3秒执行异一次
						this.scaleAndScale();
						console.log('每1秒执行一次');
					}, 1000);
				} else {
					clearInterval(this.timer);
				}
				// 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.rotate(0).step({
					duration: 1000
				});
				this.animationData = this.animation.export();
			}
			// ScanAudio(){
			// 	this.$api.music.play(); //执行播放
			// 				console.log('执行播放')
			// }
		}
	};
</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%;
			}
		}

		.tki-qrcode-canvas {
			width: 750rpx;
			height: 1350rpx;
			margin: 0 auto;
			// background-color: pink;
		}

		.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;
			color: #ffffff;
			width: 100%;
			height: 100vh;
			// background-color: pink;

			.music {
				// width: 55rpx;
				// height: 55rpx;
				border-radius: 28rpx;
				// background-color: pink;
				position: absolute;
				left: 40rpx;
				top: 100rpx;
				z-index: 999;
			}

			// .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;
		}

		.imgbox {
			height: 1350rpx;
			width: 750rpx;
		}
	}

	.image {
		width: 100%;
		height: 100%;
	}
</style>