84 lines
1.6 KiB
Vue
84 lines
1.6 KiB
Vue
<script setup>
|
||
// 我的二维码
|
||
import uQRCode from '@/common/js/uqrcode.js'
|
||
|
||
import {
|
||
ref,
|
||
reactive,
|
||
computed,
|
||
} from 'vue'
|
||
import {
|
||
useStore,
|
||
} from 'vuex'
|
||
import {
|
||
onLoad,
|
||
} from '@dcloudio/uni-app'
|
||
// vuex
|
||
const store = useStore()
|
||
// 用户信息
|
||
const userinfo = computed(() => {
|
||
let result = store.state.userinfo
|
||
return result
|
||
})
|
||
|
||
// 二维码大小
|
||
const qrcodeSize = ref(300)
|
||
// 二维码路径
|
||
const qrUrl = ref('')
|
||
|
||
onLoad(() => {
|
||
init()
|
||
})
|
||
|
||
// 初始化
|
||
function init() {
|
||
uni.showLoading({
|
||
title: '二维码生成中',
|
||
mask: true
|
||
})
|
||
|
||
//
|
||
const content = {
|
||
key: 'user',
|
||
userId: userinfo.value.userId,
|
||
userNickname: userinfo.value.userNickname,
|
||
}
|
||
|
||
uQRCode.make({
|
||
canvasId: 'qrcode',
|
||
text: JSON.stringify(content),
|
||
size: qrcodeSize.value,
|
||
margin: 10,
|
||
success: res => {
|
||
qrUrl.value = res
|
||
console.log('qrcodeSrc ', qrUrl.value);
|
||
},
|
||
complete: () => {
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="app">
|
||
<!-- -->
|
||
<view class="container ver mtb30 mlr30 tac">
|
||
<!-- 二维码插件 width height设置宽高 -->
|
||
<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
|
||
|
||
<view class="user mtb30 df aic">
|
||
<view class="avatar">
|
||
<image class="wh80 cir" :src="userinfo.userPortrait" mode="aspectFill" />
|
||
</view>
|
||
<view class="nickname f1 ml20 c333 f32">{{userinfo.userNickname}}</view>
|
||
</view>
|
||
|
||
<view class="hint mtb30 tac c999">扫一扫，添加我为好友</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
//
|
||
</style> |