luoyangCoachApp/pages/userCenter/scanCode/scanCode - 副本.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/>
			</view>
		</view>
	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs';
	var qr = new UQRCode();
	export default {
		data() {
			return {
				timer: null
			}
		},
		onShow() {
			this.$nextTick(()=>{
				this.refresh()
			})
			
		},
		// onHide() {
		// 	console.log('清除了')
		// 	clearTimeout(this.timer)
		// 	this.timer = null
			
		// },
		beforeDestroy() {
			clearTimeout(this.timer)
			this.timer = null
			// this.refresh = null
		},
		methods: {
			refresh() {
				let {coachId, name, schoolId, tenantId, schoolName} =  this.vuex_userInfo
				// 设置二维码内容
				qr.data = JSON.stringify({
							  coachId,
							  schoolId,
							  nickname: encodeURIComponent(name),
							  timer: Date.now(),
							  schoolName: encodeURIComponent(schoolName),
				})
						
				// 设置二维码大小，必须与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();
				this.timer = setTimeout(()=>{
					console.log('刷新了')
					this.refresh()
				},1000*20)
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.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;
		}
	}
</style>