jp-charge/pages/charge/switchCharge.vue

<template>
	<view>
		<ujp-navbar title="选择充电桩" :autoBack="false" :customBack="customBack">

			<!-- <view class="slot-wrap">
				<view class="navbar-left"></view>
				<view class="navbar-right" @click="selectBtn"><span>确定选择</span></view>
			</view> -->
		</ujp-navbar>
		
		<u-select ref="refselect" title="" v-model="tabsFrom.show1" :defaultValue="current"
		
		 :list="selectList" value-name="id" label-name="name"
		  
			@confirm="selector1confirm"  >
		</u-select>
		<view class="head-head" style="background: #fff;" v-show="stationShow"  >
			<view style="
				text-align: center;
				display: flex;
				align-items: center;
				" >
				<view style="width: 30%;" @click="tabsFrom.show1=true">
						{{tabsFrom.show1Text}} <u-icon name="arrow-down" color="#999999"></u-icon>
				</view>
				<view style="width: 70%;">
					<u-search placeholder="搜索站点名称或地址" :show-action="false"	
						 
						 @change="searchStationData(1)"  @search="searchStationData(1)" @click="searchStationData(1)"
						 @custom='searchStationData(1)'
						 v-model="keyword"></u-search>
					
				</view>
				
			</view>
			
		</view>
			
		<view class="head-head-placeholder " v-show="stationShow">
			
		</view>
		
		
		<view class="chargeListStation" v-show="stationShow">
			<view style="text-align: center;margin-top: 100px" v-if="!stationList.length">
			
				<img src="@/assets/img/blankpage.png">
				<p v-if="isPoint">暂无充电站</p>
				<p  v-else >暂无充电站</p>
				<p><span style="color: #1677ff;" @click="getPoint()">重新定位？</span></p>
			</view>
			<view class="chargeHead" v-if="stationList.length" >已为您查询附近的充电站</view>
			
			<template v-for="(item,i) in stationList">
				
				<view class="chargeList-item " @click="selectStationBtn(item)" :class="{
				
			}" :key="i">
		
					<view class="chargeList-item-row">
						<u-icon name="qichexiangguan-chongdianzhan" custom-prefix="custom-icon" color="#1677ff"
							size="40"></u-icon>
						<p>名称</p>
						<span> {{item.name}}</span>
					</view>
					
				<!-- 	<view class="chargeList-item-row">
						<u-icon name="juli" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
						<p>位置</p>
						
					</view> -->
						
				<view class="chargeList-item-row">
					<u-icon name="dizhi" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
					<p>地址</p>
					<span>{{item.address}}</span>
				</view>
				</view>
			</template>
			
			<u-divider bg-color="#F2F4F4" v-if="recordsTotal&&stationList.length==recordsTotal"  border-color="#CFD2D5">已经到底了</u-divider>
			
		
		</view>
		
		<view class="chargeList" v-show="!stationShow">
			<view style="text-align: center;margin-top: 100px" v-if="!list.length">
			
				<img src="@/assets/img/blankpage.png">
				<p>暂无充电桩</p>
				<p><span style="color: #1677ff;" @click="getPoint()">查询附近站点</span></p>
			</view>
			
			<view class="chargeHead2" v-if="list.length" >
			<view>{{stationName}}</view>
			<view class="chargeHead2span" @click="getPoint()">查询附近站点</view></view>
			
			<template v-for="(item,i) in list">
				<view class="chargeList-item " @click="select=item.id,selectBtn()" :class="{
				'active':item.id==select,
			}" :key="i">

					<view class="chargeList-item-row">
						<u-icon name="qichexiangguan-chongdianzhan" custom-prefix="custom-icon" color="#1677ff"
							size="40"></u-icon>
						<p>名称</p>
						<span> {{item.name}}</span>
					</view>
					<view class="chargeList-item-row">
						<u-icon name="shoujichongdian" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
						<p>通道数</p>
						<span>{{item.numOfChannel}}</span>
						<p>空闲</p>
						<span>{{item.availableNumOfChannel}}</span>
						
					</view>
					<!-- 	<view class="chargeList-item-row">
					<u-icon name="juli" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
					<p>距离</p>
					<span>荆鹏软件园1号充电桩</span>
				</view>
				<view class="chargeList-item-row">
					<u-icon name="dizhi" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
					<p>地址</p>
					<span>荆鹏软件园1号充电桩</span>
				</view> -->
				</view>
			</template>
			<view style="
    display: flex;
" >
				<u-button type="success" size="medium" @click="navigate" v-if="selectStation.id&&selectStation.latitude&&selectStation.longitude" >点击查看地图导航</u-button>
			</view>
			
			

		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	import * as WxJsApi from '@/utils/wxJsApi.js'
	export default {
		data() {
			return {
				list: [

				],
				stationList:[],
				stationId: '',
				stationIdSelect: '',
				stationShow: false,
				select: '',
				selectBtnId: '',
				selectStation:{},
				index: false,
				stationName:'',
				isReady:false,
				isPoint:true,
				longitude: 0,
				latitude: 0,
				pageIndex: 1,
				recordsTotal: 0,
				keyword:"",
				selectList:[
					{id:0,name:"全部"},
					{id:2,name:"附近2公里"},
					{id:5,name:"附近5公里"},
					{id:10,name:"附近10公里"},
					{id:20,name:"附近20公里"},
					{id:50,name:"附近50公里"},
				],
				current:[1],
				tabsFrom: {
					show1: false,
					show1Index: 2,
					show2Index: '',
					show2: false,
					show1Text: "附近2公里",
					show2Text: "全部时间",
					
				},
			}
		},
		onLoad(op) {
			if (op.id) {
				this.select = op.id;

			}
			if (op.stationId) {
				this.stationId = op.stationId;

			}
			if (op.index) {
				this.index = true;
			}
			WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode', 'openLocation']).then((res) => {
				// //(res)
				this.isReady=true;
				
			}).catch(error => {
				//(res)
			})
		},
		onReachBottom() {
			if (this.stationList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			selector1confirm(e){
				console.log(e)
				var value = e[0].value
				var index=this.selectList.findIndex(item=>{
					return item.id==value
				})
				this.current=[index]
				
				this.tabsFrom.show1Index=e[0].value
				
				this.tabsFrom.show1Text=e[0].label
				this.searchStationData(1)
			
			},
			navigate() {
				// x
				// : 
				// "112.276527"
				// y
				// : 
				// "30.306427"
				//console.log(item)
				uni.showLoading({
			
				})
				WxJsApi.openLocation({
					latitude: this.selectStation.latitude, //目的地latitude
					longitude: this.selectStation.longitude, //目的地longitude
					name: this.selectStation.name,
					address: this.selectStation.address,
					scale: 15, //地图缩放大小，可根据情况具体调整
					success(res) {
						uni.hideLoading()
					},
					complete() {
						//	uni.hideLoading()
					}
				});
				// //('station'+JSON.stringify(_self.stationDetail.station))
				// window.location.href = "https://uri.amap.com/marker?position=" + _self.stationDetail.station.longitude +
				// 	"," + _self.stationDetail.station.latitude + "&name=" + _self.stationDetail.station.name;
			
			},
			myLoadmore() {
					
				this.pageIndex += 1;
				this.searchStationData()
			},
			getPoint() {
				uni.showToast({
					title: "定位中...请打开定位设置",
					icon: "none"
				})
				WxJsApi.getLocation().then((res) => {
					this.isPoint=true;
					this.latitude = parseFloat(res.latitude);
					this.longitude = parseFloat(res.longitude);
				
			
					if (res.errMsg != 'getLocation:ok') {
						uni.showToast({
							title: res
						})
					} else {
						this.searchStationData()
					}
				}).catch(error => {
					this.isPoint=false;
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			searchStationData(bl){
				if (bl) {
					this.stationList = [];
					this.pageIndex = 1;
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				var data={
					longitude: this.longitude,
					latitude: this.latitude,
					pageIndex:this.pageIndex,
					pageSize:20,
					stationName:this.keyword
					
				}
				if(this.tabsFrom.show1Index){
					data.radius=this.tabsFrom.show1Index
				}
				API.chargingStationData(data).then((res) => {
					//this.stationList = res.data.data;
					
					this.stationList = [
						...this.stationList,
						...res.data.data
					];
					
					this.stationShow = true;
					this.recordsTotal = res.data.recordsTotal
					
					uni.hideLoading()
				
				}).catch(error => {
					uni.showToast({
				
						title: error
					})
				})
			},
			customBack() {
				
				if(this.stationShow){
					try{
						this.stationShow=false
						//this.stationIdSelect=this.stationId
						this.getList()
					}catch(e){
						//TODO handle the exception
						uni.redirectTo({
							url: '/pages/charge/index'
						})
					}
					
				}else{
					uni.redirectTo({
						url: '/pages/charge/index'
					})
				}
				
			},
			selectStationBtn(item){
				this.stationIdSelect=item.id
				this.stationShow=false
				this.selectStation=item
				this.getList()
			},
			selectBtn() {
				this.selectBtnId = this.select;
				this.carhelp.set("qr-default-id", this.selectBtnId);
				uni.redirectTo({
					url: '/pages/charge/index?id=' + this.selectBtnId
				})

			},
			getList() {

				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				var data = {
					//deviceId: this.select,
					pageIndex:this.pageIndex,
					stationId: this.stationIdSelect,
					pageSize: 50,
				};
				API.chargingDeviceData(data).then((res) => {
					console.log(res)
					this.list =res.data.data;
					if(this.list.length){
						this.stationName=this.list[0].stationName
					}
					uni.hideLoading()

				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			}
		},
		onReady() {
			if(this.stationId){
				this.stationIdSelect=this.stationId
				this.getList()
			}else{
				this.stationShow = true;
				this.getPoint()
			}
			
		},
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
	}

	.navbar-right {
		display: flex;
		margin-right: 20rpx;
		align-items: center;
		color: #1677ff;
	}
	.chargeHead{
		padding:0 15px ;
		margin-top: 10px;
		span{
			float: right;
			color: #1677ff;
		}
	}
	.chargeHead2{
		padding:0 15px ;
		margin-top: 10px;
		    justify-content: space-between;
		    display: flex;
		.chargeHead2span{
			float: right;
			white-space: pre;
			color: #1677ff;
			    margin-left: 20px;
		}
	}

	.chargeList-item {
		background-color: #fff;
		padding: 15px;
		margin: 10px;
		border-radius: 10px;

		.chargeList-item-row {
			display: flex;
			align-items: center;
			margin-bottom: 10px;

			&:last-child {
				margin-bottom: 0;
			}

			p {
				color: #999;
				white-space: pre;
				margin: 0 10px;
			}
		}
	}

	.chargeList-item.active {
		border: 1px solid #1677ff;
	}
	
	.head-head-placeholder{
		height: 100rpx;
		
	}
	.head-head{
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
		padding:24rpx;
		position: fixed;
		    left: 0;
		    right: 0;
		    top: 80rpx;
		    z-index: 991;
			.head-body{
				margin-top: 32rpx;
				    display: flex;
				    justify-content: space-around;
					.head-btn{
						text-align: center;
						width: 31%;
						padding: 12rpx;
						border: 1px solid #f2f2f2;
						background-color:#f2f2f2 ;
						border-radius: 6px;
						span{
							margin-left: 4rpx;
						}
					}
					.head-select{
						border: 1px solid #1677FF;
						background-color:#1677FF ;
						color: #fff;
					}
			}
	}
</style>