JP-ChargeTeam51/pages/searchPile/stationAndPile/stationDetailsMap.vue

<template>
	<view >
		<ujp-navbar title="站点详情"></ujp-navbar>
		<view class="content" >
			 
			<view>
				<Chargermap   ref="amap" @onload="mapdown" @clickMap="clickMap"></Chargermap>
				<u-image style='position:absolute;z-index:1023;right:40rpx;bottom:440rpx;' src="@/static/img/location.png" width="30px" height="30px" @click="setCenter"></u-image>
			</view>
			 
			 <view class="chargerCard" @click="stationDetail(item)">
				<view class="card_item font4" style="padding-top: 5rpx;" >
					<view style="display: flex;flex-direction: row;">
						<view :class="item.type == '快充' ? 'fast-charge':(item.type == '慢充' ? 'trickle-charge':'fast-trickle-charge')"style="margin-right: 5rpx;">
							{{item.type}}
						</view>
						<view class='font-weight3'>
							{{item.name}}											
						</view>
						
					</view>
				</view>		
				<view class="card_item font3" style="color:#8898A9;">
					{{item.address}}
				</view>
				
				<view class="card_item2 " >
					<view class="font6" style="color:#FF6573;margin-right: 10rpx;">
						{{item.costPrice}}
					</view>
					<view style="display: flex; justify-content: center;align-items: center">
					 元/度 起										
					</view>
				</view>
				<view class="card_item" style="border-bottom: #F1F4F3; border-bottom-width: 2rpx;border-style: solid;border-top-width: 0rpx;border-left-width: 0rpx;border-right-width:0rpx; padding-bottom:20rpx">
					<view style="display: flex;flex-direction: row;">
						<view style="background-color: #7DB1FF;padding-left: 10rpx;padding-right: 10rpx;">
							P
						</view>
						<label>{{item.park}}</label>
					</view>
					<view style="display: flex;flex-direction: row;" class="font-weight2">
						<view style="color: #00B962;">
							空闲{{item.availableNum}}
						</view>
						
				 			<view>
				 				/总数{{item.totalNum}}
				 			</view>
				 		</view>
				 	</view>
				 	<view class="card_item" style="padding-bottom: 20rpx;">
				 		<u-button shape='circle' style="color: #00B962;" @click="getScanCode">
				 			<u-icon name="scan" size="26" color="#00B962" style="margin-right: 20rpx;"></u-icon>
				 			<label>扫码充电</label></u-button>
				 		<view class="round" @click.stop="navigateTo(item)">
				 			<text class="iconfont distance-font">&#xe615;</text>
				 			<view  style="margin-right: 10rpx;">
								{{item.distance!=null&&item.distance>0.1 ? item.distance.toFixed(1)+'公里':'小于100米'}}												
 				 			</view>
				 			<view  style="margin-right: 10rpx;">
				 				{{item.time!=null?item.time.toFixed(0):''}}分钟
				 			</view>
				 		</view>
				 	</view>
				 </view>
			</view>
		</view>
		
	</view>
</template>

<script>
	let _self;
	import * as api from '@/apis/site.js';
	import * as indexAPI from '@/apis/index.js'
	import Chargermap from '@/components/Chargermap.vue';
	import * as WxJsApi from '@/utils/wxJsApi.js'
	import MapLoader from '@/utils/AMap'
	export default {
		components: {
			Chargermap 
		},
		data() {
			return {
				elderMode:false,
				userId:'',
				id: '',
				longitude: 112.28468,
				latitude: 30.307094,
				//			longitude: '',
				//			latitude: '',
				 
				area: '荆州市',
				action: '筛选',
				 
				item:{"id":"3865b3a3-13fd-461a-8145-ee9711df35a2","name":"荆鹏充电站","address":"江津东路附155号","longitude":112.276578,"latitude":30.306499,"type":"快/慢","costPrice":1.14,"electricityPrice":null,"servicePrice":null,"availableNum":5,"totalNum":5,"distance":null,"image":"http://oss.xiaoxinda.com/charging/chargingnewsInfo/2022/5/27/ccb8da40-7322-4448-9f9a-31fb64755a9c/0406204653.jpg","time":0,"park":"2小时免费停车"},
				/*{
					name:'',
				position:'',
				price:1,idleNum:0,total:0,distance:0,time:0,type:'慢充',id: 0,
							park: '2小时免费停车',
							longitude: 112.28541,
							latitude: 30.308354 },*/
				stations:[]
			}
		},
		methods:{
			theme(type) {
				
			  if(type == 'elder')	
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 
			  }
			  else
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 
				  
			  } 
			},
			getPoint() {
				 
				//('getPoint')
				WxJsApi.getLocation().then((res) => {
					if(res==null)
						return;
					//('站点地图当前位置'+JSON.stringify(res))
					_self.latitude = parseFloat(res.latitude);
					_self.longitude  = parseFloat(res.longitude);
					var startLngLat = {longitude: _self.longitude ,latitude: _self.latitude };
					var endLngLat = {longitude: _self.item.longitude, latitude: _self.item.latitude};
					//('start'+JSON.stringify(startLngLat));
					//('end'+JSON.stringify(endLngLat));
					//_self.calculateDistance(startLngLat,endLngLat);
					//let posCenter= {longitude: _self.longitude,latitude: _self.latitude};
					var obj = {
									longitude: _self.longitude,
									latitude: _self.latitude
								};
					_self.$refs.amap.setPerson(obj);	
					
					var lnglat = new AMap.LngLat(startLngLat.longitude,startLngLat.latitude);
					var myDistance = lnglat.distance([endLngLat.longitude, endLngLat.latitude]);
					_self.item.distance = myDistance/1000;
					_self.item.time = myDistance/500;
					
					/*
					_self.$refs.amap.calculateDistance(startLngLat,endLngLat).then(function(res){
						
						_self.item.distance = res.distance/1000;
						_self.item.time = res.time/60;
						////(result)
						////(result.routes[0].time)//秒
						////(result.routes[0].distance)//米
						
						//('距离'+JSON.stringify(res))
					})*/
					
					//('当前位置' +JSON.stringify(data))
					
					//this.latitude2 = latitude;
					//this.longitude2 = longitude;
					/*uni.showToast({
						title:JSON.stringify(res)
					})*/
					//this.message=JSON.stringify(res)
				}).catch(error => {
					uni.showToast({
						title:error//JSON.stringify(error)
					})					
				})
			},
			
			stationDetail(item){
				//('item'+JSON.stringify(item))
				uni.navigateTo({
					url:'stationDetails?id='+this.item.id
					//url:'stationDetails?station='+encodeURIComponent(JSON.stringify(this.item))
				})
			},
			setCenter(){
				//('getPoint')
				WxJsApi.getLocation().then((res) => {
					
					_self.latitude = parseFloat(res.latitude);
					_self.longitude = parseFloat(res.longitude);
					//let data = {position:{latitude:latitude,longitude:longitude}};
				 
					 let posCenter= {longitude: _self.longitude,latitude: _self.latitude};
					 this.$refs.amap.setCenter(posCenter);
				}).catch(error => {
					uni.showToast({
						title:error//JSON.stringify(error)
					})					
				})
				
	//			//('setCenter')
			},			 
			getScanCode() {
				if (this.userId) {
					WxJsApi.scanQRCode(1).then(res => {
						if(res) {
							indexAPI.scanCode(res).then((response) => {
						
							}).catch(error => {
								uni.showToast({
									title: error,
									icon: "none"
								})
							})
						}
					}).catch(error => {
			
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			navigateTo(item){
				/*
				this.elderMode = !this.elderMode;
				if(this.elderMode)
					this.theme('elder')
				else
					this.theme('standard')
				return;
				*/
				//this.guide('gd',item);
				//console.log('导航'+JSON.stringify(item))
				window.location.href="https://uri.amap.com/marker?position="+ item.longitude+","+item.latitude+"&name="+item.name;
				
				//Map.getRoute(item);
				//Map.openMap(this.latitude, this.longitude, this.name, 'wgs84')
				 //var startLngLat = [this.longitude, this.latitude]
				 //var endLngLat = [item.longitude, item.latitude]
				 ///let platform = uni.getSystemInfoSync().platform
				 //console.log('platform'+JSON.stringify(platform))
				 //this.$refs.amap.navigate(startLngLat,endLngLat);
			},
			mapdown() { 
				let data = {stationId:this.id};
				  
				api.getChargingStationDetail(data).then(function(res){
//					//('站点详情'+JSON.stringify(res))
					//this.info.st
					if(res && res.result)
					{
						if(res.data){
							let data = res.data;
							data.station.time = 0;
							_self.item = data.station;
							if(_self.item.park == null)
								_self.item.park = '2小时免费停车'
							if(_self.item.type == '2')
								_self.item.type = '慢充'
							else if(_self.item.type == '1')
								_self.item.type = '快充'
							else {
								_self.item.type = '快/慢'
							}
							if(_self.item.costPrice == null){
								if(data.fastPrice != null){
									_self.item.costPrice = data.fastPrice.costPrice;
									if(data.slowPrice != null){
										if(_self.item.costPrice> data.slowPrice.costPrice){
											_self.item.costPrice = data.slowPrice.costPrice;
										}
									}
								}else if(data.slowPrice != null){ 
									_self.item.costPrice = data.slowPrice.costPrice; 
								}
							}
							
							
							if(_self.item.distance == null){
								_self.getPoint();
							} 
							 
							var obj = {
								longitude: _self.item.longitude,
								latitude: _self.item.latitude
							}; 
							
							
							_self.$refs.amap.setCenter(obj) 
 							_self.stations = [];
							  
						   _self.stations.push(_self.item);
	//					   //('stations1'+JSON.stringify(this.stations[0]))
	//					   //('stations2'+JSON.stringify(this.item))
							_self.$refs.amap.setChargerList(_self.stations);
							//('站点项目'+JSON.stringify(_self.item))
							_self.$refs.amap.updateCharger(_self.item) 
							//_self.stationDetail = data;
							//_self.processStationsInfo();							
								//('data'+JSON.stringify(_self.item )); 
						}
						
					}
					
				})
			}
		},
		onLoad(op) {
				_self = this;

	
//				//('longitude0  ' + _self.longitude);
				if (op != null) {
					if(op.stationId != null){
						    //_self.item =  this.carhelp.get(op.stationId);
							//return;
							this.id = op.stationId;							
							
							return;
					}
					if(op.station!=null){
						//('op.station  ' + op.station);
						this.item = JSON.parse(decodeURIComponent(op.station));
						//('item '+JSON.stringify(this.item));
						this.longitude = this.item.longitude;
						this.latitude = this.item.latitude;
						//this.mapdown();
					}
					if (op.longitude != null) this.longitude = op.longitude;
					if (op.latitude != null) this.latitude = op.latitude;
					if (op.id != null) this.id = op.id;
				}
				this.item.longitude  = this.longitude;
				this.item.latitude = this.latitude;
			},
			onReady() {
				this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
				if(this.elderMode)
					this.theme('elder')
				else
					this.theme('standard')
					
				//		//('longitude2  '+this.longitude)
				//		//('latitude2  '+this.latitude) 
				if (this.carhelp.getPersonInfo()) {
					this.userId = this.carhelp.getPersonInfo().id;
							
				}
				WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
					// //(res)
				}).catch(error => {
					//(res)
				})
				this.isReady = true;
				this.$refs.amap.init();
				
				//let state = {};
				uni.getSystemInfo({
					success: (res) => {
						// #ifndef MP
						let navbarH = 0
						// #endif
						// #ifdef MP
						let navbarH = uni.upx2px(90)
						// #endif
						/*state.status_width = res.windowWidth;
						//('window width'+state.status_width);*/
						
						let scrollH = res.windowHeight;// - uni.upx2px(88) - navbarH
//						//('布局结果'+ JSON.stringify(res));
//						//('scrollH'+scrollH)
						//#ifdef MP-WEIXIN
						const {
							statusBarHeight,
							windowWidth,
						} = uni.getSystemInfoSync();
						//('height ' + statusBarHeight);
						//this.status_height = uni.getStatusbarHeight();
						let res1 =  uni.getMenuButtonBoundingClientRect()
						//('layout selectHeight '+JSON.stringify(res1))
						//state.selectHeight = (res1.top-res.statusBarHeight)*2+ res1.height;
						//#endif
						////('status height'+state.status_height)
						_self.$refs.amap.setMyStyle("height:"+(scrollH-44)+ "px;width:100%;");
					}
				})
				
			},
			onShow() {
				 
			},
	}
</script>

<style lang="scss" scoped> 
	@import "@/_theme.scss";
	.preference_group_item {
		padding: 15rpx;
	}
	.preference_group {
		padding-bottom: 20rpx;
	}
	.preference {
		background-color: #ffffff;
		left: 0rpx;
		position: absolute;
	}
	.preference_item {
		margin-bottom: 10rpx;
		margin-left: 20rpx;
		text-align: center;
		border-style: none;
		width: 20%;
	}
	.preference_item_plus {
		margin-bottom: 10rpx;
		margin-left: 20rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 25%;
		border-style: none;
	}
	.preference_label {
		color: #9f9c99;
		margin-left: 20rpx;
		margin-bottom: 100rpx;
	}
	.map{
		background-color: #ffffff;
		left: 0rpx;
		position: absolute;
		
	}
	.chargerCard{
	/*	background-color: #fff;
		margin: 0 12px;
		border-radius: 8px;
		padding: 10px 12px 0px;
		position: absolute;
		bottom: 68px;
		left: 0;
		right: 0;
		z-index:1021
	*/
		background-color: #fff;
		margin: 0 12px;
		border-radius: 8px;
		padding: 10px 12px 0px;
		bottom: 28px;
		left: 0;
		right: 0;	
		position: fixed;
		height:360rpx;
		/*
		z-index: 1021; 
		width: 80%;
		margin-left: 10%;
		bottom: 50rpx;
		
		*/
	}
	.arrow{
		margin-right: 15rpx;
	}
	.card_item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		@include themeify{
			font-size: themed('font-size2');
		}
	}
	 
	.card_item2{
		display: flex;
		flex-direction: row;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		@include themeify{
			font-size: themed('font-size2');
		}
	}
	.round{
		border-radius:50rpx; 
		background-color: #00B962;
		color: #ffffff;
		text-align: center;
		justify-content: center;
		align-items: center;
		@include themeify{
			width: themed('buttonWidth');
		}
/*		width: 250rpx;*/
		display: flex;
		flex-direction: row;
	}
	.round2{
		border-radius:50rpx; 
		background-color: #00B962;
		color: #ffffff;
		text-align: center;
		justify-content: center;
		align-items: center;
		width:125rpx;
	  }
	
	.swiper-item{
	 }
	 
	 .list {
	 	margin-left: 2px;
	 
	 }
	 
	 .charing-slow {
	 	background-color: #fff;
		margin: 20rpx;
		border-radius: 8px;
	 	padding: 10px 12px 0px;
	 	position: relative;
	 	left: 0;
	 	right: 0;
	}
	 	.fast-charge {
	 		display: inline-block;
	 		width: 44px;
	 		height: 20px;
	 		line-height: 20px;
	 		border-radius: 50px;
	 		background-color: #9d9fff;
	 		color: rgba(255, 255, 255, 100);
			@include themeify{
				font-size: themed('font-size1');
				line-height: themed('font-size5');
				height: themed('font-size5');
			}
/*	 		font-size: 12px;*/
	 		text-align: center;
	 	}
		
		
		.fast-trickle-charge {
			display: inline-block;
			width: 66px;
/*			height: 20px;
			line-height: 20px;*/
			border-radius: 50px;
			background-color: #00BAC8;
			color: rgba(255, 255, 255, 100);
			@include themeify{
				font-size: themed('font-size1');
				line-height: themed('font-size5');
				height: themed('font-size5');
			}
/*			font-size: 12px;*/
			text-align: center;
		}
		
		.trickle-charge {
			display: inline-block;
			width: 44px;
/*			height: 20px;
			line-height: 20px;*/
			border-radius: 50px;
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
/*			font-size: 12px;*/
			@include themeify{
				font-size: themed('font-size1');
				line-height: themed('font-size5');
				height: themed('font-size5');
			}
			text-align: center;
		}
	 
	 	.station-items {
	 		display: inline-block;
/*	 		height: 16px;
	 		line-height: 16px;
	 		font-size: 16px;*/
			@include themeify{
				font-size: themed('font-size3');
				line-height: themed('font-size3');
				height: themed('font-size3');
			}
	 		margin-left: 4px;
	 		color: #101010;
	 
	 
	 	}
		
		.fast-charge {
			display: inline-block;
			width: 44px;
/*			height: 20px;
			line-height: 20px;*/
			border-radius: 50px;
			background-color: #9d9fff;
			color: rgba(255, 255, 255, 100);
/*			font-size: 12px;*/
			@include themeify{
				font-size: themed('font-size1');
				line-height: themed('font-size5');
				height: themed('font-size5');
			}
			text-align: center;
		}
	 
	 	.address {
	 		margin-top: 8px;
			@include themeify{
				font-size: themed('font-size1');
				line-height: themed('font-size3');
 			}
/*	 		line-height: 16px;
	 		font-size: 11px;*/
	 		color: rgba(119, 119, 119, 100);
	 	}
	 
	 	.price {
	 		display: flex;
	 		height: 20px;
	 
	 	}
	 
	 
	 .num {
	 	height: 20px;
	 	color: rgba(255, 98, 0, 100);
		@include themeify{
			font-size: themed('font-size5'); 
		}
/*	 	font-size: 20px;*/
	 	text-align: left;
	 	font-family: Roboto-medium;
	 }
	  
	 .unit {
/*	 	height: 14px;
	 	line-height: 14px;*/
	 	color: rgba(102, 102, 102, 100);
		@include themeify{
						font-size: themed('font-size2'); 
						line-height: themed('font-size2'); 
						height: themed('font-size2'); 
					}
/*	 	font-size: 14px;*/
	 	text-align: left;
	 	font-family: AlibabaPuHui-regular;
	 	margin-top: 6px;
	 	margin-left: 4px;
	 }
	 	.park {
	 		margin-top: 8px;
	 		display: flex;
	 
	 		
	 
	 		
	 	}
		.park-p {
			display: inline-block;
			width: 20px;
			@include themeify{
/*				font-size: themed('font-size1'); */
				line-height: themed('font-size1'); 
				height: themed('font-size4'); 
			}
/*			height: 18px;
			line-height: 12px;*/
			text-align: center;
			background-color: rgba(125, 177, 255, 100);
			color: #fff;
		}
		.park-text {
			display: inline-block;
			width: 300px;
/*			height: 17px;*/
			color: rgba(102, 102, 102, 100);
/*			font-size: 12px;*/
			@include themeify{
				font-size: themed('font-size1'); 
				height: themed('font-size4'); 
 			}
			text-align: left;
			margin-left: 4px;
			margin-top: 2px;
		}
		
		 .map {
			width: 100%;
		 
			height: 100%;
			position: relative;
		}
		#container {
		  width: 100%;
		  height: 100%;
		}
	 	.free {
	 		display: flex;
	 		justify-content: space-between;
	 		height: 52px;
	 		border-top: 1px solid rgba(238, 242, 240, 100);
	 		margin-top: 10px;
	 
	 		
	 	} 
		.free-num {
			line-height: 52px;
/*			font-size: 16px*/
			@include themeify{
				font-size: themed('font-size3');  
			}
		} 
		.distance {
			width: 130px;
/*			height: 28px;
			line-height: 28px;*/
			color: rgba(255, 255, 255, 100);
/*			font-size: 14px;*/
			
			@include themeify{
				font-size: themed('font-size2'); 
				height: themed('font-size9'); 
				line-height: themed('font-size9'); 
			}
			background-color: #00b962;
			border-radius: 50px;
			margin: 12px;
			text-align: center;
	
			
	
		}
		.distance-font {
			font-size: 16px
		}
</style>