myjtp/pages/apply/qrcode.vue

<template>
	<view class="qrcode">
		<view class="name">
			<image :src="avatar" mode="" class="name-img"></image>
			<view class="">
				{{ name }}
			</view>
		</view>
		<view class="ma">
			<div class="qrCode" ref="qrCodeDiv"></div>
			<view class="id">
				<!-- {{ id }} -->
			</view>
		</view>
	</view>
</template>

<script>
import QRCode from 'qrcodejs2';
	export default {
		onLoad(options) {
			this.id = options.id
			console.log(this.id)
			this.$nextTick(function () {
			    this.bindQRCode();
			})
		},
		mounted() {
			const data = this.$store.state.user.userInfo
			this.avatar = data.avatar
			this.name = data.nickname || data.real_name
			console.log(this.avatar);
			console.log(this.name);
		},
		data() {
			return {
				id: '',
				avatar: '',
				name: '',
			}
		},
		methods: {
			bindQRCode() {
				new QRCode(this.$refs.qrCodeDiv, {
					render : "canvas",
				    text: this.id,
				    width: 170,
				    height: 170,
				    colorDark: "#333333", //二维码颜色
				    colorLight: "#ffffff", //二维码背景色
				    correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		height: 100%;
	}
	.qrcode {
			text-align: center;
		.name {
			margin: 100rpx;
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: solid 1rpx #eaeaea;
			}
		}
		.ma {
			margin: 0 auto;
			padding: 50rpx;
			width: 450rpx;
			height: 450rpx;
			border: solid 1rpx #3b66f5;
			.name-img {
				width: 300rpx;
				height: 300rpx;
			}
			
			.id {
				font-size: 30rpx;
				margin: 20rpx 0;
			}
		}
		.about {
			margin: 30rpx;
		}
	}
</style>