JP-ChargeTeam51/pages/user/myPile/pileManagement.vue

<template>
	<view>
		<u-navbar title="电桩管理">
			<view class="delete">删除</view>
		</u-navbar>
		<view class="details">
			<view class="name">
				大润发顶楼停车场01号直流80kW
			</view>
			<view class="info">
				<view class="info-text">
					<p>2015国标 |<text class="dc-fast"> 直流快充 </text> | 80kW</p>
					<p class="tag-items">
						<view class="tag">
							对外开放
						</view>
						<view class="tag">
							可预约
						</view>
						<view class="tag">
							设备在线
						</view>
					</p>
				</view>
				<view class="info-img">
					<img src="../../../static/img/电桩管理.png" alt="">
				</view>
			</view>

			<view class="station-address">
				<img src="static/img/Frame 201.png" alt="">
				<view class="address-text">
					湖北省荆州市沙市区江津东路附155号
				</view>

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

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

				</view>

			</view>
			
			<u-cell-group  >
				<u-cell-item title="联系人姓名" :arrow="false" value="李先生 15500001111"></u-cell-item>
				<u-cell-item  title="电价" :arrow="false" value="1.25元/度"></u-cell-item>
				<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="options" v-if="current==0">
			<u-cell-group>
				<u-cell-item  title="开放共享" :arrow="false">
						<view class="">
							<u-radio-group  >
								<u-radio 
									@change="radioChange" 
									v-for="(item, index) in list2" :key="index" 
									:name="item.name"
									:disabled="item.disabled"
									active-color="#00b962"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
					
				</u-cell-item>
				<u-cell-item  title="开放预约" :arrow="false"><view class="">
							<u-radio-group  @change="radioGroupChange">
								<u-radio 
									@change="radioChange" 
									v-for="(item, index) in list2" :key="index" 
									:name="item.name"
									:disabled="item.disabled"
									active-color="#00b962"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view></u-cell-item>
				<u-cell-item  title="预约自动确认" :arrow="false"><view class="">
							<u-radio-group @change="radioGroupChange">
								<u-radio 
									@change="radioChange" 
									v-for="(item, index) in list2" :key="index" 
									:name="item.name"
									:disabled="item.disabled"
									active-color="#00b962"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view></u-cell-item>
						<u-cell-item  title="允许预约日期" value="工作日"></u-cell-item>
						<u-cell-item  title="允许预约时段" value="10:00至12:00"></u-cell-item>
						<u-cell-item   :arrow="false" class="time-cell">
							<p>预约时长选项</p>
							<view class="radio-box">
									<u-radio-group  @change="radioGroupChange">
										<u-radio 
											@change="radioChange" 
											v-for="(item, index) in timeList" :key="index" 
											:name="item.name"
											:disabled="item.disabled"
											active-color="#00b962"
										>
											{{item.name}}
										</u-radio>
									</u-radio-group>
								</view>
							
							</u-cell-item>
							<u-cell-item  title="工作状态" :arrow="false"><view class="bot charging-bot">
								
							</view>充电中</u-cell-item>
								<u-cell-item  title="运行状态":arrow="false"><view class="bot">
								
							</view>正常</u-cell-item>
									<u-cell-item  title="网络状态":arrow="false"><view class="bot">
								
							</view>联网</u-cell-item>
										<u-cell-item  title="故障状态":arrow="false"><view class="bot">
								
							</view>正常</u-cell-item>
			</u-cell-group>
	</view>	
</view>

<view class="bottom">
	<u-button type="success" shape="circle">保存</u-button>
</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list1: [{
					name: '1号充电枪'
				}, {
					name: '2号充电枪'
				}],
				list2: [{
					name: '是'
				}, {
					name: '否'
				}],
				timeList:[{
					name:"10分钟"
				},
				{
					name:"20分钟"
				},
				{
					name:"30分钟"
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 233px;
	}
	.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: 12px
			}

			.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: 20px;
			color: #101010
		}
		/deep/.u-cell_title{
			width: 30% !important;
			color: #777777;
		}
	}


// 充电枪选项
.gun-options{
	background-color: #fff;
	margin-top: 12px;
	/deep/.u-cell_title{
		width: 30% !important;
	}
	/deep/.u-cell__value{
		text-align: left;
		color: #101010;
		font-size: 16px
		}
		.u-radio-group{
			width: 100%;
			display: flex;
			justify-content: space-between;
		}
		.time-cell{
			/deep/.u-cell_title{
				width: 0 !important;
			}
		}
		.bot{
			display: inline-block;
			width: 12px;
			height: 12px;
			border-radius: 999px;
			background-color: #00b962;
			margin-right: 4px;
		}
		.charging-bot{
			background-color: #ff7300;
		}
}
.bottom{
	width: 100%;
	height: 64px;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	display: flex;
	.u-btn{
		width: 91.4%;
		height: 40px;
		margin: auto;
	}
}

</style>