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="">
							<image src="/static/share.png" mode=""></image>
							<text class="mt-1">保存图片</text>
						</view>
						<view class="dis f-c a-c">
							<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: "", //邀请码
				grade: "", //等级
				supportUpgrade: false, //是否支持升级
			}
		},
		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;
			}
			this.recommendCode();
			this.entryPoint();
		},
		methods: {
			//获取升级标识
			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() {
				this.recommendImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/index/applypartner?grade=" +
					this
					.grade + '&userId=' + this.userInfo.sysUser.userId, {
						size: parseInt(300) //二维码大小  
					})
			},
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});

			},
		}
	}
</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>