JP-ChargeTeam51/pages/searchPile/searchPile.vue

<template>
	<view class='font1'>
		<ujp-navbar :is-back="false" :height='nav_height'style="background-color: bisque;">
			<view style="display: flex;flex-direction: column; width: 100%;height: 100%;">
				<view style="display: flex;flex-direction: row; height: 100%; align-items: center;margin-top:0rpx;padding-top: 0rpx;padding-bottom: 20rpx;">
					<view style="margin-left:20rpx;width: 160rpx;">
						<uni-combox class='font2' ref="city" :border="false" v-model="area" :candidates="cities" @updateModel='updateCity' @updateSelector="updateTypeSelector(3)"></uni-combox> 
 					</view>
					
					<view style="margin-left: 20rpx;margin-right: 20rpx; flex:1" >
						<u-search height="80" :input-style='inputStyle' placeholder="查询站点地址或站名" v-model="keyword" :showAction="false"  @focus="navigate"></u-search></view>
					<view style="margin-right: 20rpx;" v-show="viewMode" @click="listMode">
						<text class="iconfont">&#xe613;</text> <text class="list font2">列表</text>
<!--						<u-icon name="list-dot" size="26" color="#c0c4cc"></u-icon>
						<label>列表</label>-->
					</view>
					<view style="margin-right: 20rpx;" v-show="!viewMode" @click="mapMode">
						<text class="iconfont">&#xe622;</text> <text class="list font2">地图</text>						
						<!--<u-icon name="map" size="26" color="#c0c4cc"></u-icon>
						<label>地图</label>
						-->
					</view>
				</view>

				<view style="display: flex;flex-direction: row;width:100%; justify-content: space-between;align-items: center;">
					<view style="margin-left:20rpx;margin-right:10rpx;flex:1; ">
						<uni-combox class='font2' ref="raidus" :border="false" v-model="raidus" :candidates="radiuses"  @updateModel='updateRadius' @updateSelector="updateTypeSelector(0)"></uni-combox> 
 					</view>
<!--					
					<view style="margin-left: 20rpx;">
						<label class="arrow">{{ info.miles_type[preference.miles_index].text }}</label>
						<u-icon name="arrow-down-fill" size="13" color="#c0c4cc"></u-icon>
					</view>
					-->
					<view style="flex:1;   ">
						<uni-combox ref="type" class='font2' :border="false" v-model="type" :candidates="types" @updateModel='updateType' @updateSelector="updateTypeSelector(1)"></uni-combox> 
 					</view>
					
					<view style="flex:1;">
						<uni-combox ref="stationType" class='font2'  :border="false" v-model="stationType" :candidates="stationTypes" @updateModel='updateType2' @updateSelector="updateTypeSelector(2)"></uni-combox> 
					</view>
<!--					<view style="margin-left: 20rpx;margin-right: 20rpx;flex:1">
						<label class="arrow">{{ info.obc_type[preference.obc_type_index].text }}</label>
						<u-icon name="arrow-down-fill" size="13" color="#c0c4cc"></u-icon>
					</view>-->
					<view style="margin-right: 20rpx;" @click="open">
						<label v-if="show" class="arrow font2" style="color: #00b962;">{{ action }}</label>
						<label v-else class="arrow font2" >{{ action }}</label>
						<u-icon v-if="show" name="arrow-up-fill" size="13" color="#00B962"></u-icon>
						<u-icon v-else name="arrow-down-fill" size="13" color="#999999"></u-icon>
					</view>
				</view>
			</view>
		</ujp-navbar>
		<view class="content" >
			<view v-if="show" class="preference" :style="show ? 'z-index:1024;top:'+navBarHeight+'px;' : 'z-index:0'" style="width: 100%;">
				<view class="content-s">
				<view class="preference_group">
					<view class="preference_group_item"><label class="preference_label">距离我</label></view>
					<view>
						<u-tag
							class="preference_item"
							v-for="(item, index) in info.miles_type"
							:key="index"
							:style="index == preference.miles_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
							shape="circle"
							:text="item.text"
							@click="selectMiles(index)"
						></u-tag>
					</view>
				</view>
				<view class="preference_group">
					<view class="preference_group_item"><label class="preference_label">充电站类型</label></view>
					<view>
						<u-tag
							class="preference_item_medium"
							v-for="(item, index) in info.obc_type"
							:key="index"
							:style="index == preference.obc_type_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
							shape="circle"
							:text="item.text"
							@click="selectOBSType(index)"
						></u-tag>
					</view>
				</view>
				<view class="preference_group">
					<view class="preference_group_item"><label class="preference_label">充电站所属</label></view>
					<view>
						<u-tag
							class="preference_item_medium"
							v-for="(item, index) in info.obc_stationType"
							:key="index"
							:style="index == preference.obc_stationType_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
							shape="circle"
							:text="item.text"
							@click="selectOBSType2(index)"
						></u-tag>
					</view>
				</view>
			
				<view class="preference_group" v-if="false">
					<view class="preference_group_item"><label class="preference_label">是否对外开放</label></view>
					<view>
						<u-tag
							class="preference_item_plus"
							v-for="(item, index) in info.obc_status"
							:key="index"
							:style="index == preference.obc_status_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
							shape="circle"
							:text="item.text"
							@click="selectOBSStatus(index)"
						></u-tag>
					</view>
				</view>

				<view class="preference_group"  v-if="false">
					<view style="margin-left: 30rpx;"><u-checkbox active-color="#00b962" shape="circle" v-model="preference.save_preference" @change="radioChange">保存偏好设置</u-checkbox></view>
				</view>
			
				</view>
				<view class="pre-btn" style="display: flex;flex-direction: row;">
					<view class="btn-1 font3" @click="reset" style="width: 30%;">重置</view>
					<view class="btn-2 font3" @click="close" style="width: 70%;background-color: #00B962;color: #fff;">确定</view>
				</view>
				
			</view>
				<u-mask :show="show" @click="show = false"></u-mask>
			<view v-show="!viewMode" >
				 
			 
				<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 " 
							
							 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" v-if="item.stationType==50">
							{{item.address}}
						</view>
						<view class="sign" v-else>
							<template v-if="personInfo&&personInfo.userType!=1">
								<view class="sign-1" v-if="item.giveDiscount">会员服务费{{item.discountRatio/10}}折</view>
								<view class="sign-3" v-if="item.category=='超充'">160kW超充站</view>
								
								<view class="sign-2" v-if="item.tagList.length != 0" v-for="(tagName,tagIndex) in item.tagList" :key="tagIndex">{{tagName}}</view>
								
							</template>
						</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 <0" >已经到底了</u-divider>
				 
				
				
			</view>
			<view v-show="viewMode">					
				<view>
					<Chargermap @onMoveStart="moveStart"   @onMoveEnd="moveEnd" ref="amap" @onClicked="onClicked" @onload="mapdown" @clickMap="clickMap"></Chargermap>
					<!--@location="location"-->
					<u-image style='position:absolute;z-index:1023;right:40rpx;bottom:520rpx;  '
					 src="@/static/img/location.png" border-radius="8" bg-color="#ffffff" width="30px" height="30px" @click="setCenter"></u-image>
					 
				</view>
			<!-- 新版卡片 -->	
			<view class="chargerCard" v-if="stationsmap.length>0">
				<swiper v-if="stationsmap.length>0" :current="currentIndex" @change="swiperChange" slide-change-transition-end='swiperTransitionEnd' @transition="swiperTransition">
					<swiper-item v-for="(item,index) in stationsmap" :key="item.id" style="height: 100%;">
						<view class="swiper-item" style="height: 100%; background-color: #ffffff;" @click="stationDetail(item)">
							<view class="charing-slow charing-slow-2" @click="stationDetail(item)">
								<view class="address">
									<view class="name oldTextjp" oldstyle="font-size: 20px;">
										{{item.name}}
									</view>
									<view class="distance "  >
										<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;">
										<text class="iconfont" style="color:#666666">&#xe615;</text>
										暂无定位
									</view> -->
								</view>
								<view class="sign min-h">
									<template v-if="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>
									</template>
								</view>
								<view class="price-free  price-freeOne">
									<view class="price">
										<view class="price-1">
											<view class="num">
											{{!item.giveDiscount ? (item.electricityPrice+item.servicePrice).toFixed(2)
												: (item.electricityPrice+item.discountServicePrice).toFixed(2)}}
												
												<span class="unit " oldstyle="font-size: 14px;">
													 元/度
												</span>
												</view>
											
										</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>
						</view>
					</swiper-item>
				</swiper>
			</view>


			</view>
		</view>
		 
		
		<Tabbar :current="1"  ref="tabbarMain" :elderStatus="elderStatus"></Tabbar> 
	</view>
</template>

<script>
//	import api from './site-index.js'
//	export default   api
import * as indexAPI from '@/apis/index.js'
import * as api from '@/apis/site.js';
import Chargermap from '@/components/Chargermap.vue';
import DoubleSlider from '@/components/double-slider/DoubleSlider.vue';
import Tabbar from '@/components/Tabbar.vue';
import uniCombox from '@/components/uni-combox/components/uni-combox/uni-combox.vue'
import * as WxJsApi from '@/utils/wxJsApi.js'
//import * as Map from '@/utils/openMap.js'

//import MapLoader from '@/utils/AMap'
//import xflSelect from '@/components/xfl-select/xfl-select.vue'

let _self;
export default {
	components: {
		Chargermap,
		DoubleSlider,
		Tabbar, 
		uniCombox,
	//	xflSelect
	},
	data() {
		return { 
			elderStatus: false,
			inputStyle:{
				backgroundColor: 'transparent',
				"font-size":'32rpx',
			
			},
			recordsTotal:0,
			nav_height:88,
			elderMode:false,
			showCity:false,
			showType:false,
			showRadius:false,
			cities: [ '荆州市'], 			
			radiuses:['1公里','2公里','5公里','10公里','20公里','50公里','100公里','200公里'],
			types:['全部','交流快充','直流慢充'],	
			stationTypes:['全部','公共充电桩','个人充电桩'],		
			area: '荆州市',
			raidus:'',
			type:'',
			stationType:'',
			centerImg:'@/static/img/location.png',
			currentIndex:-1,
			navBarHeight:88,
			viewMode: false, //列表
			keyword: '',
			show: false,
			mapopen: false,
			isReady: false,
			id: '',
			longitude:null,
			latitude: null,
			name:'荆鹏软件园',
			//			longitude: '',
			//			latitude: '',
			nearbyStationInfo: {
				nearbyShiftDTOList: []
			},
			action: '筛选',
			preference: {
				miles_index: 3,
				obc_stationType_index:0,
				obc_type_index: 0,
				obc_status_index: 0,
				obc_voltage_index: 0,
				save_preference: false,
				obc_power: { minValue: 0, maxValue: 500 }
			},
			stationsmap:[
/*				{name:'荆鹏软件园充电站',position:'湖北省荆州市沙市区江津东路附155号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'慢充'},
				{name:'荆鹏软件园充电站2',position:'湖北省荆州市沙市区江津东路附156号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'快充'},
				{name:'荆鹏软件园充电站3',position:'湖北省荆州市沙市区江津东路附157号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'慢充'},
				{name:'荆鹏大道求助站充电站',position:'湖北省荆州市沙市区江津东路附158号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'快充'},
	*/			
			],
			first:true,
			timer:null,
			swipping:false,			
			stationslist:[],
			info: {
				miles_type: [
					{ distance: 1, text: '1公里' },
					{ distance: 2, text: '2公里' },
					{ distance: 5, text: '5公里' },
					{ distance: 10, text: '10公里' },
					{ distance: 20, text: '20公里' },
					{ distance: 50, text: '50公里' },
					{ distance: 100, text: '100公里' },
					{ distance: 200, text: '200公里' }
				],
				obc_type: [{ value: '', text: '全部' }, { value: 0, text: '直流快充' }, { value: 1, text: '交流慢充' }],
				obc_status: [{ value: 0, text: '对外开放' }, { value: 1, text: '不对外开放' }],
				obc_voltage: [{ value: 0, text: '低于700V' }, { value: 1, text: '700V及以上' }],
				obc_power: { minValue: 0, maxValue: 1000 },
				obc_stationType : [
					{ value: '', text: '全部' }, { value: 1, text: '公共充电桩' }, { value:50, text: '个人充电桩' }
				]
			},
			userId:'',
			personInfo:{},
		};
	},
	onLoad(op) {
		_self = this;
		
		var px = uni.upx2px(172);
		this.nav_height = px;
//		//('longitude0  ' + _self.longitude);
//		//('latitude0  ' + _self.latitude);
		// if (op != null) {
		// 	if (op.longitude != null) this.longitude = op.longitude;
		// 	if (op.latitude != null) this.latitude = op.latitude;
		// 	if (op.id != null) this.id = op.id;
		// }
		// if(this.elderMode)
		// {
		// 	window.document.getElementsByTagName('body')[0].style.setProperty('--theme', 1);			
		// }
		 			
		//navigation.getPoint();
		
		
		let data1 = {latitude:this.latitude,longitude:this.longitude,findType:"1"};
		this.getChargingStationData(data1);
	},
	onReady() {
		if(this.carhelp.get("getElderModeClass") == "长辈模式") {
			this.elderStatus = true;
		} else {
			this.elderStatus = false;
		}
		
//		//('长者模式'+JSON.stringify(this.carhelp.get("getElderModeClass")));
		this.elderMode = this.carhelp.get('getElderModeClass') == '长辈模式';
		
		//this.elderMode = true;
		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();
		 }
		 
		 let preference = this.carhelp.get('preference',this.preference)  
		 if(preference.save_preference)
		 {
			 this.preference = preference;
			//('preference'+JSON.stringify(preference))
		 }
		 this.types = [];
		 for(let i = 0;i< this.info.obc_type.length;i++){
			 this.types.push(this.info.obc_type[i].text);
		 }
		 this.radiuses = [];
		 for(let i = 0;i< this.info.miles_type.length;i++){
			 this.radiuses.push(this.info.miles_type[i].text);
		 }
		 
		 this.type = this.info.obc_type[this.preference.obc_type_index].text;
		 this.raidus = this.info.miles_type[this.preference.miles_index].text;
			this.stationType= this.info.obc_stationType[this.preference.obc_stationType_index].text; 
		 WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
		 	// //(res)
		 }).catch(error => {
		 	//(error)
		 })
		  
		 
		//		//('longitude2  '+this.longitude)
		//		//('latitude2  '+this.latitude)
		this.$refs.amap.init();
		//this.getPositionByLonLats();
//		this.$refs.amap.setMyStyle("height:1500rpx;width:100%;");
//	this.$refs.amap.setMyStyle("height:calc(100%-176rpx);width:100%;");
				
		//		//('longitude3  '+this.longitude)
		//		//('latitude3  '+this.latitude)
	},
	onShow() {
		if(this.$refs.tabbarMain){
			this.$refs.tabbarMain.setcount(1);
		}
		
//		//('onShow')
		if (this.isReady) {
			 
		}
		
		this.$nextTick(()=>{
			this.type = this.info.obc_type[this.preference.obc_type_index].text;
			this.raidus  = this.info.miles_type[this.preference.miles_index].text;
			this.stationType= this.info.obc_stationType[this.preference.obc_stationType_index].text;
			
				this.$refs.amap.init();
		})
	},
	onHide(){
		this.end();
	},
	methods: {
	 
		updateTypeSelector(val){
		 
			var sz=["raidus","type","stationType",'city']
			for(var i in sz){
				if(i==val){
					
				}else{
					this.$refs[sz[i]].closeSelector();
				}
			}
			
			this.show = false;	
			
		},
	
		updateCity(e){
			this.close();
		},
		updateRadius(e){
			this.preference.miles_index = e.value;
			this.close();
			//('updateRadius'+JSON.stringify(e))
		},
		updateType2(e){
			this.preference.obc_stationType_index = e.value;
			this.close();
			//('updateType'+JSON.stringify(e))
		},
		updateType(e){
			this.preference.obc_type_index = e.value;
			this.close();
			//('updateType'+JSON.stringify(e))
		},
		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:JSON.stringify(error)
				})					
			})
			
//			//('setCenter')
		},
		getScanCode() {
			
			if(!this.isEnabled())
				return;
			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'
				})
			}
		},
		//导航
		guide(signMap,item) {
		        let self = this;
		        if (item.position && item.position != '') {
		            //景点位置partnerAddress 景点经纬度lng lat
		            var lng = self.lng;
		            var lat = self.lat;
		            if (signMap == 'gd') {
		                // 高德地图
						//('signMap')
		                if (self.customBrowserVersion().android) {
		                    window.location.href = "androidamap://viewMap?sourceApplication=appname&poiname=" + item.position +
		                        "&lat=" + item.latitude + "&lon=" + item.longitude + "&dev=0";
		                    //判断是否跳转
		                    setTimeout(function () {
		                        let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||
		                            window.document.webkitHidden
		                        if (typeof hidden == "undefined" || hidden == false) {
		                            //调用高德地图
		                            window.location.href = "https://uri.amap.com/marker?position=" + item.longitude + "," + item.latitude +
		                                "&name=" + item.position;
		                        }
		                    }, 2000);
		                } else if (self.customBrowserVersion().ios) {
		                    window.location.href = "iosamap://viewMap?sourceApplication=appname&poiname=" + item.position +
		                        "&lat=" + item.latitude + "&lon=" + item.longitude + "&dev=0";
		                    //判断是否跳转
		                    setTimeout(function () {
		                        let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||
		                            window.document.webkitHidden
		                        if (typeof hidden == "undefined" || hidden == false) {
		                            //调用高德地图
		                            window.location.href = "https://uri.amap.com/marker?position=" + item.longitude + "," + item.latitude +
		                                "&name=" + item.position;
		                        }
		                    }, 2000);
		                }
		            } else if (signMap == 'bd') {
		                // 百度地图
		                if (self.customBrowserVersion().android) {
		                    //安卓操作系统
		                    let d = new Date();
		                    let t0 = d.getTime();
		                    window.location.href = "androidamap://viewMap?sourceApplication=appname&poiname=" + item.position+
		                        "&lat=" + item.latitude + "&lon=" + item.longitude + "&dev=0";
		                    //由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
		                    var delay = setInterval(function () {
		                        var d = new Date();
		                        var t1 = d.getTime();
		                        if (t1 - t0 < 3000 && t1 - t0 > 2000) {
		                            window.location.href = "http://api.map.baidu.com/marker?location=" + item.latitude + "," +
		                                item.longitude + "&title=" + item.position +
		                                "&content=充电桩&output=html&src=webapp.baidu.openAPIdemo";
		                        }
		                        if (t1 - t0 >= 3000) {
		                            clearInterval(delay);
		                        }
		                    }, 1000);
		                }
		                if (self.customBrowserVersion().ios) {
		                    //ios操作系统
		                    let d = new Date();
		                    let t0 = d.getTime();
		                    window.location.href = "iosamap://viewMap?sourceApplication=appname&poiname=" + self.partnerAddress +
		                        "&lat=" + lat + "&lon=" + lng + "&dev=0";
		                    //由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
		                    let delay = setInterval(function () {
		                        var d = new Date();
		                        var t1 = d.getTime();
		                        if (t1 - t0 < 3000 && t1 - t0 > 2000) {
		                            window.location.href = "http://api.map.baidu.com/marker?location=" + item.latitude + "," +
		                                item.longitude + "&title=" + item.position +
		                                "&content=充电桩&output=html&src=webapp.baidu.openAPIdemo";
		                        }
		                        if (t1 - t0 >= 3000) {
		                            clearInterval(delay);
		                        }
		                    }, 1000);
		                }
		            }
		        } else {
		           uni.showToast({
		           	title:'暂时不知道充电桩位置'
		           })
		        }
		    },
		    //区分设备
		    customBrowserVersion() {
		        var u = navigator.userAgent;
		        return {
		            trident: u.indexOf('Trident') > -1, //IE内核
		            presto: u.indexOf('Presto') > -1, //opera内核
		            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
		            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
		            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
		            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
		            android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
		            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
		            iPad: u.indexOf('iPad') > -1, //是否iPad
		            webApp: u.indexOf('Safari') == -1, //是否web应用程序，没有头部与底部
		            weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
		            qq: u.match(/\sQQ/i) == " qq", //是否QQ
		            isBaidu: u.indexOf('baiduboxapp') !== -1, //是否为百度浏览器
		            isqqBrowser: u.indexOf('mqqbrowser') !== -1, //是否为qq浏览器
		            isWxBrowser: u.indexOf('micromessenger') !== -1, //是否为微信浏览器
		            isUc: u.indexOf('ucbrowser') !== -1, //是否为uc浏览器
		        };
		    },

		navigateTo(item){
			/*
			this.elderMode = !this.elderMode;
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
			return;
			*/
			//this.guide('gd',item);
			////('导航'+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
			 ////('platform'+JSON.stringify(platform))
			 //this.$refs.amap.navigate(startLngLat,endLngLat);
		},
		navigate(){
			//('naviage to ')
			uni.navigateTo({
				url:'/pages/search/search'
					 
			})
		},		
		getPoint() {
			 
			  
			 
//			//('getPoint')
			WxJsApi.getLocation().then((res) => {
				
				var latitude = parseFloat(res.latitude);
				var longitude = parseFloat(res.longitude);
				let data = {position:{latitude:latitude,longitude:longitude}};

				_self.location(data);
				
				if(_self.first)
				{
					var obj = {
									longitude: longitude,
									latitude: latitude
								};
					this.$refs.amap.setPerson(obj);	
					//let data = {latitude:latitude,longitude:longitude};
					//this.getChargingStationData(data);
					this.getNearbyStationInfo();
					_self.first = false;
					//this.$refs.amap.listenMove();
				}
				
				
				//('当前位置' +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)
				})					
			})
		},
		start() {
			let self = this;
		  // 将定时器名字赋值到变量中
		  this.timer = setInterval(() => {
			////("开始---");
			
			//self.$refs.amap.getLocation1();
			//self.$refs.amap.getLocation ();
		  }, 10000);
		},
		end() {
		  clearInterval(this.timer);
		  this.timer = null // 这里最好清除一下，回归默认值
		  // 众所周知，定时器返回一个随机整数，用于表示定时器的编号，后面通过名字可以取消这个定时器的执行。
		  //(this.timer);
		},
		isEnabled(){
			if(this.viewMode)
			{
				if(this.show)
					return false;
			}
			return true;
		},
		stationDetail(item){
			if(!this.isEnabled())
				return;
			//('stationDetail'+JSON.stringify(item))
			uni.navigateTo({
				url:'stationAndPile/stationDetails?id='+item.id
			})
				/*
			uni.navigateTo({
				url:'stationAndPile/stationDetails?station='+encodeURIComponent(JSON.stringify(item))
			})
			*/
//			//('stationDetail'+JSON.stringify(item))
		},
		location(e){
			if(e.position){
				//this.$refs.amap.getPositionByLonLats(e.position);
				if(e.position.latitude && e.position.longitude)
				if(this.latitude != e.position.latitude || 
					this.longitude != e.position.longitude)
					{
						this.longitude = e.position.longitude;
						this.latitude = e.position.latitude;
						
						let data = {latitude:this.latitude,longitude:this.longitude,findType:"1"};
						this.getChargingStationData(data);
						//('获取定位'+JSON.stringify(e));
						
					}
			}
		},
		getChargingStationData(pos){
			
			//return;
			if(pos == null)
				return ;			
//			//('getChargingStationData'+JSON.stringify(pos))
			let data1 = { pageIndex:1,pageSize:40};
			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(pos.longitude != null)
				data1.longitude = pos.longitude.toString();
			if(pos.latitude != null)
				data1.latitude = pos.latitude.toString(); 
			if(this.info.miles_type[this.preference.miles_index].distance!=null)
				data1.raidus = this.info.miles_type[this.preference.miles_index].distance.toString();
			
			if(this.preference.obc_stationType_index!=null){
				data1.stationType= this.info.obc_stationType[this.preference.obc_stationType_index].value
			}
			// data1.online = "0";//在线	
			if(pos.findType != null)
				data1.findType = pos.findType;
			else
				data1.findType = this.viewMode?"0":"1";
				
			if(data1.findType == "0")
			{					
			//					//('getChargingStationData res1'+JSON.stringify(res));
				_self.currentIndex = -1;
				_self.stationsmap = []; 
			}else{
				_self.stationslist = [];
			}
			/*
			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();
			*/
//			//('data1'+JSON.stringify(data1))
			uni.showLoading({
				
			})
			
			if (this.carhelp.getPersonInfo()) {
					data1.openId=this.carhelp.getOpenId()
			}
			
			
			api.getChargingStationData(data1).then(function(res){
				uni.hideLoading()
				_self.recordsTotal = res.data.recordsTotal;
				
//				//('data1'+JSON.stringify(res))
				if(!res.result || !res.data || !res.data.data)
				{
					//('getChargingStationData res nulll')
					return;					
				}
				let items = res.data.data;
				

				if(data1.findType == "0")
				{					
//					//('getChargingStationData res1'+JSON.stringify(res));
//					_self.currentIndex = -1;
					_self.stationsmap = []; 
					//let stations  = [];
					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,
									time:9,
									park: '2小时免费停车',
//									longitude: 112.28541 + i * 0.001,
//									latitude: 30.308354 + i * 0.01
									};
						if(items[i].id != null){
								obj.id = items[i].id;
								obj=items[i];
						}
						else
							continue;
						if(items[i].type.indexOf("1")>=0 && items[i].type.indexOf("2")>=0)
						{
							obj.type = '快/慢'
						}
						if(items[i].type=="1" )
						{
							obj.type = '快充'
						}
						if(items[i].type=="2" )
						{
							obj.type = '慢充'
						}
						
						if(items[i].name!=null)
							obj.name = items[i].name;
						if(items[i].address!=null)
							obj.position = items[i].address;
						if(items[i].costPrice!=null)
							obj.price = items[i].costPrice;
						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].image != null){
							obj.image = items[i].image;
						}
						if(items[i].parkingDescription != null){
							obj.parkingDescription = items[i].parkingDescription;
						}
						if(items[i].park != null)
							obj.park = items[i].park;
						/*
						let obj = {name:items[i].name,
									position:items[i].address,
									price:items[i].costPrice,									
									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.stationsmap.push(obj);						
						//stations.push(obj);
					}
					_self.$refs.amap.calcDistances([_self.longitude, _self.latitude],_self.stationsmap)
 					_self.$refs.amap.setChargerList(_self.stationsmap); 
					_self.currentIndex = 0; 
					//if(_self.stationsmap.length>0)
					/*_self.$refs.amap.calcDistances([_self.longitude, _self.latitude],stations)
					_self.stationsmap = stations;	
 					_self.$refs.amap.setChargerList(stations);*/
					if(_self.stationsmap.length>0)
					{
						//('刷新Map'+JSON.stringify(_self.stationsmap));
						_self.$refs.amap.updateCharger(_self.stationsmap[0]); 
						//let index = _self.stationsmap.findIndex(item => item.id == _self.stationsmap[0].id);						
						
						
						//('刷新Map Index'+ _self.currentIndex)
					}
				}else if(data1.findType == "1")
				{
					_self.stationslist = [];
//					//('getChargingStationData res2'+JSON.stringify(res));
					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,
								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;
									obj=items[i];
							}
							else
								continue;
							if(items[i].type.indexOf("1")>=0 && items[i].type.indexOf("2")>=0)
							{
								obj.type = '快/慢'
							}
							if(items[i].type=="1" )
							{
								obj.type = '快充'
							}
							if(items[i].type=="2" )
							{
								obj.type = '慢充'
							}
							
							if(items[i].name!=null)
								obj.name = items[i].name;
							if(items[i].address!=null)
								obj.position = items[i].address;
							if(items[i].costPrice!=null)
								obj.price = items[i].costPrice;
							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].parkingDescription != null){
								obj.parkingDescription = items[i].parkingDescription;
							}
							if(items[i].image != null){
								obj.image = items[i].image;
							}
							if(items[i].park != null)
								obj.park = items[i].park;
									//arr.push(obj);
							_self.stationslist.push(obj);
					}
					_self.$refs.amap.calcDistances([_self.longitude, _self.latitude],_self.stationslist)
					
	//				//(' getChargingStationData stations'+JSON.stringify(_self.stationslist))
					 
				}
			},function(err){
				uni.showToast({
					title:err
				})
				//('getChargingStationData err'+JSON.stringify(err))
			}
			)
//			//('getChargingStationData end')
		},		
		/*
		charge(item){
			 //('扫码充电')
			//#ifdef MP-WEIXIN
			uni.scanCode({
				success:function(res){
					uni.navigateTo({
						url:'chargingPileDetails?pile='+encodeURIComponent(JSON.stringify(data))
					})
					
				}
			}) 
			return;
			//#endif
			 
			 //('扫码充电1')
			 uni.navigateTo({
			 	url:'stationAndPile/chargingPileDetails'
			 })
			
		},	*/	
		moveEnd(e){ 
			//('moveEnd')
			this.close_all();
			let posCenter = this.$refs.amap.logMapInfo();
			////('posCenter'+JSON.stringify(posCenter))			
			let data = {latitude:e.center.lat,longitude:e.center.lng};
			this.getChargingStationData(data);
		},
		moveStart(e){
			this.close_all();
		},
		clickTabItem (index) {
			//('clickTabaItem'+JSON.stringify(index));
			this.currentIndex = index
		},
		swiperChange (e) {
			//('swiperChange currentIndex'+JSON.stringify(this.currentIndex))
			//('swiperChange'+JSON.stringify(e))
			this.currentIndex = e.detail.current
			let station = this.stationsmap[this.currentIndex];
			
			let posCenter= {longitude: station.longitude,latitude: station.latitude};
//			//('currentIndex'+JSON.stringify(this.currentIndex))
//			//('currentIndex'+JSON.stringify(posCenter))
//			//('station'+JSON.stringify(station))
			let bounds = this.$refs.amap.logMapInfo();
			/*if( (posCenter.latitude<bounds.bounds.northeast.lat && posCenter.latitude>bounds.bounds.sourthwest.lat)
			&&  (posCenter.longitude<bounds.bounds.northeast.lng && posCenter.longitude>bounds.bounds.sourthwest.lng)
			){
				//('bounds'+JSON.stringify(bounds));
				
			}else{			
				this.$refs.amap.setCenter(posCenter);				
			}*/
			this.$refs.amap.updateCharger(station);
			this.$refs.amap.setCenter(posCenter);
			  
		},
		swiperTransitionEnd(e){
			//('swiperTransitionEnd'+JSON.stringify(e))
		},
		swiperTransition (e) {
			// //('swiperTransition'+JSON.stringify(e))
		},
		listMode() {
			this.close_all();
			this.viewMode = false
		},
		mapMode() {
			this.close_all();
			this.viewMode = true
		},
		radioChange(e) {
			//			//('e'+JSON.stringify(e))
			this.preference.save_preference = e.value;
			//			 //('save_preference '+this.preference.save_preference);
		},
		handlerDoubleSlider(e) {
			//			//('e'+JSON.stringify(e))
			this.preference.obc_power = e;
			//this.preference.obc_power.minValue = e.minValue;
			//this.preference.obc_power.maxValue = e.maxValue;
		},
		selectOBSType(index) {
			this.preference.obc_type_index = index;
		},
		selectOBSType2(index) {
			this.preference.obc_stationType_index = index;
		},
		selectOBSStatus(index) {
			this.preference.obc_status_index = index;
		},
		selectOBCVoltage(index) {
			this.preference.obc_voltage_index = index;
		},
		selectMiles(index) {
			this.preference.miles_index = index;
		},
		reset() {
			this.preference.obc_status_index = 0;
			this.preference.obc_voltage_index = 0;
				this.preference.obc_stationType_index = 0;
			
			this.preference.obc_type_index = 0;
			this.preference.miles_index = 3;
			this.preference.save_preference = false;
			//			this.$refs.obc_voltage.currentValue = [0,100];
			this.preference.obc_power.minValue = 0;
			this.preference.obc_power.maxValue = 500;
			this.preference.obc_power.minP = Math.floor((this.preference.obc_power.minValue / (this.info.obc_power.maxValue - this.info.obc_power.minValue)) * 100);
			this.preference.obc_power.maxP = Math.floor((this.preference.obc_power.maxValue / (this.info.obc_power.maxValue - this.info.obc_power.minValue)) * 100);
			//            //('minP'+this.preference.obc_power.minP)
			//            //('maxP'+this.preference.obc_power.maxP)
			this.$refs.obc_voltage.reset(this.preference.obc_power);
			//			this.$refs.obc_voltage.currentMaxValue = this.preference.obc_power[1];
			// 			//('reset')
		},
		close_all(){
			
			this.updateTypeSelector()
			this.show = false;			
		},
		open() {
			
			this.updateTypeSelector()
			this.show = true;
			//this.$refs.obc_voltage.currentMinValue = this.preference.obc_power[0];
			//this.$refs.obc_voltage.currentMaxValue = this.preference.obc_power[1];
			//('open');
		},
		close() {
			//('偏好设置' + JSON.stringify(this.preference));
			this.close_all();
//			this.show = false;
			let data = {latitude:this.latitude,longitude:this.longitude};	
			this.type = this.info.obc_type[this.preference.obc_type_index].text;
			this.raidus  = this.info.miles_type[this.preference.miles_index].text;
			this.stationType  = this.info.obc_stationType[this.preference.obc_stationType_index].text;
			
			if(this.preference.save_preference)
				this.carhelp.set('preference',this.preference)  
			
			this.getChargingStationData(data);
			//this.stationslist = this.stationsmap;
			// //('close');
		},
		onClicked(e){
			this.close_all();
			////('onClicked e'+JSON.stringify(e))
		},
		// 获取当前位置
		clickMap(obj) {
			this.show=false;
			//this.currentIndex = 5;
//			//('longitude1  ' + _self.longitude);
//			//('latitude1  ' + _self.latitude);
			if (obj == null || obj.type == null) return;
			if (obj.type == 'charger') {
				if (obj.obj != null) {
					
					//_self.$refs.amap.updateCharger(obj.obj);
					let index = _self.stationsmap.findIndex(item => item.id == obj.obj.id);
					_self.currentIndex = index;
					//('find Index'+index);
				}
				/*api.getChargerInfoById(obj).then(
					function(data) {
						if (obj.obj != null) {
							//obj.obj.price = 2.25;
							//obj.obj.idleNum = 12;
							_self.$refs.amap.updateCharger(obj.obj);
							let index = _self.stationsmap.findIndex(item => item.id == obj.obj.id);
							_self.currentIndex = index;
							//('find Index'+index);
						}
						//					//('点击1'+JSON.stringify(obj));
					},
					function(err) {
						//('点击2' + JSON.stringify(obj));
					}
				);*/
			}
		},
		mapdown() { 
			////('this'+JSON.stringify(this))
//			//('longitude1  ' + this.longitude);
//			//('latitude1  ' + this.latitude);
			//this.start();
			//this.$refs.amap.getLocation1();
			//this.getNearbyStationInfo();
			let data2 = {latitude:this.latitude,longitude:this.longitude,findType:"0"};
			this.getChargingStationData(data2);
			
			this.isReady = true;
			//this.$refs.amap.getLocation ();
			//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
					let scrollW = res.windowWidth;
 	//				//('布局结果'+ JSON.stringify(res));
//					//('scrollW'+scrollW)
					//#ifdef MP-WEIXIN
					const {
						statusBarHeight,
						windowWidth,
					} = uni.getSystemInfoSync();
					scrollW = windowWidth;
	//				//('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-88-50)+ "px;width:"+scrollW+"px;");
				}
			})
			
		
			
			this.getPoint();
			
 		},
		gotoLine(item, downid) {
			uni.navigateTo({
				url: '/pages/route/index?id=' + item.routeId + '&upid=' + item.startStationId + '&downid=' + downid
			});
		},
		mapopenBtn() {
			this.mapopen = !this.mapopen;
			if (this.mapopen) {
				this.$refs.amap.setMyStyle('width: 100%; height: 340px;');
			} else {
				this.$refs.amap.setMyStyle('width: 100%; height: 140px;');
			}
		},

		getNearbyStationInfo() {
			
			let data1 = {latitude:this.latitude,longitude:this.longitude,findType:"1"};
			this.getChargingStationData(data1);
			let data2 = {latitude:this.latitude,longitude:this.longitude,findType:"0"};
			this.getChargingStationData(data2);

			 
		},
		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;
 			  
		  } 
		}
	}
};
</script>

 <style lang="scss" scoped>
	@import "@/_theme.scss";
	
	.oldTextClassF{
		
		.price-freeList{
			.price{
				line-height: 56rpx;
			}
			.price .price-2 {
				font-size: 28rpx !important;
			}
			.price .price-1 .num{
				font-size: 56rpx !important;
			}
			.price .price-1 .unit{
				    margin-left: 0px;
			}
		}
		
	}
	
	.carNone{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 100%;
			height: 100%;
		}
		p{
			margin-top: -60px;
		}
	}
	
	.uni-combox__no-border{
		white-space: nowrap;
	}
	.u-mask {
		position: fixed;
		left: 0;
		top: 576px;
		}
		
	.content-s{
		height: 440px;
		overflow-y:scroll;
	}
.cj-slider {
	width: 90%;
	margin: auto;
}

.cj-slide__text {
	text-align: center;
	padding: 20rpx;
}
.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%;
	height: 56rpx;
	@include themeify{
		// font-size: themed('font-size2');
		// line-height: themed('font-size2');
	}
/*	line-height: 14px;*/
}

.preference_item_medium {
	margin-bottom: 10rpx;
	margin-left: 20rpx;
	text-align: center;
	border-style: none;
	min-width: 22%;
	height: 56rpx;
	@include themeify{
		font-size: themed('font-size2');
		line-height: themed('font-size2');
	}
/*	line-height: 14px;*/
}
.preference_item_plus {
	margin-bottom: 10rpx;
	margin-left: 20rpx;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 28%;
	border-style: none;
	height: 56rpx;
	@include themeify{
		font-size: themed('font-size2');
		line-height: themed('font-size2');
	}
/*	line-height: 14px;*/
}
.preference_label {
	@include themeify{
		color:themed('font_colorLabel');
		font-size: themed('font-size1');
		font-weight: themed('fontWeight');
	}
	margin-left: 20rpx;
	margin-bottom: 100rpx;
}
.pre-btn{
	width: 100%;
	height: 96rpx;
	z-index: 999;
}

.btn-1,.btn-2{
	height: 96rpx;
	line-height: 96rpx;
	text-align: center;
	border-top: 1px solid rgba(225, 228, 232, 100);
}
.map{
	background-color: #ffffff;
	left: 0rpx;
	position: absolute;
	
}
.chargerCard{
    z-index: 999;
	background-color: #fff;
	margin: 0 24rpx;
	border-radius: 16rpx;
	// overflow: hidden;
	bottom: 68px;
	left: 0;
	right: 0;	
	position: fixed; 
	// height: 380rpx;
	
	
	
	// @include themeify{
	// 	height:themed('cardHeight'); 
	// } 
	
}


.arrow{
	margin-right: 15rpx;
}
.card_item{
	display: flex;
	flex-direction: row;
	
	@include themeify{
 		font-size: themed('font-size2');
 	}
	justify-content: space-between;

}

.round{
	border-radius:50rpx; 
	background-color: #00B962;
	color: #ffffff;
	text-align: center;
	justify-content: center;
	align-items: center;
	@include themeify{
		font-size: themed('font-size2');
		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;
  }

.charing-slow{
	box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
}

.swiper-item{
 }
 
 .list {
 	margin-left: 4rpx;
 
 }
 .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);
			text-align: end;
			font-size: 30rpx;
			 width: 180rpx;
			min-width: 180rpx;
			.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;
		.sp-font{
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 4px;
			background-color: #7a68f6;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			margin-right: 2rpx;
		}
 		.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;
		}
		.sign-3{
			line-height: 40rpx;
			border-radius: 8rpx;
			background-color: rgba(255, 255, 255, 100);
			color: #8161FF ;
			font-size: 24rpx;
			text-align: center;
			border: 1px solid  #8161FF;
			padding: 0 8rpx;
			margin-right: 16rpx;
			margin-bottom: 8rpx;
		}
	}
	
		.park-text2 {
			    width: 140%;
			}
			.park-text3 {
				    white-space: nowrap;
				 
				 
				    text-overflow: ellipsis;
				    overflow: hidden;
				}

</style>