web-app-v1/pages/certificate/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 {
		mapState
	} from 'vuex';
	import {
		_API_GetUserSignStatus
	} from '@/apis/user.js';
	export default {
		data() {
			return {
				canvasWidth: 0, //canvas 宽
				canvasHeight: 0, //canvas 高
				header: '',
				headerImg: '',
				userServerInfo: ''
			};
		},
		computed: {},
		onShow() {
			this.userServerInfo = uni.getStorageSync('newUserInfo')
		_API_GetUserSignStatus().then(res => {
			if (res.code == 200) {
				if(res.data.time!==""){
					this.userServerInfo.enroll_time = res.data.time
				}else{
					this.userServerInfo.enroll_time = '2024-07-16'
				}
				uni.hideLoading()
				this.initCanvas()
			}
		})
			
		},
		methods: {
			initCanvas(cb) {
				const _this = this
				// this.header = this.userServerInfo.avatar
				// const nickname = uni.getStorageSync('nickName').slice(0,8)
				// const nickname = '柳德湖'
				this.header = this.userServerInfo.avatar
				const nickname = this.userServerInfo.nickname.slice(0, 8)
				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
						})
						// uni.showToast({
						// 	icon: 'none',
						// 	title: '获取用户头像失败',
						// 	duration: 3000
						// })
					},
					complete: () => {
						uni.getImageInfo({
							src: 'https://api.jiuweiyun.cn/public/uploads/icon/new_tzs.png',
							success: res => {
								uni.hideLoading() //停止 loading
								_this.canvasWidth = uni.upx2px(690);
								_this.canvasHeight = uni.upx2px(1100);
								let ctx = uni.createCanvasContext('canvas');
								ctx.drawImage(res.path, 0, 0, uni.upx2px(690), uni.upx2px(1100))
								ctx.save()
								ctx.beginPath()
								ctx.arc(uni.upx2px(342), uni.upx2px(430), uni.upx2px(60), 0, 2 *
									Math.PI, false)
								ctx.clip()
								ctx.drawImage(_this.headerImg, uni.upx2px(282), uni.upx2px(370),
									uni.upx2px(120), uni.upx2px(120))
								ctx.restore()
								ctx.font = 'normal	normal 20px PingFang SC'
								let year = new Date(_this.userServerInfo.enroll_time)
									.getFullYear();
								let month = new Date(_this.userServerInfo.enroll_time).getMonth() +
									1;
								let day = new Date(_this.userServerInfo.enroll_time).getDate();
								ctx.setFillStyle("#333333")
								ctx.textAlign = "left"
								ctx.setFontSize(uni.upx2px(32));
								ctx.fillText(_this.userServerInfo.season, uni.upx2px(200), uni
									.upx2px(678));
								ctx.setFontSize(uni.upx2px(28));
								ctx.fillText(year, uni.upx2px(380), uni.upx2px(918));
								ctx.fillText(month > 10 ? month : `0${month}`, uni.upx2px(478), uni
									.upx2px(918));
								ctx.fillText(day > 10 ? day : `0${day}`, uni.upx2px(535), uni
									.upx2px(918));
								ctx.setFontSize(uni.upx2px(30));
								ctx.setFillStyle("#193669")
								ctx.font = 'normal bold 15px PingFang SC'
								ctx.textAlign = "center"
								ctx.fillText(nickname, uni.upx2px(338), uni.upx2px(560));
								ctx.draw();
							}
						})
					}
				})
			},
			saveImage() {
				this.getCanvas()
			},
			getCanvas() {
				uni.showLoading({
					title: '下载中...'
				});
				uni.canvasToTempFilePath({
					width: uni.upx2px(690),
					height: uni.upx2px(1100),
					canvasId: 'canvas',
					success: function(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								uni.showModal({
									content: '录取通知书保存成功',
									showCancel: false
								});
							},
							fail: err => {
								if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
									uni.showModal({
										title: '提示',
										content: '您好,请先授权，再保存此图片。',
										showCancel: false,
										success: res => {
											if (res.confirm) {
												uni.openSetting({
													success(settingdata) {
														console.log(
															settingdata);
														if (settingdata
															.authSetting[
																'scope.writePhotosAlbum'
															]) {
															uni.showModal({
																content: '请重新长按保存图片',
																showCancel: false
															});
														} else {
															uni.showModal({
																content: '您拒绝了保存到相册权限',
																showCancel: false
															});
														}
													},
													fail: err => {
														uni.showModal({
															content: '手动打开相册权限失败',
															showCancel: false
														});
													}
												});
											}
										}
									});
								} else {
									_this.initCanvas()
								}
							},
							complete() {
								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: 170rpx 30rpx 0rpx 30rpx;
			position: relative;

			.bg {
				width: 690rpx;
				height: 1100rpx;
			}

			#canvas {
				width: 690rpx;
				height: 1100rpx;
				// position: absolute;
				// top: 169rpx;
				// bottom: 0;
				// left: 30rpx;
				// right: 0;
			}
		}
	}

	.save {
		width: 100%;
		text-align: center;
		margin-top: 10rpx;
	}
</style>