预约单详情

pages.json

@@ -453,7 +453,7 @@
             }
             
         }
-        ,{
+        ,{   "name":"我被预约",
             "path" : "pages/user/preengaged/preengaged",
             "style" :                                                                                    
             {
@@ -461,6 +461,14 @@
                 "enablePullDownRefresh": false
             }
             
+        },{   "name":"预约单详情",
+            "path" : "pages/user/preengaged/preengagedListDetails",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
         }
     ],
 	"globalStyle": {

pages/user/myReservation/reservationListDetails.vue

@@ -53,6 +53,14 @@
 			<text class="iconfont more">
 				&#xe600;
 			</text>
+		</view>
+		<view class="tel">
+			<view class="tel-text">
+				联系电话
+			</view>
+			<view class="tel-num">
+				李先生 15100001111
+			</view>
 		</view>
 			<view class="details-item">
 				<view class="item">

pages/user/preengaged/preengaged.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<u-navbar title="我的预约">
+		<u-navbar title="我被预约">
 			<view class="screen">筛选</view>
 		</u-navbar>
 		<view class="reservation-items">

pages/user/preengaged/preengagedListDetails.vue

@@ -0,0 +1,206 @@
+<template>
+	<view >
+		<u-navbar title="预约单详情">
+		
+		</u-navbar>
+		<view class="iconfont tittle-font">
+			&#xe616;
+		</view>
+		<u-alert-tips type="warning" :title="title" :description="description"></u-alert-tips>
+		<view class="reverse-time">
+			<view class="time">
+				预留30分钟
+			</view>
+			<view class="details-item">
+				<view class="item">
+					<view class="item-name">
+						预约单号
+					</view>
+					<view class="item-content">
+						0000111122223333
+					</view>
+				</view>
+				<view class="item">
+					<view class="item-name">
+						预计开始充电
+					</view>
+					<view class="item-content">
+						
+						2022-05-31 09:30:00
+						
+					</view>
+				</view>
+				<view class="item">
+					<view class="item-name">
+						预计充电时长
+					</view>
+					<view class="item-content">
+						6小时
+					</view>
+				</view>
+			</view>
+			
+		</view>
+		<!-- 充电桩详情 -->
+		<view class="charge-pile">
+		<view class="box">
+			<view class="name">
+				荆鹏软件园充电站/1号快充桩
+			</view>
+			<view class="address">
+				湖北省荆州市沙市区江津东路附155号
+			</view>
+			<text class="iconfont more">
+				&#xe600;
+			</text>
+		</view>
+		
+		<view class="tel">
+			<view class="tel-text">
+				联系电话
+			</view>
+			<view class="tel-num">
+				李先生 15100001111
+				<text class="iconfont more2">
+					&#xe600;
+				</text>
+			</view>
+		</view>
+			<view class="details-item">
+				<view class="item">
+					<view class="item-name">
+						预约单生成时间
+						
+					</view>
+					<view class="item-content">
+						2022-05-31 09:00:00
+
+					</view>
+				</view>
+				<view class="item">
+					<view class="item-name">
+					
+						电费单价(kW/h)
+						
+					</view>
+					<view class="item-content">
+						1.00元
+					</view>
+				</view>
+				<view class="item">
+					<view class="item-name">
+						
+						充电服务费(kW/h)
+					</view>
+					<view class="item-content">
+							1.00元
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+		export default {
+			data() {
+				return{
+					description: '等待桩主确认预约单，剩余时间04:59:59'
+				}
+			}
+		}
+</script>
+
+<style lang="scss" scoped>
+	.tittle-font {
+			
+			font-size: 24px;
+			position: fixed;
+			top: 12px;
+			right: 16px;
+			z-index: 99999;
+	
+		}
+		/deep/.u-alert-desc{
+			width: 100vw;
+			text-align: center;
+			color: #ff5a00;
+		}
+		.reverse-time{
+			background-color: #fff;
+			padding: 36px 12px 16px 28px;
+			.time{
+				height: 36px;
+				color: rgba(0, 185, 98, 100);
+				font-size: 36px;
+				text-align: center;
+			}
+			
+		}
+		.details-item{
+			margin-top: 32px;
+			padding-right: 16px;
+			padding-bottom: 46px;
+			.item{
+				display: flex;
+				justify-content: space-between;
+				margin-top: 8px;
+			}
+		}
+	
+		// 充电桩详情
+		.charge-pile{
+			background-color: #fff;
+			margin-top: 12px;
+			padding: 0 0 12px 16px ;
+			.box{
+				position: relative;
+				height: 66px;
+				padding: 12px 0 ;
+				.more{
+					position: absolute;
+					top: 19px;
+					right: 12px;
+					font-size: 24px;
+					color: #b3b3b3;
+				}
+			}
+			
+			.name{
+				line-height: 18px;
+				color: rgba(16, 16, 16, 100);
+				font-size: 18px;
+				font-weight: 600;
+			}
+			.address{
+				line-height: 20px;
+				color: rgba(51, 51, 51, 100);
+				margin-top: 4px;
+			}
+			// 联系电话
+			.tel{
+				line-height: 48px;
+				display: flex;
+				justify-content: space-between;
+				border: 1px solid #eef2f0;
+				border-left: none;
+				position: relative;
+				.tel-num{
+					width: 50%;
+				}
+				.more2{
+					display: inline-block;
+					font-size: 24px;
+					color: #b3b3b3;
+					height: 48px;
+                    position: absolute;
+					top: 1px;
+					right: 12px;
+					
+				}
+			}
+			.item{
+				margin-top: 20px;
+			}
+		}
+</style>