web-app-v1/pages/payment/notice.vue

<template>
	<view class="notice">
		<!-- <custom-nav title="录取通知书"></custom-nav> -->
		<view class="canvas_container content">
			<!-- <image src="https://api.jiuweiyun.cn/public/uploads/icon/new_tzs.png" mode="" class="bg"></image> -->
			<canvas id="canvas" canvas-id="canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"  />
		</view>
		<!-- <view class="save">（长按保存图片）</view> -->
	</view>
</template>

<script>
import { userInfo } from 'os';
import { mapState } from 'vuex';
import userinfo from '../../store/modules/userinfo';
import {
		_API_payment,
		_API_SearchStatus,
		GetEnrollInfo_online
	} from '@/apis/szy.js';
export default {
	data() {
		return {
			canvasWidth: 0, //canvas 宽
			canvasHeight: 0, //canvas 高
			header: '',
			headerImg: '',
			Image: '../../static/zbs/online71.jpg',
			status: 0
		};
	},
	computed: {
		...mapState(['userServerInfo'])
		// userServerInfo() {
		// 	return this.$store.state.userServerInfo
		// }
	},
	onShow() {
		this.initCanvas()
	},
	methods: {
		initCanvas(cb) {
			GetEnrollInfo_online().then(res => {
				// uni.hideLoading()
				if (res.code != 200) {
					uni.showModal({
						title: '提示',
						content: '检测到您还未报名',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
								    url: '/pages/payment/payment'
								  });
							}
						}
					})
					return
				}else{
					if(!res.data.pay_status){
						uni.showModal({
							title: '提示',
							content: '检测到您还未报名',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.reLaunch({
									    url: '/pages/payment/payment'
									  });
								}
							}
						})
						return
					}
				}
				
			})
			
			const user = JSON.parse(uni.getStorageSync('userInfo'))
			
			const _this = this
			this.header = user.avatar
			// const nickname = uni.getStorageSync('nickName').slice(0,8)
			const nicknames = user.nickname
			// const nicknames = '啥的按'
			const nickname = nicknames.slice(0, 5);
			// const time = 1710206047000
			const time = Number(this.$route.query.time)
			// uni.showLoading({
			// 	title: '加载中',
			// 	mask: true
			// })
			uni.downloadFile({
				url: this.header,
				success: ({ statusCode, tempFilePath }) => {
					if (statusCode === 200) {
						this.headerImg = tempFilePath
					}
				},
				fail:(e) => {
					uni.showModal({
						content: JSON.stringify(e),
						showCancel: false
					})
				},
				complete: () => {
					// uni.getImageInfo({
					// 	src: this.Image,
					// 	success: res => {
							
					// 	}
					// })
					console.log(this.Image)
					uni.showLoading()  //停止 loading
					_this.canvasWidth = uni.upx2px(690);
					_this.canvasHeight = uni.upx2px(1227);
					let ctx = uni.createCanvasContext('canvas');
					ctx.drawImage(this.Image, 0, 0, uni.upx2px(690), uni.upx2px(1227))
					ctx.save()
					ctx.beginPath()
					ctx.arc(uni.upx2px(353), uni.upx2px(574), uni.upx2px(150), 0, 2 * Math.PI, false)
					ctx.clip()
					ctx.drawImage(_this.headerImg, uni.upx2px(203), uni.upx2px(424), uni.upx2px(300), uni.upx2px(300))
					ctx.restore()
					ctx.setFontSize(uni.upx2px(120));
					ctx.setFillStyle("#0E2D84")
					ctx.font = 'normal bold 30px PingFang SC'
					ctx.textAlign = "center"
					ctx.fillText(nickname, uni.upx2px(350), uni.upx2px(782));
					ctx.draw();
					uni.hideLoading()
				}
			})
		}
	}
};
</script>

<style scoped lang="scss">
.notice {
	// @include page();
	width: 100%;
	height: 100%;
	min-height: 100%;
	// display: flex;
	// justify-content: space-between;
	// flex-direction: column;
	background-color: #ededed;
	.canvas_container {
		// flex: 1;
		padding: 50rpx 30rpx 0rpx 30rpx;
		position: relative;
		.bg {
			width: 690rpx;
			height: 1227rpx;
		}
		#canvas {
			width: 690rpx;
			height: 1227rpx;
			// position: absolute;
			// top: 169rpx;
			// bottom: 0;
			// left: 30rpx;
			// right: 0;
		}
	}
}
.save {
	width: 100%;
	text-align: center;
	margin-top:10rpx;
}
</style>