web-app_taiwan/pages/share/share.vue

<template>
	<view id="share_container">
		<view id="erweima" style="display: none;"></view>
		<image style="width: 0; height: 0;" src="../../static/avatar.jpg"></image>
		<!-- <view class="qrimg">
		    <tki-qrcode
		    ref="qrcode"
		    :val="val"
			:icon="icon"
		    :size="size"
		    :background="background"
		    :foreground="foreground"
		    :pdground="pdground"
		    :lv="lv" 
		    :onval="onval"
		    :loadMake="loadMake"/>
			<view class="text">
				长按识别二维码填写表单
			</view>
		</view> -->
		<view id="imgWrapper">
			<image class="showCan" v-if="src" :src="src" ></image>
		</view>
		<view class="basecolor sharetext">{{ src ? '长按二维码发送给客户即可邀请加入' : '' }}</view>
	</view>
</template>
<script>
	import { _API_GzhWebInit } from '@/apis/verify.js'
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import { mapState } from 'vuex'
	export default {
		components: {tkiQrcode},
		name: 'ShareIndex',
		data() {
			return {
				src: '',
				imp:'../../static/index.html',
				platform:'',
				val: 'http://192.168.0.12:8080/api/gzh?id=1347', // 要生成的二维值 可以跳转一个新界面
				size: 450, // 二维码大小
				background: '#fff', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 角标色 
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码    （一定要注意这个值的设置 刷新二维码使用的）
				loadMake: true, // 组件加载完成后自动生成二维码
				icon:'../../static/avatar.jpg'
			}
		},
		onShow() {
			// var that = this
			// uni.getSystemInfo({
			// 	success(res) {
			// 		that.platform=res.platform
			// 	}
			// })
			// _API_GzhWebInit().then(res => {
			// 	this.val=res.url
			// 	console.log(res.url)
			// })
		},
		computed: {
			...mapState([
				'userinfo'
			])
		},
		onShow() {
			const script = document.createElement('script')
			script.type = 'text/javascript'
			script.src = 'http://res.wx.qq.com/open/js/jweixin-1.4.0.js'
			document.getElementsByTagName('head')[0].appendChild(script)
				
			let { nickname, id } = this.userinfo
			
			script.onload = () => {
				_API_GzhWebInit().then(res => {
					setTimeout(() => {
						// res.url = "http://192.168.0.12:8080/api/gzh?id=1347"
						const img = document.getElementsByTagName('img')[0]
						$('#erweima').qrcode({ width: 333, height: 333, text: res.url })
						document.getElementsByTagName('canvas')[0].getContext('2d').drawImage(img, 123, 123, 80, 80)
						wx.config(res)
						wx.ready(() => {
							wx.updateAppMessageShareData({
								title: `我是${this.$store.state.userinfo.nickname}, 邀请你加入大卫博士`,
								desc: '传递健康，改变命运。',
								link: res.url,
								imgUrl: 'http://api.woaidakele.cn/public/uploads/logo.jpg'
							})
						})
						wx.error(res => window.history.replaceState({}, '', `/api/gzh/david`))
						uni.hideLoading()
						const can = document.createElement('canvas')
						const ctx = can.getContext('2d')
						const ratio = window.devicePixelRatio || 1
						can.width = uni.upx2px(680)
						can.height = uni.upx2px(960)
						ctx.fillStyle="#ffffff";
						ctx.fillRect(0, 0, uni.upx2px(680), uni.upx2px(960));
						ctx.fillStyle="#000000";
						ctx.font=`${uni.upx2px(42)}px Arial`;
						ctx.textAlign="center";
						
						ctx.drawImage(img, uni.upx2px(276), uni.upx2px(16), uni.upx2px(128), uni.upx2px(128))
						ctx.fillText(`“${nickname.length > 18 ? nickname.slice(0, 18) + '...' : nickname }”`, uni.upx2px(340), uni.upx2px(206))
				
						ctx.fillStyle="#333333";
						ctx.font=`${uni.upx2px(36)}px Arial`;
						ctx.fillText(`邀请你加入大卫博士`, uni.upx2px(340), uni.upx2px(271))
						
						ctx.drawImage(document.getElementsByTagName('canvas')[0], uni.upx2px(80), uni.upx2px(332), uni.upx2px(517), uni.upx2px(518))
						
						ctx.font=`${uni.upx2px(36)}px Arial`;
						ctx.fillStyle="#F76454";
						ctx.fillText(`长按-识别二维码-填写信息`, uni.upx2px(340), uni.upx2px(910))
						this.src = can.toDataURL("image/png")
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.qrimg{
		height: 1000rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.text{
			font-size: 36rpx;
			font-weight: bold;
			margin-top: 30rpx;
		}
	}
	#share_container {
		// height: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
	#imgWrapper {
		flex: 1;
		@include flex();
		.showCan {
			width: 680rpx;
			height: 960rpx;
			border-radius: 14rpx;
			box-shadow:0px 0px 23px 2px rgba(194,133,58,0.5);
		}
	}
	.sharetext {
		font-size: 80rpx;
		text-align: center;
		margin: 8rpx 0;
		box-sizing: border-box;
		padding: 30rpx 24rpx;
	}
</style>