我被预约

pages.json

@@ -453,6 +453,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/user/preengaged/preengaged",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationStyle": "custom", // 隐藏系统导航栏

pages/user/myReservation/myReservation.vue

@@ -374,7 +374,7 @@
 	.btn {
 		width: 60px;
 		height: 24px;
-		line-height: 24px;
+		line-height: 20px;
 		border-radius: 4px;
 		background-color: rgba(255, 255, 255, 100);
 		font-size: 14px;

pages/user/preengaged/preengaged.vue

@@ -0,0 +1,520 @@
+<template>
+	<view>
+		<u-navbar title="我的预约">
+			<view class="screen">筛选</view>
+		</u-navbar>
+		<view class="reservation-items">
+			<view class="station-name">
+				预约30分钟后充电
+				<view class="toBe-confirmed btn">
+					待确认
+				</view>
+			</view>
+			<view class="details-items">
+				<view class="items">
+					<view class="items-name">
+						预留截止时间
+
+					</view>
+					<view class="items-content">
+						2022-05-31 09:30:00
+						
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+					
+						预计充电时长
+					
+					</view>
+					<view class="items-content">
+						
+						6小时
+						
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+						
+						预约站点
+						
+					</view>
+					<view class="items-content">
+						荆鹏充电站
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+						
+						预约桩号
+					</view>
+					<view class="items-content">
+						1号快充桩
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+						充电桩类型
+					</view>
+					<view class="items-content">
+						交流充电桩
+					</view>
+				</view>
+				
+			</view>
+			<view class="button">
+					<u-button class="affirm" shape="circle">确认</u-button>
+					<u-button class="contact" shape="circle">联系他</u-button>
+				<u-button class="refuse" shape="circle">拒绝</u-button>
+
+			</view>
+		</view>
+
+		<view class="reservation-items">
+			<view class="station-name">
+				预约30分钟后充电
+				<view class="confirmed btn">
+					已确认
+				</view>
+			</view>
+			<view class="details-items">
+				<view class="items">
+					<view class="items-name">
+						预留截止时间
+			
+					</view>
+					<view class="items-content">
+						2022-05-31 09:30:00
+						
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+					
+						预计充电时长
+					
+					</view>
+					<view class="items-content">
+						
+						6小时
+						
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+						
+						预约站点
+						
+					</view>
+					<view class="items-content">
+						荆鹏充电站
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+						
+						预约桩号
+					</view>
+					<view class="items-content">
+						1号快充桩
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+						充电桩类型
+					</view>
+					<view class="items-content">
+						交流充电桩
+					</view>
+				</view>
+				
+			</view>
+			<view class="button">
+
+				<u-button class="contact" shape="circle">联系他</u-button>
+			
+			</view>
+		</view>
+
+
+
+		<view class="reservation-items">
+			<view class="station-name">
+				预约30分钟后充电
+				<view class="canceled btn">
+					已取消
+				</view>
+			</view>
+			<view class="details-items">
+							<view class="items">
+								<view class="items-name">
+									预留截止时间
+			
+								</view>
+								<view class="items-content">
+									2022-05-31 09:30:00
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+								
+									预计充电时长
+								
+								</view>
+								<view class="items-content">
+									
+									6小时
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约站点
+									
+								</view>
+								<view class="items-content">
+									荆鹏充电站
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约桩号
+								</view>
+								<view class="items-content">
+									1号快充桩
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									充电桩类型
+								</view>
+								<view class="items-content">
+									交流充电桩
+								</view>
+							</view>
+							
+						</view>
+			<view class="button">
+
+				<u-button class="delete" shape="circle">删除</u-button>
+			</view>
+		</view>
+
+
+		<view class="reservation-items">
+			<view class="station-name">
+				预约30分钟后充电
+				<view class="have-expired btn">
+					已过期
+				</view>
+			</view>
+			<view class="details-items">
+							<view class="items">
+								<view class="items-name">
+									预留截止时间
+			
+								</view>
+								<view class="items-content">
+									2022-05-31 09:30:00
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+								
+									预计充电时长
+								
+								</view>
+								<view class="items-content">
+									
+									6小时
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约站点
+									
+								</view>
+								<view class="items-content">
+									荆鹏充电站
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约桩号
+								</view>
+								<view class="items-content">
+									1号快充桩
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									充电桩类型
+								</view>
+								<view class="items-content">
+									交流充电桩
+								</view>
+							</view>
+							
+						</view>
+			<view class="button">
+				<u-button class="contact" shape="circle">联系他</u-button>
+                 <u-button class="delete" shape="circle">删除</u-button>
+				
+			</view>
+		</view>
+		
+		<view class="reservation-items">
+			<view class="station-name">
+				预约30分钟后充电
+				<view class="finished btn">
+					已完成
+				</view>
+			</view>
+			<view class="details-items">
+							<view class="items">
+								<view class="items-name">
+									预留截止时间
+			
+								</view>
+								<view class="items-content">
+									2022-05-31 09:30:00
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+								
+									预计充电时长
+								
+								</view>
+								<view class="items-content">
+									
+									6小时
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约站点
+									
+								</view>
+								<view class="items-content">
+									荆鹏充电站
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约桩号
+								</view>
+								<view class="items-content">
+									1号快充桩
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									充电桩类型
+								</view>
+								<view class="items-content">
+									交流充电桩
+								</view>
+							</view>
+							
+						</view>
+			<view class="button">
+				<u-button class="contact" shape="circle">联系他</u-button>
+			</view>
+		</view>
+		
+		<view class="reservation-items">
+			<view class="station-name">
+				预约30分钟后充电
+				<view class="refused btn">
+					已拒绝
+				</view>
+			</view>
+			<view class="details-items">
+							<view class="items">
+								<view class="items-name">
+									预留截止时间
+			
+								</view>
+								<view class="items-content">
+									2022-05-31 09:30:00
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+								
+									预计充电时长
+								
+								</view>
+								<view class="items-content">
+									
+									6小时
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约站点
+									
+								</view>
+								<view class="items-content">
+									荆鹏充电站
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约桩号
+								</view>
+								<view class="items-content">
+									1号快充桩
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									充电桩类型
+								</view>
+								<view class="items-content">
+									交流充电桩
+								</view>
+							</view>
+							
+						</view>
+		
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+				
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page{
+		padding-bottom: 155px;
+	}
+	.screen {
+		margin-left: 85.3%;
+		color: rgba(119, 119, 119, 100);
+		font-size: 12px
+	}
+
+	.btn {
+		width: 60px;
+		height: 24px;
+		line-height: 20px;
+		border-radius: 4px;
+		background-color: rgba(255, 255, 255, 100);
+		font-size: 14px;
+		text-align: center;
+		float: right;
+		margin-right: 24px;
+		margin-top: 12px;
+	}
+// 待确认按钮
+	.toBe-confirmed {
+
+		color: rgba(78, 141, 246, 100);
+		border: 1px solid rgba(78, 141, 246, 100);
+
+	}
+// 已确认按钮
+	.confirmed {
+		border: 1px solid rgba(0, 185, 98, 100);
+		color: rgba(0, 185, 98, 100);
+
+	}
+// 已取消按钮
+	.canceled {
+		border: 1px solid rgba(153, 153, 153, 100);
+		color: rgba(153, 153, 153, 100);
+		;
+	}
+// 已过期/已完成按钮
+	.have-expired,.finished{
+		color: rgba(162, 169, 181, 100);
+		border: 1px solid rgba(162, 169, 181, 100);
+	}
+	
+	// 已拒绝
+	.refused{
+		color: rgba(255, 79, 63, 100);
+		border: 1px solid rgba(255, 79, 63, 100);
+	}
+	.reservation-items {
+		width: 100%;
+		background-color: #fff;
+		padding-left: 14px;
+		margin-bottom: 12px;
+
+		.station-name {
+			line-height: 48px;
+			color: rgba(16, 16, 16, 100);
+			font-size: 20px
+		}
+
+		.details-items {
+			border: 1px solid rgba(238, 242, 240, 100);
+			border-left: none;
+			padding-bottom: 13px;
+
+			.items {
+				display: flex;
+				justify-content: space-between;
+				padding: 12px 14px 0px 0;
+				line-height: 20px;
+			}
+
+		}
+
+		
+
+		.button {
+			height: 56px;
+			padding: 12px 0;
+
+			/deep/.u-btn {
+				height: 32px;
+				line-height: 32px;
+				background-color: rgba(255, 255, 255, 100);
+				color: rgba(153, 153, 153, 100);
+				font-size: 16px;
+				text-align: center;
+				float: right;
+				margin-right: 16px;
+			}
+      .refuse,.delete{
+		  color: #999999;
+	  }
+		.contact,.affirm{
+			color: #00b962;
+		}
+			
+
+			
+		}
+	}
+</style>