epidemic-h5/pages/index/index.vue

<template>
	<view class="border">
		<view class="header">

		</view>
		<view class="toast" v-show="isShow">
			<view class="toast-list">
				<view class="list-left">
					<view v-for="(item,index) in Province" :key='index' @click="changProvince(index,item)">
						<view class="name" :class="curPage==index ? 'active':''">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="list-right">
					<view v-for="(item, index1) in City" :key='index1' @click="changCity(index1,item)">
						<view class="name" :class="Page==index1 ? 'active':''">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="cha" @click="close">
				<image src="../../static/img/cha.png" mode=""></image>
			</view>

		</view>
		<view class="select">
			<view class="setcity" @click="searchSetCity">
				<view class="title">
					出发城市
				</view>
				<view class="city">
						{{setName}}
					<image src="../../static/img/down.png" mode=""></image>
				</view>
			</view>
			<view class="change" @click="changeCity">
				<image src="../../static/img/change.png" mode=""></image>
			</view>
			<view class="reachcity" @click="searchReachCity">
				<view class="title">
					到达城市
				</view>
				<view class="city">
						{{reachName}}
					<image src="../../static/img/down.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="set">
				<view class="text">
					<image src="../../static/img/icon2.png" mode=""></image>
					<view class="text1">
						出发地：{{setName}}
					</view>
					<view class="text2" v-if="setpoilist.high_num!=0 && setpoilist.high_num">
						高风险地区
						<view class="num1">
							{{setpoilist.high_num}}
						</view>
					</view>
					<view class="text3" v-if="setpoilist.middle_num!=0  && setpoilist.middle_num">
						中风险地区
						<view class="num2">
							{{setpoilist.middle_num}}
						</view>
					</view>
				</view>
				<view class="source">
					<text>数据来源：当地卫健委</text><text style="margin: 0 10upx;">|</text><text>发布时间：{{setPolicy.leave_policy_date}}</text>
				</view>
				<view class="conter">
					<p v-for="(item,index2) in setPolicy.leave_policy_list" :key='index2'>
						{{item}}
					</p>
				</view>
			</view>
			<view class="reach">
				<view class="text">
					<image src="../../static/img/icon1.png" mode=""></image>
					<view class="text1">
						目的地：{{reachName}}
					</view>
					<view class="text2" v-if="reachpoilist.high_num && reachpoilist.high_num!=0">
						高风险地区
						<view class="num1">
							{{reachpoilist.high_num}}
						</view>
					</view>
					<view class="text3" v-if="reachpoilist.middle_num && reachpoilist.middle_num!=0">
						中风险地区
						<view class="num2">
							{{reachpoilist.middle_num}}
						</view>
					</view>
				</view>
				<view class="source">
					<text>数据来源：当地卫健委</text><text style="margin: 0 10upx;">|</text><text>发布时间：{{reachPolicy.back_policy_date}}</text>
				</view>
				<view class="conter">
					<p v-for="(item,index2) in reachPolicy.back_policy_list" :key='index2'>
						{{item}}
					</p>
				</view>
			</view>
		</view>
		<view class="bottom-bt">
			<view class="left" @click="shareImage">
				分享
			</view>
			<view class="right" @click="feedBack">
				信息反馈
			</view>
		</view>
	</view>
</template>

<script>
	import jcAddressPicker from '@/components/easy-select/easy-select.vue'
	export default {
		data() {
			return {
				Page: 0,
				curPage: 0,
				isShow: false,
				setProvinceCode: '', //出发地省份索引
				reachProvinceCode: '', //目的地省份索引
				setCityCode: '', //出发地省份索引
				reachCityCode: '', //目的地省份索引
				Province: '', //省份
				City: '', //城市
				setName: "请选择", //出发城市名称
				reachName: "请选择", //到达城市名称
				status: '', //判断当前为出发地还是目的地0出发，1目的
				index: 0,
				index1: 0,
				setPolicy: "",
				reachPolicy: "",
				setName1: "",
				reachpoilist: "",
				setpoilist: '',
				City1:''
			}
		},
		onLoad() {
			
			var that = this
			uni.showLoading({})
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces', //仅为示例，并非真实接口地址。
				method: 'GET',
				success: (res) => {
					if (res.data.code == 200) {
						console.log(res.data.data)
						this.Province = res.data.data
						this.setProvinceCode = res.data.data[0].code
						this.reachProvinceCode = res.data.data[0].code
						uni.request({
							url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces/' + this.setProvinceCode, //仅为示例，并非真实接口地址。
							method: 'GET',
							success: (res) => {
								if (res.data.code == 200) {
									console.log(res, 'res')
									this.City = res.data.data
									this.City1=res.data.data
									uni.request({
										url: 'http://epidemic.site.ximengnaikang.com/api/v1/city/policy', //仅为示例，并非真实接口地址。
										method: 'POST',
										data: {
											city_code: this.City[0].code
										},
										success: (res) => {
											uni.hideLoading()
											if (res.data.code == 200) {
												this.setCityCode = this.City[0].code
												this.reachCityCode = this.City[0].code
												console.log(res.data.data)
												this.setName = this.City[0].name
												this.reachName = this.City[0].name
												this.setPolicy = res.data.data
												this.reachPolicy = res.data.data
												this.reachpoilist = res.data.data.poi_list
												that.setpoilist = res.data.data.poi_list
												uni.setStorageSync('setCity', this.setName)
												uni.setStorageSync('reachCity', this.reachName)
												uni.setStorageSync('policy', res.data.data.back_policy_list)
											} else {
												uni.showToast({
													title: res.data.message,
													icon: 'none'
												})
											}
										}
									})
								} else {
									uni.showToast({
										title: res.data.message,
										icon: 'none'
									})
								}
							}
						})
			
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				}
			})
			var ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				//自定义分享
				const script = document.createElement('script')
				script.style = 'text/javascript';
				script.src = 'http://res.wx.qq.com/open/js/jweixin-1.6.0.js';
				const script1 = document.createElement('script1')
				script1.style = 'text/javascript';
				script1.src = 'http://map.qq.com/api/js?v=2.exp';
				document.getElementsByTagName('head')[0].appendChild(script);
				script.onload = () => {
					uni.request({
						url: 'http://epidemic.site.ximengnaikang.com/api/v1/wechat/share',
						method: 'POST',
						data: {
							url: 'http://h5.epidemic.site.ximengnaikang.com/#/',
							apis: 'updateAppMessageShareData,getLocation'
						},
						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://resource.bike.hanyiyun.com/index.jpg', // 分享图标网络图片
										success: function() {
											// 设置成功
										}
									})
								});
							}, 1000)
							// uni.showLoading({
							// 	title:"位置加载中",	
							// })
				
								wx.ready(function() {
									wx.getLocation({
										type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
										success: function(res) {
											var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
											var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
											var speed = res.speed; // 速度，以米/每秒计
											var accuracy = res.accuracy; // 位置精度
											console.log('89898')
											
											uni.request({
												url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/location2CityCode', //仅为示例，并非真实接口地址。
												method: 'POST',
												data: {
													lat: latitude,
													lng: longitude
												},
												success: (res) => {
													if (res.data.code == 200) {
														console.log(res, '地址解析')
														var date = res.data.data
														uni.request({
															url: 'http://epidemic.site.ximengnaikang.com/api/v1/city/policy', //仅为示例，并非真实接口地址。
															method: 'POST',
															data: {
																city_code: date.code
															},
															success: (res) => {
																// uni.hideLoading()
																if (res.data.code == 200) {
																	// uni.hideLoading()
																	// this.setName='郑州市1'
																	that.setCityCode = date.code
																	// this.reachCityCode = this.City[0].code
																	console.log(res.data.data)
																	that.setName = res.data.data.city
																	console.log(that, 'that')
																	// that.$set(that,'setName',res.data.data.city)
				
																	// this.setName='郑州市'
																	console.log(that.setName, 'this.setName')
																	// this.reachName = this.City[0].name
																	that.setPolicy = res.data.data
																	that.setpoilist = res.data.data.poi_list
																	// this.reachPolicy = res.data.data
																	uni.setStorageSync('setCity', that.setName)
																	// uni.setStorageSync('reachCity', this.reachName)
																	// uni.setStorageSync('policy', res.data.data.back_policy_list)
																} else {
																	uni.showToast({
																		title: res.data.message,
																		icon: 'none'
																	})
																}
				
				
															}
														})
													} else {
														uni.showToast({
															title: res.data.message,
															icon: 'none'
														})
													}
												}
											})
				
										},
									})
								})
							
						},
					})
				}
				
			}
			
		},
		methods: {
			//出发地搜索
			searchSetCity: function() {
				this.City=this.City1
				this.curPage = 0
				this.Page = 0
				this.isShow = true
				this.status = 0
			},
			//目的地搜索
			searchReachCity: function() {
				this.isShow = true
				this.City=this.City1
				this.curPage = 0
				this.Page = 0
				this.status = 1
			},
			//关闭遮罩层
			close: function() {
				this.isShow = false
			},
			changProvince: function(index, e) {
				uni.showLoading()
				var result = e
				this.curPage = index
				uni.request({
					url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces/' + result.code, //仅为示例，并非真实接口地址。
					method: 'GET',
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 200) {
							console.log(res, 'res1')
							this.City = res.data.data
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none"
							})
						}

					}
				})
			},
			//修改城市
			changCity: function(index1, item) {
				this.isShow = false
				uni.showLoading()
				var city_code = item.code
				uni.request({
					url: 'http://epidemic.site.ximengnaikang.com/api/v1/city/policy', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						city_code: city_code
					},
					success: (res) => {
						uni.hideLoading()
						console.log(res, 'pppp')
						if (res.data.code == 200) {
							if (this.status == 0) {
								this.setCityCode = city_code
								this.setName = item.name
								this.setPolicy = res.data.data
								this.setpoilist = res.data.data.poi_list
								uni.setStorageSync('setCity', this.setName)
								

							} else if (this.status == 1) {
								this.reachName = item.name
								this.reachCityCode = city_code
								this.reachPolicy = res.data.data
								this.reachpoilist = res.data.data.poi_list
								uni.setStorageSync('setCity', this.setName)
								uni.setStorageSync('reachCity', this.reachName)
								uni.setStorageSync('policy', res.data.data.back_policy_list)
							}
							
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none"
							})
						}

					}
				})
			},
			//修改出发地和目的地
			changeCity: function() {
				// uni.showLoading()
				var setname = this.setName
				var reachname = this.reachName
				this.setName = reachname
				this.reachName = setname
				var setCityCode = this.setCityCode
				var reachCityCode = this.reachCityCode
				console.log(this.setCityCode, 'this.setCityCode')
				console.log(this.reachCityCode, 'this.reachCityCode')
				uni.request({
					url: 'http://epidemic.site.ximengnaikang.com/api/v1/city/policy', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						city_code: reachCityCode
					},
					success: (res) => {
						// uni.hideLoading()
						if (res.data.code == 200) {
							this.setCityCode = reachCityCode
							this.setPolicy = res.data.data
							this.setpoilist = res.data.data.poi_list
							uni.setStorageSync('setCity', this.setName)
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none"
							})
						}


					}
				})
				uni.request({
					url: 'http://epidemic.site.ximengnaikang.com/api/v1/city/policy', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						city_code: setCityCode
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.reachCityCode = setCityCode
							this.reachPolicy = res.data.data
							this.reachpoilist = res.data.data.poi_list
							uni.setStorageSync('reachCity', this.reachName)
							uni.setStorageSync('policy', res.data.data.back_policy_list)
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none"
							})
						}


					}
				})
			},

			//信息反馈
			feedBack: function() {
				uni.navigateTo({
					url: './feedBack'
				})
			},
			//分享

			shareImage() {
				uni.navigateTo({
					url: './share'
				})
			},
			//关注公众号
			subscribe: function() {
				uni.navigateTo({
					url: './follow'
				})
			},


		},

	}
</script>

<style>
	page {
		height: 100vh;
		width: 100%;
		background-color: #f4f4f4;


	}

	.toast {
		position: fixed;
		top: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.7);
		height: 100vh;
		z-index: 9999999999;
		width: 100%;
	}

	.toast-list {
		background-color: #FFFFFF;
		height: 75%;
		width: 90%;
		margin: 0 auto;
		margin-top: 25%;
		display: flex;
		border-radius: 15upx;
		overflow: hidden;
		/* padding: 20upx 0; */
	}

	.list-left {
		flex: 0 0 45%;
		font-size: 32upx;
		overflow-y: scroll;
		text-align: center;
		background-color: #f0f0f0;
	}

	.cha {
		margin: 0 auto;
		margin-top: 30upx;
		width: 100%;


	}

	.cha image {
		height: 60upx;
		width: 60upx;
		margin: 0 auto;
		display: block;
	}

	/* ::-webkit-scrollbar {
display: none;
} */
	.list-right {
		flex: 1;
		font-size: 32upx;
		overflow-y: scroll;
		/* 	height: 100upx; */
		overflow-y: scroll;
		line-height: 100upx;
		text-align: left;
		padding-left: 60upx;
		/* background-color: #23459D; */
	}

	.name {
		padding: 0 10upx;
		min-height: 100upx;
		line-height: 100upx;
		/* background-color: #f0f0f0; */
		/* padding: 20upx 30upx; */
	}

	.active {
		background-color: #FFFFFF;
		color: #23459D;
	}

	.province {
		background-color: #F7F7F7;
		margin: 0 10upx;
		text-align: center;
		background-image: url(../../static/img/down.png);
		background-repeat: no-repeat;
		background-size: 30upx;
		background-position: 95% center;

	}

	.province view {
		width: 85%;
		/* 	text-align: left; */
		word-break: keep-all;

		white-space: nowrap;

		overflow: hidden;

		text-overflow: ellipsis;

		white-space: nowrap;
	}

	.border {
		height: 100vh;

		/* position: relative; */

	}

	.header {
		width: 100%;
		height: 396upx;
		background-image: url(../../static/img/header6.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.header image {
		width: 100%;
		height: 198px;
	}

	.select {
		display: flex;
		padding: 30upx;
		width: 85%;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 20upx;
		margin-top: -100upx;
	}

	.setcity,
	
	.reachcity {
		flex: 1;
		width: 100%;
		text-align: center;
	}
	.change{
		flex: 0 0 70upx; 
	}

	.title {
		font-size: 28upx;
		height: 50upx;
		line-height: 50upx;
		color: #3B4144;
		text-align: center;
	}

	.city {
		font-size: 36upx;
		font-weight: bold;
		height: 70upx;
		line-height: 70upx;
		text-align: center;
	}

	.city image {
		height: 30upx;
		width: 30upx;
		display: inline-block;
		vertical-align: middle;
		margin-left: 10upx;
	}

	.change image {
		height: 60upx;
		width: 60upx;
		margin-top: 30upx;
	}

	.content {

		/* width: 85%; */
		margin: 0 auto;
		margin-top: 10upx;
		padding: 30upx;
		padding-bottom: 110upx;

	}

	.reach,
	.set {
		padding: 30upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
	}

	.reach {
		margin-top: 30upx;
	}

	.text {
		height: 70upx;
		line-height: 70upx;
	}

	.text1,
	.text2,
	.text3 {
		display: inline-block;
		margin-right: 10upx;
	}

	.text image {
		height: 32upx;
		width: 30upx;
		margin-right: 10upx;
		display: inline-block;
		vertical-align: middle;
	}

	.text1 {
		font-size: 28upx;
		font-weight: bold;
	}

	.text2,
	.text3 {
		font-size: 20upx;
		height: 35upx;
		line-height: 35upx;
		padding-left: 5upx;
		border-radius: 10upx;

		text-align: center;
	}

	.num1,
	.num2 {
		width: 35upx;
		heigh: 35upx;
		display: inline-block;
		vertical-align: top;

		color: #FFFFFF;
		margin-left: 5upx;
	}

	.num1 {
		background-color: #ff6164;
	}

	.num2 {
		background-color: #ffa657;
	}

	.text2 {
		color: #ff6164;
		background-color: rgba(255, 97, 100, 0.1);
		border: solid 2upx #ff6164;
	}

	.text3 {
		color: #ffa657;
		background-color: rgba(255, 166, 87, 0.1);
		border: solid 2upx #ffa657;
	}

	.source {
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
		color: #9f9d9e;
	}

	.conter {
		line-height: 42upx;
		font-size: 26upx;
		color: #4b4a4a;
		margin-top: 20upx;
	}
	
	.conter p{
		padding: 2upx 0 8upx 0;
		line-height: 40upx;
		/* color: #4b4a4a; */
		color: #666;
		font-size: 28upx;
		text-align:justify;
	}

	.tip {
		margin-top: 42upx;
		font-size: 26upx;
		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%;
	}
</style>