zhengbasai/pages/rongyu/detail.vue

<template>
	<view class="honour" :class="fromIndex ? '' : 'share'">
		<view class="container">
			<view class="certificate" @click="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/util/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: '',
				userInfo: ''
			};
		},
		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 预览图片
				console.log('点击预览图片1')
				uni.showLoading({
					title: '加载中',
					mask: true
				}); //显示loading
				// uni.canvasToTempFilePath({
				// 	//首先将 canvas 转化为一个图片
				// 	canvasId: 'canvas'
				// }).then(([, res]) => {
				// 	console.log('点击预览图片', res)
				// 	//获得图片的临时路径
				// 	uni.hideLoading(); //app hide 时隐藏loading
				// 	uni.previewImage({
				// 		urls: [res.tempFilePath]
				// 	});
				// });
				uni.canvasToTempFilePath({
					canvasId: 'canvas',
					success: function(res) {
						uni.hideLoading();
						// 在H5平台下，tempFilePath 为 base64
						console.log('点击预览图片', res)
						uni.previewImage({
							urls: [res.tempFilePath]
						});
					},
					fail: function(err) {
						console.log('图片转换失败', err)
					}
				})
			},
			createCanvas() {
				let _this = this
				_this.canvasWidth = uni.upx2px(641);
				_this.canvasHeight = uni.upx2px(977);
				const ctx = uni.createCanvasContext('canvas', this);
				ctx.drawImage(this.zhengshu.bg, 0, 0, _this.canvasWidth, _this.canvasHeight);
				ctx.save();
				ctx.beginPath();
				ctx.arc(uni.upx2px(320), uni.upx2px(380), uni.upx2px(90), 0, 2 * Math.PI, false);
				ctx.clip();

				ctx.fillStyle = 'green';

				//绘制头像
				ctx.drawImage(this.headerImg, uni.upx2px(230), uni.upx2px(290), uni.upx2px(180), uni
					.upx2px(180));
				ctx.restore();
				// 绘制证书显示文字
				ctx.setTextAlign('center')
				ctx.setFontSize(uni.upx2px(26))
				// ctx.fillText(this.zhengshu.name, uni.upx2px(320), uni.upx2px(555))
				// ctx.setFontSize(uni.upx2px(32))
				ctx.fillText(this.userInfo.nickname, uni.upx2px(320), uni.upx2px(600))
				ctx.setFontSize(uni.upx2px(36))
				// ctx.fillText(this.userInfo.mingci, uni.upx2px(425), uni.upx2px(605))
				ctx.draw()
			}
		},
		onLoad() {
			let zhengshu = localStorage.getItem('zhengshu')
			this.zhengshu = JSON.parse(zhengshu)
			console.log(this.zhengshu)
			this.headerImg = this.vuex_user.headimg
			this.userInfo = this.vuex_user

		},
		onShow() {
			this.$nextTick(() => {
				this.createCanvas()
			})
		}
		// 	async onLoad() {
		// 		//当进入页面之后判断是否带带有参数
		// 		// const avatarUrl = this.userServerInfo.avatar
		// 		// uni.hideShareMenu();
		// 		// opt.time = opt.time || this.userServerInfo.start_time;
		// 		// this.header = opt.name ? decodeURIComponent(opt.header) : avatarUrl;
		// 		let opt = this.vuex_user
		// 		this.header = opt ? decodeURIComponent(opt.headimg) : '';
		// 		// opt.name="xvying"
		// 		//  opt.grade="学霸学位"
		// 		this.header = this.vuex_user.headimg
		// 		uni.showLoading({
		// 			title: '加载中',
		// 			mask: true
		// 		});
		// 		let _this = this;
		// 		uni.downloadFile({
		// 			// url:this.header,
		// 			url: 'http://api.dwbszbs.dev.xmnk.cn/default/headimg.png"',
		// 			success: ({
		// 				statusCode,
		// 				tempFilePath
		// 			}) => {
		// 				if (statusCode === 200) {
		// 					this.headerImg = tempFilePath;
		// 				}
		// 			},
		// 			fail: e => {
		// 				console.log(e);
		// 				uni.showToast({
		// 					icon: 'none',
		// 					title: '获取用户头像失败',
		// 					duration: 3000
		// 				});
		// 			},
		// 			complete: () => {
		// 				console.log('执行这个地方')
		// 				uni.hideLoading(); //停止 loading
		// 				_this.canvasWidth = uni.upx2px(641);
		// 				_this.canvasHeight = uni.upx2px(977);
		// 				_this.fromIndex = opt.nickname ? false : true; //当前页面为分享页面
		// 				_this.name = opt.nickname; //姓名
		// 				_this.name = _this.name.slice(0, 6);
		// 				_this.grade = opt.grade || '博士学位'; //学位
		// 				console.log(_this.grade);
		// 				const ctx = uni.createCanvasContext('canvas',this);
		// 				console.log(ctx)
		// 				// debugger
		// 				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 {
			// background-color: #fa6342;
			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: #F5222D;
				font-size: 20px;
			}
		}
	}

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

	.preview {
		background: linear-gradient(91deg, #F30000 1%, #FE4815 99%);
		color: #fff;
		padding: 10px 0;
	}
</style>