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>
|