价格详情

pages/searchPile/stationAndPile/stationDetails.vue

@@ -1,5 +1,5 @@
 <template>
-	<view style="padding-bottom: 138px;">
+	<view style="padding-bottom: 28px;">
 		<ujp-navbar title="站点详情">
 		<!-- 	<view class="iconfont qr-code">
 				&#xe61a;
@@ -180,15 +180,47 @@
 			'elderMode':elderMode
 		}"
 		v-show="current==1" >
-			<u-cell-group>
+			<!-- <u-cell-group>
 				<u-cell-item
-				 v-for="(item,i) in stationDetail.priceList" :key="i"
+				
 				 @click="priceDetail(1,item.deviceId)"  :title="item.deviceName" :label="'当前时段：'+item.startTime+'~'+item.endTime+'  '+item.costPrice+'元/度(含电费'+item.electricityPrice+'元/度+服务费'+item.servicePrice+'元/度'"></u-cell-item>
 			
  					<u-cell-item :arrow="false" v-if="false" title="停车费用" value="充电免停2小时停车费(临牌车不享受免停)"></u-cell-item>
-				</u-cell-group>
+				</u-cell-group> -->
+				<view class="main">
+					
+			
+				
+					<view style="width: 100%;">
+						<view ><u-line color="#999999" /></view>
+						<view  class="time-frame"  v-for="(item,i) in pricesInfo" :key="i">
+							<view class="time-items">
+								<view class="time-price">
+									<view class="time">
+										{{item.startTime}}-{{item.endTime}}
+									</view>
+									<view class="price">
+										<text  class="price-text">{{item.costPrice.toFixed(2)}}</text>
+										<text class="unit">元/度</text>
+									</view>
+								</view>
+								<view class="unitPrice-serviceCharge">
+								充电单价：{{item.electricityPrice.toFixed(2)}}元 | 服务费：{{item.servicePrice.toFixed(2)}}元
+								</view>
+								<view v-if="item.current" class="product_tip">
+									<view class="product_tip_bg"></view>
+									<p>当前</p>
+								</view>
+							</view> 
+						</view>
+						
+					</view>
+				</view>
+				
 			
 		</view>
+		<u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#f4f0f0">已经到底了</u-divider>
+		
 		<!-- 弹窗 -->
 		<view>
 			<u-modal v-model="show"   confirm-text="去看空闲桩" cancel-text="查看处罚规则"
@@ -222,7 +254,8 @@
  
 		data() {
 			return {
-				
+				pricesInfo:[],
+				devicesId:'',
 				elderMode:false,
 				userId:'',
 				show:false,
@@ -260,8 +293,7 @@
 						address:'湖北省荆州市沙市区江津东路附155号'*/
 					},
 					prices: [
-							{name:'慢充',price:1.20,time:'00:00:00 ~ 23:59.59'},
-							{name:'快充',price:1.20,time:'00:00:00 ~ 23:59.59'},
+							
 						]	 ,
 					park:{ 
 						price:'2小时免费停车'
@@ -288,6 +320,7 @@
 				if(op.id != null && op.id != undefined){ 
 						
 					let data = {stationId:op.id};
+					this.getPriceList(op.id)
 						//if(station.distance != null)
 						//	_self.stationDetail.station.distance = station.distance;
 						////('station'+JSON.stringify(station))
@@ -545,9 +578,43 @@
 					})
 				}
 			},
+			getPriceList(id){
+				var formatNum=function(num) {
+					let res = Number(num);
+					return res < 10 ? '0' + res : res;
+				};
+				let data = {stationId:id};
+				api.getChargingStationPrice(data).then((res)=>{
+					
+					if(res.data.prices.length){
+						
+						let date = new Date();
+						let hours = date.getHours();
+						let minutes = date.getMinutes();
+						let seconds = date.getSeconds();
+						let date_str =  formatNum(hours)+ ':'+ formatNum(minutes);//+ ' ' +formatWeek;
+						
+						
+						this.pricesInfo=res.data.prices[0].priceList
+						console.log(this.pricesInfo)
+						
+						for(var i in this.pricesInfo ){
+							var obj=this.pricesInfo[i]
+							
+							if(date_str>=obj.startTime &&  date_str<= obj.endTime)
+							{
+								obj.current = true;										
+							}
+							
+						}
+					}
+					
+				})
+			},
 			processStationsInfo(){
 				for(let i = 0;i <_self.stationDetail.devices.length;i++){
 					
+					 
 					
 					for(let j = 0;j < _self.stationDetail.devices[i].gunList.length;j++){
 						////('j'+JSON.stringify(_self.stationDetail.devices[i].gunList[j]))
@@ -1269,6 +1336,108 @@
 	/deep/.u-model__content__message{
 		line-height: 22px;
 	}
+	
+	
+	.main {
+			background-color: #fff;
+	       
+			.tabs-box {
+				width: 55%;
+				height: 88rpx;
+				margin: 0 auto;
+				// line-height: 44px;
+				position: relative;
+			}
+				.line-box{
+					width: 100%;
+					height: 88rpx;
+					position: absolute;
+					top: 145rpx;
+	 			}
+	
+			.time-frame {
+				padding-left: 32rpx;
+	/*			position: absolute;
+				top:260rpx;
+		*/		
+				.time-items {
+					padding-right: 32rpx;
+					height: 152rpx;
+					border-bottom: #F2F4F4 2rpx solid;
+	                  position: relative;
+					.time-price {
+						display: flex;
+						justify-content: space-between;
+						padding: 32rpx 0 20rpx;
+	
+						.time {
+							color: rgba(16, 16, 16, 100);
+							@include themeify{
+								font-size:themed('font-size3'); 
+							}
+	/*						font-size: 32rpx;*/
+						}
+	
+						.price {
+							.price-text{
+								color: #ff3d00; 
+								@include themeify{
+									font-size:themed('font-size4'); 
+								}
+	/*							font-size: 36rpx;*/
+							}
+							.unit {
+								color: rgba(102, 102, 102, 100);
+								@include themeify{
+									font-size:themed('font-size2'); 
+								}
+	/*							font-size: 28rpx;*/
+								margin-left: 8rpx;
+							}
+						}
+	
+					}
+	
+					.unitPrice-serviceCharge {
+						float: right;
+						@include themeify{
+							font-size:themed('font-size1'); 
+						}
+	/*					font-size: 24rpx;*/
+						color: #888888;
+					}
+				}
+			}
+		}
+		
+		
+		.product_tip{
+		  position: absolute;
+		  top: 0;
+		  right: 0;
+		  width: 55rpx;
+		  height: 55rpx;
+		  text-align: right;
+		  p{
+		    font-size: 24rpx;
+		    color: #ffffff;
+		    transform: rotate(45deg);
+		    position: relative;
+		    top: 0rpx;
+		    right: 0rpx;
+		  }
+		  .product_tip_bg{
+		    width: 0;
+		    height: 0;
+		    border-bottom: 44rpx solid #FD662A;
+		    border-right: 44rpx solid transparent;
+		    border-left: 44rpx solid transparent;
+		    transform: rotate(45deg);
+		    position: absolute;
+		    top: -7rpx;
+		    right: -29rpx;
+		  }
+		}
 </style>