mz/pages/shareQrCode/card.vue

<template>
	<view id="container">
		<img v-if="posterDataUrl" :src="posterDataUrl" class="poster-bg" width="100%" height="auto"/>
		<view v-else class="item-box"  id="poster" >
			<img class="poster-bg" src="../../static/img/img38.jpg"/>
			<canvas class="qr" 
			canvas-id="qrCode-canvas" 
			id="qrCode-canvas"
			:style="{ left: `${(canWeidth - 134) / 2}px`}"></canvas>
		</view>
		<!-- <view class="card">
			<view class="header flex_item">
				<view class="portrait"><image :src="userInfo.ext_info.photo"></image></view>
				<view class="info">
					<view class="name">{{userInfo.ext_info.name}}<text>{{ userInfo.ext_info.doctor_level == 1 ? '医师' : userInfo.ext_info.doctor_level == 2 ? '主治医师' : userInfo.ext_info.doctor_level == 3 ? '副主任医师' : '主任医师'}}</text></view>
					<view class="tip">{{userInfo.ext_info.hospital_name}}</view>
				</view>
			</view>
			<view class="tki-qrcode">
				<canvas canvas-id="qrcode" />
			</view>
		</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() {
			this.loadData();
			this.shareDate()
			this.$nextTick(() => {
			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();
			});
			
		},
		// onLoad() {
		// 	console.log(this.userInfo)
		// 	this.loadData();
		// },
		methods: {
			// 请求载入数据
			async loadData() {
				let obj = this;
				obj.url = 'http://doctortest.igxys.com/index/#/pages/doctor/expert' + '?id=' + obj.userInfo.uid+'&spread='+obj.userInfo.uid;
				obj.make();
				obj.shareDate()
			},
			//生成二维码
			  make() {
				  let obj = this;
				  //先用 QRCode 生成二维码 canvas，然后用 html2canvas 合成整张海报并转成 base64 显示出来
				  		this.$nextTick(() => {
				  		     setTimeout(function(){
				  				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();
				  						});
				  					}
				  				})
				  			},500);
				      	});
				  
				  
				  
			      // uQRCode.make({
			      //   canvasId: 'qrcode',
			      //   componentInstance: this,
			      //   text: obj.url,
			      //   size: 280,
			      //   margin: 3,
			      //   backgroundColor: '#ffffff',
			      //   foregroundColor: '#000000',
			      //   fileType: 'png',
			      //   correctLevel: uQRCode.defaults.correctLevel,
			      //   success: res => {
			      //     console.log(res)
			      //   }
			      // })
			    },
			
			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')
				// console.log(shareLoad);
				shareLoad(data);
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	#container{
		width: 100%;
		height: 1400rpx;
		.item-box{
			width: 100%;
			height: 100%;
			margin: 0rpx auto;
			background-size: 100% 100%;
			.poster-bg{
				position: relative;
				height: 100%;
				width: 100%;
				margin: 0rpx auto;
				}
				.qr{
					width: 100%;
					height: 100%;
					position: absolute;
					top:9.6rem;
					// left:6.5rem;
				}
		}
	}
	// page{
	// 	background-color: #F5F5F5;
	// 	height: 100%;
	// 	.container{
	// 		height: 100%;
	// 		padding: 45rpx 0rpx;
	// 	}
	// }
	// .tki-qrcode{
	// 	width: 100%;
	// }
	// canvas{
	// 	width: 600rpx;
	// 	height: 600rpx;
	// }
	// .card{
	// 	padding: 50rpx 50rpx;
	// 	width: 90%;
	// 	margin: 0rpx auto;
	// 	background-color: #FFFFFF;
	// 	border-radius: 25rpx;
	// 	font-size: 30rpx;
	// 	text-align: center;
	// 	.header{
	// 		padding-bottom: 30rpx;
	// 		.portrait{
	// 			width: 150rpx;
	// 			height: 150rpx;
	// 			image{
	// 				border-radius: 100rpx;
	// 				width: 100%;
	// 				height: 100%;
	// 			}
	// 		}
	// 		.info{
	// 			margin-left: 25rpx;
	// 			text-align: left;
	// 			.name{
	// 				font-size: 36rpx;
	// 				font-weight: bold;
	// 				text{
	// 					font-weight:normal !important;
	// 					padding-left: 25rpx;
	// 					font-size: 30rpx;
	// 				}
	// 			}
	// 			.tip{
	// 				text-align: left;
	// 				padding-top: 15rpx;
	// 			}
	// 		}
	// 	}
	// 	.shareText{
	// 		margin-bottom: 50rpx;
	// 	}
	// 	.shareDate{
	// 		width: 100%;
	// 		padding: 25rpx 0rpx;
	// 		margin: 0rpx auto;
	// 		background-color: #5E96F5;
	// 		color: #FFFFFF;
	// 		border-radius: 25rpx;
	// 	}
	// }
</style>