weapp-v1/pages/honour/honour.vue

<template>
	<view class="honour" :class="fromIndex ? '' : 'share'">
		<custom-nav :title="pageTitle" v-if="fromIndex"></custom-nav>
		<custom-toast ref="toast"></custom-toast>
		<view class="container">
			<view class="certificate" @tap="previewImage">
				<canvas id="canvas" canvas-id="canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
			</view>
			<view class="share">
				<!-- <button open-type="share" class="item" v-if="fromIndex">
					<image class="icon" src="../../static/icon/share1.png"></image>
					<view>分享好友</view>
				</button> -->
				<view class="item" @tap="saveImg">
					<image class="icon" src="../../static/icon/share2.png"></image>
					<view>保存图片</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { api_getHonourInfo } from '../../api.js';
import * as filters from '../../common/js/filters.js';
export default {
	onShareAppMessage: function(res) {
		//分享荣誉证书
		uni.showLoading({ title: '加载中', mask: true }); //显示loading
		if (res.from === 'button') {
			//如果点击分享给好友按钮，则分享页面为当前页面
			return {
				title: '我的学位证书',
				path: `/pages/honour/honour?name=${this.name}&season=${this.season}&grade=${this.grade}&year=${this.year}&month=${this.month}&day=${
					this.day
				}&header=${encodeURIComponent(this.header)}`
			};
		}
		return {
			//如果点击右上角分享按钮，则分享页面为小程序主页
			title: '大卫博士商学院卖货争霸',
			path: '/pages/index/index'
		};
	},
	data() {
		return {
			pageTitle: '荣耀殿堂', //页面名
			canvasWidth: 0, //canvas 宽
			canvasHeight: 0, //canvas 高
			name: '', //名字
			season: '',
			grade: '', //学位
			year: '', //年
			month: '', //月
			day: '', //日
			fromIndex: true, //是否非分享页面,
			header: '',
			headerImg: '',
			deg: ''
		};
	},
	computed: {
		userServerInfo() {
			return this.$store.state.userServerInfo;
		},
		userWeixinInfo() {
			return this.$store.state.userWeixinInfo;
		}
	},
	methods: {
		saveImg() {
			//保存证书到本地
			uni.canvasToTempFilePath({
				//首先将 canvas 转化为一个图片
				canvasId: 'canvas'
			})
				.then(([, res]) => {
					//获得图片的临时路径
					return uni.saveImageToPhotosAlbum({
						//将图片保存到系统相册
						filePath: res.tempFilePath
					});
				})
				.then(([err, res]) => {
					console.log(err, res);
					if (err && (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg === 'saveImageToPhotosAlbum:fail auth deny')) {
						//如果用户拒绝授权保存图片到相册
						const that = this;
						uni.showModal({
							title: '"大卫博士学位争霸赛"需要保存图片或视频到你的相册',
							content: '',
							success(res) {
								if (res.confirm) {
									wx.openSetting({
										success(res) {
											that.saveImg();
											return;
										}
									});
								}
							}
						});
					} else if (err && err.errMsg === 'saveImageToPhotosAlbum:fail authorize no response') {
						uni.showModal({
							content: '保存图片失败,请手动截图保存',
							showCancel: false
						});
					}
					if (res && res.errMsg === 'saveImageToPhotosAlbum:ok') {
						uni.showModal({
							content: '图片已经保存成功',
							showCancel: false
						});
					}
				});
		},
		previewImage() {
			//点击 canvas 预览图片
			uni.showLoading({ title: '加载中', mask: true }); //显示loading
			uni.canvasToTempFilePath({
				//首先将 canvas 转化为一个图片
				canvasId: 'canvas'
			}).then(([, res]) => {
				//获得图片的临时路径
				uni.hideLoading(); //app hide 时隐藏loading
				uni.previewImage({
					urls: [res.tempFilePath]
				});
			});
		},
		tohishonour() {
			//点击历史荣誉
			uni.navigateTo({
				url: '../hishonour/hishonour'
			});
		}
	},
	async onLoad(opt) {
		//当进入页面之后判断是否带带有参数
		const avatarUrl = this.userServerInfo.avatar
		uni.hideShareMenu();
		opt.time = opt.time || this.userServerInfo.start_time;
		this.header = opt.name ? decodeURIComponent(opt.header) : avatarUrl;
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		let _this = this;
		uni.downloadFile({
			url: this.header,
			success: ({ statusCode, tempFilePath }) => {
				if (statusCode === 200) {
					this.headerImg = tempFilePath;
				}
			},
			fail: e => {
				console.log(e);
				uni.showToast({
					icon: 'none',
					title: '获取用户头像失败',
					duration: 3000
				});
			},
			complete: () => {
				uni.hideLoading(); //停止 loading
				_this.canvasWidth = uni.upx2px(641);
				_this.canvasHeight = uni.upx2px(977);
				_this.fromIndex = opt.name ? false : true; //当前页面为分享页面
				_this.name = opt.name || _this.userServerInfo.name; //姓名
				_this.name = _this.name.slice(0, 6);
				_this.season = opt.season || _this.userServerInfo.season; // 赛季季数
				_this.grade = opt.grade || ''; //学位
				console.log(_this.grade);
				// _this.year = opt.year || filters.getYear(+opt.time) //年
				// _this.month = opt.month || filters.getMonth(+opt.time) //月
				// _this.day = opt.day || filters.getDate(+opt.time) //日
				const ctx = uni.createCanvasContext('canvas');
				ctx.drawImage(_this.grade === '大学毕业' ? '../../static/icon/zs2-min.jpg' : '../../static/icon/zs1-min.jpg', 0, 0, _this.canvasWidth, _this.canvasHeight);
				ctx.save();
				ctx.beginPath();
				ctx.arc(uni.upx2px(320), uni.upx2px(400), uni.upx2px(40), 0, 2 * Math.PI, false);
				ctx.clip();
				ctx.drawImage(_this.headerImg, uni.upx2px(280), uni.upx2px(360), uni.upx2px(80), uni.upx2px(80));
				ctx.restore();
				_this.$drawHonour(ctx, [
					[uni.upx2px(26), _this.grade === '学霸' || _this.grade === '结业' ? '' : _this.grade, uni.upx2px(320), uni.upx2px(555)],
					[uni.upx2px(32), _this.name, uni.upx2px(315), uni.upx2px(495)],
					[uni.upx2px(28), _this.season, uni.upx2px(440), uni.upx2px(595)]
					// [uni.upx2px(24), _this.year, uni.upx2px(160), uni.upx2px(620)],
					// [uni.upx2px(24), this.month, uni.upx2px(245), uni.upx2px(620)],
					// [uni.upx2px(24), _this.day, uni.upx2px(330), uni.upx2px(620)],
					// [uni.upx2px(24), 21, uni.upx2px(458), uni.upx2px(620)]
				]);
				_this.$hideLoading();
			}
		});
	}
};
</script>

<style lang="scss">
.container {
	padding: 36rpx 54rpx;
	.certificate {
		width: 642rpx;
		height: 998rpx;
		.bg {
			width: 100%;
			height: 100%;
		}
	}
	.share {
		padding: 22rpx 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.item {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: none;
			padding: 0;
			margin: 0;
			line-height: 70rpx !important;
			&::after,
			&::before {
				border: none;
			}
			.icon {
				width: 64rpx;
				height: 64rpx;
			}
			color: #333333;
			font-size: 28rpx;
		}
	}
}
.honour {
	@include page();
	&.share {
		border-top-color: #493225;
	}
	.content {
		display: flex;
		flex-direction: column;
		.top {
			width: 100%;
			height: 680rpx;
			background: #493225;
			border-bottom-right-radius: 375rpx 123rpx;
			border-bottom-left-radius: 375rpx 123rpx;
			position: relative;
			&.share {
				height: 890rpx;
			}
			#canvas {
				position: absolute;
				top: 56rpx;
				left: 50%;
				transform: translateX(-50%);
				&.share {
					top: 0;
				}
			}
			.bg {
				position: absolute;
				width: 566rpx;
				height: 464rpx;
				top: 35rpx;
				left: 50%;
				z-index: 1;
				transform: translateX(-50%);
			}
			.all {
				position: absolute;
				right: 32rpx;
				bottom: -13rpx;
				font-size: 26rpx;
				color: #fa6342;
			}
		}
		.bot {
			flex: 1;
			box-sizing: border-box;
			padding: 100rpx;
			.title {
				text-align: center;
				height: 45rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36rpx;
				color: #fa6342;
				text {
					margin: 0 40rpx;
				}
				image {
					width: 48rpx;
					height: 45rpx;
				}
			}
			.text {
				margin-top: 80rpx;
				font-size: 30rpx;
				color: #666666;
			}
			.share-save {
				height: 60rpx;
				margin-top: 80rpx;
				display: flex;
				justify-content: space-between;
				.button {
					height: 100%;
					width: 240rpx;
					box-sizing: border-box;
					border: 2rpx solid #fa6342;
					border-radius: 30rpx;
					line-height: 56rpx;
					text-align: center;
					color: #fa6342;
					background: #ffffff;
					padding: 0;
					font-size: 24rpx;
					text {
						margin: 0 6rpx;
						vertical-align: middle;
						&.cuIcon {
							font-size: 36rpx;
						}
					}
				}
			}
		}
	}
}
</style>