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>
		
		<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" >已为您查询附近2公里内的充电站</view>
			
			<template v-for="(item,i) in stationList">
				
				<view class="chargeList-item " @click="stationIdSelect=item.id,stationShow=false,getList()" :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" v-if="false">
						<u-icon name="shoujichongdian" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
						<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>
						
					</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>
		
		</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="chargeHead" v-if="list.length" >{{stationName}}<span @click="getPoint()">查询附近站点</span></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>
	</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: '',
				index: false,
				stationName:'',
				isReady:false,
				isPoint:true,
				longitude: 0,
				latitude: 0,
			}
		},
		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']).then((res) => {
				// //(res)
				this.isReady=true;
				
			}).catch(error => {
				//(res)
			})
		},
		methods: {
			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(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				var data={
					longitude: this.longitude,
					latitude: this.latitude,
					pageSize:50,
					raidus:2,
				}
				API.chargingStationData(data).then((res) => {
					this.stationList = res.data.data;
					this.stationShow = true;
					uni.hideLoading()
				
				}).catch(error => {
					uni.showToast({
				
						title: error
					})
				})
			},
			customBack() {
				
				if(this.stationShow&&this.stationId){
					this.stationShow=false
					this.stationIdSelect=stationId
					this.getList()
				}else{
					uni.redirectTo({
						url: '/pages/charge/index'
					})
				}
				
			},
			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,
					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
					}
					this.recordsTotal = res.data.recordsTotal
					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;
		}
	}

	.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;
				margin: 0 10px;
			}
		}
	}

	.chargeList-item.active {
		border: 1px solid #1677ff;
	}
</style>