gas-cylinder-app/pages/mine/erweima.vue

<template>
	<view>
		<u-navbar title="" autoBack placeholder></u-navbar>
		<view class="card_image_erweima">
			<view class="card_avatar">
				<image class="mine_image" src="../../static/portrait.png" mode=""></image>
				<view class="card_user_title">
					<view class="mine_phone">{{userInfo.nickName}}</view>
					<view class="mine_phone" v-if="userInfo.dept">{{userInfo.dept.name}}</view>
				</view>
			</view>
			<view class="card_erweima_af">
				<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height:200px;" />
			</view>
		</view>
	</view>
</template>

<script>
	import UQRCode from "static/js/uqrcode.js";
	export default {
		data() {
			return {
				userInfo: {},
			}
		},
		mounted() {
			var userInfo = this.$cache.getCache('userInfo')
			this.userInfo = userInfo
			const qr = new UQRCode();
			qr.data = '二维码内容';
			qr.size = 200;
			qr.make();
			const ctx = uni.createCanvasContext('qrcode', this);
			qr.canvasContext = ctx;
			qr.drawCanvas();
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.card_avatar {
		display: flex;
		align-items: center;
		margin-bottom: 60rpx;
	}

	.card_image_erweima {
		margin: 30px;
	}

	.mine_image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.card_user_title {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.mine_phone {
		margin-left: 20rpx;
		font-size: 30rpx;
	}

	.card_erweima_af {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>