web-app/pages/auth-card/auth-card.vue

<template>
	<view class="auth-card">
		<custom-nav noback="noback" transparent="transparent" ref="ltm" title=" " />
		<view class="content">
			<view class="auth-paper">
				<image v-if="!src" src="../../static/index/my/auth-paper.png"></image>
				<!-- <canvas @tap="previewImage" v-if="drawOver" id="canvas" canvas-id="canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas> -->
				<canvas ref="canvas"></canvas>
				<image class="showCan" v-if="src" :src="src" ></image>
				<!-- <text class="info name">{{ name }}</text>
				<text class="info phone">{{ phone }}</text>
				<text class="info code">{{ code}}</text>
				<text class="info long">{{ long }}</text> -->
				<!-- <text class="info y">{{ y }}</text>
				<text class="info m">{{ m }}</text>
				<text class="info d">{{ d }}</text> -->
			</view>
			<!-- <view class="save" @tap="save"><text class="cuIcon-down icon-right"></text>保存图片</view>
			<view class="show" @tap="share"><text class="cuIcon-news icon-right"></text>分享证书</view> -->
		</view>
	</view>
</template>

<script>
	import { 
		judgeIosPermission, // 获取iOS设备上当前App是否有某项权限
		requestAndroidPermission, // 获取Android设备上当前App是否有某项权限
	} from '@/common/util/permission.js'
	import _share from '@/common/util/share.js'
	import { _API_Auth_Code, _API_Auth_Share } from '@/apis/user.js'
	export default {
		data() {
			return {
				title: '我的授权',
				drawOver: false,
				name: this.$store.state.userinfo.nickname,
				phone: this.$store.state.userinfo.mobile,
				canvasWidth: uni.upx2px(750),
				canvasHeight: uni.upx2px(1323),
				url: '',
				code: '',
				long: '',
				src: ''
				// y: '',
				// m: '',
				// d: ''
			}
		},
		onLoad({ id }) {
			uni.showLoading({ mask: true })
			_API_Auth_Code({ id: id ? id : this.$store.state.userinfo.id }).then(res => {
				uni.showLoading({ mask: true })
				setTimeout(() => {
					const can = document.getElementsByTagName('canvas')[0]
					const ctx = can.getContext('2d')
					const img = document.getElementsByTagName('img')[0]
					
					const { windowWidth, windowHeight } = uni.getSystemInfoSync();
					const regW = windowWidth / 375
					const regH = windowHeight / 603
					ctx.drawImage(img, 0, 0, windowWidth, windowHeight)
					ctx.font="14px Arial";
					ctx.fillText(res.data.realname, 170 * regW, 212 * regH)
					ctx.fillText(res.data.phone, 170 * regW , 240 * regH)
					ctx.font="25px Arial";
					ctx.fillText(res.data.level_name, 130 * regW , 310 * regH)
					ctx.font="11px Arial";
					ctx.fillText(res.data.code, 120 * regW, 365 * regH)
					const y1 = this.y = this.$options.filters.getYear(res.data.auth_startime)
					const m1 = this.m = this.$options.filters.getMonth(res.data.auth_startime)
					const d1 = this.d = this.$options.filters.getDate(res.data.auth_startime)
					const y2 = this.y = this.$options.filters.getYear(res.data.auth_endtime)
					const m2 = this.m = this.$options.filters.getMonth(res.data.auth_endtime)
					const d2 = this.d = this.$options.filters.getDate(res.data.auth_endtime)
					ctx.fillText(`${y1}年${m1}月${d1}日 - ${y2}年${m2}月${d2}日`, 120 * regW, 395 * regH)
					this.src = can.toDataURL("image/png")
				}, 333)
			})
		},
		onBackPress() { // 返回时收起分享
			if (uni._SHARE && uni._SHARE.isVisible()) {
				uni._MASK.hide()
				uni._SHARE.hide()
				return true
			}
		},
		methods: {
			previewImage () {  //点击预览图片
				uni.showLoading({ mask: true })
				uni.canvasToTempFilePath({ canvasId: 'canvas' }).then(([ , res]) => {  //首先将 canvas 转化为一个图片，获得图片的临时路径
					uni.hideLoading()
					uni.previewImage({ urls: [res.tempFilePath] })
				})
			},
			save() { // 点击保存图片
				if (plus.os.name == "iOS") { // 判断设备
					if (judgeIosPermission("photoLibrary")) {
						uni.showLoading({ mask: true })
						uni.canvasToTempFilePath({ canvasId: 'canvas' }).then(([ , res]) => {  //首先将 canvas 转化为一个图片，获得图片的临时路径
							uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath }).then(() => {
								uni.hideLoading()
								uni.toast('保存成功')
							})
						})
					} else {
						uni.toast('大卫博士需要获取访问相册的权限，以保证图片能够保存到您的手机相册')
					}
				} else {
					requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE').then(res => {
						if (res === 1) {
							uni.showLoading({ mask: true })
							uni.canvasToTempFilePath({ canvasId: 'canvas' }).then(([ , res]) => {  //首先将 canvas 转化为一个图片，获得图片的临时路径
								uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath }).then(() => {
									uni.hideLoading()
									uni.toast('保存成功')
								})
							})
						} else {
							this.$refs.ltm.modal('保存失败', ['大卫博士需要获取访问相册的权限，以保证图片能够保存到您的手机相册'], 'nocancel')
						}
					})
				}
			},
			share() { // 点击分享证书
				if (this.url) { // 如果证书已经上传到服务器，直接分享
					_share({ type: 2, imageUrl: this.url })
				} else { // 如果服务器没有证书，先上传再分享
					uni.showLoading({ mask: true })
					uni.canvasToTempFilePath({ canvasId: 'canvas', quality: 0.5 }).then(([ , res]) => {  //首先将 canvas 转化为一个图片，获得图片的临时路径
						plus.zip.compressImage({ src: res.tempFilePath, dst: '_doc/a.jpg', overwrite: true, quality: 20 },  e => {
							_API_Auth_Share({ name: 'img', filePath: e.target }).then(res => {
								if (res.code == 200) {
									this.url = res.data.url
									_share({ type: 2, imageUrl: this.url })
								}
							})  
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.auth-card {
		@include page();
		.content {
			.auth-paper {
				// width: 750rpx;
				// height: 1322.58rpx;
				// background: #FFFFFF;
				// position: relative;
				width: 100%;
				height: 100%;
				background: #CCCCCC;
				image {
					width: 100%;
					height: 100%;
					z-index: -999;
					position: absolute;
					&.showCan {
						z-index: 9999;
					}
				}
				canvas {
					width: 100%;
					height: 100%;
					position: absolute;
					z-index: -99;
					left: 0;
					top: 0;
				}
				.info {
					position: absolute;
					font-size: 18rpx;
					&.name {
						top: 396rpx;
						left: 333rpx;
					}
					&.phone {
						top: 460rpx;
						left: 345rpx;
					}
					&.code {
						top: 752rpx;
						left: 228rpx;
					}
					&.long {
						top: 820rpx;
						left: 228rpx;
					}
				}
			}
			.save, .show {
				@include flex();
				width: 315rpx;
				height: 88rpx;
				color: #FFFFFF;
				font-size: 34rpx;
				display: inline-flex;
				border-radius: 10rpx;
				margin: 88rpx 30rpx 0rpx;
				background: $app-base-color;
				text {
					font-size: 42rpx;
				}
			}
		}
	}
</style>