jingzhou/pages/index/index.vue

<template>
	<view class="container">
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in banner" :key="swiper.id" @click="ToBanner(swiper)"><image :src="swiper.pic"></image></swiper-item>
				</swiper>
				<view class="indicator"><view class="dots" v-for="(swiper, index) in banner" :class="[swiperCurrent >= index ? 'on' : '']" :key="index"></view></view>
			</view> 
		</view>
		<view class="item-box flex">
			<view class="item-tpl" @click="navTo('/pages/donation/index')">
				<image src="/static/img/img01.png"></image>            
				<view class="tip-text">走进红十字</view>
			</view>
			<view class="item-tpl" @click="navTo('/pages/contribution/index')">
				<image src="/static/img/img02.png"></image>
				<view class="tip-text">爱心捐赠</view>
			</view>
			<view class="item-tpl" @click="navTo('/pages/train/index')">
				<image src="/static/img/img03.png"></image>
				<view class="tip-text">救护培训报名</view>
			</view>
			<view class="item-tpl" @click="navTo('/pages/volunteer/index')">
				<image src="/static/img/img04.png"></image>
				<view class="tip-text">红十字志愿者</view>
			</view>
		</view>
		<view class="item-box flex">
			<view class="item-tpl" @click="navTo('/pages/hematopoiesis/index')">
				<image src="/static/img/img05.png"></image>
				<view class="tip-text">造血干细胞入库</view>
			</view>
			<view class="item-tpl" @click="organ">
				<image src="/static/img/img06.png"></image>
				<view class="tip-text">器官捐献登记</view>
			</view>
			<view class="item-tpl">
				<image src=""></image>
				<view class="tip-text"></view>
			</view>
			<view class="item-tpl">
				<image src=""></image>
				<view class="tip-text"></view>
			</view>
		</view>
		<view class="list-box">
			<view class="top-title flex">
				<view class="">AED导航</view>
				<!-- <image @click="ToShow" v-if="showbox == true" src="../../static/img/img08.png"></image>
				<image @click="ToShow" v-if="showbox == false" src="../../static/img/img07.png"></image> -->
			</view>
			<view id="container">
				<map class="map-box" id="map" 
					show-location 
					:markers="marker" 
					:scale='scale' 
					:latitude="latitude" 
					:longitude="longitude" ref="map">
				</map>
			</view>
			<view class="">
				<view class="list-tpl flex" v-for="(item,index) in AEDlist" @click="openAddress(item.log,item.lat,item.address)">
					<view class="">{{ index + 1 }}</view>
					<view class="info">
						<view class="title">AED设备</view>
						<view class="addr">地址：{{item.add}}</view>
					</view>
					<view class="image">
						<image src="/static/img/img10.png"></image>
						<view class="tip">导航</view>
					</view>
				</view>
				<!-- <view class="list-tpl flex" @click="openAddress('2')">
					<view class="">2</view>
					<view class="info">
					经度longitude，纬度 latitude
						<view class="title">AED设备</view>
						<view class="addr">地址：桐乡市汽车站候车室</view>
					</view>
					<view class="image">
						<image src="/static/img/img10.png"></image>
						<view class="tip">导航</view>
					</view>
				</view> -->
				<!-- <view class="list-tpl flex" @click="openAddress('3')">
					<view class="">3</view>
					<view class="info">
						<view class="title">AED设备</view>
						<view class="addr">地址：桐乡市公共服务中心1号楼1楼大厅</view>
					</view>
					<view class="image">
						<image src="/static/img/img10.png"></image>
						<view class="tip">导航</view>
					</view>
				</view> -->
				<!-- <view class="list-tpl flex" @click="openAddress('4')">
					<view class="">4</view>
					<view class="info">
						<view class="title">AED设备</view>
						<view class="addr">地址：桐乡市凤凰湖志愿驿站内</view>
					</view>
					<view class="image">
						<image src="/static/img/img10.png"></image>
						<view class="tip">导航</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="list-box">
			<view class="top-title flex">
				<view class="">应急救援队导航</view>
			</view>
			<view v-for="item in emergencyList" :key="item.id">
				<view id="container" >
					<map class="map-box" id="map" 
						show-location 
						:markers="item.volunteer" 
						:scale='item.scale1' 
						:latitude="item.lat" 
						:longitude="item.long" ref="map">
					</map>
				</view>
				<!-- {{item.long}}{{item.lat}}{{item.addr}} -->
				<view class="">
					<view class="list-tpl flex" @click="openAddress(item.long,item.lat,item.addr)">
						<view class="">1</view>
						<view class="info">
							<view class="title">{{ item.title}}</view>
							<view class="addr">地址：{{item.addr}}</view>
							<view class="">电话：{{ item.phone}}</view>
						</view>
						<view class="image">
							<image src="/static/img/img10.png"></image>
							<view class="tip">导航</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view>
				<view id="container">
					<map class="map-box" id="map" 
						show-location 
						:markers="volunteer1" 
						:scale='scale1' 
						:latitude="latitude1" 
						:longitude="longitude1" ref="map">
					</map>
				</view>
				<view class="">
					<view class="list-tpl flex" @click="openAddress()">
						<view class="">2</view>
						<view class="info">
							<view class="title">桐乡市红十字雄鹰应急救援队</view>
							<view class="addr">地址：浙江省嘉兴市桐乡市崇南路</view>
							<view class="">电话：周海 13067691111</view>
						</view>
						<view class="image">
							<image src="/static/img/img10.png"></image>
							<view class="tip">导航</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<uni-popup ref="popup" type="bottom" @click="close">
			<view class="popup_row">
				<view class="rows">
					<view class="rows-item" @click="toGaodeMap(longitude6,latitude6,address6)">
						高德地图
					</view>
					<view class="rows-item" @click="tobaiDuMap(longitude6,latitude6,address6)">
						百度地图
					</view>
					<view class="rows-item" @click="totengxunMap(longitude6,latitude6,address6)">
						腾讯地图
					</view>
			
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import { loadIndexs } from '@/api/index.js';
import { openMap } from '@/utils/rocessor.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			// 经度longitude，纬度 latitude
			longitude4: '',  // 当前经纬度
			latitude4: '',
			longitude6:'',
			latitude6:'',
			address6:'',
			AEDlist:[
				{ id:0, add:'桐乡市高铁候车室', log: '120.567191', lat:'30.537043',address:'浙江省嘉兴市桐乡市高桥镇高桥大道51号'},
				{ id:1, add:'桐乡市汽车站候车室',log: '120.575595', lat:'30.611975',address:"浙江省嘉兴市桐乡市世纪大道1号"},
				{ id:2, add:'桐乡市公共服务中心1号楼1楼大厅',log: '120.581151', lat:'30.635102',address:"浙江省嘉兴市桐乡市康民东路58号"},
				{ id:3, add:'桐乡市凤凰湖志愿驿站内',log: '120.583390', lat:'30.640531',address:"浙江省嘉兴市桐乡市凤凰湖翰墨竞芳广场"}
			],
			swiperCurrent: 0, //轮播图
			banner:[],//轮播图
			marker: [
				{
				latitude:"30.537043",
				longitude:'120.567191',
				iconPath:'/static/img/img014.png',
				width:'35',
				height:'35',
			},
			{
				latitude:'30.611975',
				longitude:"120.575595",
				iconPath:'/static/img/img014.png',
				width:'35',
				height:'35',
			},
			{
				latitude:'30.635102',
				longitude:"120.581151",
				iconPath:'/static/img/img014.png',
				width:'35',
				height:'35',	
			},
			{
				latitude:'30.640531',
				longitude:"120.583390",
				iconPath:'/static/img/img014.png',
				height:'35',
			}],
			volunteer: [{
				longitude:'120.558686',
				latitude:"30.633273",
				iconPath:'/static/img/img014.png',
				width:'35',
				height:'35',
			}],
			volunteer1: [{
				longitude:'120.553638',
				latitude:"30.547011",
				iconPath:'../../static/img/img014.png',
				width:'35',
				height:'35',
			}],
			emergencyList:[
				{
					id:0,
					long:"120.558686",
					lat:"30.633273",
					scale1:'15',
					addr:'桐乡市梧桐街道杨家门迎风一期 23幢',
					phone:'张剑 13819058997',
					title:'桐乡市红十字应急救援志愿服务队',
					volunteer: [{
						longitude:'120.558686',
						latitude:"30.633273",
						iconPath:'/static/img/img014.png',
						width:'35',
						height:'35',
					}],
				},
				{
					id:1,
					long:"120.553638",
					lat:"30.547011",
					scale1:'15',
					addr:'浙江省嘉兴市桐乡市崇南路',
					phone:'周海 13067691111',
					title:'桐乡市红十字雄鹰应急救援队',
					volunteer: [{
						longitude:'120.553638',
						latitude:"30.547011",
						iconPath:'/static/img/img014.png',
						width:'35',
						height:'35',
					}],
				}
			],
			longitude:'120.558686',
			latitude:"30.633273",
			longitude1:'120.553638',
			latitude1:"30.547011",
			scale:'12',//地图缩放程度
			scale1:'15',
			showbox:false,
			showTEXT:false
		};
	},
	onLoad() {
		let obj = this;
		obj.loadDate();
		uni.getLocation({
		    type: 'wgs84',
		    success: function (res) {
		        console.log('当前位置的经度：' + res.longitude);
		        console.log('当前位置的纬度：' + res.latitude);
				obj.longitude4 = res.longitude
				obj.latitude4 = res.latitude
				obj.loadDate();
		    },
			fail(e) {
				console.log('获取当前位置失败', e);
			}
		});
		// let locationAddress
		// // #ifdef H5
		// let wxOjb = require('jweixin-module');
		// locationAddress = wxOjb.getLocation;
		// // #endif
		// // #ifdef MP
		// locationAddress = uni.getLocation;
		// // #endif
		// console.log(locationAddress,'获取对象数据')
		// // #ifdef H5
		// wxOjb.ready(() => {
		// 	console.log('加载完毕注册事件');
		// 	locationAddress({
		// 		type: 'wgs84',
		// 		success: function(res) {
		// 			console.log('获取经纬度', res);
		// 			obj.longitude4 = res.longitude
		// 			obj.latitude4 = res.latitude
		// 			obj.loadDate();
		// 		},
		// 		fail(e) {
		// 			console.log('失败', e);
		// 		}
		// 	});
		// })
		// // #endif
		// // #ifdef MP
		// locationAddress({
		// 	type: 'wgs84',
		// 	success: function(res) {
		// 		console.log('获取经纬度', res);
		// 		obj.longitude4 = res.longitude
		// 		obj.latitude4 = res.latitude
		// 		obj.loadDate();
		// 	},
		// 	fail(e) {
		// 		console.log('失败', e);
		// 	}
		// });
		// // #endif
	},
	methods: {
		//获取轮播图数据
		loadDate(){
			let obj = this;
			loadIndexs({}).then(function(e) {
				obj.banner = e.data.banner
			});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		//轮播图跳转
		ToBanner(e){
			console.log(e.url)
			uni.navigateTo({
				url: e.url
			});
		},
		//AED导航
		ToShow(){
			this.showbox = !this.showbox;
		},
		//应急救援队导航
		ToShowTEXT(){
			this.showTEXT = !this.showTEXT;
		},
		// 调用高德
		toGaodeMap(longitude6,latitude6,address6) {
			console.log('longitude6,latitude6,address6',longitude6,latitude6,address6)
			let latitude = latitude6
			let longitude = longitude6
			let address = address6
			console.log('选择高德', latitude, longitude, address)
			window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`
		},
		// 调用腾讯
		totengxunMap(longitude6,latitude6,address6) {
			let latitude = latitude6
			let longitude = longitude6
			let address = address6
			console.log('选择腾讯', latitude, longitude,address)
			window.location.href = `http://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};addr:${address}`;
		},
		// 调用百度
		tobaiDuMap(longitude6,latitude6,address6) {
			let latitude = this.latitude4
			let longitude = this.longitude4
			let latitude2 = latitude6
			let longitude2 = longitude6
			let address = address6
			console.log('选择百度', latitude2, longitude2,address)
			console.log('获取当前经纬度', latitude, longitude)
			window.location.href =
				`http://api.map.baidu.com/direction?origin=latlng:${latitude},${longitude}|name:我的位置&destination=${latitude2},${longitude2}&mode=driving&region=${ address }&output=html&src=webapp.baidu.openAPIdemo`
		},
		
		openAddress(log,lat,address){
			this.longitude6 = log,
			this.latitude6 = lat,
			this.address6 = address
			console.log('log',log)
			console.log('lat',lat)
			console.log('address6',this.address6)
			this.$refs.popup.open();
		// 	if(type == '1'){
		// 		window.location.href =  'http://apis.map.qq.com/uri/v1/marker?marker=coord:30.537043,120.567191;addr:浙江省嘉兴市桐乡市高桥镇高桥大道51号'
		// 	}
		// 	if(type == '2'){
		// 		window.location.href =  'http://apis.map.qq.com/uri/v1/marker?marker=coord:30.611975,120.575595;addr:浙江省嘉兴市桐乡市世纪大道1号 '
		// 	}
		// 	if(type == '3'){
		// 		window.location.href =  'http://apis.map.qq.com/uri/v1/marker?marker=coord:30.635102,120.581151;addr:浙江省嘉兴市桐乡市康民东路58号'
		// 	}
		// 	if(type == '4'){
		// 		window.location.href =  'http://apis.map.qq.com/uri/v1/marker?marker=coord:30.640531,120.583390;addr:浙江省嘉兴市桐乡市凤凰湖翰墨竞芳广场'
		// 	}
		// 	if(type == 'volunteer'){
		// 		window.location.href =  'http://apis.map.qq.com/uri/v1/marker?marker=coord:30.633273,120.558686;addr:浙江省嘉兴市桐乡市梧桐街道杨家门迎风一期 23幢'
		// 	}
		// 	if(type == 'volunteer1'){
		// 		window.location.href =  'http://apis.map.qq.com/uri/v1/marker?marker=coord:30.547011,120.553638;addr:浙江省嘉兴市桐乡市崇南路'
		// 	}
		},
		//轮播图
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
		},
		//造血干细胞入库
		organ(){
			 window.location.href = "https://register.codac.org.cn/wx/notice.aspx"
		}
	}
};
</script>

<style lang="scss">
page {
	background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
}
.top_header{
	color: #FFFFFF;
	width: 100%;
	text-align: center;
	padding: 15rpx 0rpx;
	padding: 25rpx !important;
}
//轮播图
.swiper {
	width: 100%;
	display: flex;
	justify-content: center;
	.swiper-box {
		width: 100%;
		height: 360rpx;
		overflow: hidden;
		position: relative;
		z-index: 1;
		swiper {
			width: 100%;
			height: 100%;
			swiper-item {
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.indicator {
			position: absolute;
			bottom: 20upx;
			left: 20upx;
			background-color: rgba(255, 255, 255, 0.4);
			width: 150upx;
			height: 5upx;
			border-radius: 3upx;
			overflow: hidden;
			display: flex;
			.dots {
				width: 0upx;
				background-color: rgba(255, 255, 255, 1);
				transition: all 0.3s ease-out;
				&.on {
					width: (100%/3);
				}
			}
		}
	}
}
.item-box{
	width: 100%;
	font-size: 24rpx;
	padding: 25rpx 25rpx 0rpx 25rpx;
	color: #222222;
	.item-tpl{
		text-align: center;
		padding-bottom: 35rpx;
		font-size: 21rpx;
		color: #222222;
		width: 25%;
		image{
			width: 68rpx;
			height: 64rpx;
		}
		.tip-text{
			
		}
	}
}
.list-box{
	padding: 25rpx 25rpx;
	.top-title{
		color: #222222;
		font-size: 34rpx;
		margin-bottom: 25rpx;
		image{
			width: 36rpx;
			height: 36rpx;
		}
	}
}
.map-box{
	width: 100%;
	height: 366rpx;
	border: 2prx solid #F2F2F2;
	box-shadow: 5px 15px 15px 5px #F2F2F2;
}
.list-tpl{
	background-color: #FFFFFF;
	margin: 25rpx 0rpx;
	padding: 25rpx 25rpx;
	font-size: 28rpx;
	border-radius: 15rpx;
	.info{
		width:75%;
		.title{
			font-size: 32rpx;
			color: #222222;
			font-weight:500;
		}
		.addr{
			padding: 10rpx 0rpx;
		}
	}
	.image{
		width: 10%;
		text-align: center;
		image{
			width: 50rpx;
			height: 50rpx;
		}
		.tip{
			color: #7F7F7F;
			font-size: 21rpx;
		}
	}
}
	.popup_row {
		width: 100%;
		height: 500rpx;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.rows {
			width: 100%;
			padding: 0 24rpx;

			.rows-item {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				width: 100%;
				font-size: 32rpx;
				color: #303133;
			}
		}
	}
</style>