JP-ChargeTeam51/pages/search/search.vue

<template>
	<view>
		<u-navbar title="" ref='navbar' id='navbar' :height='nav_height'> 
			<u-search id='search' ref='search' height="88" :input-style='inputStyle'  placeholder="搜索站点名称" @change="search()" v-model="keyword" color="#c8c8c8" @search="search" @click="search" @clickicon='back' @custom='search'></u-search>		 
		</u-navbar>
		<view class="recommend">推荐充电站</view>
		<view class="charing-slow" v-for="(item,index) in stations_filter" :key="item.id" @click="stationDetail(item)">
			<text :class="item.type == '快充' ? 'fast-charge':(item.type == '慢充' ? 'trickle-charge':'fast-trickle-charge')">{{item.type}}</text> <text class="station-items">{{item.name}}</text>
			<view class="address">
				{{item.position}}
			</view>
			<view class="price">
				<view class="num">{{item.price}}</view> <view class="unit">
					起 元/度
				</view>
			</view>
			 <view class="park">
				<text class="park-p">p</text>
				<text class="park-text">{{item.park}}</text>
			</view>
			<view class="free">
				<view class="free-num">
					  <text style="color:#009143;">空闲{{item.idleNum}}</text>/总数{{item.total}}
				</view>
				<view class="distance">
					<text class="iconfont distance-font">&#xe615;</text>{{item.distance.toFixed(2)}}公里 {{item.time.toFixed(0)}}分钟
				</view>
			</view>
		</view>		
	</view>
</template>

<script>
	let _self; 
	import * as api from '@/apis/site.js';
	import * as WxJsApi from '@/utils/wxJsApi.js'
	import MapLoader from '@/utils/AMap'
	export default {
		
		data() {
			
			return {
				inputStyle:{
					backgroundColor: 'transparent',
					"font-size":'18px',
					"font-weight":"normal"
				},
				nav_height:44,
				userId:'',
				keyword:'',
			  stations_filter:[],
			  stations:[
/*					{name:'荆鹏软件园充电站',position:'湖北省荆州市沙市区江津东路附155号',price:1.2,idleNum:10,total:10,distance:0.1,time:1,type:'慢充',park:'2小时免费停车'},
					{name:'荆鹏软件园充电站2',position:'湖北省荆州市沙市区江津东路附156号',price:1.2,idleNum:10,total:10,distance:0.15,time:12,type:'快充',park:'3小时免费停车'},
					{name:'荆鹏软件园充电站3',position:'湖北省荆州市沙市区江津东路附157号',price:1.2,idleNum:10,total:10,distance:0.2,time:13,type:'慢充',park:'4小时免费停车'},
					{name:'荆鹏大道求助站充电站',position:'湖北省荆州市沙市区江津东路附158号',price:1.2,idleNum:10,total:10,distance:0.3,time:14,type:'快充',park:'5小时免费停车'},
	*/			
				],
			}
		},
		onLoad(op){
			_self = this;
			
			//var px1 = uni.upx2px(88);
			
			//var rpx = 40/(uni.upx2px(100)/100);			 
			// 验证上面rpx的值
			var px = uni.upx2px(88); 
			this.nav_height = px;
			
			
 			// console.log('搜索框高度'+JSON.stringify(rpx))
			// console.log('搜索框高度'+JSON.stringify(px))
			/*
			if(op!= null && op.stationlist != null){
				this.stations = decodeURIComponent(op.stationlist)
				console.log('stations'+JSON.stringify(this.stations))
			}
			console.log('op'+JSON.stringify(op))*/
		},
		onReady() {
			this.elderMode = this.carhelp.get('getElderModeClass');
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
				
			 if (this.carhelp.getPersonInfo()) {
			 	this.userId = this.carhelp.getPersonInfo().id;
			 			
			 } 
			 WxJsApi.getWxConfig(['getLocation','addEventListener']).then((res)=>{
			 
				// this.message=JSON.stringify(res)
				// uni.showToast({
				// 	title:JSON.stringify(res)
				// })
				console.log(res)
			  
			 }).catch(error => {
					console.log(res)
			 })
			this.getPoint();
		},
		 // conponents:{charingSlows},
		methods: { 
			theme(type) {
			  if(type == 'dark')	
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 let data = {
				 	backgroundColor: 'transparent',
				 	"font-size":'18px',
				 	"font-weight":"bold!important"
				 };
				 this.inputStyle = data;
			  }
			  else
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				  let data  ={
				  	backgroundColor: 'transparent',
				  	"font-size":'16px',
				  	"font-weight":"normal"
				  };
				  this.inputStyle = data;
			  } 
			},
			stationDetail(item){
				 
				console.log('stationDetail item'+JSON.stringify(item))
				uni.navigateTo({
					url:'../searchPile/stationAndPile/stationDetails?id='+item.id
				})
					/*
				uni.navigateTo({
					url:'stationAndPile/stationDetails?station='+encodeURIComponent(JSON.stringify(item))
				})
				*/
	//			console.log('stationDetail'+JSON.stringify(item))
			},
			calculateDistance(startLngLat,obj){
				var _this = this;
				var endLngLat = [obj.longitude,obj.latitude];
				MapLoader().then(AMap1 => {
					
					this.AMap=AMap;
				
					var map=new AMap.Map("container", {
						center: [116.397559, 39.89621],
						zoom: 14
					});  
					AMap.plugin('AMap.Driving', function() {
					  var driving = new AMap.Driving({
					    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
					    policy: AMap.DrivingPolicy.LEAST_TIME
					  })
					  
					 //var startLngLat = [116.379028, 39.865042]
					 //var endLngLat = [116.427281, 39.903719]
					 
					  driving.search(startLngLat, endLngLat, function (status, result) {
							console.log(result)
							console.log(result.routes[0].time)//秒
							console.log(result.routes[0].distance)//米
							obj.distance = result.routes[0].distance/1000;
							obj.time = result.routes[0].time/60;
							/*uni.showToast({
								title:result.routes[0].time+"秒，"+result.routes[0].distance+"米"
							})*/
					  })
					  /*
					  var startLngLat2 = [_this.longitude, _this.latitude]
					  var endLngLat2 = [_this.longitude2, _this.latitude2]
					
					  
					  driving.search(startLngLat2, endLngLat2, function (status, result) {
					  							console.log(result)
					  							console.log(result.routes[0].time)//秒
					  							console.log(result.routes[0].distance)//米
					  							uni.showToast({
					  								title:result.routes[0].time+"秒，"+result.routes[0].distance+"米"
					  							})
					  })*/
					})
					
				
				}, e => {
					//_this.mui.toast('地图加载失败');
					console.log('地图加载失败', e)
				})
			},
			getPoint() {
				var _this = this;
				console.log('getPoint')
				WxJsApi.getLocation().then((res) => {
					
					var latitude = parseFloat(res.latitude);
					var longitude = parseFloat(res.longitude);
					_this.latitude = latitude;
					_this.longitude = longitude;
					
					let data = {latitude:_this.latitude,longtitude:_this.longitude};
					this.getChargingStationData(data);
					
					console.log('当前位置' +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:JSON.stringify(error)
					})					
				})
			},
			getChargingStationData(pos){
						//return;
				if(pos == null)
					return ;		 
				let data1 = { pageIndex:0,pageSize:20};
				if(pos.longtitude != null)
					data1.longitude = pos.longtitude.toString();
				if(pos.latitude != null)
					data1.latitude = pos.latitude.toString(); 
				//data1.findType = "0";
				//data1.type = "1";
				//data1.online = "0";
/*				if(this.info.obc_type[this.preference.obc_type_index].text.indexOf('直流快充')>=0)
					data1.type = "1";
				else if(this.info.obc_type[this.preference.obc_type_index].text.indexOf('交流慢充')>=0)
					data1.type = "2";
				
				if(this.info.miles_type[this.preference.miles_index].distance!=null)
					data1.radius = this.info.miles_type[this.preference.miles_index].distance.toString();
				data1.online = "0";//在线	
				if(pos.findType != null)
					data1.findType = pos.findType;
				else
					data1.findType = "0";
				
				if(this.preference.obc_power.minValue!=null)
					data1.powerStart = this.preference.obc_power.minValue.toString();
				if(this.preference.obc_power.maxValue!=null)
					data1.powerEnd = this.preference.obc_power.maxValue.toString();
				*/
				console.log('data1'+JSON.stringify(data1))
				api.searchStationData(data1).then(function(res){
					
					console.log('getChargingStationData'+JSON.stringify(res))
					if(!res.result || !res.data || !res.data.data)
					{
						console.log('getChargingStationData res nulll')
						return;					
					}
					let items = res.data.data;
					 
					_self.stations_filter = [];
					for(let i = 0;i<items.length;i++)
					{
						let obj = {
									name:'',
									position:'',
									price:1.2,
									idleNum:10,
									total:10,									
									type: data1.type == "2" ? '慢充':'快充',
									id: i,									
									distance:0.9,
									time:9,
									park: '以实际费用为准',
//									longitude: 112.28541 + i * 0.001,
//									latitude: 30.308354 + i * 0.01
									};
						if(items[i].id != null)
							obj.id = items[i].id;
						else
							continue;
						if(items[i].name!=null)
							obj.name = items[i].name;
						if(items[i].address!=null)
							obj.position = items[i].address;
						if(items[i].coostPrice!=null)
							obj.price = items[i].coostPrice;
						if(items[i].availableNum!=null)
							obj.idleNum = items[i].availableNum;
						if(items[i].totalNum!=null)
							obj.total = items[i].totalNum;
						if(items[i].longitude!=null)
							obj.longitude = items[i].longitude;
						if(items[i].latitude!=null)
							obj.latitude = items[i].latitude;
						if(items[i].distance!=null)
							obj.distance = items[i].distance;
						if(items[i].time != null){
							obj.time = items[i].time;
						}
						if(items[i].park != null)
							obj.park = items[i].park;
							
							
						var startLngLat = [_self.longitude,_self.latitude];
						 //var endLngLat = [obj.longitude,obj.latitude];
						 _self.calculateDistance(startLngLat,obj);
						 
						
						/*
						let obj = {name:items[i].name,
									position:items[i].address,
									price:items[i].coostPrice,									
									idleNum:items[i].availableNum,
									total:items[i].totalNum,
									distance:0.1,
									time:1,
									type:'慢充',
									id: items[i].id,
									park: i%2 == 0? '以实际费用为准':'2小时免费停车',
									longitude: items[i].longitude,
									latitude: items[i].latitude
									};*/
						_self.stations.push(obj);						
					}
					_self.stations_filter = _self.stations;
					//_self.$refs.amap.searchBtn([_self.longitude, _self.latitude],_self.stationsmap)
					//_self.$refs.amap.setChargerList(_self.stationsmap);
					//if(_self.stationsmap.length>0)
					//	_self.$refs.amap.updateCharger(_self.stationsmap[0]);
					 
				},function(err){
					console.log('getChargingStationData err'+JSON.stringify(err))
				}
				)
				console.log('getChargingStationData end')
			},	
			back(){
				console.log('back');
				uni.navigateBack({
					delta:1
				})
			},
			search(){
				console.log('search keyword'+this.keyword + ' '+JSON.stringify(this.stations))
				this.stations_filter = []
				if(this.keyword.length<=0){
					this.stations_filter = this.stations
					return;
				}
				for(let i = 0;i< this.stations.length;i++){
					if(this.stations[i].name.indexOf(this.keyword)>=0){
						this.stations_filter.push(this.stations[i]);
					}
				}
				
				console.log('search ' + this.keyword);
				
			}
		}
	}
</script>

<style lang="scss" scoped> 
	@import "@/_theme.scss";
	
	/deep/.u-content[data-v-1a326067] {
		flex: 0.95;
		color: #bdbdbd;
	}

	/deep/.u-action {
		margin-right: 0rpx;
		color: #c8c8c8;
	}

	.recommend {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		color: #101010;
		padding: 0 32rpx;
		background-color: #fff;
		font-weight: 600;
	}

	.charing-slow {
		width: 91%;
		background-color: #fff;
		margin: 24rpx auto 0;
		border-radius: 16rpx;
		padding: 20rpx 24rpx 0rpx;

		.trickle-charge {
			display: inline-block;
			width: 88rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 100rpx;
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 24rpx;
			text-align: center;
		}
		.fast-trickle-charge{
			display: inline-block;
			width: 132rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 100rpx;
			background-color: #00BAC8;
			color: rgba(255, 255, 255, 100);
			font-size: 24rpx;
			text-align: center;
		}
		.fast-charge {
			display: inline-block;
			width: 88rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 100rpx;
			background-color: #9d9fff;
			color: rgba(255, 255, 255, 100);
			font-size: 24rpx;
			text-align: center;
		}

		.station-items {
			display: inline-block;
			height: 32rpx;
			line-height: 32rpx;
			font-size: 32rpx;
			margin-left: 8rpx;
			color: #101010;


		}

		.address {
			margin-top: 16rpx;
			line-height: 32rpx;
			font-size: 22rpx;
			color: rgba(119, 119, 119, 100);
		}
		.price{
			display: flex;
			height: 40rpx;
			.num{
				height: 40rpx;
				color: rgba(255, 98, 0, 100);
				font-size: 40rpx;
				text-align: left;
				font-family: Roboto-medium;
			}
			.unit{
				height: 28rpx;
				line-height: 28rpx;
				color: rgba(102, 102, 102, 100);
				font-size: 28rpx;
				text-align: left;
				font-family: AlibabaPuHui-regular;
				margin-top: 12rpx;
				margin-left: 8rpx;
			}
		}
		.park {
			margin-top: 16rpx;
		    display: flex;
			.park-p {
				display: inline-block;
				width: 40rpx;
				height: 36rpx;
				line-height: 24rpx;
				text-align: center;
				background-color: rgba(125, 177, 255, 100);
				color: #fff;
			}
		
			.park-text {
				display: inline-block;
				width: 600rpx;
				height: 34rpx;
				color: rgba(102, 102, 102, 100);
				font-size: 24rpx;
				text-align: left;
				margin-left: 8rpx;
				margin-top: 4rpx;
			}
		}
		.free{
			display: flex;
			justify-content: space-between;
			height: 104rpx;
			border-top: 2rpx solid rgba(238, 242, 240, 100);
			margin-top: 20rpx;
			.free-num{
				line-height: 104rpx;
				font-size: 32rpx
			}
			.distance{
				width: 260rpx;
				height: 56rpx;
				line-height: 56rpx;
				color: rgba(255, 255, 255, 100);
				font-size: 28rpx;
				background-color: #00b962;
				border-radius: 100rpx;
				margin: 24rpx;
				text-align: center;
				.distance-font{
					font-size: 32rpx
				}
				
			}
		}
	}
</style>