JP-ChargeTeam51/pages/searchPile/searchPile2.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="margin-left:20rpx;margin-right:10rpx;flex:1; ">
						
						<uni-combox class='font2' ref="raidus" :border="false" v-model="raidus" :candidates="radiuses"
							@updateModel='updateRadius'   ></uni-combox>
					</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-right: 20rpx;">
						<!--  -->
						<!-- <view v-show="dropdownShow" >
							 <u-mask :show="dropdownShow" ></u-mask>
						</view> -->
						<jp-dropdown 
						@open="dropdownShow=true"  @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 u-m-t-20 u-m-b-20">
										<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 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-3 oldTextjp2" oldstyle="font-size: 16px;" @click="getPoint()">
						重新定位
					</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 v-else>
			<view v-show="!viewMode">
				<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&&item.discountRatio!=100">
								会员服务费{{discountRatio10(item.discountRatio)}}折</view>
							<view class="sign-3" v-if="item.category=='超充'">160kW超充站</view>
							<view class="sign-4"
								v-if="item.id=='3c554cea-f522-4281-b582-d761510ed91e'||item.id=='3865b3a3-13fd-461a-8145-ee9711df35a2'||item.nightLowPriceEnabled">
								夜间超低价</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 == recordsTotal">已经到底了</u-divider>

			</view>
			<view v-show="viewMode">
			</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',
				},

				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: 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: [],
				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();
			}
			
		
		},
		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: {
			updateType2(e) {
				this.preference.obc_stationType_index = e.value;
				this.close();

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

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

			},

			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.searchStationData();

			},
			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 {

						this.searchStationData()
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			searchStationData() {
				let data1 = {
					latitude: this.latitude,
					longitude: this.longitude,
					findType: "1",
					pageIndex: 1,
					pageSize: 999
				};
				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){
					data1.stationType= this.info.obc_stationType[this.preference.obc_stationType_index].value
				}
				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;
					this.stationslist = res.data.data;
					if(data1.findType == "0"){
						this.$refs.amap.calcDistances([this.longitude, this.latitude],this.stationslist)
						this.$refs.amap.setChargerList(this.stationslist);
						this.currentIndex = 0; 
						if(this.stationslist.length){
							this.$refs.amap.updateCharger(this.stationslist[0]);
						}
					}else{
						
					}
				}).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", "stationType", 'city']
				for (var i in sz) {
					if (i == val && val != '') {

					} else {
						this.$refs[sz[i]].closeSelector();
					}
				}
				//this.show = false;		
			},
		}
	}
</script>

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

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

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

		}
	}
	
	.carNone{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 100%;
			height: 100%;
		}
		p{
			margin-top: -60px;
		}
	}
	
	.charing-slow{
		box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
		background-color: #fff;
		margin: 36rpx;
		border-radius: 16rpx;
		padding: 40rpx 24rpx 24rpx;
		position: relative;
		left: 0;
		right: 0;
	}
	
	.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;
		}
		.sign-4 {
			line-height: 40rpx;
			border-radius: 8rpx;
			background-color: rgba(255, 255, 255, 100);
			color: #00B962;
			font-size: 24rpx;
			text-align: center;
			border: 1px solid #00B962;
			padding: 0 8rpx;
			margin-right: 16rpx;
			margin-bottom: 8rpx;
		}
	}
	.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;
			}
		}
		
</style>