jp-xqjy/pages/charge/switchCharge.vue

<template>
	<view>
		<u-navbar title="切换充电桩"
		    :autoBack="false"
			:custom-back="selectBtn">
			<view class="slot-wrap">
				<view class="navbar-left"></view>				
				<view class="navbar-right" @click="selectBtn"><span>确定</span></view>
			</view>
		</u-navbar>
		<view class="chargeList">
			<template v-for="(item,i) in list">
			
			<view class="chargeList-item " 
			@click="select=item.id"
			: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.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'
	
	export default {
		data() {
			return {
				list:[
					
				],
				select:'',
			}
		},
		onLoad(op) {
			this.select=op.id;
		},
		methods: {
			
			selectBtn(){
				
				//uni.navigateBack()
				uni.redirectTo({
					url:'/pages/charge/index?id='+this.select
				})
			},
			getList(){
				uni.showLoading({
					title:"加载中",mask:true,
				})
				
				var data={
				 
				};
				API.chargingDeviceData(data).then((res) => {
						 
					this.list=[
						...this.list,
						...res.data.data
					];
					this.recordsTotal=res.data.recordsTotal
					uni.hideLoading()
					 
				}).catch(error => {
						uni.showToast({
							
							title:error
						})
				})
			}
		},onReady(){
			
			 this.getList()
		},
	}
</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;
	}
	.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>