jp-charge/pagesFinance/user/pileManagement.vue

<template>
	<view>
		<u-navbar title="电桩管理">
		
		</u-navbar>
		<view class="details">
			<view class="name">
				{{detail.stationName}}|	{{detail.name}}
			</view>
			
			<view class="info">
				<view class="info-text">
					<p>{{detail.chargingType}} |<text class="dc-fast"> {{detail.interfaceType}} </text> | {{detail.chargingPower}}kW</p>
					
				</view>
				<view class="info-img">
					<img :src="detail.stationImage"
					 style="
					     width: 100px;
					     height: 75px;
					 "
					 alt="">
				</view>
			</view>

			<view class="station-address">
				<img src="../../assets/img/Frame 201.png" alt="">
				<view class="address-text">
					{{detail.address}}
				</view>

				<view class="navigation" v-if="false">
					<view class="iconfont address-font">
						&#xe60c;

					</view>
					<view class="view-map">导航</view>

				</view>

			</view>
			
			<u-cell-group  >
				<u-cell-item  v-if="price" title="电价" :arrow="false" :value="price.costPrice+'元/度('+price.firstTime+'-'+price.latestTime+')'"> </u-cell-item>
				
				<u-cell-item  v-if="deviceUser" title="联系人" :arrow="false" :value="deviceUser.realName+'  '+deviceUser.phone"></u-cell-item>
				<view class="price-detail" v-if="price"
				@click="gotoUrl('pagesFinance/user/chargingDetails?id='+detail.deviceNo)"
				
				>
					价格详情
				</view>
<!-- 				<u-cell-item  title="停车费" :arrow="false" value="新能源车2小时停车费"></u-cell-item>
 -->			</u-cell-group>

		</view>

<!-- 充电枪选项 -->
<view class="gun-options">
	<u-tabs :list="list1" :is-scroll="false" :current="current" @change="change" bar-width="125" inactive-color="#777777" active-color="#101010"></u-tabs>
	
	<view class="tab-equipment" v-show="current==0"  v-for="(item,i) in gunList" :key="i" >
		<view class="equipment-top">
			<text class="name">{{item.channelNo}}号充电枪</text>  
			<!-- <text class="switch"><u-switch v-model="checked" size="40" active-color="#FF7300"></u-switch></text>
			<text class="radio"> 	
			开启共享</text> -->
		</view>
		<view class="state">
			
			<view class="state-item">
				工作状态：{{item.workStatusText}} <text class="bot1 "
				:class="{
					bot2:!item.workStatus
				}"
				></text>
			</view>
			<view class="state-item">
				开放共享：{{!item.enableShare?'关闭':'开启'}} <text class="bot1 "
				:class="{
					bot2:item.enableShare
				}"
				></text>
			</view>
			<view class="state-item">
				开放预约：{{!item.enableAppointment ?'关闭':'开启'}} <text class="bot1 "
				:class="{
					bot2:item.enableAppointment
				}"
				></text>
			</view>
			<view class="state-item">
				联网状态：{{!detail.online?'离线':'在线'}} <text class="bot1"
				:class="{
					bot2:detail.online
				}"
				></text>
			</view>
			
			<view class="iconfont more" 	
				 @click="gotoUrl('pagesFinance/user/myPile?id='+item.id)" 
			>
				<text class="set" >设置</text>&#xe600;
			</view>
		</view>
		
	</view>	
	
	
	<!-- 分润比例 -->
	<view class="share" v-show="current==1">
		<view class="title" >
			<text class="line"></text>分润比列
		</view>
		<view class="item" v-for="(item,i) in sprList" :key="i" v-if="item.describe!='0%'" >
			<view >
				{{item.name}}
			</view>
			<view >
				{{item.describe}}
			</view>
		</view>
		 
		
	</view>
	<!-- 设备信息 -->
	<view class="equipment-info" v-show="current==2">
	  <view class="title" >
	  	<text class="line"></text>设备相关信息
	  </view>
	  <view class="item">
		  <view class="">
		  	设备型号
		  </view>
		  <view class="">
		  	HCD0001-A
		  </view>
	  	
	  </view>
	  <view class="item">
	  		  <view class="">
	  		  	初次安装时间
	  		  </view>
	  		  <view class="">
	  		  	2022-04-1
	  		  </view>
	  	
	  </view>
	  <view class="item">
	  		  <view class="">
	  		  	输出功率范围(瓦)
	  		  </view>
	  		  <view class="">
	  		  	100-400
	  		  </view>
	  	
	  </view>
	

	</view>
	
</view>


	</view>
</template>
<script>
	import * as API from '@/apis/finance.js'
	
	export default {
		data() {
			return {
				gunList:[],
				detail:{
					

				},
				deviceUser:{
					phone: "",
					realName: ""
				},
				price:{
					costPrice:"",
					firstTime: "",
					latestTime: ""
				},
				sprList:[],
				
				list1: [{
					name: '设备列表'
				}, {
					name: '分润比例'
				}],
				list2: [{
					name: '是'
				}, {
					name: '否'
				}],
				timeList:[{
					name:"10分钟"
				},
				{
					name:"20分钟"
				},
				{
					name:"30分钟"
				}],
				current: 0,
					checked: false,
			}
		},
		onLoad(op){
			
			this.id=op.id;
			this.getInfo()
		},
		methods: {
			change(index) {
				this.current = index;
			},
			getInfo(){
				uni.showLoading({
					title:"加载中",mask:true,
				})
				API.carDeviceDetail({
					deviceId:this.id
				}).then((res) => {
					this.detail=res.data.device	 
					this.sprList=res.data.sprList
					this.gunList=res.data.gunList
					this.price=res.data.price;
					this.deviceUser=res.data.deviceUser;
					uni.hideLoading()
					 
				}).catch(error => {
						uni.showToast({
							
							title:error
						})
				})
			}
			
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 233px;
		background-color: #F6F8F8;
		
	}
	.delete {
		margin-left: 85.3%;
		color: #cccccc;
		font-size: 12px
	}

	.details {
		width: 100%;
		background-color: #fff;
		padding: 16px 0 0px 16px;

		.name {
			height: 20px;
			color: rgba(16, 16, 16, 100);
			font-size: 20px;
			font-weight: 600;
		}

		.info {
			height: 75px;
			line-height: 16px;
			color: rgba(102, 102, 102, 100);
			font-size: 16px;
			margin-top: 12px;
			display: flex;

			// justify-content: space-between;
			.dc-fast {

				color: #CDC0FF;
				margin: 0 4px;
			}

			.info-text {
				width: 69%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.tag-items {
					display: flex;
					// justify-content: space-between;
				}

				.tag {
					line-height: 26px;
					border-radius: 4px;
					background-color: rgba(255, 255, 255, 100);
					color: rgba(119, 119, 119, 100);
					text-align: center;
					border: 1px solid rgba(119, 119, 119, 100);
					padding: 0 4px;
					margin-right: 8px;

				}
			}

			.info-img {
				// margin-left: 35px;
			}
		}

		.station-address {
			width: 100%;

			margin-top: 17px;
			position: relative;

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

			.address-text {
				line-height: 40px;
				position: absolute;
				top: 0px;
				left: 0;
				font-size: 16px
			}

			.navigation {
				position: absolute;
				top: 0;
				right: 28px;
			}

			.address-font {
				font-size: 28px;
				color: #4e94ff;


			}

			.view-map {
				font-size: 12px;
				text-align: center;

			}
		}
		/deep/.u-cell__value{
			text-align: left;
			//margin-left: 16px;
			color: #101010;
			 font-size: 16px;
		}
		/deep/.u-cell_title{
			width: 15% !important;
		    font-size: 16px;
			color: #777777;
		}
		.u-cell{
			position: relative;
			    padding: 13px 16px 13px 0 ;
		}
		.price-detail{
			width: 56px;
			height: 20px;
			color: rgba(22, 119, 255, 100);
			font-size: 14px;
			position: absolute;
			top: 15px;
			right: 20px;
		}
	}


// 充电枪选项
.gun-options{
	background-color: #fff;
	margin-top: 12px;
	.tab-equipment{
		background-color: #fff;
		padding: 16px 16px 16px 0;
		margin-left: 16px ;
		border-bottom: 1px solid #E5E7EA;
		position: relative;
		.equipment-top{
			line-height: 27px;
			position: relative;
		}
		.name{
			line-height: 20px;
			line-height: 20px;
			font-weight: 600;
			color: rgba(16, 16, 16, 100);
		}
		.radio{
			margin-left: 54px;
			
			
		}
		.switch{
			position:absolute;
			top: 3px;
			left: 21%;
		}
		.state{
			margin-top: 12px;
			display: flex;
			justify-content: space-between;
			width: 75%;
			flex-wrap: wrap;
			.state-item{
				height: 20px;
				line-height: 20px;
				margin-top: 4px;
				color: rgba(16, 16, 16, 100);
				.bot1{
					display: inline-block;
					width: 12px;
					height: 12px;
					margin-left: 2px;
					background-color: rgba(255, 115, 0, 100);
					border-radius: 999px;
					
				}
				.bot2{
					background-color: rgba(0, 185, 98, 100);
				}
				
				
			}
			.more{
				
				line-height: 24px;
				font-size: 24px;
				color: #b3b3b3;
				position: absolute;
				right: 20px;
				top: 16px;
			
				.set{
					display: inline-block;
					width: 30px;
					font-size: 14px;
					color: #1677ff;
			        position: absolute;
					top: 0;
					left: -29px;
					
				}
			}
			
		}
	}
	/deep/.u-tab-bar{
		background-color: #00B962 !important;
	}
.share{
	padding: 16px;
    
}
	
.equipment-info{
	padding: 16px;
}
.title{
	font-size: 16px;
	font-weight: 600;
	.line{
		display: inline-block;
		height:12px;
		width: 4px;
		background-color: #00B962;
		margin-right: 8px;
	}
	
	}
	.item{
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
		}
}
.bottom{
	width: 100%;
	height: 64px;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	display: flex;
	.u-btn{
		width: 91.4%;
		height: 40px;
		margin: auto;
	}
}

</style>