luoyangCoachApp/pages/userCenter/scanCode/scanCodeSchool.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="驾校二维码"></topNavbar>
		<view class="pad">
			<view class="card">
				<!-- <view class="refresh_row" @click="refresh">
					<view class="text">刷新二维码</view>
					<view class="icon">
						<image src="@/static/images/index/ic_shuaxin.png" mode=""></image>
					</view>
				</view> -->
				<view class="qcode">
					<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
				</view>
			</view>
			<view class="card">
				<user-info :Fwidth="true"/>
			</view>
		</view>
	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs';
	var qr = new UQRCode();
	export default {
		data() {
			return {
			}
		},
		onShow() {
			this.$nextTick(()=>{
				this.refresh()
			})
		},
		methods: {
			refresh() {
				let { schoolId,   schoolName} =  this.vuex_userInfo
				// 设置二维码内容
				qr.data = JSON.stringify({
							  schoolId,
							  schoolName: encodeURIComponent(schoolName),
							  QrType: 1,
				})
						
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 200;
				qr.margin = 10;
				qr.errorCorrectLevel = UQRCode.errorCorrectLevel.L
				// 调用制作二维码方法
				qr.make()
				qr.foregroundImageSrc = require('./coach.png')
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
				
			}
			
		}
	}
</script>

<style lang="scss" >
	.qcode {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 50rpx 0;
	}
	.card {
		padding: 28rpx;
		margin-bottom: 24rpx;
	}
	.refresh_row {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 10rpx 0;
		.text {
			color: $themC;
			font-size: 28rpx;
		}
		.icon {
		  width: 24rpx;
		  height: 24rpx;
		  margin-left: 6rpx;
		}
	}
	:deep .info {
		// width: 80% !important;
		flex: 1 !important;
	}
</style>