jp-charge/pagesFinance/user/pileManagement.vue

<template>
	<view>
		<ujp-navbar title="电桩管理">
		
		</ujp-navbar>
		<view class="details">
			<view class="name">
				{{detail.name}}
			</view>
			
			<view class="info" >
				<view class="info-text"  >
				</view>
				<view class="info-text"  v-if="false">
					<p>{{detail.chargingType}} |<text class="dc-fast"> {{detail.interfaceType}} </text> | {{detail.chargingPower}}kW</p>
					
				</view>
				<view class="info-img">
					<img :src="detail.image"
					 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.toFixed(2)+'元/度('+price.firstTime+'-'+price.latestTime+')'"> </u-cell-item>
				
				<u-cell-item  v-if="deviceUser" title="联系人" :arrow="false" :value="deviceUser.contacts+'  '+deviceUser.contactPhone"></u-cell-item>
				<view class="price-detail" v-if="price"
				@click="gotoUrl('pagesFinance/user/chargingDetails?id='+price.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>
	
	<u-popup mode="bottom" v-model="showpopup" 
	 border-radius="34"
	height="90%">
				 <Gunsetup 
					@submitsetup="showpopup=false"
				 v-if="showpopup" :id="showpopupid" ></Gunsetup>
			</u-popup>
			
	<view v-show="current==0" v-for="(gunList2,index) in gunList"  :key="index" >
		

	<view class="tab-equipment"   v-for="(item,i) in gunList2.gunList" :key="i" >
		<view class="equipment-top">
			<text class="name" v-if="station.stationType==50">{{gunList2.name}}</text>  
			<text class="name" v-else >{{item.sortNo}}号/{{gunList2.name}}{{gunList2.gunList.length>1?'枪'+item.channelNo:''}}</text>  
			<!-- <text class="switch">
			
			<span v-if="stationDetail.station.stationType!=50">{{item.sortNo}}号/</span>{{device.name}}{{device.gunList.length>1?'枪'+item.channelNo:''}}
			
			
			<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">
				联网状态：{{!gunList2.online?'离线':'在线'}} <text class="bot1"
				:class="{
					bot2:gunList2.online
				}"
				></text>
			</view>
			
			<view class="state-item">
				开放共享：{{!(item.enableShare&&item.enableShareWithinTime)?'关闭':'开启'}} <text class="bot1 "
				:class="{
					bot2:(item.enableShare&&item.enableShareWithinTime)
				}"
				></text>
			</view>
			<view class="state-item">
				开放预约：{{!(item.enableAppointment&&item.enableAppointmentWithinTime)?'关闭':'开启'}} <text class="bot1 "
				:class="{
					bot2:(item.enableAppointment&&item.enableAppointmentWithinTime)
				}"
				></text>
			</view>
			
			
			<view class="iconfont more" 
				 @click="showpopupid=item.id,showpopup=true"  v-if="isAllow"	
			> 
				<text class="set" >设置</text>&#xe600;
			</view>
			
		</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'
	import Gunsetup from '@/components/chargingGunSetup.vue'
	
	export default {
		components: {
			Gunsetup
		
		},
		data() {
			return {
				showpopup:false,
				showpopupid:'',
				gunList:[],
				isAllow:false,
				detail:{
					

				},
				deviceUser:{
					phone: "",
					realName: ""
				},
				station:{},
				price:{
					costPrice:0,
					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;
			
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			change(index) {
				this.current = index;
			},
			getInfo(){
				uni.showLoading({
					title:"加载中",mask:true,
				})
				API.carStationDetail({
					stationId:this.id
				}).then((res) => {
					this.isAllow=res.data.isAllow	
					 if(res.data.deviceList.length){
						 
							this.sprList=res.data.deviceList[0].sprDTOList
							this.gunList=res.data.deviceList
							this.price=res.data.price;
							this.price.deviceNo=res.data.deviceList[0].deviceNo
					 }
				
						this.detail=res.data.station
				
					this.station=res.data.station;
					if(this.station ){
						this.deviceUser=res.data.station;
					}else{
						this.deviceUser=null
					}
				
					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: 30px;
			color: rgba(16, 16, 16, 100);
			font-size: 20px;
			font-weight: 600;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    white-space: nowrap;
		}

		.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: 32rpx;
		}
		/deep/.u-cell_title{
			width: 15% !important;
			min-width: 48px;
		    font-size: 32rpx;
			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>