partnerApp/pages/institutional/invitationCode.vue

<template>
	<view class="page">
		<public-module></public-module>
		<view class="headers dis a-c j-start">
			<u-icon name="arrow-left" color="#333" size="38" @tap="back"></u-icon>
			<text style="margin: auto;">邀请码</text>

		</view>
		<view class="homeBackground"></view>
		<view class="p-2">
			<!-- 二维码 -->
			<view class="bgimg dis f-c ">
				<view class="header dis a-c mb-3">
					<image src="/static/image/my/wuxingb.png" mode=""></image>
					<view class="dis f-c ml-2">
						<text>{{userInfo.sysUser.userName}}</text>
						<text>{{userInfo.sysUser.deptName}}</text>
					</view>
				</view>
				<view class="dis f-c a-c ">
					<view class="panelcanvas " id="panelcanvas">
						<image :src="recommendImg" mode="widthFix" lazy-load></image>
					</view>
					<view class="operation mt-4 dis a-c ">
						<view class="dis f-c a-c" style="margin-right: 136rpx;" @click="saveImage">
							<image src="/static/share.png" mode=""></image>
							<text class="mt-1">保存图片</text>
						</view>
						<view class="dis f-c a-c" @click="shareLink(recommendUrl)">
							<image src="/static/save.png" mode=""></image>
							<text class="mt-1">链接分享</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 标签 -->
			<view class="tag mt-2 dis f-c ">
				<view class="dis a-c j-s">
					<text>我的身份：{{gradeText}}</text>
					<view class="entryPoint" v-show="supportUpgrade" @click="upgrade">去升级</view>
				</view>
				<text class="mt-1">再邀请6个工作室，即可升级成为管理人，赚取更多收益</text>
			</view>
			<view class="tag mt-2 dis f-c a-start">
				<text>我的佣金权益：0.2%</text>
				<text class="mt-1">再邀请3-5个工作室，佣金可达0.5%</text>
			</view>
		</view>

	</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 {
				recommendImg: "", //邀请码
				recommendUrl: "", //链接
				posterUrl: "", //二维码截图
				grade: "", //等级
				supportUpgrade: false, //是否支持升级
				deptSource: "",
			}
		},
		onShow() {

		},
		computed: {
			...mapState(['userInfo', "userCheckInfo"]),
			gradeText() {
				const gradeMap = {
					1: '创始人',
					2: '管理人',
					3: '合伙人',
					4: '工作室'
				}
				return gradeMap[this.userInfo.sysUser.grade] || ''
			}
		},
		onLoad(options) {
			if (options) {
				this.grade = options.grade;
				if (options.deptSource) this.deptSource = options.deptSource;
			}
			this.recommendCode();
			this.entryPoint();
		},
		methods: {
			//保存图片
			saveImage() {
				base64ToPath(this.posterUrl)
					.then(path => {
						uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
							filePath: path, //图片文件路径
							success: function() {
								uni.showToast({
									title: '已保存到相册',
									icon: 'none',
								});
							},
							fail: function(e) {
								uni.showToast({
									title: '图片保存失败',
									icon: 'none',
								});
							}
						});
					})
			},
			//复制邀请链接
			shareLink(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							icon: 'none',
							title: '邀请链接已复制成功'
						})
					}
				});
			},
			//获取升级标识
			async entryPoint() {
				let res = await this.$http.post('/partner/verifyUpgradeConditions', {
					grade: this.grade,
				});
				if (res.code == '200') {
					this.supportUpgrade = true;
				} else {
					this.supportUpgrade = false;
				}
			},
			//去升级
			async upgrade() {
				let res = await this.$http.post('/partner/submitLiftingRecord', {
					grade: this.grade,
				});
				if (res.code == '200') {
					uni.navigateTo({
						url: '/pages/institutional/applicationResult'
					})
				}

			},
			//邀请二维码生成
			recommendCode() {
				if (this.grade == 4) {
					this.recommendImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/index/applypartner?grade=" +
						this
						.grade + '&userId=' + this.userInfo.sysUser.userId + '&deptSource=' + this.deptSource, {
							size: parseInt(300) //二维码大小  
						})
					this.recommendUrl = this.$base.h5BaseUrl + "/#/pages/index/applypartner?grade=" +
						this
						.grade + '&userId=' + this.userInfo.sysUser.userId + '&deptSource=' + this.deptSource;
				} else {
					this.recommendImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/index/applypartner?grade=" +
						this
						.grade + '&userId=' + this.userInfo.sysUser.userId, {
							size: parseInt(300) //二维码大小  
						})
					this.recommendUrl = this.$base.h5BaseUrl + "/#/pages/index/applypartner?grade=" +
						this
						.grade + '&userId=' + this.userInfo.sysUser.userId
				}


			},
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});

			},
			//页面截图转路径
			receiveRenderData(val) {
				this.posterUrl = val.replace(/[\r\n]/g, ''); // 去除base64位中的空格
				// 将base64转化为临时地址
				// base64ToPath(imageStr).then(path => {
				// 	this.payImg = path;
				// }).catch(error => {
				// 	console.log(error);
				// });
			},
			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) => {
						// 生成成功
						this.$ownerInstance.callMethod('hideLoading')
						this.$ownerInstance.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
					}).catch(err => {
						// 生成失败 弹出提示弹窗
						this.$ownerInstance.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
					})
				}, 300)
			}
		},
	}
</script>
<style lang="scss" scoped>
	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 30rpx;
		padding-top: 50px;

		text {
			font-size: 36rpx;
			font-weight: bold;
			color: #000;
		}

		.headers-activeTab {
			width: 80%;
		}

		.right {
			position: absolute;
			right: 30rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}

			text {
				font-weight: 400;
				color: #000;
				font-size: 24rpx;
			}
		}
	}

	//头部背景
	.homeBackground {
		width: 100%;
		height: 176rpx;
		background: linear-gradient(180deg, #D1EFFE 0%, #FFFFFF 100%);
	}

	.bgimg {
		width: 100%;
		background-image: url("/static/bgimg.png");
		background-size: 100% 100%;
		padding: 40rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;

		.header {
			image {
				width: 90rpx;
				height: 90rpx;
			}

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

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

		.panelcanvas {
			position: relative;

			image {
				width: 340rpx;
				height: 340rpx;
			}
		}

		.operation {
			image {
				width: 88rpx;
				height: 88rpx;
			}

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

	.tag {
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 30rpx;
		box-sizing: border-box;


		.entryPoint {
			background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			padding: 1rpx 17rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #FFFFFF;
		}

		text:first-child {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
		}

		text:last-child {
			font-size: 24rpx;
			color: #666;
		}
	}
</style>