预约充电

pages.json

@@ -428,6 +428,13 @@
             
             }
             
+        },{  "name":"预约充电",
+            "path" : "pages/searchPile/apointment/apointmentRecharge",
+            "style" :                                                                                    
+            {
+            
+            }
+            
         }
     ],
 	"globalStyle": {

pages/searchPile/apointment/apointmentRecharge.vue

@@ -0,0 +1,232 @@
+<template>
+	<view>
+		<u-navbar title="预约充电"></u-navbar>
+		<!-- 站点详情 -->
+		<view class="station-details box">
+			<p class="station-name">荆鹏软件园充电站</p>
+			<view class="details">
+				<view class="details-item">
+					充电桩类型：直流快充
+				</view>
+				<view class="details-item">
+					充电桩属性：私人桩
+				</view>
+				<view class="details-item">
+					桩号：80kW快充桩01
+				</view>
+				<view class="details-item">
+					枪号：02号充电枪
+				</view>
+			</view>
+		</view>
+
+		<!-- 电压详情 -->
+		<view class="voltage-details box">
+			<view class="voltage-item">
+				<p class="item-num">0.0V</p>
+				<p class="item-text">电压</p>
+
+			</view>
+			<view class="border">
+
+			</view>
+			<view class="voltage-item">
+				<p class="item-num">0.0V</p>
+				<p class="item-text">功率</p>
+
+			</view>
+			<view class="border"></view>
+			<view class="voltage-item">
+				<p class="item-num">0.0V</p>
+				<p class="item-text">电流</p>
+
+			</view>
+
+		</view>
+		<!-- 预留时长 -->
+		<view class="reserved-time box">
+			<p>充电桩预留时长</p>
+			<view class="time1">
+				15分钟
+			</view>
+			<view class="time2">
+				30分钟
+			</view>
+			<view class="end-time">
+				预留截止时间：2022-05-31 09:30:00
+			</view>
+		</view>
+		<!-- 预计充电时长 -->
+		<view class="reserved-time box">
+			<p>充电桩预留时长</p>
+			<view class="time0">
+				1小时0分钟
+			</view>
+			<view class="time1">
+				1小时30分钟
+			</view>
+			<view class="time2">
+				2小时0分钟
+			</view>
+			<view class="end-time">
+				预留截止时间：2022-05-31 09:30:00
+			</view>
+		</view>
+		<!-- 预约需知 -->
+		<view class="need-know box">
+			<p class="name">预约需知</p>
+			<p>1.如超过预留时长，充电授权失效；</p>
+			<p>2.授权失效，订单将变为过期，您需要重新预约充电授权；</p>
+			<p>3.超时未充电，将被判定违约，系统会根据您的充电习惯作出相应惩罚。</p>
+		</view>
+		
+		<view class="bottom">
+			<u-button class="button" shape="square">提交预约</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+	page {
+		padding-bottom: 191px;
+	}
+
+	.box {
+		width: 91.4%;
+		background-color: #fff;
+		margin: 12px auto 0;
+		padding: 12px;
+		border-radius: 8px;
+	}
+
+	// 站点详情
+	.station-details {
+
+		.station-name {
+			color: rgba(0, 185, 98, 100);
+			font-size: 20px;
+			line-height: 20px;
+		}
+
+		.details {
+			width: 100%;
+			margin-top: 8px;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+
+			.details-item {
+				width: 45%;
+				color: rgba(102, 102, 102, 100);
+				line-height: 20px;
+				text-align: left;
+				margin-top: 4px;
+			}
+		}
+	}
+
+	// 电压详情
+	.voltage-details {
+		display: flex;
+		justify-content: space-around;
+
+		.item-num {
+			height: 27px;
+			color: rgba(0, 185, 98, 100);
+			font-size: 20px;
+			text-align: center;
+		}
+
+		.item-text {
+			text-align: center;
+			margin-top: 4px;
+		}
+
+		.border {
+			height: 36px;
+			width: 0;
+			border: 1px solid rgba(237, 237, 237, 100);
+			margin-top: 8px;
+
+		}
+	}
+
+	// 预留时长
+	.reserved-time {
+		p {
+			line-height: 18px;
+			color: rgba(0, 185, 98, 100);
+			font-size: 16px;
+			margin-bottom: 42px;
+		}
+
+		.time1 {
+			line-height: 33px;
+			color: rgba(16, 16, 16, 100);
+			font-size: 24px;
+			text-align: center;
+			margin-top: 8px;
+		}
+
+		.time0,
+		.time2 {
+			line-height: 22px;
+			opacity: 0.5;
+			color: rgba(16, 16, 16, 100);
+			font-size: 16px;
+			text-align: center;
+			margin-top: 8px;
+		}
+
+		.end-time {
+			line-height: 20px;
+			color: rgba(102, 102, 102, 100);
+			font-size: 14px;
+			text-align: center;
+			margin-top: 13px;
+		}
+	}
+
+	// 预约需知
+	.need-know {
+		.name {
+			line-height: 18px;
+			color: rgba(0, 185, 98, 100);
+			font-size: 16px;
+			text-align: left;
+			margin-bottom: 12px;
+		}
+		p{
+			line-height: 16px;
+			color: rgba(102, 102, 102, 100);
+			font-size: 14px;
+			text-align: left;
+			margin-top:8px;
+		}
+	}
+	
+	.bottom {
+			background-color: #fff;
+			
+			width: 100%;
+			height: 64px;
+			line-height: 64px;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			z-index: 999;
+			padding: 12px 16px;
+		
+			.button {
+				border-radius: 50px;
+				background-color: rgba(0, 185, 98, 100);
+				color: rgba(255, 255, 255, 100);
+	        	font-size: 16px;
+				
+			}
+		
+		}
+</style>