JP-ChargeTeam51/pages/search/search.vue

<template>
	<view>
		<ujp-navbar title="" ref='navbar' id='navbar' :height='nav_height'> 
			<u-search id='search' ref='search'   :input-style='inputStyle'  placeholder="查询站点地址或站名" @change="search()" v-model="keyword" color="#c8c8c8" @search="search" @click="search" @clickicon='back' @custom='search'></u-search>		 
		</ujp-navbar>
		<view class="recommend">推荐充电站</view>
	<view class="carNone" v-if="stationslist.length == 0">
		<img src="static/img/暂无数据-缺省页.png" alt="">
		<p class="oldTextjp2" oldstyle="font-size: 18px;">暂无可用充电站</p>
		
	</view>
	
	  <view v-for="(item,index) in stationslist" :key="item.id" class="charing-slow"   @click="stationDetail(item)">
		
		
		
			<view class="address">
				<view class="name oldTextjp" oldstyle="font-size: 20px;">
					{{item.name}}
				</view>
				<view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-if="item.distance != '99999999'">
					<text class="iconfont" style="color:#666666">&#xe615;</text>
					{{item.distance!=null && item.distance>0.1 ? item.distance.toFixed(1)+'公里' : '小于100米'}}
				</view>
				<view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-else>
					<text class="iconfont" style="color:#666666">&#xe615;</text>
					暂无定位
				</view>
			</view>
			<view class="sign" >
				{{item.address}}
			</view>
			<view class="sign" v-if="item.stationType!=50&&personInfo&&personInfo.userType!=1">
				<view class="sign-1" v-if="item.giveDiscount">会员服务费{{item.discountRatio/10}}折</view>
				<view class="sign-2" v-if="item.tagList.length != 0" v-for="(tagName,tagIndex) in item.tagList" :key="tagIndex">{{tagName}}</view>
			</view>
			<view class="price-free price-freeList">
			<view class="price">
				<view class="price-1">
					<text class="num">{{!item.giveDiscount ? (item.electricityPrice+item.servicePrice).toFixed(2)
					: (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</text>
					<text class="unit " oldstyle="font-size: 14px;">
						 元/度 起
					</text>
				</view>
				<view class="price-2 " oldstyle="font-size: 14px;" v-if="item.giveDiscount">
					<text class="num">{{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
					<text class="unit">元/度 起</text>
				</view>
			</view>
			<view class="free">
				<view class="fast" v-if="item.fastNum">
					<view class="fast-font">
						快
					</view>
					<view class="num">
						{{item.fastAvailableNum}}/{{item.fastNum}}
					</view>
				</view>
				<view class="slow" v-if="item.slowNum">
					<view class="slow-font">
						慢
					</view>
					<view class="num">
						{{item.slowAvailableNum}}/{{item.slowNum}}
					</view>
				</view>
			</view>
		</view>
							
	
		
	
	</view>
			<u-divider margin-top="20" bg-color="#F2F4F4" v-if="stationslist.length == recordsTotal">已经到底了</u-divider>
			
	</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 {
				elderMode:false,
				inputStyle:{
					backgroundColor: 'transparent',
					"font-size":'32rpx',
				
				},
				pageIndex:1,
				recordsTotal: 0,
				nav_height:54,
				personInfo:{},
				userId:'',
				keyword:'',
			  stationslist:[],
			  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;
			
			
 			// //('搜索框高度'+JSON.stringify(rpx))
			// //('搜索框高度'+JSON.stringify(px))
			/*
			if(op!= null && op.stationlist != null){
				this.stations = decodeURIComponent(op.stationlist)
				//('stations'+JSON.stringify(this.stations))
			}
			//('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;
			 	this.personInfo=this.carhelp.getPersonInfo();
			 } 
			 WxJsApi.getWxConfig(['getLocation','openLocation', 'addEventListener']).then((res)=>{
			 
				
			 }).catch(error => {
					
			 })
			this.getPoint();
		},
		onReachBottom() {
			if (this.stationslist.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		 // conponents:{charingSlows},
		methods: { 
			theme(type) {
			  if(type == 'elder')	
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 let data = {
				 	backgroundColor: 'transparent',
				 	"font-size":'32rpx',
				 	
				 };
				 this.inputStyle = data;
			  }
			  else
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				  let data  ={
				  	backgroundColor: 'transparent',
				  	"font-size":'32rpx',
				 
				  };
				  this.inputStyle = data;
			  } 
			},
			navigateTo(item){
				 
				 uni.showLoading({
				 	
				 })
				 WxJsApi.openLocation({
				     latitude:parseFloat( item.latitude),//目的地latitude
				     longitude:parseFloat( item.longitude),//目的地longitude
				     name: item.name,
				     address: item.address,
				     scale: 15,//地图缩放大小，可根据情况具体调整
				 	success(res) {
				 			uni.hideLoading()
				 	},
				 	complete() {
				 		//	uni.hideLoading()
				 	}
				 });
				//window.location.href="https://uri.amap.com/marker?position="+ item.longitude+","+item.latitude+"&name="+item.name;
				 
			},
			stationDetail(item){
				 
				//('stationDetail item'+JSON.stringify(item))
				uni.navigateTo({
					url:'../searchPile/stationAndPile/stationDetails?id='+item.id
				})
					/*
				uni.navigateTo({
					url:'stationAndPile/stationDetails?station='+encodeURIComponent(JSON.stringify(item))
				})
				*/
	//			//('stationDetail'+JSON.stringify(item))
			},
			calculateDistance(startLngLat,obj){
				var _this = this;
				var endLngLat = [obj.longitude,obj.latitude];
				MapLoader().then(AMap1 => {
					
					this.AMap=AMap;
					
					var lnglat = new AMap.LngLat(startLngLat.longitude,startLngLat.latitude);
					var myDistance = lnglat.distance([obj.longitude, obj.latitude]);
					obj.distance = myDistance/1000;
					obj.time = myDistance/500;
				
				
				}, e => {
					//_this.mui.toast('地图加载失败');
					//('地图加载失败', e)
				})
			},
			getPoint() {
				var _this = this;
				//('getPoint')
				this.getChargingStationData(true);
				
				WxJsApi.getLocation().then((res) => {
					
					var latitude = parseFloat(res.latitude);
					var longitude = parseFloat(res.longitude);
					_this.latitude = latitude;
					_this.longitude = longitude;
					
					this.getChargingStationData(true);
					
				
				}).catch(error => {
					
					uni.showToast({
						title:JSON.stringify(error)
					})					
				})
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getChargingStationData()
			},
			getChargingStationData(bl){ 
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.stationslist = [];
					this.pageIndex = 1;
				}
				var data = {
					pageIndex: this.pageIndex,
					pageSize:20,
					
					 stationName:this.keyword,
					 findType: 0,
					
				};
				if(this.longitude&&this.latitude){
					data.longitude=this.longitude;
					data.latitude=this.latitude;
				}
				if (this.carhelp.getPersonInfo()) {
						data.openId=this.carhelp.getOpenId()
				}
		
				API.getChargingStationData(data).then((response) => {
					if (bl) {
						this.stationslist = [];
						this.pageIndex = 1;
					}
					console.log(response)
					var stationDataList=response.data.data
					if(this.longitude&&this.latitude){
						MapLoader().then(AMap1 => {
							for(var i in stationDataList){
								var item=stationDataList[i]
								
									var lnglat = new AMap.LngLat(this.longitude,this.latitude);
									var myDistance = lnglat.distance([item.longitude,item.latitude]);
									item.distance = myDistance/1000;
								
								
							}
						})
					}
				
					
					this.stationslist = [
						...this.stationslist,
						...stationDataList
					];
					this.recordsTotal = response.data.recordsTotal;
					//this.detail=response.data.monthlyRentCard
					uni.hideLoading()
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},	
			back(){
				//('back');
				uni.navigateBack({
					delta:1
				})
			},
			search(){
				//('search keyword'+this.keyword + ' '+JSON.stringify(this.stations))
				 this.getChargingStationData(true)
				
				//('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-2{
	 margin: 0 0 10px 0 !important;
	 // border-bottom: 1px solid rgba(238, 242, 240, 100);
	 
 }
 .charing-slow {
 	background-color: #fff;
	margin: 36rpx;
	border-radius: 16rpx;
 	padding: 40rpx 24rpx 24rpx;
 	position: relative;
 	left: 0;
 	right: 0;
}
.fast-charge {
		display: inline-block;
		border-radius: 50px;
		border-radius: 4px;
		background-color: rgba(208, 209, 255, 100);
		color: rgba(56, 60, 255, 100);

		margin: auto 0;
		@include themeify{
			width: themed('font-size18');
			font-size: themed('font-size2');
 			line-height: themed('font-size7');
			height: themed('font-size8');
		}
		text-align: center;
	}
	
	.fast-trickle-charge {
		display: inline-block;
	     margin: auto 0;
		border-radius: 4px;
		background-color: rgba(172, 236, 240, 100);
		color: rgba(0, 124, 134, 100);
		@include themeify{
			width: themed('font-size18');
			font-size: themed('font-size2');
			line-height: themed('font-size7');
			height: themed('font-size8');
		}
		text-align: center;
	}
	.trickle-charge {
		display: inline-block;
	border-radius: 4px;
	margin: auto 0;
		
		background-color: rgba(186, 240, 215, 100);
		color: rgba(0, 130, 69, 100);
		@include themeify{
			width: themed('font-size18');			
			font-size: themed('font-size2');
			line-height: themed('font-size7');
			height: themed('font-size8');
		}
		text-align: center;
	}
  
 	.station-items {
 		display: inline-block;
/* 		height: 16px;
 		line-height: 16px;*/
		@include themeify{
			font-size: themed('font-size3');
			font-weight: themed('fontWeight');
			line-height: themed('font-size3');
			height: themed('font-size3');
		}

 		margin-left: 8rpx;
 		color: #101010;
 
 
 	}
	//
	
 	.address {
		width: 100%;
		line-height: 20px;
		display: flex;
		justify-content: space-between;
		.name{
			font-size: 16px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.distance{
			color: rgba(102, 102, 102, 100);
			font-size: 12px;
			
			    width: 90px;
			.iconfont{
				font-size: 12px;
				margin-right: 2px;
			}
		}
		
		@include themeify{
			font-size: themed('font-size5');
			line-height: themed('font-size7');
		}
/* 		font-size: 11px;*/
font-weight: 600;
 		color: #101010;
 	}
	
 .price-free{
	 width: 100%;
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	
 }
 	.price {
 		display: flex;
		align-items: baseline;
		line-height: 40rpx;
		
		.price-1{
		
			
			.num {
			
			 	color: rgba(255, 98, 0, 100);
			 
			
				     font-size: 44rpx;
				     height: 44rpx;
			 	text-align: left;
			 	font-family: Roboto-medium;
			 }
			 .unit {
					// font-size: 12px;
			  	color: rgba(102, 102, 102, 100);
			 	@include themeify{
			 			// font-size: themed('font-size2');
						font-size: 24rpx;
						
			 			height: themed('font-size2');
			 			
			 	}
			
			  	text-align: left;
			  	font-family: AlibabaPuHui-regular;
			  	
			  	margin-left: 8rpx;
			  }
		}
        .price-2{
        	color: rgba(153, 153, 153, 100);
        	margin-left: 6rpx;
        	text-decoration: line-through;
			font-size: 24rpx
        }
 	}
 
 .free{
 	display: flex;
     align-items: center;
 	.slow,.fast{
 		display: flex;
 		.fast-font{
 			width: 40rpx;
 			height: 40rpx;
 			line-height: 40rpx;
 			border-radius: 4px;
 			background-color: rgba(186, 240, 215, 100);
 			color: rgba(0, 130, 69, 100);
 			font-size: 28rpx;
 			text-align: center;
 			margin-right: 2rpx;
 		}
 		.slow-font{
 			width: 40rpx;
 			height: 40rpx;
 			line-height: 40rpx;
 			border-radius: 4px;
 			background-color: rgba(226, 226, 226, 100);
 			color: rgba(128, 128, 128, 100);
 			font-size: 28rpx;
 			text-align: center;
 			margin-right: 2rpx;
 		}
 		.num{
 			font-size: 32rpx;color: rgba(0, 145, 67, 100);
 			line-height: 40rpx;
 		}
 	}
 	.slow{
 		margin-left: 16rpx;
 	}
 }
 
  
 
 	.park {
 		margin-top: 16rpx;
 		display: flex;
 
 		
 
 		
 	}
	.park-p {
		display: inline-block;
		width: 20px;
/*		height: 18px;
		line-height: 12px;*/
		@include themeify{
			line-height: themed('font-size1');
			height: themed('font-size4');
		}
		text-align: center;
		// background-color: rgba(125, 177, 255, 100);
		background-color: #00b962;
		color: #fff;
	}
	.park-text {
		display: inline-block;
		color: rgba(102, 102, 102, 100);
		@include themeify{
			font-size: themed('font-size1');
			height:themed('font-size4');
		}
/*		font-size: 12px;*/
		text-align: left;
		margin-left: 4px;
		margin-top: 2px;
	}
	
	 .map {
		width: 100%;
	 
		height: 100%;
		position: relative;
	}
	#container {
	  width: 100%;
	  height: 100%;
	}
 	

	
	.distance-font {
		@include themeify{
				font-size: themed('font-size3');
		}
/*		font-size: 16px*/
	}
	
	.position{
		color: #1677ff;
		@include themeify{
				font-size: themed('font-size2');
		}
/*		font-size: 14px*/
	}
	.position-box{
		position:absolute;
		top: 341px;
		right: 118px;
		width: 16px;
		height: 16px;
		/* line-height: 20px; */
		background-color: rgba(22, 119, 255, 100);
		text-align: center;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4);
		border: 2px solid rgba(255, 255, 255, 100);
		border-radius: 999px;
	}
	.min-h{
		min-height: 65px;
	}
	.sign{
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		
		.sign-1{
			height: 20px;
			line-height: 20px;
			border-radius: 4px;
			background-color: rgba(255, 255, 255, 100);
			color: rgba(255, 139, 0, 100);
			font-size: 12px;
			text-align: center;
			border: 1px solid rgba(255, 139, 0, 100);
			padding: 0 4px;
			margin-right: 8px;
			margin-bottom: 4px;
		}
		.sign-2{
			height: 20px;
			line-height: 20px;
			border-radius: 4px;
			background-color: rgba(255, 255, 255, 100);
			color: rgba(153, 153, 153, 100);
			font-size: 12px;
			text-align: center;
			border: 1px solid rgba(204, 204, 204, 100);
			padding: 0 4px;
			margin-right: 8px;
			margin-bottom: 4px;
		}
	}
	
		.park-text2 {
			    width: 140%;
			}
			.park-text3 {
				    white-space: nowrap;
				 
				 
				    text-overflow: ellipsis;
				    overflow: hidden;
				}
				.carNone{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					img{
						width: 100%;
						height: 100%;
					}
					p{
						margin-top: -60px;
					}
				}
</style>