站点详情，价格说明标签页下的页面布局重新设计

pages/searchPile/stationAndPile/stationDetails.vue

@@ -256,7 +256,7 @@
 			
  					<u-cell-item :arrow="false" v-if="false" title="停车费用" value="充电免停2小时停车费(临牌车不享受免停)"></u-cell-item>
 				</u-cell-group>111zkx -->
-			<view class="main">
+			<!-- <view class="main">
 				<view style="width: 100%;">
 					<view>
 						<u-line color="#999999" />
@@ -286,73 +286,35 @@
 					</view>
 
 				</view>
-			</view>
-			<!-- <view class="price-main">
-				<view class="price-item">
-					<view class="time">
-						00.00-07:00
-					</view>
-					<view class="price">
-						<text class="price-1"><text class="num">0.85</text> <text >元/度</text></text> <text class="price-2"><text class="num">0.87</text>元/度</text>
-					</view>
-					<view class="else-price">
-						<view class="electric-price">
-							电费 0.76元/度
-						</view>
-						<view class="service-price">服务费 0.09元/度(折前0.11元/度)</view>
-					</view>
-				</view>
-				<view class="price-item">
-					<view class="time curent">
-						09:00-11:00  <view class="current-time">当前时段</view>
-					</view>
-					<view class="price">
-						<text class="price-1"><text class="num">1.13</text> <text >元/度</text></text> <text class="price-2"><text class="num">0.87</text>元/度</text>
-					</view>
-					<view class="else-price">
-						<view class="electric-price">
-							电费 0.76元/度
-						</view>
-						<view class="service-price">服务费 0.09元/度(折前0.11元/度)</view>
-					</view>
-				</view>
-				<view class="price-item">
-					<view class="time">
-						00.00-07:00
-					</view>
-					<view class="price">
-						<text class="price-1"><text class="num">1.21</text> <text >元/度</text></text> <text class="price-2"><text class="num">0.87</text>元/度</text>
-					</view>
-					<view class="else-price">
-						<view class="electric-price">
-							电费 0.76元/度
-						</view>
-						<view class="service-price">服务费 0.09元/度(折前0.11元/度)</view>
+			</view> -->
+			<view class="price-main">
+				<view class="price-item" v-for="(item,i) in pricesInfo" :key="i">
+					<view class="time "v-if="!item.current">
+						{{item.startTime}}-{{item.endTime}}
 					</view>
-				</view>
-				<view class="price-item">
-					<view class="time ">
-						00.00-07:00
+					<view class="time curent" v-if="item.current">
+						{{item.startTime}}-{{item.endTime}} <view class="current-time">当前时段</view>
 					</view>
 					<view class="price">
-						<text class="price-1"><text class="num">1.35</text> <text >元/度</text></text> <text class="price-2"><text class="num">0.87</text>元/度</text>
+						<text class="price-1"><text class="num">{{item.costPrice.toFixed(2)}}</text> <text >元/度</text></text> <text class="price-2"><text class="num">0.87元/度</text></text>
 					</view>
 					<view class="else-price">
 						<view class="electric-price">
-							电费 0.76元/度
+							电费 {{item.electricityPrice.toFixed(2)}}元/度
 						</view>
-						<view class="service-price">服务费 0.09元/度(折前0.11元/度)</view>
+						<view class="service-price">服务费{{item.discountServicePrice}}元/度(折前{{item.servicePrice.toFixed(2)}}元/度)</view>
 					</view>
 				</view>
 				
 				
-			</view> -->
+				
+			</view>
 
 
 		</view>
-		<u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#F2F4F4">已经到底了</u-divider>
+		<u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#F2F4F4">*充电费用仅供参考，请以充电桩上的费用为准</u-divider>
 
-		<!-- 弹窗 -->
+		 <!-- 弹窗 -->
 		<view>
 			<u-modal v-model="show" confirm-text="去看空闲桩" cancel-text="查看处罚规则" confirm-color="#00B962">
 				<view class="" style="padding: 15px 20px;">
@@ -1731,60 +1693,62 @@
 		}
 	}
 // 价格详情
-// .price-main{
-// 	background-color: #fff;
-// 	.price-item{
-// 		padding: 10px 20px 10px 0;
-// 		margin-left: 20px;
-// 		border-bottom:rgb(238, 242, 240) solid 1px;
-// 		.time{
-// 			color: #27bfa1;
-// 			font-size: 16px
-// 		}
-// 		.curent{
-// 			position: relative;
-// 			color: #ff8b17;
-// 			.current-time{
-// 				background-color: #ffecdd;
-// 				width: 88px;
-// 				line-height: 20px;
-// 				border-radius: 8px;
-// 				padding:2px;
-// 				position: absolute;
-// 				top: 0;
-// 			    right: 0;
-// 				text-align: center;
-// 			}
-// 		}
-// 		.price{
-// 			color: #101010;
+.price-main{
+	background-color: #fff;
+	.price-item{
+		padding: 10px 20px 10px 0;
+		margin-left: 20px;
+		border-bottom:rgb(238, 242, 240) solid 1px;
+		.time{
+			color: #27bfa1;
+			font-size: 16px;
+			position: relative;
+			
+		}
+		.curent{
+			position: relative;
+			color: #ff8b17;
+			.current-time{
+				background-color: #ffecdd;
+				width: 88px;
+				line-height: 20px;
+				border-radius: 8px;
+				padding:2px;
+				position: absolute;
+				top: 0;
+			    right: 0;
+				text-align: center;
+			}
+		}
+		.price{
+			color: #101010;
 			
-// 			.price-1{
+			.price-1{
 				
 				
-// 				.num{
-// 					font-size: 30px;
-// 					font-weight: 550;
-// 					margin-right: 4px;
-// 				}
-// 			}
-// 			.price-2{
-// 				margin-left: 8px;
-// 				text-decoration: line-through;
-// 				.num{
-// 					margin-right: 4px;
-// 				}
-// 			}
-// 		}
-// 		.else-price{
+				.num{
+					font-size: 30px;
+					font-weight: 550;
+					margin-right: 4px;
+				}
+			}
+			.price-2{
+				margin-left: 8px;
+				text-decoration: line-through;
+				.num{
+					margin-right: 4px;
+				}
+			}
+		}
+		.else-price{
 			
-// 			display: flex;
-// 			justify-content: space-between;
-// 			color: #c2a5b2;
-// 			font-size: 12px
-// 		}
-// 	}
+			display: flex;
+			justify-content: space-between;
+			color: #c2a5b2;
+			font-size: 12px
+		}
+	}
 	
-// }
+}
 
 </style>