站点详情修改

pages/searchPile/stationAndPile/stationDetails.vue

@@ -52,7 +52,85 @@
 			</view>
 		</view> 
 		
-		<view v-if="stationDetail.station!=null" class="price-details">
+		<view class="tabs-box">
+			<u-tabs  inactive-color="#888888" active-color="#101010" :list="list" :is-scroll="true"
+					:current="current" @change="change"></u-tabs>
+		</view>
+		<view class="charging-gun" v-if="current==0">
+			<view class="item">
+				<view class="free">
+					空闲
+				</view>
+				<view class="info">
+					<view class="name">
+						1号直流桩/充电枪01
+					</view>
+					<view class="details">
+						<text style="color: #8161ff;margin-right:4px;">直流快充</text> |<text style="margin-left: 4px;">80kW</text>
+					</view>
+				</view>
+				<view class="tag">
+					<view class="tag-item">
+						预约
+					</view>
+					<view class="tag-item">
+						解锁
+					</view>
+				</view>
+			</view>
+			<view class="item">
+				<view class="free charging">
+					充电中
+				</view>
+				<view class="info">
+					<view class="name">
+						1号直流桩/充电枪01
+					</view>
+					<view class="details">
+						<text style="color: #8161ff;margin-right:4px;">直流快充</text> |<text style="margin-left: 4px;">80kW</text>
+					</view>
+				</view>
+				
+					<view class="persent">
+						88%
+					</view>
+				
+			</view>
+			
+			<view class="item">
+				<view class="free not-open">
+					暂不开放
+				</view>
+				<view class="info">
+					<view class="name">
+						1号直流桩/充电枪01
+					</view>
+					<view class="details">
+						<text style="color: #00b962;margin-right:4px;">交流慢充</text> |<text style="margin-left: 4px;">7kW</text>
+					</view>
+				</view>
+				<view class="tag">
+					<view class="tag-item not-open-tag">
+						预约
+					</view>
+					<view class="tag-item not-open-tag">
+						解锁
+					</view>
+				</view>
+			</view>
+			
+		</view>
+		
+		<view class="price-explain" v-if="current==1">
+			<u-cell-group>
+					<u-cell-item  title="充电价格" value="当前时段：08:00~10:00   1.28 元/度(含电费0.98元/度 + 服务费0.30元/度)"></u-cell-item>
+					<u-cell-item :arrow="false" title="停车费用" value="充电免停2小时停车费(临牌车不享受免停)"></u-cell-item>
+				</u-cell-group>
+			
+		</view>
+		
+		
+		<!-- <view v-if="stationDetail.station!=null" class="price-details">
 			<view class="detail-title">
 				<view class="title-left font-weight5">当前价格</view>
 				<view class="title-right" @click="priceDetail">
@@ -87,11 +165,11 @@
 				</view>
 				<!-- <view class="text3">
 					仅供参考，以停车场实际价格为准
-				</view> -->
+				</view> 
 			</view>
-		</view> 
+		</view> --> 
 		
-		<view v-if="stationDetail.station!=null" class="equipment-details">
+		<!-- <view v-if="stationDetail.station!=null" class="equipment-details">
 			<view class="title">
 				<view class="title-left ">
 					设备详情
@@ -155,12 +233,12 @@
 				</view>			
 			</view> 
 			
-		</view> 
+		</view> --> 
 		
-		<view class="bottom">
+	<!-- 	<view class="bottom">
 			<u-button class="button1" shape="circle" size="medium" @click="getScanCode()">扫码充电</u-button>
 			<u-button class="button2" shape="circle" size="medium" @click="navigate">导航</u-button>
-		</view>
+		</view> -->
 	</view>
 </template>
 
@@ -179,6 +257,10 @@
 			return {
 				elderMode:false,
 				userId:'',
+				list:[{"name":"充电桩(3)"},
+				{"name":"价格说明"}
+				],
+				current: 0,
 				currentPos:{
 /*						name:'荆鹏软件园充电站',
 						longitude: 112.28468,
@@ -334,6 +416,10 @@
 			 
 		},
 		methods:{
+			change(index) {
+				this.current = index;
+				this.items = this.list[index].items;
+			},
 			previewImage(img){
 				let imgs = [];
 				imgs.push(img);
@@ -1008,6 +1094,108 @@
 /*			font-size: 14px;*/
 		margin-left: 13px;
 	}
+	
+	.tabs-box {
+		width: 100%;
+        line-height: 87px;
+		border-bottom: 1px solid #7FDCB0;
+		margin-top: 12px;
+ /deep/.u-scroll-box{
+	 width: 53.6% !important;
+	 margin: 0 auto;
+	 // background-color: #4e94ff;
+	 display: flex;
+	 
+ }
+	}
+	.charging-gun{
+		background-color: #fff;
+		.item{
+			padding: 24px 0;
+			margin: 0 16px;
+			display: flex;
+			border-bottom: 1px solid rgba(238, 242, 240, 100);
+			.free{
+				width: 52px;
+				padding: 6px 4px;
+				
+				line-height: 20px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				background-color: rgba(228, 246, 234, 100);
+				color: rgba(0, 140, 74, 100);
+				border-radius: 8px;
+			}
+			.charging{
+				background-color: rgba(241, 241, 241, 100);
+				color: rgba(74, 74, 74, 100);
+			}
+			
+			.not-open{
+				background-color: rgba(255, 233, 233, 100);
+				color: rgba(255, 70, 70, 100);
+			}
+			.info{
+				margin-left: 8px;
+				.name{
+					width: 45vw;
+					line-height: 20px;
+					color: rgba(16, 16, 16, 100);
+					font-size: 18px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+				.details{
+					height: 16px;
+					margin-top: 8px;
+					font-size: 16px;
+				}
+			}
+			.tag{
+				display: flex;
+				justify-content: space-around;
+				align-items: center;
+				margin-left:4px;
+				.tag-item{
+					width: 48px;
+					height: 24px;
+					line-height:24px;
+					border-radius: 50px;
+					background-color: rgba(0, 185, 98, 100);
+					color: rgba(255, 255, 255, 100);
+					text-align: center;
+					margin-left: 8px;
+				}
+				.not-open-tag{
+					background-color: rgba(192, 196, 208, 100);
+				}
+				
+			}
+			.persent{
+				line-height: 52px;
+				font-size: 20px;
+				flex: 1;
+				text-align: right;
+				
+			}
+		}
+		
+	}
+	/deep/.u-tab-bar{
+		height: 4px !important;
+		background-color: palegreen !important;
+		width: 50px !important;
+		left: -15px !important;
+		bottom: -5px !important;
+		
+	}
+	/deep/.u-cell__value{
+		text-align: left;
+		margin-left: 12px;
+		color: #101010;
+	}
 </style>