zhapp/pages/tool/invitationCode.vue

<template>
	<view class="page">
		<view class="bgimg">
			<view class="dis f-c a-c">
				<view class="panelcanvas dis f-c a-c" id="panelcanvas">
					<view class="bgimg-header dis a-c mb-3" style="margin-right: auto;">
						<image :src="userInfo.sysUser.headSculpture? userInfo.sysUser.headSculpture :avatarImg" mode="">
						</image>
						<view class="dis f-c ml-2">
							<text>{{userInfo.sysUser.name ||'未知'}}</text>
							<text>{{userInfo.sysUser.deptName || '未知'}}</text>
						</view>
					</view>
					<image class="paycodeimg" :src="paycodeimg" mode="widthFix" lazy-load style="position: relative;">
						<image :src="logoImg" mode=""
							style="width: 26px;height: 26px;position: absolute;top: 0;left: 0;right: 0;bottom: 0; margin: auto;">
						</image>
					</image>
					<text class="mt-3 mb-5" style="font-size: 28rpx;color: #666;">扫描二维码，加入我的团队</text>
				</view>
				<view class="operation  dis a-c j-c">
					<view class="dis f-c a-c" @click="saveImage">
						<image src="/static/icon/tool/saveImg.png" mode=""></image>
						<text class="mt-1">保存图片</text>
					</view>
					<view class="dis f-c a-c" @click="shareLink(recommendUrl)">
						<image src="/static/icon/tool/link.png" mode=""></image>
						<text class="mt-1">复制链接</text>
					</view>
					<!-- #ifdef APP-PLUS -->
					<view class="dis f-c a-c" @click="sendPayCode">
						<image src="/static/icon/tool/share.png" mode=""></image>
						<text class="mt-1">分享</text>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<!-- <text @click="arr">注册</text> -->
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/pdf.js'
	import QR from "@/common/wxqrcode.js"
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				paycodeimg: '',
				posterUrl: "",
				recommendUrl: "", //邀请链接
				logoImg: "", //logo图片
				avatarImg: '', //头像
				Info: {}
			}
		},
		onShow() {

		},
		async onLoad() {
			await this.getUserInfo()//获取用户信息
			this.paycodeimg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/registr/h5Registr?systemCode=" + this
				.system_code+'&info='+JSON.stringify({
					name: this.Info.name,
					infoId: this.Info.infoId,
					id: this.Info.id,
					headSculpture: this.Info.headSculpture,
					deptName: this.Info.deptName,
				}), {
					size: parseInt(200), //二维码大小

				})
			this.recommendUrl = this.$base.h5BaseUrl + "/#/pages/registr/h5Registr?systemCode=" + this
				.system_code+'&info='+JSON.stringify({
					name: this.Info.name,
					infoId: this.Info.infoId,
					id: this.Info.id,
					headSculpture: this.Info.headSculpture,
					deptName: this.Info.deptName,
				});
				console.log(this.recommendUrl);
			uni.getImageInfo({
				src: '../../static/image/my/logo.png',
				success: image => {
					pathToBase64(image.path)
						.then(base64 => {
							console.log(base64);
							this.logoImg = base64;
						})
						.catch(error => {});
				},
				fail: err => {}
			});
			uni.getImageInfo({
				src: '../../static/image/avatar.png',
				success: image => {
					pathToBase64(image.path)
						.then(base64 => {
							this.avatarImg = base64;
						})
						.catch(error => {});
				},
				fail: err => {}
			});

		},
		computed: {
			...mapState(['userInfo', 'system_code'])
		},
		methods: {
			async getUserInfo() {
				let res = await this.$http.get('/appUser/userInfoGet'); //获取人员信息
				if (res.code == '200') {
					this.Info = res.data
				}
			},
			arr() {
				uni.navigateTo({
					url: '/pages/registr/h5Registr?systemCode=' + this
						.system_code,
				})
			},
			//复制邀请链接
			shareLink(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							icon: 'none',
							title: '邀请链接已复制成功'
						})
					}
				});
			},
			//发送到微信
			sendPayCode() {
				if (this.posterUrl) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						imageUrl: this.posterUrl
					})
				}
			},
			//保存图片
			saveImage() {
				//posterUrl 由 renderjs + html2canvas 截图生成
				if (!this.posterUrl) {
					uni.showToast({
						title: '海报生成中，请稍后再试',
						icon: 'none',
					});
					return;
				}
				// #ifdef H5
				//zhApp 当前 uni-app 的 H5 运行时未实现 saveImageToPhotosAlbum，
				//故手动用 a 标签触发浏览器下载（zgcx 是框架自带下载降级，这里需要自己处理）
				const a = document.createElement('a');
				a.href = this.posterUrl;
				a.download = '邀请海报.png';
				document.body.appendChild(a);
				a.click();
				document.body.removeChild(a);
				uni.showToast({
					title: '已开始下载，请查看浏览器下载记录',
					icon: 'none',
				});
				// #endif
				// #ifdef APP-PLUS
				base64ToPath(this.posterUrl)
					.then(path => {
						uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
							filePath: path, //图片文件路径
							success: function() {
								uni.showToast({
									title: '已保存到相册',
									icon: 'none',
								});
							},
							fail: function(e) {
								uni.showToast({
									title: '图片保存失败',
									icon: 'none',
								});
							}
						});
					})
				// #endif
			},
			//页面截图转路径
			receiveRenderData(val) {
				this.posterUrl = val.replace(/[\r\n]/g, ''); // 去除base64位中的空格
			},
			showLoading() {
				uni.showLoading({
					title: '正在生成图片'
				});
			},
			hideLoading() {
				uni.hideLoading();
				this.loading = false;
			},
		}
	}
</script>
<script module="canvasImage" lang="renderjs">
	import html2canvas from 'html2canvas'
	export default {
		data() {
			return {

			}
		},
		mounted() {
			setTimeout(() => {
				this.canvasImage.generateImage()
			}, 1000);
		},
		methods: {
			generateImage() {
				setTimeout(() => {
					this.$ownerInstance.callMethod('showLoading')
					const dom = document.getElementById('panelcanvas') // 需要生成图片内容的 dom 节点
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域
						// allowTaint: false,
						scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
					}).then((canvas) => {
						console.log(canvas);
						// 生成成功
						this.$ownerInstance.callMethod('hideLoading')
						this.$ownerInstance.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
					}).catch(err => {
						console.log('22222222222222', err);
						// 生成失败 弹出提示弹窗
						this.$ownerInstance.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
					})
				}, 300)
			}
		},
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.bgimg {
		width: 100%;
		background-image: url("../../static/image/tool/invitationCode-bg1.png");
		background-size: 100% 100%;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		.bgimg-header {
			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}

			.ml-2 {
				text:first-child {
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
				}

				text:last-child {
					font-size: 28rpx;
					color: #999;
				}
			}
		}

		.panelcanvas {
			position: relative;
			width: 100%;
			padding: 40rpx 40rpx 0;
			box-sizing: border-box;

			.paycodeimg {
				width: 340rpx;
				height: 340rpx;
			}
		}

		.operation {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: auto;
			row-gap: 30rpx;
			column-gap: 20rpx;
			margin-bottom: 50rpx;

			view {
				image {
					width: 88rpx;
					height: 88rpx;
				}

				text {
					font-size: 24rpx;
					color: #333;
				}


			}

		}
	}
</style>