store-new/pagesA/pages/pay-suce/pay-suce.vue

<template>
	<view class="pay_suce">
		<image src="../../static/logo.jpg" class="logo"></image>
		<!-- 显示奖学金 -->
		<!-- 		<view class="no_inte" v-if="posterShow">
					<image src="../../../static/imgs/shop/change_suce.png" mode=""></image>
					<view class="suce">支付成功</view>
					<view class="sub_btn" @click="skipPage(1)">查看订单详情</view>
				</view>
				<view v-else>
					<view class="suce_con">
						<image src="../../static/inte_bg.jpg" class="inte_bg"></image>
						<view class="inte_box flexB">
							<view class="inte">+{{inte}}</view>
							<view class="inte_intr">
								<view>奖</view>
								<view>学</view>
								<view>金</view>
							</view>
						</view>
					</view>
					<view class="suce_btn flexB">
						<view class="flexC" @click="skipPage(0)">查看奖学金详情</view>
						<view class="flexC" @click="skipPage(1)">查看订单详情</view>
					</view>
				</view> -->
		<!-- 隐藏奖学金 -->
		<view class="no_inte">
			<image src="../../../static/imgs/shop/change_suce.png" mode=""></image>
			<view class="suce">支付成功</view>
			<view class="sub_btn" @click="skipPage(1)" style="margin-top:80rpx;">查看订单详情</view>
		</view>



		<view class="poster" v-if="posterShow">
			<view class="poster_con flexCC">
				<text class="iconfont iconguanbi" @click="posterShow = false"></text>
				<view class="canvas" @click="preview">
					<canvas canvas-id="canvas" id="canvas"></canvas>
					<image :src="poster" class="poster_img"></image>
				</view>
				<view class="save_img">点击图片-长按-发送给朋友</view>
				<view class="sub_btn" @click="skipApplets()">点击进入争霸赛小程序</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getZbsData
	} from '../../../apis/shop.js'
	export default {
		data() {
			return {
				inte: 0,
				order_no: '',
				gotScore: 100,
				riseNumber: 10,
				posterShow: false,
				poster: '',
				store: '',
				canvasWidth: '',
				canvasHeight: '',
				scoreData: '', //分数排名信息
				model: '', //手机型号
			}
		},
		onLoad(ops) {
			this.store = uni.getStorageSync('store')
			this.order_no = ops.order_no;
			this.inte = ops.inte
			this.getData();
			wx.getSystemInfo({
				success: res => {
					this.model = res.model;
					this.canvasWidth = res.windowWidth / 375;
					this.canvasHeight = res.windowHeight;
				}
			});

		},
		methods: {
			//放大图片
			preview() {
				uni.previewImage({
					current: this.poster,
					urls: [this.poster]
				});
			},
			getData() {
				getZbsData({
					order_no: this.order_no,
				}).then(res => {
					if (res.code == 200) {
						this.scoreData = res.data;
						const {
							type
						} = res.data;
						if (type == 1) {
							uni.getImageInfo({
								src: this.store.img,
								success: res => {
									this.posterShow = true
									this.drawPoster(res.path)
								}
							})
						}
					}
				})
			},
			//进入争霸赛小程序
			skipApplets() {
				uni.navigateToMiniProgram({
					appId: 'wx0348d5a266f867a3',
					path: 'pages/index/index',
					extraData: {
						'data1': 'test'
					},
					success(res) {
						console.log('打开成功')
					}
				})
			},
			//跳转页面
			skipPage(type) {
				let url = type == 0 ? '../integral-detail/integral-detail' :
					'../../../pages/order-info/order-info?order_no=' + this
					.order_no
				uni.redirectTo({
					url
				})
			},
			dataURLtoFile(dataurl, filename = 'file') {
				let arr = dataurl.split(',');
				let mime = arr[0].match(/:(.*?);/)[1];
				let suffix = mime.split('/')[1];
				let bstr = atob(arr[1]);
				let n = bstr.length;
				let u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], `${filename}.${suffix}`, {
					type: mime
				});
			},
			///绘制海报
			drawPoster(avatar) {
				let _this = this;
				uni.getImageInfo({
					src: 'https://api.jiuweiyun.cn/public/uploads/icon/poster_new.png',
					success: res => {
						uni.showLoading({
							title: '图片加载中...'
						});
						const {
							score,
							ranking
						} = _this.scoreData;
						console.log(this.scoreData, 'data')
						let ctx = uni.createCanvasContext('canvas');
						let rpx = _this.canvasWidth;
						ctx.drawImage(res.path, 0, 0, 270 * rpx, 450 * rpx);

						// 积分
						ctx.font = 'italic bold 28px Microsoft YaHei';
						ctx.setFillStyle('#fff');
						ctx.textAlign = 'center';
						ctx.fillText(score, uni.upx2px(250), uni.upx2px(432));

						//排名
						ctx.font = 'italic bold 18px 微软雅黑';
						ctx.setFillStyle('#fff');
						ctx.textAlign = 'center';
						ctx.fillText(ranking, uni.upx2px(270), uni.upx2px(467));

						//昵称
						ctx.beginPath(); //开始一个新的路径
						ctx.setLineWidth(2); //设置线条的宽度
						ctx.setStrokeStyle('#EF0A16'); //设置线条的样式
						ctx.setFillStyle('#EF0A16'); //设置填充的样式s
						ctx.font = 'noraml bold 18px 微软雅黑';
						ctx.textAlign = 'center';
						// ctx.fillText(, uni.upx2px(270), uni.upx2px(360));
						ctx.fillText(this.store.name, uni.upx2px(270), uni.upx2px(360));
						ctx.moveTo(uni.upx2px(175), uni.upx2px(375)); //设置线条的起始路径坐标
						ctx.lineTo(uni.upx2px(365), uni.upx2px(375)); //设置线条的终点路径坐标
						ctx.stroke(); //对当前路径进行描边
						ctx.closePath(); //关闭当前路径

						ctx.beginPath();
						ctx.arc((55 * rpx) / 2 + 110 * rpx, (55 * rpx) / 2 + 104 * rpx, (55 * rpx) / 2, 0, Math
							.PI * 2,
							false); // 画一个圆形裁剪区域
						ctx.clip(); // 裁剪
						ctx.drawImage(avatar, 110 * rpx, 104 * rpx, 55 * rpx, 55 * rpx);
						ctx.restore(); //恢复之前保存的绘图上下文

						setTimeout(res => {
							ctx.draw(false, () => {
								uni.canvasToTempFilePath({
									width: 270 * rpx,
									height: 450 * rpx,
									canvasId: 'canvas',
									success: res => {
										uni.hideLoading();
										if (this.model == 'iPhone') {
											this.poster = this.dataURLtoFile(res
												.tempFilePath).name;
										} else {
											let url = res.tempFilePath.replace(
												/\. +/g, '');
											this.poster = url.replace(/[\r\n]/g,
												'');
										}
									}
								});
							});
							uni.hideLoading();
						}, 1000);
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	.pay_suce {
		width: 690rpx;
		margin: 0 auto;
		text-align: center;
	}

	.logo {
		width: 522rpx;
		height: 82rpx;
		margin: 30rpx 0;
	}

	.suce_con {
		position: relative;
		margin: 60rpx 0 110rpx;

		.inte_box {
			width: 418rpx;
			position: absolute;
			top: 26rpx;
			left: 137rpx;

			.inte {
				font-size: 104rpx;
				color: #fff;
				width: 300rpx;
				text-align: center;
			}

			.inte_intr {
				width: 118rpx;
				text-align: center;

				view {
					font-size: 44rpx;
					color: #fff;
				}
			}
		}

		.inte_bg {
			width: 418rpx;
			height: 222rpx;
		}
	}

	.suce_btn {
		width: 690rpx;
		margin: 50rpx auto 60rpx;

		view {
			width: 300rpx;
			height: 88rpx;
			border-radius: 44px;
			font-size: 32rpx;
		}

		view:first-child {
			background: #FFF4F3;
			color: $base-color;
			border: 2rpx solid #FB231F;
		}

		view:last-child {
			background: $base-line-bg;
			color: #fff;
		}
	}

	.poster {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999;

		.poster_con {
			width: 90%;
			margin: 0 auto;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.canvas {
				width: 540rpx;
				height: 900rpx;
				position: relative;

				#canvas {
					width: 540rpx;
					height: 900rpx;
					position: absolute;
					top: 0;
					left: 0;
				}

				.poster_img {
					-webkit-touch-callout: default;
					width: 100%;
					height: 100%;
					display: block;
				}

				img[src=''],
				img:not([src]) {
					opacity: 0;
				}
			}

			.iconfont {
				position: absolute;
				top: 2vh;
				right: 25rpx;
				color: #dedede;
				font-size: 60rpx;

				z-index: 999;
			}

			.save_img {
				color: #fff;
				width: 100%;
				text-align: center;
				font-size: 40rpx;
				margin: 20rpx 0;
			}
		}
	}

	.no_inte {
		image {
			width: 212rpx;
			height: 158rpx;
			margin-top: 50rpx;
		}

		.suce {
			font-size: 48rpx;
			font-weight: bold;
			margin: 30rpx 0 40rpx;
		}

		.hint {
			// margin: 40rpx 0 60rpx;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
	}
</style>