mz/pages/shareQrCode/card.vue

<template>
	<view id="container">
		<img v-if="posterDataUrl" :src="posterDataUrl" class="poster-bg" width="100%" height="auto" />
		<view class="item-box" id="poster">
			<image @load="make()" class="poster-bg" src="../../static/img/img38.jpg" mode="widthFix"></image>
			<canvas class="qr" canvas-id="qrCode-canvas" id="qrCode-canvas"></canvas>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import uQRCode from '@/components/Sansnn-uQRCode/uqrcode.js'
	import html2canvas from 'html2canvas'
	import QRCode from 'qrcode'
	import {
		weixindata
	} from '@/utils/wxAuthorized';
	import {
		shareLoad
	} from '@/utils/wxAuthorized';
	export default {
		data() {
			return {
				url: '',
				src: '',
				posterDataUrl: '',
				poster: '', // 合成图片
				canHeight: 0,
				canWeidth: 0,
				size: 180,
				ratio: 1, //页面比例用于计算
			};
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad() {
			let obj = this;
			obj.url = 'http://doctortest.igxys.com/index/#/pages/doctor/expert' + '?id=' + obj.userInfo.uid + '&spread=' +
				obj.userInfo.uid + '&isq=1';
			this.shareDate();
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#container').boundingClientRect(data => {
				this.ratio = data.width / 750;
			}).exec();
			// 获取画布宽高信息
			query.select('#qrCode-canvas').fields({
				size: true
			}, e => {
				console.log('获取画布宽高信息', e)
				this.canHeight = e.height;
				this.canWeidth = e.width;
			}).exec();
		},
		methods: {
			//生成二维码
			make() {
				let obj = this;
				//先用 QRCode 生成二维码 canvas，然后用 html2canvas 合成整张海报并转成 base64 显示出来
				this.$nextTick(() => {
					let canvas = document.getElementById('qrCode-canvas').children[0];
					// console.log(canvas, 'canvas')
					// console.log(obj.url)
					QRCode.toCanvas(canvas, obj.url, (error) => {
						if (error) {
							console.log(error, 'error')
						} else {
							//qrcode 生成的二维码会带有一些默认样式，需要调整下
							canvas.style.width = '140px'
							canvas.style.height = '140px'
							canvas.style.padding = '0px'
							canvas.style.borderRadius = '10px'
							let poster = document.getElementById('poster')
							html2canvas(poster).then(canvas => {
								// console.log(canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"))
								obj.posterDataUrl = canvas.toDataURL();
							});
						}
					})
				});
			},
			shareDate() {
				let obj = this;
				let url = 'http://doctortest.igxys.com/index/#/pages/doctor/expert' + '?id=' + obj.userInfo.uid +
					'&spread=' + obj.userInfo.uid;
				let bool = uni.getStorageSync('weichatBrowser') || '';
				let doctor_name = obj.userInfo.ext_info.doctor_level == 1 ? '初级' : obj.userInfo.ext_info.doctor_level ==
					2 ? '中级' : obj.userInfo.ext_info.doctor_level == 3 ? '副高级' : '正高级'
				let data = {
					link: url, // 分享链接
					imgUrl: obj.userInfo.ext_info.photo, // 分享图标
					desc: obj.userInfo.ext_info.hospital_name + doctor_name,
					title: obj.userInfo.ext_info.name,
					success: function() {}
				};
				// console.log(data, 'datadatadata')
				shareLoad(data);
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	#container {
		width: 100%;
		height: 1400rpx;

		.item-box {
			position: fixed;
			top: -100%;
			left: -750rpx;
			width: 750rpx;
			height: 100%;
			margin: 0rpx auto;
			background-size: 100% 100%;

			.poster-bg {
				width: 750rpx;
				position: relative;
				margin: 0rpx auto;
			}

			.qr {
				width: 280rpx;
				height: 280rpx;
				position: absolute;
				top: 410rpx;
				left: 240rpx;
			}
		}
	}
</style>