jiuyiUniapp/jiuyi2/pages/news/myQr.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'
// 工具库
import util from '@/common/js/util';
// 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
	})

	let url = `${util.config.host}/#/pages/news/addFriend?account=${userinfo.value.account}`
	console.log(url);


	uQRCode.make({
		canvasId: 'qrcode',
		text: url,
		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>