epidemic-h5/pages/index/share.vue

<template>
	<view class="bt-tip">
		<view class="" id="boxImage">

		</view>
		<view class="down" @click="saveImage" v-if="status==1">
			<view class="">
				保存图片
			</view>
		</view>
		<view class="down" v-if="status==2" @click="shengcheng">
			<view class="">
				点击生成图片
			</view>
		</view>
		<view class="down" v-if="status==3" @click="shengcheng">
			<view class="">
				长按图片发送给好友
			</view>
		</view>
		<view class="" v-show="isShow">
			<view id="shareImage">
				<view class="border">
					<view class="content">
						<view class="title_1">
							<text>{{setCity}}</text>
							<image class="right_arrow" src="../../static/img/right.png" mode="" style="display: inline-block;vertical-align: center;height: 35upx;width: 80upx;margin: 0 10upx;"></image><text>{{reachCity}}</text>
						</view>
						<view class="title_2">
							回{{reachCity}}过年需要隔离吗？
						</view>
						<view class="text_1">
							<p v-for="(item,index2) in policy" :key='index2'>
								{{item}}
							</p>
						</view>
						<view class="tip_share">
							<view class="left_share">
								<image src="../../static/img/erwei1.jpg" mode=""></image>
							</view>
							<view class="right_share">
								<view class="">
									数据来源
								</view>
								<view class="">
									<p>国家卫生健康委提供</p>
								</view>
							</view>
						</view>
					</view>
					<image class="btimg" src="../../static/img/image1.png" mode=""></image>
					<image src="../../static/img/icon6.png" mode="" class="icon"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import html2canvas from '@/static/html/js/html2canvas.js';
	import html2canvas from '@/static/html/js/test.js';
	import parse from '../../uParse-master/src/wxParse.vue'
	export default {
		data() {
			return {
				policy: '',
				setCity: '',
				reachCity: '',
				result: "",
				Height: "",
				isShow: true
			}
		},
		onShow() {
			console.log('1212')
			this.policy = uni.getStorageSync('policy')
			this.setCity = uni.getStorageSync('setCity');
			this.reachCity = uni.getStorageSync('reachCity');
		},
		onLoad(options) {
			var that = this
			uni.getSystemInfo({
				success: (res) => {
					this.Height = res.windowHeight
				}
			})
			var ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {

				this.status = 2
				setTimeout(function() {

				}, 1000)
				// this.drawImage()
				// this.isShow = false


			} else {
				this.status = 1
			}
			// this.drawImage
			//自定义分享
			const script = document.createElement('script')
			script.style = 'text/javascript';
			script.src = 'http://res.wx.qq.com/open/js/jweixin-1.6.0.js';
			document.getElementsByTagName('head')[0].appendChild(script);
			script.onload = () => {
				uni.request({
					url: 'http://epidemic.site.ximengnaikang.com/api/v1/wechat/share', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						url: location.href,
						apis: 'updateAppMessageShareData'
					},
					success: (res) => {
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: res.data.data.appId, // 必填，公众号的唯一标识
							timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.data.signature, // 必填，签名
							jsApiList: res.data.data.jsApiList // 必填，需要使用的JS接口列表
						})
						setTimeout(function() {
							wx.ready(function() { //需在用户可能点击分享按钮前就先调用
								wx.updateAppMessageShareData({
									title: '疫情隔离政策查询', // 分享标题
									desc: '足不出户即可查询,隔离政策最新情况信息', // 分享描述
									link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
									imgUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg', // 分享图标网络图片
									success: function() {
										// 设置成功
									}
								})
							});
						}, 2000)
					}
				})
			}
		},
		components: {
			parse
		},
		methods: {
			shengcheng: function() {
				var that=this
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300,
				});
				uni.showLoading({
					title: '图片生成中',
				})
				setTimeout(function(){
					html2canvas(document.querySelector('#shareImage'), {
						scale: 2,
						x: 0, // x坐标
						y: 0, // y坐标
						foreignObjectRendering: true, // 是否在浏览器支持的情况下使用ForeignObject渲染
						async: false, // 是否异步解析和呈现元素
						background: "#ffffff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
						// dpi: 300, // 处理模糊问题
						useCORS: true,
					
					}).then(imgDom => {
						let previewFile = imgDom.toDataURL('image/png');
						var image = new Image();
						image.src = previewFile;
						image.style.width = '100%';
						document.getElementById('boxImage').appendChild(image);
					});
					uni.hideLoading()
					that.status=3
					that.isShow = false
					uni.showToast({
						title: '图片已生成'
					})
				},1000)
				
				
			},
			saveImage() {
				html2canvas(document.querySelector('#shareImage'), {
					useCORS: true,
				}).then(canvas => {
					let previewFile = canvas.toDataURL('image/png');
					this.download(previewFile)
				});
			},
			download(url) {
				var oA = document.createElement("a");
				oA.download = ''; // 设置下载的文件名，默认是'下载'
				oA.href = url;
				console.log(url, 'po')
				document.body.appendChild(oA);
				const event = document.createEvent('MouseEvents');
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
			}

		}
	}
</script>

<style>
	page {
		height: 100%;

	}

	#size {
		margin: 30px;
		background-color: #00BFFF;
	}

	.border {
		/* 	width: 100%; */
		position: relative;
		/* min-height:100vh; */
		padding: 0 15px;
		padding-top: 50px;
		padding-bottom: 40px;
		/* 	height: 600px; */
		background: linear-gradient(180deg, #1E37EB 0%, #0FC6A1 100%);
	}

	/* #shareImage{
	height: 100vh;
	width: 100%;
} */
	.down {
		position: fixed;
		bottom: 0;
		height: 100upx;
		line-height: 100upx;
		width: 100%;
		text-align: center;
		z-index: 9999999999999;
	}

	.right_arrow {
		display: inline-block;
		vertical-align: center;
		height: 42upx;
		width: 100upx;
		margin: 0 10upx;
	}

	.down view {
		width: 40%;
		margin-left: 30%;
		text-align: center;
		font-size: 30upx;
		height: 80upx;
		line-height: 80upx;
		color: #FFFFFF;
		border-radius: 12upx;
		background-color: rgba(238, 82, 32, 0.8);
	}

	.content {
		padding: 60upx 34upx;
		background-color: #FFFFFF;
		border-radius: 12px;
		margin-bottom: 140px;
	}

	.btimg {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 408upx;
	}

	.icon {
		position: absolute;
		top: 46upx;
		right: 30upx;
		height: 80px;
		width: 80px;
	}

	.title_1 {
		text-align: center;
		font-size: 52upx;
		font-weight: bold;
		height: 112upx;
		margin-top: 10upx;
		line-height: 112upx;
		color: #23459D;
		opacity: 1;
	}

	.title_2 {
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		line-height: 34px;
		color: #333333;
		opacity: 1;
		margin-top: 30upx;
		margin-bottom: 20px;
	}

	.text_1 {
		font-size: 28upx;
		font-weight: 400;
		line-height: 21px;
		color: #333333;
		opacity: 1;
	}

	.tip_share {
		display: flex;
		margin-top: 10upx;
	}

	.left_share {
		flex: 0 0 80upx;
		margin-left: 5%;
	}

	.left_share image {
		height: 80px;
		width: 80px;

		/* margin-left: 10%; */
		/* right: 17px; */
	}

	.right_share {
		flex: 1;
		text-align: right;
		margin-top: 8px;
		font-size: 14px;
		font-weight: 400;
		line-height: 21px;
		color: #333333;
		opacity: 1;
	}
</style>