epidemic-h5/pages/index/twxt.vue

<template>
	<view class="border">
		
	<view class="" id="boxImage">
	
	</view>
	
	<view  id="shareImage">
		<view class="top-border" >
			<image src="../../static/img/top.png" class="top">
			</image>
			<view class="top-content">
				<view class="text">
					<text class="name">吴根花</text><text>提醒您关注</text>
				</view>
				<view class="text1">
					全国<text class="diqu">中高风险</text>地区
				</view>
				<image src="../../static/img/line.png" mode="" class="line"></image>
				<view class="text2">
					买房卖房·童叟无欺·就找吴丹花
				</view>
				<view class="text3">
					联系方式：15836692817
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-title">
				统计截止：2020-01-22（全国疫情）
			</view>
			<view class="card-content">
				<view class="con-top">
					<view class="con-left">
						<view class="nums">
							<text class="num1">{{heighNum}}</text>个
						</view>
						<view class="text_1">
							<image src="../../static/img/heigh1.png" class="dian" mode=""></image>
							<text>高风险地区</text>
						</view>
					</view>
					<view class="con-left">
						<view class="nums">
							<text class="num2">{{middleNum}}</text>个
						</view>
						<view class="text_1">
							<image src="../../static/img/middle1.png" class="dian" mode=""></image>
							<text>中风险地区</text>
						</view>
					</view>
				</view>
				<view class="card-tip">
					其余未列出的均为低风险地区
				</view>
			</view>
			<view class="bt-tip">
				由国家卫生健康委每日15时汇总各地疫情风险等级数据
			</view>
		</view>
		<view class="" @click="saveImage">>
			下载
		</view>
		<view class="heigh_city"  >
			<view class="city_title">
				<image class="icon" src="../../static/img/heigh.png" mode=""></image>高风险地区<text style="color: #FE0000;font-size: 48upx;">{{heighNum}}</text>个
			</view>
			<view class="time">
				统计截至：2020-01-20
			</view>
			<view class="list" v-for="(item, index) in heighCity" :key='index'>
				<view class="list-left" style="color: #FE0000;background-color: #FFF4F3;">
					<text>{{item.province}}</text>
				</view>
				<view class="list-right">
					<view class="right-text" v-for="(item1,index1) in item.list" :key='index1'>
						<view class="text-left">
							<view>{{item1.detail}}</view>
						</view>
						<view class="text-right" style="color:#FE0000;">
							{{item1.risk}}
						</view>
					</view>


				</view>
			</view>
		</view>
		<view class="heigh_city">
			<view class="city_title">
				<image src="../../static/img/middle.png" class="icon" mode=""></image>中风险地区<text style="color: #FFB300;font-size: 48upx;">{{middleNum}}</text>个
			</view>
			<view class="time">
				统计截至：2020-01-20
			</view>
			<view class="list" v-for="(item, index2) in middleCity" :key='index2'>
				<view class="list-left" style="color: #FF9100;background-color: #FCF2E4;">
					<text>{{item.province}}</text>
				</view>
				<view class="list-right">
					<view class="right-text" v-for="(item1,index3) in item.list" :key='index3'>
						<view class="text-left">
							<view>{{item1.detail}}</view>
						</view>
						<view class="text-right" style="color: #FF9100;">
							{{item1.risk}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bt">
			<image src="../../static/html/img/erwei.jpg" mode=""></image>
			<view class="save">
				长按图片发给朋友
			</view>
			<view class="source">
				数据来源：国家卫生健康委提供
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	// import html2canvas from '@/static/html/js/test.js';
	import html2canvas from '@/static/html/js/html2canvas.js';
	export default {
		data() {
			return {
				heighCity: "",
				middleCity: "",
				heighNum: "",
				middleNum: ""
			}
		},
		onLoad() {
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/risk/city',
				method: 'GET',
				success: (res) => {
					console.log(res, 'res')
					this.heighCity = res.data.data.high.lists
					this.middleCity = res.data.data.middle.lists
					console.log(this.heighCity, 'heighCity')
					console.log(this.middleCity, 'this')
					this.heighNum = res.data.data.high_num
					this.middleNum = res.data.data.middle_num

				}
			})
			// var ua = window.navigator.userAgent.toLowerCase();
			// if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			// 	uni.showLoading({
			// 		title: '图片生成中',
			// 	})
			// 	// this.status = 2
			// 		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()
			// 			uni.showToast({
			// 				title: '图片已生成'
			// 			})
			// 			that.isShow = false
			// 		}, 1000)
			// 	// this.drawImage()
			// 	// this.isShow = false
			
			
			// } else {
			// 	// this.status = 1
			// }
			
		},
		methods:{
			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 {
		background-color: #F9F9FB;
	}

	.border {
		position: relative;
		z-index: 22;
	}

	.top-border {
		position: relative;
	}

	.top {
		width: 100%;
		height: 768upx;

	}

	.top-content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding-left: 20upx;
		color: #FFFFFF;
		z-index: 888;

	}

	.text {
		margin-top: 100upx;
		font-size: 52upx;
	}

	.name {
		font-size: 92upx;
		color: #FFC86A;
		margin-right: 30upx;
	}

	.text1 {
		font-size: 66upx;
		margin-left: 20upx;
	}

	.diqu {
		color: #FFC86A;
	}

	.line {
		height: 21upx;
		width: 67%;
		margin-bottom: 10upx;
		margin-top: 10upx;
		margin-left: 20upx;
	}

	.text2 {
		font-size: 32upx;
		margin-bottom: 20upx;
		margin-left: 20upx;
	}

	.text3 {
		width: 70%;
		background-color: #FFFFFF;
		height: 60upx;
		line-height: 60upx;
		color: #0158E5;
		font-size: 36upx;
		margin-left: 10upx;
		padding-left: 20upx;
	}

	.card {
		position: relative;
		z-index: 10;
		background-color: #FFFFFF;
		margin: 0 30upx;
		background-color: #FFFFFF;
		margin-top: -250upx;
		border-radius: 15upx;
		padding: 30upx;
	}

	.card-title {
		height: 70upx;
		line-height: 70upx;
		font-size: 28upx;
		padding-bottom: 30upx;
	}

	.card-content {
		border-bottom: solid 2upx #EEEEEE;
		border-top: solid 2upx #EEEEEE;
	}

	.con-top {
		display: flex;
	}

	.con-left {
		flex: 1;
		text-align: center;
	}

	.nums {
		height: 100upx;
		line-height: 100upx;
		font-size: 36upx;
	}

	.num1 {
		font-size: 48upx;
		color: #FE0000;
	}

	.text_1 {
		font-size: 28upx;
		/* height: 50upx;
		line-height: 50upx; */
	}

	.dian1 {
		height: 24upx;
		width: 24upx;
		border-radius: 50%;
		background: #FE2400;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10upx;
	}

	.dian2 {
		height: 24upx;
		width: 24upx;
		border-radius: 50%;
		background: #FFB300;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10upx;
	}

	.card-tip {
		height: 100upx;
		font-size: 28upx;
		line-height: 100upx;
		text-align: center;
	}

	.bt-tip {
		text-align: center;
		font-size: 24upx;
		height: 80upx;
		line-height: 100upx;
		color: #999999;
	}

	.heigh_city {
		margin: 0 30upx;
		margin-top: 30upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		padding: 0 30upx;
		padding-bottom: 30upx;
	}

	.city_title {
		height: 100upx;
		line-height: 100upx;
		font-size: 36upx;
		font-weight: bold;

	}

	.time {
		font-size: 28upx;
		color: #999999;
		height: 50upx;
		line-height: 50upx;
	}

	.list {
		display: flex;
		margin-top: 40upx;
	}

	.list-left {
		flex: 0 0 72upx;
		font-size: 40upx;
		font-weight: bold;

		padding: 20upx 0;
		border-radius: 12upx;
		margin-right: 30upx;
		min-height: 200upx;
		/*文字居中*/
		text-align: center;
		display: flex;

	}

	.list-left text {
		/*文字竖排*/
		margin-left: 10upx;
		/* height: 100%; */
		writing-mode: vertical-lr;
		/*从左向右 从右向左是 writing-mode: vertical-rl;*/
		writing-mode: tb-lr;
		/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
	}

	.list-right {
		flex: 1;
		font-size: 28upx;
	}

	.right-text {
		display: flex;
		min-height: 60upx;
		line-height: 60upx;
		width: 100%;
	}

	.text-left {
		flex: 1;

	}

	.text-left view {
	
	}

	.text-right {
		flex: 0 0 110upx;
		/* background-color: #007AFF; */
		text-align: center;
	}

	.bt {
		min-height: 600upx;
		position: relative;
		margin-top: -200upx;
		width: 100%;
		z-index: -10;
		text-align: center;
		background: linear-gradient(180deg, #FFFFFF 0%, #0158E5 54%, #0158E5 100%);
		color: #FFFFFF;
		padding-bottom: 50upx;
	}

	.bt image {
		margin: 0 auto;
		margin-top: 300upx;
		height: 300upx;
		width: 300upx;
	}

	.save {

		font-size: 36upx;
		margin-top: 50upx;
		height: 50upx;
		line-height: 50upx;
		font-weight: bold;
	}

	.source {
		font-size: 28upx;
		height: 100upx;
		line-height: 100upx;
		font-weight: 500;
	}

	.icon {
		display: inline-block;
		/* vertical-align: middle; */
		height: 36upx;
		margin-right: 10upx;
		width: 40upx;
	}

	.dian {
		height: 24upx;
		width: 24upx;
		display: inline-block;
		margin-right: 20upx;
	}
</style>