vue-insagent-app/pages/tools/addStaff/recommendCode.vue

<template>
	<view :style="getHeight">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="content d-flex flex-column a-center j-center">
			<image src="/static/image/addStaff/face_sao.png" mode="widthFix" lazy-load style="width: 500upx;"></image>
			<image :src="recommendImg" mode="widthFix" lazy-load style="width: 450upx;"></image>
			<view>新成员只需要扫描您的二维码，即可马上注册加入啦！</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex"
	import QR from "@/common/wxqrcode.js"
	export default {
		data() {
			return {
				recommendImg: ""
			}
		},
		computed: {
			...mapState(['userInfo']),
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight;
				return `height: ${height}px;`;
			}
		},
		onLoad() {
			var id = this.userInfo.sysUser.id;
			this.recommendImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/register/register?id=" + id, {
				size: parseInt(200) //二维码大小  
			})
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
		}
	}
</script>

<style>
	.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -60%);
	}

	.content>image {
		margin-top: 30upx;
		margin-bottom: 30upx;
	}

	.content>view {
		width: 400upx;
		color: red;
		text-align: center;
	}
</style>