epidemic-h5/pages/index/detail.vue

<template>
	<view class="border">
		<view class="header">
            <!-- <image src="../../static/img/header.png" mode=""></image> -->
		</view>
		<view class="content">
			<view class="title">
				{{list.title}}
			</view>
			<view class="title1">
				<view class="time">
					更新时间：{{list.release_time}}
				</view>

			</view>
			<view class="text">
				<parse :content="list.body"></parse>
				<view class="source">
					<view class="">
						数据来源
					</view>
					<view class="">
						{{list.source}}
					</view>
				</view>
			</view>
			<view class="ad">
				<view class="ad-left">
					<image src="../../static/img/erwei1.jpg" mode=""></image>
				</view>
				<view class="ad-right">
					<view class="text1" @click="follow">
						关注公众号即可查询更多政策
					</view>
					<view class="text2">
						亲，微信规定，只有关注公众号才能获取变化提醒。
					</view>
				</view>
			</view>
			<view class="tip">
				免责说明:本页面信息仅提供参考,数据来源于官方.如要前往某地,可咨询当地社区办事处或当地政府.
			</view>
		</view>
		<view class="bottom-bt">
			<view class="left" @click="shareImage">
				分享
			</view>
			<view class="right" @click="feedBack">
				信息反馈
			</view>
		</view>
	</view>
</template>

<script>
	import {
		html2convas
	} from "../../static/html2canvas.js"
	import parse from '../../uParse-master/src/wxParse.vue'
	export default {
		data() {
			return {
				list:uni.getStorageSync('list'),
				content: "",
				isShow: false,
				Height: "",
				result: ""
			}
		},
		onLoad(options) {
			let list = uni.getStorageSync('list')
			console.log(list, 'list')
			//自定义分享
			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)
					}
				})
			}
		},
		methods: {
			//信息反馈
			feedBack() {
				uni.navigateTo({
					url: './feedBack'
				})
			},
			shareImage: function() {
				let list = JSON.stringify(this.list)
				console.log(this.list, "llll")
				uni.navigateTo({
					url: './share?list=' + list
				})
			},
			source:function(){
				console.log('909090')
				let url=this.list.source_link
				// let url="https://uniapp.dcloud.io/"
				location.href= url
			},
			//关注公众号
			follow:function(){
				uni.navigateTo({
					url:"./follow"
				})
			}
		},
		components: {
			parse
		}

	}
</script>

<style>
	page {
		height: 100vh;

	}

	.border {
		/* height: 100vh; */
		padding-bottom: 100upx;
		/* padding-bottom: 70upx; */
		/* position: relative; */

	}

	.header {
		width: 100%;
		height: 396upx;
		background-image: url(../../static/img/header.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
/* .header image{
	width: 100%;
	height: 396upx;
} */
	.content {
		padding: 30upx 30upx 130upx 30upx;
		/* padding-bottom: 0; */
		/* height: 900px; */
	}

	.title {
		font-size: 48upx;
		font-weight: 500;
		/* line-height: 78upx; */
		color: #333333;
		opacity: 1;
	}

	.title1 {
		display: flex;
		height: 78upx;
	}

	.time {
		flex: 1;
		font-size: 24upx;
		font-weight: 400;
		line-height: 78upx;
		color: #999999;
		opacity: 1;
	}

	.history {
		flex: 1;
		text-align: right;
		font-size: 28upx;
		font-weight: 500;
		line-height: 78upx;
		color: #23459D;
		opacity: 1;
	}

	.text {
		font-size: 28upx;
		font-weight: 400;
		line-height: 42upx;
		color: #333333;
		opacity: 1;
	}

	.ad {
		
		/* padding: 26upx; */
		width: 100%;
		/* margin: 0 auto; */
		padding: 30upx 0;
		margin-top: 60upx;
		display: flex;
		background-image: url(../../static/img/ad.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.ad-left {
		flex: 0 0 30%;
		
	}

	.ad-left image {
		height:184upx;
		width: 184upx;
		/* line-height: 184upx; */
		margin-left: 28upx;
	}

	.ad-right {
		padding: 0 26upx;
		flex:1;
	}

	.text1 {
		margin-top: 18upx;
		height: 64upx;
		line-height: 64upx;
		border: 2upx solid #FFFFFF;
		border-radius: 340upx;
		font-size: 28upx;
		text-align: center;
		font-weight: 400;
		color: #FFFFFF;
	}
	.source{
		text-align: right;
		}

	.text2 {
		/* padding: 0 30upx; */
		font-size: 24upx;
		text-align: center;
		font-weight: 400;
		line-height: 40upx;
		color: #FFFFFF;
		opacity: 1;
		margin-top: 10upx;
	}

	.tip {
		margin-top: 42upx;
		font-size: 24upx;
		font-weight: 400;
		line-height: 36upx;
		color: #999999;
		opacity: 1;
	}

	.bottom-bt {
		padding: 10upx 0;
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 80upx;
		display: flex;
		background-color: #FFFFFF;
		z-index: 999;
		border-top: solid 4upx #EEEEEE;
	}

	.left,
	.right {
		flex: 0 0 30%;
		height: 80upx;
		line-height: 80upx;
		background-color: #23459D;
		color: #FFFFFF;
		font-size: 32upx;
		text-align: center;
		border-radius: 40upx;
	}

	.left {
		margin-left: 15%;
		margin-right: 5%;
	}

	.right {
		margin-left: 5%;
		margin-right: 15%;
	}




	.body {
		position: relative;
		/* height:100%; */
		padding: 0 30upx;
		padding-top: 100upx;
		padding-bottom: 80upx;
		background: linear-gradient(180deg, #1E37EB 0%, #0FC6A1 100%);
	}

	.content {
		padding: 90upx 34upx;
		background-color: #FFFFFF;
		border-radius: 24upx;
		margin-bottom: 60upx;
	}

	.btimg {
		position: absolute;
		left: 0;
		bottom: 0;
	}

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

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

	/* 	#shareImage {
			position: fixed;
			z-index: -999999;
			top: 0;
			left: 0;
		} */

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

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

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

	.left_share {
		flex: 1;
	}

	.left_share image {
		height: 120upx;
		width: 120upx;
		margin-left: 106upx;
		right: 34upx;
	}

	.right_share {
		text-align: right;
		margin-top: 15upx;
		font-size: 28upx;
		font-weight: 400;
		line-height: 42upx;
		color: #333333;
		opacity: 1;
	}
</style>