You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.4 KiB
114 lines
2.4 KiB
5 months ago
|
<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 = `${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>
|