epidemic-h5/pages/index/index2.vue

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

		</view>
		<view class="search">
			<view class="title">
				获取政策隔离信息
			</view>
			<view class="list">
				<view class="list1">
					<image src="../../static/img/icon1.png" mode=""></image>
					<view>出发城市：</view>
				</view>
				<view class="list2">
					<picker mode="selector" :range="setProvince" @change="selectProvince" :range-key="'name'" class="province" :value="index">
						<view class="school-name"><text> {{setProvince[index].name}}</text></view>
					</picker>

				</view>
				<view class="list2">
					<picker mode="selector" :range="setCity" :range-key="'name'" @change="selectCity" :value="index1" class="province">
						<view>{{setCity[index1].name}}</view>
					</picker>
					<!-- <view class="content" @click="useOutClickSide">
				           <easy-select ref="easySelect" size="medium" :value="selecValue" @selectOne="selectOne"></easy-select>
				    </view> -->
				</view>

			</view>
			<view class="list">
				<view class="list1">
					<image src="../../static/img/icon2.png" mode=""></image>
					<view>到达城市：</view>
				</view>
				<view class="list2">
					<picker mode="selector" :range="reachProvince" :range-key="'name'" :value="index2" @change="arriveProvince" class="province">
						<view>{{reachProvince[index2].name}}</view>
					</picker>
				</view>
				<view class="list2">
					<picker mode="selector" :range="reachCity" :range-key="'name'" @change="arriveCity" :value="index3" class="province">
						<view>{{reachCity[index3].name}}</view>
					</picker>

				</view>

			</view>
			<view class="list">
				<view class="list1">
					<image src="../../static/img/icon3.png" mode=""></image>
					<view>出发路径：</view>
				</view>
				<view class="list2">
					<text>{{setCity[index1].name}}</text>-- <text>{{reachCity[index3].name}}</text>
				</view>
			</view>
			<view class="list">
				<view class="list1">
					<image src="../../static/img/icon4.png" mode=""></image>
					<view>更新时间：</view>
				</view>
				<view class="list2">
					{{list.release_time}}
				</view>
			</view>
			<view class="list">
				<view class="list1">
					<image src="../../static/img/icon5.png" mode=""></image>
					<view>隔离政策：</view>
				</view>

			</view>
			<view class="zhengce" v-if="this.list.body">
				<view class="text">
					{{list.body}}
				</view>
				<view class="detail" @click="policyDetail">
					查看详情>>
				</view>
			</view>
			<view class="zhengce" v-if="this.list && !this.list.body ">
				目的地暂未发布隔离政策，详情请咨询当地疫情防控相关部门
			</view>
			<view class="tips" @click="subscribe">
				订阅公众号，隔离信息更新第一时间推送给您>>
			</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 jcAddressPicker from '@/components/easy-select/easy-select.vue'
	export default {
		data() {
			return {
				isShow: false,
				places: ['上海市', '黄浦区'],
				visible: false,
				level: 2,
				setProvince: [{
					name: '请选择',
					code: '请选择'
				}],
				index: 0,
				index1: 0,
				index2: 0,
				index3: 0,
				setCity: [{
					name: '请选择',
					code: '请选择'
				}],
				reachProvince: [{
					name: '请选择',
					code: '请选择'
				}],
				reachCity: [{
					name: '请选择',
					code: '请选择'
				}],
				list: ''
			}
		},
		onLoad() {
			var that = this
			console.log(that.setProvince)
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces', //仅为示例，并非真实接口地址。
				method: 'GET',
				success: (res) => {
					that.setProvince = that.setProvince.concat(res.data.data)
					that.reachProvince = that.reachProvince.concat(res.data.data)
					console.log(that.setProvince)
				}
			})

			//自定义分享
			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: 'http://h5.epidemic.site.ximengnaikang.com/#/',
						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: {
			change(data) {
				this.places = data.map(i => i.name);
			},
			showAddress() {
				this.visible = true;
			},
			selectProvince(e) {
				var that = this
				this.index = e.detail.value
				// console.log(this.setProvince[this.index].name, "p")
				let code = this.setProvince[this.index].code
				uni.showLoading({})
				uni.request({
					url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces' + '/' + code, //仅为示例，并非真实接口地址。
					method: 'GET',
					success: (res) => {
						uni.hideLoading()
						that.setCity = res.data.data
						console.log(that.setCity[4])
						if (!that.setCity[that.index1]) {
							that.index1 = 0
							console.log(that.setCity, "oioioio")

						}

						if (!this.index2 == 0) {
							this.searchMessage()
						}
					}
				})
			},
			selectCity(e) {
				this.index1 = e.detail.value
				if (!this.index2 == 0) {
					this.searchMessage();
					console.log("909090")
				}
			},
			arriveProvince(e) {
				var that = this
				this.index2 = e.detail.value
				let code = this.reachProvince[this.index2].code
				uni.showLoading({
					
				})
				uni.request({
					url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces' + '/' + code, //仅为示例，并非真实接口地址。
					method: 'GET',

					success: (res) => {
						uni.hideLoading()
						that.reachCity = res.data.data
						console.log(that.reachCity, "pppppp")

						console.log(this.setCity[this.index1].code, 'code')
						this.searchMessage();
						uni.setStorageSync('setCity', this.setCity[this.index1].name)
						uni.setStorageSync('reachCity', this.reachCity[this.index3].name)
					}
				})
			},
			arriveCity(e) {
				this.index3 = e.detail.value
				this.searchMessage();
				console.log(this.setCity[this.index1].name, 'name')

			},
			policyDetail() {
				let id = this.list.policy_id
				uni.request({
					url: 'http://epidemic.site.ximengnaikang.com/api/v1/policy' + '/' + id, //仅为示例，并非真实接口地址。
					method: 'GET',
					success: (res) => {
						let list1 = {
							setCity: this.setCity[this.index1].name,
							reachCity: this.reachCity[this.index3].name,
							id: id
						}

						let list = JSON.stringify(list1)
						uni.setStorageSync('list', res.data.data)
						uni.navigateTo({
							url: './detail'
						})

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

			shareImage() {
				if (this.index == 0) {
					uni.showToast({
						title: "请选择出发地",
						icon: 'none'
					})
				} else if (this.index2 == 0) {
					uni.showToast({
						title: "请选择目的地",
						icon: 'none'
					})
				} else if (!this.list.body) {
					uni.showToast({
						title: "目的地暂未发布隔离政策",
						icon: 'none'
					})
				} else {

					let id = this.list.policy_id
					uni.request({
						url: 'http://epidemic.site.ximengnaikang.com/api/v1/policy' + '/' + id, //仅为示例，并非真实接口地址。
						method: 'GET',
						success: (res) => {
							let list1 = {
								setCity: this.setCity[this.index1].name,
								reachCity: this.reachCity[this.index3].name,
								id: id
							}
							let list = JSON.stringify(list1)
							uni.navigateTo({
								url: './share?list=' + list
							})
							console.log(list, "llll")
						}
					})
				}
			},
			//关注公众号
			subscribe: function() {
				uni.navigateTo({
					url: './follow'
				})
			},
			searchMessage: function() {
				if (!this.setCity[this.index1]) {
					this.index1 = 0
				} else if (!this.reachCity[this.index3]) {
					this.index3 = 0
				}
				uni.request({
					url: 'http://epidemic.site.ximengnaikang.com/api/v1/risk-assess', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						from_city_code: this.setCity[this.index1].code,
						to_city_code: this.reachCity[this.index3].code,
					},
					success: (res) => {
						this.list = res.data.data
						console.log(this.list)
					}
				})
			}

		},

	}
</script>

<style>
	page {
		height: 100vh;
		width: 100%;

	}

	.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/header.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

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

	.search {
		font-size: 28upx;
		padding: 30upx;
		color: #333333;
		background-color: #FFFFFF;
		border-radius: 12upx;
		margin-top: -40upx;
		padding-bottom: 130upx;
	}

	.title {
		font-size: 34upx;
		text-align: center;
		padding: 20upx 0;
		color: #23459D;
	}

	.list {
		margin-top: 20upx;
		display: flex;
		min-height: 35upx;
		line-height: 30px;
	}

	.list1 {
		flex: 1;
		font-size: 28upx;
		font-weight: 500;
	}

	.list2 {
		flex: 1;
		text-align: right;
	}

	.list1 image {
		height: 32upx;
		width: 30upx;
		display: inline-block;
		vertical-align: middle;
	}

	.list1 view {
		display: inline-block;
		vertical-align: middle;
		margin-left: 16upx;
	}

	.zhengce {
		margin-top: 20upx;
		padding: 30upx;
		line-height: 40upx;
		border-radius: 24upx;
		background-color: #F7F7F7;
	}

	.detail {
		margin-top: 20upx;
		color: #23459D;
		text-align: right;
	}

	.tips {
		margin-top: 22upx;
		text-align: center;
		height: 72upx;
		background: rgba(255, 102, 0, 0.1);
		line-height: 72upx;
		border-radius: 8upx;
		font-size: 26upx;
		font-weight: 400;
		color: #FF6600;
	}

	.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>