11

pages.json

@@ -25,14 +25,7 @@
 			}
 
 		}, 
-		{
-			"path": "pages/chargingPileDetails/chargingPileDetails",
-			"style": {
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false
-			}
-
-		}, 
+		
 		{
 			"path": "pages/fastRecharge/fastRecharge",
 			"style": {
@@ -188,7 +181,7 @@
 			}
 
 		},
-		{
+		{   "name":"新闻公告",
 			"path": "pages/article/newsNotice",
 			"style": {
 				"navigationBarTitleText": "",
@@ -197,6 +190,7 @@
 
 		},
 		{
+			 "name":"文章详情",
 			"path": "pages/article/articleDetails",
 			"style": {
 				"navigationBarTitleText": "",
@@ -211,6 +205,7 @@
 			}
 
 		}, {
+			"name":"找桩-地图模式",
 			"path": "pages/searchPile/searchPile",
 			"style": {
 				"navigationBarTitleText": "",
@@ -218,23 +213,103 @@
 			}
 
 		},
-		{
+		{   "name":"找桩-列表模式",
+			"path": "pages/searchPile/searchPileList",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+		
+		},
+		
+		{   "name":"站点详情",
 			"path": "pages/searchPile/stationAndPile/stationDetails",
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false
 			}
-
+		
 		},
+		
 		{
-			"path": "pages/searchPile/searchPileList",
+			 "name":"站点详情-地图",
+			"path": "pages/searchPile/stationAndPile/stationDetailsMap",
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false
 			}
-
+		
+		},
+		{     "name":"充电价格详情",
+			"path": "pages/searchPile/stationAndPile/chargePriceDetails",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+		
+		},
+		{    "name":"充电桩详情",
+			"path": "pages/searchPile/stationAndPile/chargingPileDetails",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+		
 		}
-	],
+		
+	    
+        ,{
+            "path" : "pages/searchPile/chargeProcess/chargeProcess",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        },{"name":"充电",
+            "path" : "pages/searchPile/chargeProcess/charge",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+		,{"name":"充电中(直流)",
+		    "path" : "pages/searchPile/chargeProcess/dcCharging",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "",
+		        "enablePullDownRefresh": false
+		    }
+		    
+		},{"name":"充电结束(直流)",
+            "path" : "pages/searchPile/chargeProcess/dcChargeEnd",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        },{"name":"充电中(交流)",
+            "path" : "pages/searchPile/chargeProcess/exChanging",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        },{"name":"充电结束(交流)",
+            "path" : "pages/searchPile/chargeProcess/exChargeEnd",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+		
+    ],
 	"globalStyle": {
 		"navigationStyle": "custom", // 隐藏系统导航栏
 		"navigationBarTitleText": "智能充电系统",

pages/chargingPileDetails/chargingPileDetails.vue

@@ -1,328 +0,0 @@
-<template>
-	<view >
-		<!-- 头部 -->
-		<view class="title"> <text class="iconfont back">&#xe602;</text><text>充电桩详情</text></view>
-<!-- 主体 -->
-<!-- 充电桩信息 -->
-       <view class="main">
-		   <view class="main-detail">
-			   <view class="detail-name">
-			   	充电桩编号
-			   </view>
-		   	    <view class="detail-content" style="font-weight: 900;">A000152</view>
-		   </view>
-		   <view class="main-detail">
-		   			   <view class="detail-name">
-		   			   	接口类型
-		   			   </view>
-		   	    <view class="detail-content">国际直流</view>
-		   </view>
-		   <view class="main-detail">
-		   			   <view class="detail-name">
-		   			   	类型
-		   			   </view>
-		   	    <view class="detail-content">快充</view>
-		   </view>
-		   <view class="main-detail">
-		   			   <view class="detail-name">
-		   			   	充电功率
-		   			   </view>
-		   	    <view class="detail-content"  style="font-weight: 900;">60000.0kW</view>
-		   </view>
-	    <!-- 收费标准 -->
-		<view class="rates">
-			<view class="rates-title">
-				<view class="title-left">
-					收费标准
-				</view>
-				<view class="title-right">
-					峰谷平电价计费
-				</view>
-				
-			</view>
-			<!-- 时段分类 -->
-		<view class="time-rates">
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						00:00-07:00
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						00:70-09:00
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						09:00-15:00
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						15:00-20:00
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						20:00-22:00
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						22:00-23:00
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						23:00-23:59
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			
-			
-		</view>
-
-		</view >
-			
-			<!-- 提示 -->
-			<view class="tips">
-				  <u-alert-tips size="12" show-icon="true" type="warning" :title="title" :description="description" ></u-alert-tips>
-			</view>
-	   </view>
-<!-- 底部按钮 -->
-
-<view class="bottom">
-	<view class="botton">开始充电</view>
-</view>
-	</view>
-	
-	
-</template>
-<script>
-	export default {
-		data() {
-		return{
-			
-			description: '温馨提示：充电前请确保您的车辆已与充电桩连接！并关闭车内电源。'
-		}
-		}
-	}
-</script>
-
-
-<style lang="scss">
-	// 头部
-	.title {
-		width: 100%;
-		line-height: 44px;
-		background-color: rgba(255, 255, 255, 100);
-		text-align: center;
-		border: 1px solid rgba(242, 242, 242, 100);
-		position: fixed;
-		top: 0;
-		
-	}
-	
-	// 主体
-	.main{
-		width: 100%;
-		margin-top: 44px;
-		// margin-bottom: 64px;
-		padding-bottom: 234px;
-		.main-detail{
-			display: flex;
-			justify-content: space-between;
-			padding: 14px 16px 0 0;
-			height: 48px;
-			line-height: 48px;
-			background-color: #fff;
-			border-bottom: 1px solid rgba(242, 242, 242, 100);
-			.detail-name{
-               margin-left: 16px;
-				height: 20px;
-				line-height: 23px;
-				color: rgba(102, 102, 102, 100);
-				font-size: 14px;
-				
-			}
-			.detail-content{
-				height: 23px;
-				line-height: 23px;
-				color: rgba(51, 51, 51, 100);
-				font-size: 14px;
-				
-			}
-		}
-		// 收费标准
-	   .rates{
-		   width: 100%;
-		   background-color: #fff;
-		   margin-top: 12px;
-		   .rates-title{
-			   display: flex;
-			   justify-content: space-between;
-			   height: 48px;
-			   line-height: 48px;
-			   padding: 0px 16px 0 ;
-			   border-bottom: 1px solid rgba(242, 242, 242, 100);
-		   }
-		   .time-part{
-			   width: 100%;
-			   .part-top{
-				   display: flex;
-				   justify-content: space-between;
-				   padding: 16px;
-				   .time{
-					   color: rgba(16, 16, 16, 100);
-					   font-size: 16px;
-				   }
-				   .price{
-					   .price-number{
-						   color: rgba(255, 61, 0, 100);
-						   font-size: 18px;
-						   text-align: right;
-						   font-family: Roboto-regular;
-						   display: inline-block;
-						   height: 20px;
-						   font-weight: 600;
-					   }
-					   .price-unit{
-						   color: rgba(102, 102, 102, 100);
-						   font-size: 14px;
-						   text-align: right;
-						   margin-left: 4px;
-						   display: inline-block;
-						   height: 20px;
-					   }
-				   }
-			   }
-			   .part-bottom{
-				   .unitPrice-servicePrice{
-					   eight: 18px;
-					   color: rgba(136, 136, 136, 100);
-					   font-size: 12px;
-					   text-align: right;
-					   padding-right: 16px;
-					   padding-bottom: 18px;
-				   }
-			   }
-		   }
-	   }
-	 .tips{
-		
-		 font-size: 12px;
-		 margin-top: 24px;
-		 /deep/.u-alert-desc[data-v-4d234687]{
-		 			 font-size: 12px
-		 }
-	 }
-	}
-	
-	// 尾部
-	.bottom{
-		background-color: #fff;;
-		width: 100%;
-		height: 64px;
-		line-height: 64px;
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		z-index:999;
-		padding: 12px 16px;
-		.botton{
-			width: 343px;
-			height: 40px;
-			line-height: 40px;
-			border-radius: 50px;
-			background-color: rgba(0, 185, 98, 100);
-			color: rgba(255, 255, 255, 100);
-			font-size: 16px;
-			text-align: center;
-			margin: 0 auto;
-		}
-		
-	}
-</style>

pages/searchPile/searchPile.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view >
 		<!-- 头部 -->
 		<view>
 			<view class="top">
@@ -37,7 +37,7 @@
 					<view class="">
 						￥1.25
 					</view>
-					<view class="">
+					<view class="" style="font-size: 10px;">
 						空闲10
 					</view>
 				</view>
@@ -46,7 +46,7 @@
 			<img src="/static/img/地图@1x.png" alt="">
 		</view>
 		<view class="charing-slow">
-			<text class="fast-charge">快充</text> <text class="station-items">荆沙大道救助站充电站</text>
+			<text class="slow-charge">慢充</text> <text class="station-items">荆沙大道救助站充电站</text>
 			<view class="address">
 				湖北省荆州市沙市区江津东路附155号
 			</view>
@@ -57,17 +57,25 @@
 				</view>
 			</view>
 			<view class="park">
-				<text class="park-p">p</text>
-				<text class="park-text">2小时免费停车</text>
-			</view>
-			<view class="free">
-				<view class="free-num">
-					<text style="color:#009143;">空闲10</text>/总数10
+				<view class="park-text">
+					<text class="park-p">p</text>
+					<text class="park-text">以实际费用为准</text>
 				</view>
-				<view class="distance">
-					<text class="iconfont distance-font">&#xe615;</text>1.2公里 3分钟
+				<view class="">
+					<text style="color: #009143;">空闲10/</text><text>总数10</text>
 				</view>
 			</view>
+			<view class="bottom">
+				<view class="scan-qrcode">
+					<text class="iconfont">&#xe61a;</text>
+					<text class="text">扫码充电</text>
+					</view>
+				<view class="distance-time">
+					<text class="iconfont">&#xe615;</text>
+					<text class="text">0.1公里 1分钟</text>
+					</view>
+			</view>
+			
 		</view>
 
 		<u-tabbar v-model="current" :list="tabbarList" active-color="#009143"></u-tabbar>
@@ -111,6 +119,7 @@
 
 <style lang="scss" scoped>
 	.top {
+		
 		display: flex;
 		justify-content: space-between;
 		width: 100%;
@@ -121,7 +130,7 @@
 		position: fixed;
 		top: 0;
 		left: 0;
-
+         z-index: 999;
 		.u-search[data-v-1a326067] {
 			flex: 0.9;
 		}
@@ -239,13 +248,13 @@
 		left: 0;
 		right: 0;
 
-		.fast-charge {
+		.slow-charge {
 			display: inline-block;
 			width: 44px;
 			height: 20px;
 			line-height: 20px;
 			border-radius: 50px;
-			background-color: #9d9fff;
+			background-color: #00b962;
 			color: rgba(255, 255, 255, 100);
 			font-size: 12px;
 			text-align: center;
@@ -296,12 +305,13 @@
 		.park {
 			margin-top: 8px;
 			display: flex;
+			justify-content: space-between;
 
 			.park-p {
 				display: inline-block;
 				width: 20px;
 				height: 18px;
-				line-height: 12px;
+				line-height: 18px;
 				text-align: center;
 				background-color: rgba(125, 177, 255, 100);
 				color: #fff;
@@ -309,7 +319,7 @@
 
 			.park-text {
 				display: inline-block;
-				width: 300px;
+				
 				height: 17px;
 				color: rgba(102, 102, 102, 100);
 				font-size: 12px;
@@ -318,35 +328,40 @@
 				margin-top: 2px;
 			}
 		}
-
-		.free {
-			display: flex;
-			justify-content: space-between;
+		.bottom{
 			height: 52px;
-			border-top: 1px solid rgba(238, 242, 240, 100);
-			margin-top: 10px;
-
-			.free-num {
-				line-height: 52px;
-				font-size: 16px
+			display: flex;
+			margin-top: 9px;
+			margin-left: 77px;
+			border-top:  1px solid rgba(238, 242, 240, 100);
+			.text{
+				display: inline-block;
+				margin-left: 4px;
+				
 			}
-
-			.distance {
+			.scan-qrcode{
+				width: 100px;
+				height: 28px;
+				line-height: 28px;
+				border-radius: 50px;
+				text-align: center;
+				border: 1px solid rgba(0, 185, 98, 100);
+				margin-top: 12px;
+				color: rgba(0, 185, 98, 100);
+			}
+			.distance-time{
 				width: 130px;
 				height: 28px;
 				line-height: 28px;
-				color: rgba(255, 255, 255, 100);
-				font-size: 14px;
-				background-color: #00b962;
 				border-radius: 50px;
-				margin: 12px;
+				background-color: rgba(0, 185, 98, 100);
 				text-align: center;
-
-				.distance-font {
-					font-size: 16px
-				}
-
+				margin-top: 12px;
+				margin-left: 12px;
+				color:#fff
 			}
 		}
+
+		
 	}
 </style>

pages/searchPile/stationAndPile/stationDetails.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view style="padding-bottom: 138px;">
 		<u-navbar title="站点详情"></u-navbar>
 		<!-- 站点信息 -->
 		<view class="station-details">
@@ -113,6 +113,9 @@
 			
 		</view>
 		<view class="equipment-item">
+			<view class="left-font iconfont" style="color:#ff6200">
+				&#xe60a;
+			</view>
 			<view class="name">
 				<view class="name-text">
 					2号桩
@@ -150,7 +153,10 @@
 		
 			
 		</view>
-		<view class="equipment-item">
+		<view class="equipment-item" style="border: none;padding: 0;" >
+			<view class="left-font iconfont" style="color:#ff6200">
+				&#xe60a;
+			</view>
 			<view class="name">
 				<view class="name-text">
 					3号桩
@@ -190,6 +196,11 @@
 		</view>
 		
 	</view>
+	<!-- 底部 -->
+	<view class="bottom">
+		<u-button class="button1" shape="circle" size="medium">扫码充电</u-button>
+		<u-button class="button2" shape="circle" size="medium">导航</u-button>
+	</view>
 	</view>
 </template>
 
@@ -399,7 +410,8 @@
 			color:#00b962 ;
 			font-size: 36px;
 			position: absolute;
-			left: 0;
+			left: -52px;
+			top: -4px
 		}
 		.name{
 			display: flex;
@@ -469,4 +481,31 @@
 		margin-left: 8px;
 	}
 	}
+	// 底部
+	.bottom{
+		width: 100%;
+		height: 56px;
+		background-color: #fff;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		padding: 12px 16px;
+		.button1{
+			width: 165px;
+			height: 32px;
+			border: 1px solid rgba(0, 185, 98, 100);
+			color: rgba(0, 185, 98, 100);
+			font-size: 14px;
+		}
+		.button2{
+			width: 165px;
+			height: 32px;
+			border-radius: 50px;
+			background-color: rgba(0, 185, 98, 100);
+			color: rgba(255, 255, 255, 100);
+			font-size: 14px;
+			margin-left: 13px;
+		}
+		
+	}
 </style>