zh_order_food_xcx/components/canvas-code/code.vue

<template>
	<view class="">
		<canvas id="qrcode" canvas-id="qrcode" :style="[{'width': width +'px','height': width +'px'}]"></canvas>
	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs';
	export default {
		components: {},
		props: {
			width: {
				type: Number,
				default: 150
			},
			// backgroundImg: {
			// 	type: Number,
			// 	default: '@/static/img/logo/logo.png'
			// }
		},
		data() {
			return {};
		},
		onLoad(data) {},
		mounted() {},
		onReady() {},
		methods: {
			getCode(dataValue) {
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = dataValue;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = this.width;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>