<template>
<view class="erweima">
	<view class="info">
		<image :src="userInfo.avatar" mode="aspectFill"></image>
		<view class="name">
			{{userInfo.nickname}}
		</view>
	</view>
	<view class="content">
		<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
		<view class="text">
			扫一扫上方二维码加入我们吧
		</view>
		
	</view>
	 
</view>
</template>

<script>
	import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
	import {getUserInfo} from '@/common/api.js'
	export default{
		
		data(){
			return{
				qrcodeData: '',
				userInfo:{
					avatar:"",
					createtime:null,
					expires_in:null,
					expiretime:null,
					id:null,
					mobile:null,
					nickname:null,
					score:null,
					token:null,
					user_id:null,
					username:null,
				}
			}
		},
		
		methods:{
			//获取用户信息
			getUserInfoHandle(){
				getUserInfo().then(res=>{
					this.userInfo =Object.assign(({},this.userInfo,res.data));
					// 获取uQRCode实例
					var qr = new UQRCode();
					// 设置二维码内容
					qr.data = `${window.location.origin}/pages/register/register?mobile=${this.userInfo.mobile}`;
					// 设置二维码大小，必须与canvas设置的宽高一致
					qr.size = 200;
					// 调用制作二维码方法
					qr.make();
					// 获取canvas上下文
					var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
					// 设置uQRCode实例的canvas上下文
					qr.canvasContext = canvasContext;
					// 调用绘制方法将二维码图案绘制到canvas上
					qr.drawCanvas();
				})
			},
		},
		onLoad() {
			this.getUserInfoHandle()
			let qrcodeData = 'https://www.example.com'  // 指定二维码的内容
			this.qrcodeData = qrcodeData
		},

	}
</script>

<style lang="scss" scoped>
.erweima{
	min-height: calc(100vh - 44px);
	background: url("../../static/image/bg.png");
	background-size: contain;
	border-top:1px solid transparent;
	.info{
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-top:20%;
		
		&>image{
			height:200rpx;
			width:200rpx;
			border-radius: 50%;
			border:2px solid $base;
		}
		.name{
			font-size: 26rpx;
			color:#ffffff;
			margin-top:30rpx;
		}
	}
	.content{
		background: #ffffff;
		padding:50rpx;
		border-radius: 10px;
		width:fit-content;
		margin:20rpx auto;
		text-align: center;
		.text{
			font-size: 24rpx;
			color: #999;
			margin-top:20rpx;
		}
	}
}
</style>