充电价格详情页面

pagesFinance/user/chargingDetails.vue

@@ -1,12 +1,11 @@
 <template>
 	<view>
 		<u-navbar title="充电价格详情"></u-navbar>
-
 		<!-- 主体 -->
 		<!-- 充电桩信息 -->
-		<view class="main">
+		<!-- <<view class="main"> -->
 			<!-- 收费标准 -->
-						<view class="rates" v-if="prices&&prices.length">
+						<!-- <view class="rates" v-if="prices&&prices.length">
 							<view class="rates-title">
 								<view class="title-left">
 									收费标准
@@ -15,9 +14,9 @@
 									充电功率计费
 								</view>
 			
-							</view>
+							</view> -->
 							<!-- 时段分类 -->
-							<view class="time-rates">
+							<!-- <view class="time-rates">
 								
 								<view class="time-part" v-for="(item,index) in prices" :key="index">
 									<view class="part-top">
@@ -35,19 +34,16 @@
 											充电单价：￥{{item.costPrice}} | 服务费：￥{{item.servicePrice}}
 										</view>
 									</view> -->
-								</view>
+								<!-- </view>
 							 
-								<view style="
-			    text-align: center;
-			    color: #999999;
-			">*充电费用仅供参考，请以充电桩上的费用为准。</view>
+								<view style="text-align: center;  color: #999999;">*充电费用仅供参考，请以充电桩上的费用为准。</view>
 			
-							</view>
+							</view> --> 
 			
-						</view>
+						<!-- </view> -->
 						
 			<!-- 收费标准 -->
-			<view class="rates" v-if="carPrices&&carPrices.length">
+			<!-- <view class="rates" v-if="carPrices&&carPrices.length">
 				<view class="rates-title">
 					<view class="title-left">
 						收费标准
@@ -56,9 +52,9 @@
 						峰谷平电价计费
 					</view>
 
-				</view>
+				</view> -->
 				<!-- 时段分类 -->
-				<view class="time-rates">
+				<!-- <view class="time-rates">
 					
 					<view class="time-part" v-for="(item,index) in carPrices" :key="index">
 						<view class="part-top">
@@ -67,35 +63,58 @@
 							</view>
 							<view class="price">
 
-								<text class="price-number">{{item.costPrice.toFixed(2)}}</text>
+								<text class="price-number">{{item.electricityPrice.toFixed(2)}}</text>
 								<text class="price-unit">元/度</text>
 							</view>
 						</view>
 						<view class="part-bottom">
-							<view class="unitPrice-servicePrice" v-if="!item.discountServicePrice" >
-								充电单价：￥{{item.electricityPrice.toFixed(2)}} | 服务费：￥{{item.servicePrice.toFixed(2)}}
-							</view>
-							
-							 <view class="unitPrice-servicePrice2" v-if="item.discountServicePrice">
-								充电单价：{{item.electricityPrice.toFixed(2)}}元 | 服务费：折后{{item.discountServicePrice}}元(折前{{item.servicePrice.toFixed(2)}}元)	
-							</view>
-							
+							<view class="unitPrice-servicePrice">
+								充电单价：￥{{item.costPrice.toFixed(2)}} | 服务费：￥{{item.servicePrice.toFixed(2)}}
+							</view>
 						</view>
 					</view>
 				 
-					<view style="
-    text-align: center;
-    color: #999999;
-">*充电费用仅供参考，请以充电桩上的费用为准。</view>
-
+					<view style=" text-align: center;  color: #999999;">*充电费用仅供参考，请以充电桩上的费用为准。</view>
+
+				</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.37元/度(折前0.44元/度)</view>
 				</view>
-
 			</view>
-
-
+			<view class="price-item" >
+				<view class="time curent" >
+					09:00-15:00 <view class="current-time">当前时段</view>
+				</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.37元/度(折前0.44元/度)</view>
+				</view>
+			</view>
+			
+			
+			
 		</view>
-		<!-- 底部按钮 -->
-
+<u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#F2F4F4">*充电费用仅供参考，请以充电桩上的费用为准。</u-divider>
 	</view>
 
 
@@ -150,6 +169,9 @@
 
 
 <style lang="scss">
+	page{
+		background-color: #F2F4F4;  
+	}
 	// 头部
 	.title {
 		width: 100%;
@@ -258,14 +280,6 @@
 						text-align: right;
 						padding-right: 16px;
 						padding-bottom: 18px;
-					}
-					.unitPrice-servicePrice2 {
-						eight: 18px;
-						color: rgba(136, 136, 136, 100);
-						font-size: 32rpx;
-						text-align: right;
-					
-						padding-bottom: 18px;
 					}
 				}
 			}
@@ -308,4 +322,62 @@
 		}
 
 	}
+	.price-main{
+		background-color: #fff;
+		.price-item{
+			padding: 14px 20px 10px 0;
+			margin-left: 20px;
+			border-bottom:rgb(238, 242, 240) solid 1px;
+			.time{
+				color: #00b962;
+				font-size: 18px;
+				position: relative;
+				
+			}
+			.curent{
+				position: relative;
+				color: #ff8b17;
+				.current-time{
+					background-color: #ffecdd;
+					width: 72px;
+					line-height: 20px;
+					border-radius: 8px;
+					padding:2px;
+					position: absolute;
+					top: 0;
+				    right: 0;
+					text-align: center;
+					font-size: 14px
+				}
+			}
+			.price{
+				color: #101010;
+				font-size: 16px;
+				
+				.price-1{
+					
+					
+					.num{
+						font-size: 28px;
+						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;
+			}
+		}
+		
+	}
 </style>