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

<template>
	<view class="container">
		<view class="agentinfo-detail">
			<view class="detail_user">账户 {{ agentInfo.phone }} 是</view>
			<view class="detail_fixed">大卫博士授权{{ agentInfo.level_name }}</view>
			<view class="detail_fixed_info">
				<image src="../../static/index/my/level_bg.png" mode="widthFix" class="fixed_info_bg"></image>
				<view class="fixed_info_text">{{ agentInfo.level_name }}信息</view>
			</view>
			<view class="main">
				<view class="item">
					<view>类　　型:</view>
					<view>{{ agentInfo.level_name }}</view>
				</view>
				<view class="item">
					<view>昵　　称:</view>
					<view>{{ agentInfo.nickname }}</view>
				</view>
				<view class="item">
					<view>姓　　名:</view>
					<view>{{ agentInfo.realname }}</view>
				</view>
				<!-- <view class="item">
					<view>身份证号:</view>
					<view>{{ showCradNum(num) }}</view>
				</view> -->
				<view class="item">
					<view>授权状态:</view>
					<!-- <view :class="agentInfo.status === 1 ? 'spec' : ''">{{ agentInfo.status === 1 ? '已授权' : '已过期' }}
					</view> -->
					<view class="spec">已授权</view>
				</view>
			</view>
			<!-- <view class="btnContainer" v-if="status === 1" @click="toSeeAuth">
				<p>查看授权书</p>
			</view> -->
		</view>
		<image src="../../static/index/my/chengnuo.png" class="chengnuo"></image>
	</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: '',
				agentInfo: ''
				// y: '',
				// m: '',
				// d: ''
			}
		},
		onLoad({
			id
		}) {
			uni.showLoading({
				mask: true
			})
			_API_Auth_Code({
				id: id ? id : this.$store.state.userinfo.id
			}).then(res => {
				uni.hideLoading()
				if (res.code === 200) {
					let phone = res.data.phone
					phone = phone.substring(0, 3) + '****' + phone
						.substr(phone.length - 4)
					this.agentInfo = res.data
					this.agentInfo.phone = phone
					// 使用后端渲染的图片
					// this.src = res.data.url
					// 前端渲染
					// 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.font="14px Arial";
					// 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)
					// ctx.font="11px Arial";
					// 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", 1)
					// alert(this.src)
				} else {
					uni.showModal({
						content: "暂未授权",
						showCancel: false
					}).then(() => {
						uni.navigateBack()
					})
				}
			})
		},
		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">
	page {
		min-height: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.container {
		width: 100%;
		flex: 1;
		min-width: 0;
		// height: 100%;
		background-image: url('http://api.app.cliu.cc/public/uploads/select/bg1.png');
		background-size: 100% auto;
		background-repeat: repeat;
		background-color: #f2f2f2;
		background-position: 100% 0;
		position: relative;
		padding: 5vh 0 0 0;
		box-sizing: border-box;

		.agentinfo-detail {
			width: calc(100% - 60rpx);
			background-color: #fff;
			margin: 0 auto;
			// position: absolute;
			// left: 50%;
			// bottom: 0;
			// transform: translate(-50%, -234rpx);
			// z-index: 99;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 50rpx;
			box-sizing: border-box;
			border-radius: 24rpx;

			.detail_user {
				color: #333333;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			.detail_fixed {
				color: #F53C1E;
				font-size: 52rpx;
				margin-bottom: 30rpx;
			}

			.detail_fixed_info {
				width: 100%;
				position: relative;
				height: 40rpx;

				.fixed_info_bg {
					position: absolute;
					width: 486rpx;
					height: auto;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}

				.fixed_info_text {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					color: #333333;
					font-size: 28rpx;
				}
			}

			.main {
				width: 100%;
				margin-bottom: 50rpx;

				.item {
					width: 100%;
					height: 84rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #EEEEEE;
					color: #333333;
					font-size: 32rpx;

					.spec {
						color: #F53C1E !important;
					}
				}
			}

			.btnContainer {
				width: 100%;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				background: #F53C1E;
				border-radius: 8rpx;
				color: #FFFFFF;
				font-size: 32rpx;
			}
		}

		.chengnuo {
			display: block;
			width: 468rpx;
			height: 234rpx;
			margin: 5vh auto 15px auto;
			// position: absolute;
			// width: 348rpx;
			// height: 174rpx;
			// left: 50%;
			// bottom: 0px;
			// z-index: 98;
			// transform: translate(-50%, -40rpx);
		}
	}
</style>