gas-cylinder-app/pages/order/cannibalize.vue

<template>
	<view>
		<u-navbar :title="headTile" autoBack placeholder></u-navbar>
		<view class="card_erweima_af">
			<canvas id="qrcode" canvas-id="qrcode" style="width: 140px;height:140px;" />
			<view class="title_balize">调拨码</view>
		</view>
	</view>
</template>

<script>
	import UQRCode from "static/js/uqrcode.js";
	export default {
		data() {
			return {
				orderId: '',
				headTile: '',
			}
		},
		onLoad(value) {
			this.orderId = value.type
			this.headTile = value.title
		},
		mounted() {
			var userInfo = this.$cache.getCache('userInfo')
			this.userInfo = userInfo
			const qr = new UQRCode();
			let numarr = 'dialCode?' + this.orderId + ',' + userInfo.id + ',' + userInfo.nickName + ',' + userInfo.dept
				.id + ',' +
				userInfo.dept.name + ','
			qr.data = numarr;
			qr.size = 140;
			qr.make();
			const ctx = uni.createCanvasContext('qrcode', this);
			qr.canvasContext = ctx;
			qr.drawCanvas();
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f4f5;
	}

	.card_erweima_af {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx;
		flex-direction: column;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.title_balize {
		font-size: 40rpx;
		margin-top: 10rpx;
		font-weight: 600;
	}
</style>