JP-ChargeTeam51/pages/searchPile/searchPile.vue

<template>
	<view>
		<ujp-navbar :is-back="false" height='88' style="background-color: bisque;">
			<view class="ujp-navbar-main">
				<view class="ujp-navbar-main1">
					<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-right: 20rpx; flex:1">
						<u-search height="60" :input-style='inputStyle' placeholder="查询站点地址或站名" :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>
					</view>
					<view style="margin-right: 20rpx;" v-show="!viewMode" @click="mapMode">
						<text class="iconfont">&#xe622;</text> <text class="list font2">地图</text>
					</view>
				</view>
				<view class="ujp-navbar-main2">
					<view style="display: flex;">
						<view
							style=" min-width: 180rpx;   max-width: 200rpx;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=" min-width: 180rpx;  max-width: 200rpx;flex:1;   ">
							<uni-combox ref="type" class='font2' :border="false" v-model="type" :candidates="types"
								@updateModel='updateType' @updateSelector="updateTypeSelector(1)"></uni-combox>
						</view>
					</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-right: 20rpx;">
						<!--  -->
						<!-- <view v-show="dropdownShow" >
							 <u-mask :show="dropdownShow" ></u-mask>
						</view> -->
						<jp-dropdown @open="dropdownShow=true" active-color="rgb(0, 185, 98)"
							@close="dropdownShow=false" ref="uDropdown" style="    display: contents;" :top="180">
							<u-dropdown-item title="筛选">
								<view class="slot-content">

									<view v-if="dropdownShow" class="u-text-center u-content-color  ">
										<view class="preference" style="z-index:1024;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>
									</view>
									<!-- <u-button type="primary" @click="closeDropdown">确定</u-button> -->
								</view>
							</u-dropdown-item>
						</jp-dropdown>
					</view>
				</view>
			</view>
		</ujp-navbar>
		<!-- 定位 -->
		<view v-show="!viewMode">


			<view class="location-box" v-if="message != 'getLocation:ok' && stationslist.length == 0 ">
				<view class="location">
					<view class="location-text">
						<view class="text-1 oldTextjp" oldstyle="font-size: 20px;">
							定位中...
						</view>
						<view class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
							授权定位后可查询附近充电站
						</view>
						<view class="text-view">
							<view class="text-3 oldTextjp2" oldstyle="font-size: 16px;" @click="getPoint()">
								重新定位
							</view>

							<view class="text-3  text-4 oldTextjp2" oldstyle="font-size: 16px;"
								@click="searchStationData()">
								直接搜索
							</view>
						</view>

					</view>
					<view class="img-box">
						<img src="static/img/暂无网络信号-缺省页 1.png">
					</view>
				</view>

			</view>
			<view v-else-if="message == 'getLocation:ok'&&stationslist.length==0">
				<view class="carNone" v-if="stationslist.length == 0">
					<img src="static/img/暂无数据-缺省页.png" alt="">
					<p class="oldTextjp2" oldstyle="font-size: 18px;">{{loading?'暂无可用充电站':'正在为你加载可用的充电站...'}}</p>

				</view>
			</view>
			<view>
				<view>
					<view v-for="(item,index) in (stationslist.length?stationslist:defaultStation)" :key="item.id"
						class="charing-slow charing-new" @click="stationDetail(item)">

						<view class="new-img">
							<img :src="item.image" class="img1">
							<view class="img2Class" v-if="item.isRecommend||stationslist.length==0">
								<img src="@/assets/img/9-4/推荐.svg" class="img2">
							</view>
							
							<view class="img2Class" v-else-if="item.isAlways" >
								
								<img src="@/assets/img/9-4/常用.svg" class="img2">
							</view>	
							<view class="img2Class" v-else-if="item.isSpecial" >
										
								<img src="@/assets/img/9-4/特价tag.svg" class="img2">
							</view>	
						</view>
						<view class="new-body">


							<view class="address">
								<view class="name oldTextjp" oldstyle="font-size: 20px;">
									{{item.name}}
								</view>

							</view>

							<view class="sign">
								<!-- <view class="sign-tag sign-0" v-if="item.isRecommend||stationslist.length==0">推荐</view>
							<view class="sign-tag sign-5" v-if="item.isAlways" >常用</view>	
							 -->

								<view class="sign-tag sign-1"
									v-if="item.giveDiscount&&item.discountRatio&&item.discountRatio!=100">
									会员{{discountRatio10(item.discountRatio)}}折</view>

								<view class="sign-tag sign-4" v-if="item.nightLowPriceEnabled">
									夜间超低价</view>

								<view class="sign-tag sign-3" v-if="item.category=='超充'">160kW超充站</view>
								<view class="sign-tag sign-2" v-if="item.platformType==1">自营站</view>
								<view class="sign-tag sign-2" v-if="item.tagList.length != 0"
									v-for="(tagName,tagIndex) in item.tagList" :key="tagIndex">{{tagName}}</view>

								<template v-if="item.stationType==50">
									{{item.address}}
								</template>
							</view>

							<view class="price-free price-freeList" style="margin-top: 16rpx;">
								<view class="free">

									<view class="fast" v-if="item.fastNum">
										<view class="fast-font">
											快
										</view>
										<view class="num">

											{{item.fastAvailableNum}}
										</view>
										<view class="num1">
										
											/{{item.fastNum}}
										</view>
									</view>
									<view class="slow" v-if="item.slowNum">
										<view class="slow-font">
											慢
										</view>
										<view class="num">
											{{item.slowAvailableNum}}
										</view>
										<view class="num1">
											/{{item.slowNum}}
										</view>
									</view>
								</view>
								<template v-if="stationslist.length!=0">

									<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)+'km' : '小于100m'}}
									</view>
									<view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-else>
										<text class="iconfont" style="color:#666666">&#xe615;</text>
										暂无定位
									</view>
								</template>
							</view>
							<u-line margin="16rpx 0 "></u-line>

							<view class="price-free price-freeList">
								<view class="price" v-if="personInfo&&personInfo.userType==2">
									<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-3 "  v-if="item.tagList&&item.tagList.length&&item.tagList.indexOf('6折卡')>-1">
										<view class="num1">
											
											<img  src="@/assets/img/9-4/6折卡价.svg" />
											
										</view>
										<text
											class="num">{{ (item.electricityPrice+(item.servicePrice*0.6)).toFixed(2)}}元/度</text>
										
									</view>
								</view>
								<!-- 游客价格-->
								<view class="price" v-else>
									<view class="price-1">
										<text class="num">
											{{showNumJP(item.electricityPrice+item.servicePrice)}}</text>
										<text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
									</view>
									<view class="price-3 " oldstyle="font-size: 48rpx;" v-if="item.giveDiscount">
										<text class="num1">
											<img  src="@/assets/img/9-4/会员价.svg" />
											
											
										</text>
										<text
											class="num">{{ showNumJP(item.electricityPrice+item.discountServicePrice)}}元/度</text>
										<text class="unit "></text>
									</view>
								</view>
							</view>

						</view>

					</view>

					<u-divider margin-top="20"  v-if="stationslist.length!=0" style="margin-bottom: 20px;" bg-color="#F2F4F4"
						 >已经到底了</u-divider>

				</view>

			</view>
		</view>
		<view v-show="viewMode">
			<view>
				<Chargermap @onMoveStart="moveStart" @onMoveEnd="moveEnd" ref="amap" @onClicked="onClicked"
					@onload="mapdown" @clickMap="clickMap"></Chargermap>
				<!--@location="location"-->
				<view class="locationBtn" style=' ' @click="setCenter">
					<u-image src="@/static/img/location.png" border-radius="8" bg-color="#ffffff" width="20px"
						height="20px"></u-image>
				</view>


			</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 " 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 min-h">


									<view class="sign-tag sign-1"
										v-if="item.giveDiscount&&item.discountRatio&&item.discountRatio!=100">
										会员{{discountRatio10(item.discountRatio)}}折</view>
									<view class="sign-tag sign-3" v-if="item.category=='超充'">160kW超充站</view>
									<view class="sign-tag sign-4" v-if="item.nightLowPriceEnabled">
										夜间超低价</view>


									<view class="sign-tag sign-2" v-if="item.platformType==1">自营站</view>
									<view class="sign-tag 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-freeOne">
									<view class="price" v-if="personInfo&&personInfo.userType==2">
										<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="price" v-else>
										<view class="price-1">
											<text class="num">
												{{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
											<text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
										</view>
										<view class="price-3 " oldstyle="font-size: 48rpx;" v-if="item.giveDiscount">
											<text class="num1">会员</text>
											<text
												class="num">{{ (item.electricityPrice+item.discountServicePrice).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}}
											</view>
											<view class="num1">
											
												/{{item.fastNum}}
											</view>
										</view>
										<view class="slow" v-if="item.slowNum">
											<view class="slow-font">
												慢
											</view>
											<view class="num">
												{{item.slowAvailableNum}}
											</view>
											<view class="num1">
												/{{item.slowNum}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

		</view>

		<Tabbar :current="2" ref="tabbarMain"></Tabbar>

	</view>
</template>

<script>
	import * as indexAPI from '@/apis/index.js'
	import * as api from '@/apis/site.js';
	import Tabbar from '@/components/Tabbar.vue';
	import Chargermap from '@/components/Chargermap.vue';
	import jpDropdown from '@/components/Udropdown.vue';

	import uniCombox from '@/components/uni-combox/components/uni-combox/uni-combox.vue'
	import * as WxJsApi from '@/utils/wxJsApi.js'

	export default {
		components: {
			Chargermap,
			Tabbar,
			uniCombox,
			jpDropdown
		},
		data() {
			return {
				personInfo: {},
				loading: false,
				viewMode: false, //列表
				inputStyle: {
					backgroundColor: 'transparent',
					"font-size": '32rpx',
				},
				defaultStation: [],
				cities: ['荆州市'],
				radiuses: ['1公里', '2公里', '5公里', '10公里', '20公里', '50公里', '100公里', '200公里'],
				types: ['全部', '直流快充', '交流慢充'],
				stationTypes: ['全部', '公共充电桩', '个人充电桩'],
				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: 1,
						text: '直流快充'
					}, {
						value: 2,
						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: 1,
						text: '合作站'
					}, {
						value: 50,
						text: '个人桩'
					}]
				},
				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
					}
				},

				area: '荆州市',
				raidus: '10公里',
				type: '全部',
				stationType: '全部',
				longitude: '',
				latitude: '',
				message: '',
				stationslist: [],
				stationsmap: [],
				pointTimeOut: true,
				dropdownShow: false,
				currentIndex: 0,

			}
		},
		onUnload() {
			//this.timeOut = false;
			this.pointTimeOut = false;
		},
		onHide() {
			//this.timeOut = false;
			this.pointTimeOut = false;
		},
		onShow() {
			if (this.$refs.tabbarMain) {
				this.$refs.tabbarMain.setcount(2);
			}
			if (!this.pointTimeOut) {
				this.pointTimeOut = true
				this.getPointTimeOut();
			}
			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;


				if (this.viewMode) {
					this.$refs.amap.init();
					this.searchStationData()


				}

			})

		},
		onLoad() {

		},
		onReady() {
			WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})
			if (this.carhelp.getPersonInfo()) {
				//	this.userId = this.carhelp.getPersonInfo().id;
				this.personInfo = this.carhelp.getPersonInfo();
			}
			this.getPointTimeOut();
		},
		methods: {
			navigate() {
				//('naviage to ')
				uni.navigateTo({
					url: '/pages/search/search'

				})
			},
			isEnabled() {
				if (this.viewMode) {
					if (this.show)
						return false;
				}
				return true;
			},
			stationDetail(item) {
				if (!this.isEnabled()) {
					return;
				}


				uni.navigateTo({
					url: 'stationAndPile/stationDetails?id=' + item.id
				})
			},
			setCenter() {
				//('getPoint')
				WxJsApi.getLocation().then((res) => {

					this.latitude = parseFloat(res.latitude);
					this.longitude = parseFloat(res.longitude);
					//let data = {position:{latitude:latitude,longitude:longitude}};

					let posCenter = {
						longitude: this.longitude,
						latitude: this.latitude
					};

					this.$refs.amap.setCenter(posCenter);
					this.searchStationData();
				}).catch(error => {
					uni.showToast({
						title: JSON.stringify(error)
					})
				})

				//			//('setCenter')
			},
			updateType2(e) {
				this.preference.obc_stationType_index = e.value;
				this.close();

			},
			swiperTransitionEnd(e) {

			},
			swiperTransition(e) {
				//
			},
			updateType(e) {
				this.preference.obc_type_index = e.value;
				this.close();

			},
			updateRadius(e) {
				this.preference.miles_index = e.value;
				this.close();

			},
			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;
			},
			swiperChange(e) {
				if (!this.viewMode) {
					return
				}
				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);

			},
			listMode() {
				this.close_all();
				this.viewMode = false
			},
			mapMode() {
				//this.$refs.amap.setChargerList(this.stationslist);
				this.$refs.amap.init();

				//this.currentIndex = 0;
				this.close_all();
				this.searchStationData()
				this.viewMode = true
			},
			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() {

				this.updateTypeSelector('')

				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.$refs.uDropdown.close();
				this.searchStationData();


			},
			clickMap(obj) {
				//this.show = false;

				if (obj == null || obj.type == null) return;
				if (obj.type == 'charger') {
					if (obj.obj != null) {

						let index = this.stationsmap.findIndex(item => item.id == obj.obj.id);
						this.currentIndex = index;
						//('find Index'+index);
					}

				}
			},
			getPoint() {
				if (this.stationslist.length != 0) {
					return
				}

				WxJsApi.getLocation().then((res) => {

					this.latitude = parseFloat(res.latitude);
					this.longitude = parseFloat(res.longitude);
					this.message = res.errMsg;


					if (res.errMsg != 'getLocation:ok') {
						uni.showToast({
							title: res
						})
					} else {
						uni.showToast({
							title: "定位中..."
						})
						this.searchStationData()
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			searchStationData(obj) {
				let data1 = {
					latitude: this.latitude,
					longitude: this.longitude,
					findType: "1",
					pageIndex: 1,
					pageSize: 999
				};
				if (obj) {
					data1 = {
						...data1,
						...obj
					}
				}

				data1.type = this.info.obc_type[this.preference.obc_type_index].value;
				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) {
					var stationType = this.info.obc_stationType[this.preference.obc_stationType_index].value
					if (stationType == -1) {
						data1.platformType = "1"
					} else {
						data1.stationType = stationType
					}

				}
				//this.currentIndex = -1;
				//data1.findType = this.viewMode?"0":"1";
				uni.showLoading({})

				if (this.carhelp.getPersonInfo()) {
					data1.openId = this.carhelp.getOpenId()
				}
				this.loading = false
				api.getChargingStationData(data1).then(res => {
					uni.hideLoading()
					this.loading = true
					this.recordsTotal = res.data.recordsTotal;

					var stationslist = res.data.data
					if (this.viewMode) {
						this.stationsmap = stationslist;
						this.$refs.amap.setChargerList(stationslist);
						// this.$refs.amap.init();

						if (this.currentIndex == -1 || this.currentIndex > stationslist.length) {
							this.currentIndex = 0
						}
						if (stationslist.length) {
							this.$refs.amap.updateCharger(stationslist[this.currentIndex]);
						}
						let posCenter = {
							longitude: this.longitude,
							latitude: this.latitude
						};

						this.$refs.amap.setCenter(posCenter);
						this.$refs.amap.calcDistances([this.longitude, this.latitude], this.stationslist)

						// this.$refs.amap.calcDistances([this.longitude, this.latitude], this.stationslist)

					} else {
						this.stationslist = stationslist;
					}
					if (this.stationslist.length == 0) {
						this.getChargingStationDetail()
					}

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})

			},
			getChargingStationDetail() {
				var defaultStation = process.car.defaultStation
				for (var item in defaultStation) {
					api.getChargingStationDetail({
						stationId: defaultStation[item]
					}).then((res) => {

						var station = res.data.station
						//this.MapLoaderthen(station)

						this.defaultStation.push(station)
					}).catch(error => {

						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}

			},
			getPointTimeOut() {

				setTimeout(() => {
					if (this.pointTimeOut) {
						this.getPoint();
					}
				}, 1000)

			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			close_all() {

				this.updateTypeSelector('')

			},
			updateTypeSelector(val) {

				var sz = ["raidus", "type", 'city']
				for (var i in sz) {
					if (i == val && val != '') {

					} else {
						this.$refs[sz[i]].closeSelector();
					}
				}
				//this.show = false;		
			},
			mapdown() {
				//this.isReady = true;
				//this.$refs.amap.getLocation ();
				//let state = {};
				uni.getSystemInfo({
					success: (res) => {

						let scrollH = res.windowHeight; // - uni.upx2px(88) - navbarH
						let scrollW = res.windowWidth;
						this.$refs.amap.setMyStyle("height:" + (scrollH - 88 - 50) + "px;width:" + scrollW +
							"px;");
					}
				})

			},
			moveEnd(e) {
				//('moveEnd')
				this.close_all();
				let posCenter = this.$refs.amap.logMapInfo();
				////('posCenter'+JSON.stringify(posCenter))		



				if (this.latitude == e.center.lat && this.longitude == e.center.lng) {
					return
				}
				this.latitude = e.center.lat
				this.longitude = e.center.lng
				this.searchStationData();
			},
			moveStart(e) {
				//this.close_all();
			},
			onClicked(e) {
				this.close_all();
				////('onClicked e'+JSON.stringify(e))
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/_theme.scss";

	.locationBtn {
		width: 30px;
		height: 30px;
		position: absolute;
		z-index: 1023;
		right: 40rpx;
		bottom: 520rpx;
		background: white;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid;
		border-radius: 8px;
	}

	.ujp-navbar-main {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;

		.ujp-navbar-main1 {
			display: flex;
			flex-direction: row;
			height: 100%;
			align-items: center;
			margin-top: 0rpx;
			padding-top: 0rpx;
			padding-bottom: 20rpx;
		}

		.ujp-navbar-main2 {
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-between;
			align-items: center;
		}
	}


	.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;

		/*	line-height: 14px;*/
	}

	.content-s {
		height: 640rpx;
		overflow-y: scroll;
		text-align: left;
	}

	.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);
	}

	.station,
	.location,
	.state1 {
		box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
	}

	//定位

	.location {
		width: 91.4%;
		background-color: #ffffff;
		height: 120px;
		display: flex;
		justify-content: space-between;
		margin: 20px auto 0;
		border-radius: 8px;
		border: #F2F4F4 1px;

		.location-text {
			padding: 24px 0 0 28px;

			.text-1 {
				height: 16px;
				line-height: 16px;
				color: rgba(16, 16, 16, 100);
				font-size: 16px;
				text-align: left;
			}

			.text-2 {
				height: 17px;
				line-height: 17px;
				color: rgba(102, 102, 102, 100);
				font-size: 12px;
				text-align: left;
				margin-top: 4px;
				white-space: nowrap; //强制不换行
				text-overflow: ellipsis; //文本超出出现省略号
				overflow: hidden;
			}

			.text-view {
				display: flex;
			}

			.text-3 {
				width: 80px;
				height: 24px;
				line-height: 22px;
				border-radius: 50px;
				color: rgba(0, 185, 98, 100);
				font-size: 12px;
				text-align: center;
				border: 1px solid rgba(0, 185, 98, 100);
				margin-top: 11px;
			}

			.text-4 {
				margin-left: 10px;
				color: #ff9900;
				border: 1px solid #ff9900;
			}
		}

		.img-box {
			width: 120px;
			height: 120px;
			margin-right: 20px;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.carNone {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		img {
			width: 100%;
			height: 100%;
		}

		p {
			margin-top: -60px;
		}
	}

	.charing-slow-2 {
		margin: 0 0 20rpx 0 !important;
		// border-bottom: 1px solid rgba(238, 242, 240, 100);

	}

	.charing-slow {
		//box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
		background-color: #fff;
		margin: 26rpx;
		border-radius: 16rpx;
		padding: 24rpx;
		position: relative;
		left: 0;
		right: 0;
	}

	.min-h {
		min-height: 65px;
	}

	.sign {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		
		.sign-tag {
			
			height: 36rpx;
			line-height: 32rpx;
			border-radius: 8rpx;
			//background-color: rgba(255, 255, 255, 100);
			//color: rgba(255, 139, 0, 100);
			font-size: 10px;
			text-align: center;
			//border: 1px solid rgba(255, 139, 0, 100);
			padding: 0 8rpx;
			margin-right: 8rpx;
			margin-bottom: 8rpx;
		}

		.sign-0 {
			background: linear-gradient(89.4deg, rgba(129, 97, 255, 1) 2.8%, rgba(169, 147, 255, 1) 98.02%);
			color: rgba(255, 255, 255, 1);
			//padding: 0 10rpx;
			//border: 1px solid rgba(255, 139, 0, 100);
		}

		.sign-5 {
			background: linear-gradient(89.4deg, rgba(255, 61, 0, 1) 2.8%, rgba(255, 134, 0, 1) 98.02%);
			color: rgba(255, 255, 255, 1);
			//padding: 0 10rpx;
		}

		.sign-1 {
			background-color: rgba(255, 255, 255, 100);
			color: rgba(255, 139, 0, 100);
			border: 1px solid rgba(255, 139, 0, 100);

		}

		.sign-2 {
			background-color: rgba(255, 255, 255, 100);
			color: rgba(153, 153, 153, 100);
			border: 1px solid rgba(204, 204, 204, 100);

		}

		.sign-3 {
			background-color: rgba(255, 255, 255, 100);
			color: #8161FF;
			border: 1px solid #8161FF;

		}

		.sign-4 {
			background-color: rgba(255, 255, 255, 100);
			color: #00B962;
			border: 1px solid #00B962;
		}
	}

	.address {
		   
		width: 100%;
		line-height: 20px;

		display: flex;
		justify-content: space-between;

		.name {
			font-size: 36rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		

		@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;
		
	}
	.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;
		}
	}
	.price {
		display: flex;
		align-items: center;


		.price-1 {
			line-height: 40rpx;

			.num {

				//color: rgba(255, 98, 0, 100);
				color: rgba(16, 16, 16, 1);


				font-size: 40rpx;
				//height: 44rpx;
				font-weight: bold;
				text-align: left;
				font-family: Roboto-medium;
			}

			.unit {
				// font-size: 12px;
				color: rgba(119, 119, 119, 1);
				font-size: 28rpx;


				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
		}
		.price-3{
			    display: flex;
			background: linear-gradient(93.02deg, rgba(59,182,254,1) 39.4%,rgba(0,185,98,1) 92.96%);
			border-radius: 4px;
			height: 16px;
			min-height: 16px;
			    margin-left: 32rpx;
			//	align-items: center;
			line-height: 16px;
			.num1{
				img{
					// width: 88rpx;
					//width: 34px;
					height: 16px;
				}
				/deep/.u-image{
					 min-height: 16px;
					
				}
			}
			.num{
				padding: 0 12rpx 0 8rpx;
				color: rgba(255, 255, 255, 1);
				font-size: 11px;
				display: flex;
				align-items: center;
				
			}
		}
		
	}

	.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);
				background-color: #1677FF;
				color: rgba(255, 255, 255, 1);
				//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);
				background-color: #00B962;
				color: rgba(255, 255, 255, 1);
				font-size: 28rpx;
				text-align: center;
				margin-right: 2rpx;
			}

			.num {
				font-size: 32rpx;
				color: #666;
				line-height: 40rpx;
			}
			.num1 {
				font-size: 32rpx;
				color: #bbb;
				line-height: 40rpx;
			}
		}
		
		
		.slow {
			margin-left: 16rpx;
		}
	}


	.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'); 
		// } 

	}


	.charing-new {
		display: flex;

		.new-img {
			.img1 {
				width: 120rpx;
				height: 120rpx;
				border-radius: 4px;
			}
			.img2Class{
				       top: -134rpx;
				       left: -16rpx;
				    position: relative;
				    border-radius: 4px 4px 4px 0px;
				    color: #fff;
				    padding: 2px 6px;
				    font-size: 10px;
				    line-height: 10px;
				    height: 1px;
				    background-blend-mode: soft-light;
					.img2 {
						
						width: 56rpx;
						height: 32rpx;
						min-width: 28px;
						min-height: 16px;
						//border-radius: 4px;
					}
			}
		}

		.new-body {
			max-width: 75%;
			margin-left: 24rpx;
			min-width: 65%;
			.sign {
				margin-top: 12rpx;
			}
		}
	}
</style>