epidemic-h5/pages/index/query.vue

<template>
	<view class="">

		<view class="" id="boxImage" style="background-color: #b8c1fb;">

		</view>
		<view class="configure" @click="configure">
			<image src="../../static/img/shezhi.png" mode=""></image>
		</view>
		<view class="shengcheng" @click="sure">
			点击生成图片
		</view>
		<view class="toast" v-show="adShow">
			<view class="toast-content">
				<view class="toast-title">
					广告信息配置
				</view>
				<view class="input-list">
					<view class="input-name">
						请输入名称：
						<view style="color: red;font-size: 24upx;">(必填)</view>
					</view>
					<input type="text" value="" v-model="name" placeholder="希梦耐康" />
					<view class="tips">
						最多输入4个字(例：希梦耐康)
					</view>
				</view>
				<view class="input-list">
					<view class="input-name">
						请输入广告：
						<!-- <text style="color:#007AFF ;font-size: 24upx;">(选填)</text> -->
					</view>
					<textarea value="" placeholder="" v-model="ad" placeholder="做软件找希梦耐康"/>
					<view class="tips">
						最多输入15个字(例：做软件找希梦耐康)
					</view>
				</view>
				<view class="input-list">
					<view class="input-name">
						请输入电话：
							<!-- <text style="color:#007AFF;font-size: 24upx;">(选填)</text> -->
					</view>
					<input type="text" value="" v-model="phone" placeholder="0371-6090951"/>
				</view>
				<view class="toast-bt">
					<view class="toast-left">
						<view class="" @click="cancel">
							取消
						</view>
					</view>
					<view class="toast-left">
						<view class="" @click="sure1">
							确定
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-show="isShow">
			<view id="shareImage">
				<view class="border">
					<view class="top-border">
						<image src="../../static/img/top.png" class="top">
						</image>
						<view class="top-content">
							<view class="text">
								<text class="name">{{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"  v-if="ad">
								{{ad}}
							</view>
							<view class="text3" v-if="phone">
								联系方式：{{phone}}
							</view>

						</view>
					</view>

					<view class="card" :class=" ad&&phone ? 'card' : 'card1'">
						<view class="card-title">
							统计截止：{{highTime}}（全国疫情）
						</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="heigh_city">
						<view class="city_title">
							<image class="icon" src="../../static/img/heigh.png" mode=""></image>高风险地区<text style="color: #FE0000;font-size: 48upx;margin: 0 10upx;">{{heighNum}}</text>个
						</view>
						<view class="time">
							统计截至：{{highTime}}
						</view>
						<view class="list" v-for="(item, index) in heighCity" :key='index'>
							<view class="list-left" style="color: #FE0000;background-color: #FFF4F3;" :style="{'padding-left':padding,'padding-right':rightpadding}">
								<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;margin: 0 10upx;">{{middleNum}}</text>个
						</view>
						<view class="time">
							统计截至：{{middleTime}}
						</view>
						<view class="list" v-for="(item, index2) in middleCity" :key='index2'>
							<view class="list-left" style="color: #FF9100;background-color: #FCF2E4;" :style="{'padding-left':padding,'padding-right':rightpadding}">
								<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">
						<view class="bt-border">
							<image src="../../static/img/erwei1.jpg" mode=""></image>
							<view class="save">
								长按图片发给朋友
							</view>
							<view class="source">
								数据来源：国家卫生健康委提供
							</view>
						</view>
					</view>

				</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: "",
				isShow: true,
				name: "希梦耐康",
				ad: '做软件就找希梦耐康',
				phone: "0371-6090951",
				adShow: false, //配置广告弹框
				release_time:"",
				highTime:"",
				middleTime:"",
				padding:"16upx",
				rightpadding:"-220upx"
			}
		},
		onLoad() {
			uni.showLoading({
				
			})
			uni.showModal({
				title: "提示",
				content: '点击右下角设置按钮可配置顶部广告信息',
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
			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接口列表
						})
						wx.ready(function() { //需在用户可能点击分享按钮前就先调用
								wx.updateAppMessageShareData({
									title: '全国中高风险地区查询', // 分享标题
									desc: '关注疫情，做好防范，全国中高风险地区汇总', // 分享描述
									link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
									imgUrl: 'https://resource.bike.hanyiyun.com/index1.png', // 分享图标网络图片
									success: function() {
														// 设置成功
									}
								})
							});
					}
				})
			}
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/risk/city',
				method: 'GET',
				success: (res) => {
					uni.hideLoading()
					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
					this.highTime=res.data.data.high.release_time
					this.middleTime=res.data.data.middle.release_time
				}
			})


		},
		methods: {
			configure: function() {
				this.adShow = true
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300,
				});
				this.name="",
				this.ad='',
				this.phone=""
			},
			cancel: function() {
				this.adShow = false
				this.name="希梦耐康",
				this.ad='做软件就找希梦耐康',
				this.phone="0371-6090951"
			},            
			sure1:function(){
			
				console.log(this.name.length)
				if(this.name.length>4){
					uni.showToast({
						title:'名称不得大于四个字',
						icon:'none'
					})
				}else if(this.name.length<1){
					uni.showToast({
						title:'名称不得为空',
						icon:'none'
					})
				}
				else if(this.ad.length>15){
					uni.showToast({
						title:'广告不得大于15个字',
						icon:'none'
					})
				}
				
				else{
					
					
					this.adShow = false
					uni.request({
						url: 'http://epidemic.site.ximengnaikang.com/api/v1/personal/info',
						method: 'POST',
						data:{
							name:this.name,
							description:this.ad,
							mobile:this.phone
						},
						success: (res) => {
							console.log(res,'pp')
						}
					})
				}
				
			},
			sure: function() {
				var that = this
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300,
				});
				
				this.padding='20upx'
				this.rightpadding='0'
				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
				}

			},
			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: 100vh; */
		background-color: #F9F9FB;
		/* width: 100vh; */
		overflow: hidden;
		/* background-color: #23459D; */
	}
	#shareImage{
	background-color: #F9F9FB;
	position: absolute;
	z-index: -10;
	width: 100%;
	overflow: hidden;
	}
#boxImage{
	position: absolute;
	top:0;
	left: 0;
	z-index:99; 
	height: 100%;
}
	.toast {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		/* height: 100vh; */
		z-index: 50;
	}

	.toast-content {
		mine-height: 50%;
		margin: 0 60upx;
		margin-top: 55%;
		padding-top: 30upx;
		background-color: #FFFFFF;
		padding-bottom: 50upx;
		border-radius: 12upx;
	}

	.toast-title {
		text-align: center;
		height: 70upx;
		font-size: 30upx;
		font-weight: bold;
		line-height: 70upx;
	}

	.input-list {
		padding:20upx 30upx 0;
		font-size: 28upx;
	}

	.tips {
		font-size: 24upx;
		color: red;
		margin-left: 30%;
		margin-top: 10upx;
	}

	.toast-bt {
		width: 100%;
		margin-top: 50upx;
		display: flex;
		/* margin-bottom: 50upx; */
	}

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

	.toast-left view {
		width: 150upx;
		height: 70upx;
		line-height: 70upx;
		background-color: #007AFF;
		border-radius: 12upx;
		color: #FFFFFF;
		font-size: 26upx;
		text-align: center;
		display: inline-block;
	}

	.input-name {
		font-weight: 500;
		/* width: 30%; */
		display: inline-block;
		vertical-align: middle;
	}

	input {
		display: inline-block;
		height: 70upx;
		line-height: 70upx;
		vertical-align: middle;
		background-color: #F7F7F7;
		padding-left: 20upx;
		width:62%;
	}
	textarea{
		display: inline-block;
		line-height: 50upx;
		height: 110upx;
		vertical-align: top;
		background-color: #F7F7F7;
		width:62%;
		padding-left: 20upx;
	}

	.border {
		padding-bottom: 600upx;
		/* background-color: #b8c1fb; */
	}

	.top-border {
		position: relative;
		
	}

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

	}

	.top-content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding-left: 20upx;
		color: #FFFFFF;
		font-family: YouSheBiaoTiHei;
		/* z-index: 888; */
	}

	.text {
		margin-top: 100upx;
		font-size: 48upx;
		font-family: YouSheBiaoTiHei;
	}

	.name {
		font-size: 74upx;
		color: #FFC86A;
		margin-right: 20upx;
		font-family: YouSheBiaoTiHei;
	}

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

	.diqu {
		color: #FFC86A;
		font-family: YouSheBiaoTiHei;
	}

	.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: 34upx;
		margin-left: 10upx;
		padding-left: 20upx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;

	}

	.card {
		position: relative;
		/* z-index: 10; */
		background-color: #FFFFFF;
		margin: 0 30upx;
		background-color: #FFFFFF;
		margin-top: -220upx;
		border-radius: 15upx;
		padding: 30upx;
	}
.card1 {
		position: relative;
		/* z-index: 10; */
		background-color: #FFFFFF;
		margin: 0 30upx;
		background-color: #FFFFFF;
		margin-top: -330upx;
		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;
		margin-right: 5upx;
	}

	.num2 {
		font-size: 48upx;
		color: #FF9100;
		margin-right: 5upx;
	}

	.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;
		position: relative;
		/* z-index: 1; */
	}

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

	}

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

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

	.list-left {
		flex: 0 0 40upx;
		font-size: 40upx;
		font-weight: bold;
		padding: 10upx 0;
		line-height: 50upx;
		border-radius: 12upx;
		margin-right: 30upx;
		min-height: 250upx;
		padding-left: 16upx;
		padding-right: 16upx;
		/*文字居中*/
		text-align: center;
		line-height: 50upx;
		display: flex;

	}

	.list-left text {
		/*文字竖排*/
		/* background-color: #00BFFF; */
		/* height: 100%; */
		writing-mode: vertical-lr;
		/*从左向右 从右向左是 writing-mode: vertical-rl;*/
		writing-mode: tb-lr;
		/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
		letter-spacing: 20upx;
		/*单词之间的距离*/
		/* word-spacing: 10px; */
	}

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

	.right-text {
		display: flex;
		/* min-height: 70upx; */
		line-height:35upx;
		margin: 25upx 0;
		width: 100%;
		/* display: flex;justify-content: center;align-items: center; */
	}

	.text-left {
		flex: 1;

	}

	.text-left view {}

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

	.bt {
		min-height: 820upx;
		position: absolute;
		margin-top: -200upx;
		width: 100%;
		z-index: -20;
		text-align: center;
		background: linear-gradient(180deg, #FFFFFF 0%, #0158E5 54%, #0158E5 100%);
		color: #FFFFFF;
		padding-bottom:50upx;
	}
    .bt-border{
		position: absolute;
		bottom: 100upx;
		width: 100%;
	}
	.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;
	}

	.configure {
		position: fixed;
		height: 80upx;
		width: 80upx;
		bottom: 200upx;
		right: 30upx;
		/* background-color: #23459D; */
		z-index: 40;
		border-radius: 50%;
		overflow: hidden;
	}

	.configure image {
		height: 80upx;
		width: 80upx;
	}
	.shengcheng{
		position: fixed;
		 width:30%;
		 font-size: 30upx;
		 height: 70upx;
		 line-height: 70upx;
		 border-radius: 15upx;
		 background-color: #ffaa7f;
		 z-index: 40;
		 left: 35%;
		 text-align: center;
		 color: #FFFFFF;
		 margin: 0 auto;
		 bottom:70upx;
		 
		}
</style>