当前价格详情

pages/searchPile/stationAndPile/chargePriceDetails.vue

@@ -6,23 +6,31 @@
 				<u-tabs  inactive-color="#888888" active-color="#101010" :list="list" :is-scroll="true"
       					:current="current" @change="change"></u-tabs>
 			</view>
-			<view class="line-box"><u-line color="#999999" /></view>
-			<view  class="time-frame" v-for="(item,index) in items" :key="index">
-				<view class="time-items">
-					<view class="time-price">
-						<view class="time">
-							{{item.time}}
+			<view style="width: 100%;">
+				<view ><u-line color="#999999" /></view>
+				<view  class="time-frame" v-for="(item,index) in items" :key="index">
+					<view class="time-items">
+						<view class="time-price">
+							<view class="time">
+								{{item.time}}
+							</view>
+							<view class="price">
+								<text  class="price-text">{{item.price.toFixed(2)}}</text>
+								<text class="unit">元/度</text>
+							</view>
 						</view>
-						<view class="price">
-							<text  class="price-text">{{item.price.toFixed(2)}}</text>
-							<text class="unit">元/度</text>
+						<view class="unitPrice-serviceCharge">
+							充电单价：{{item.single_price.toFixed(2)}}元 | 服务费：{{item.service_price.toFixed(2)}}元
 						</view>
-					</view>
-					<view class="unitPrice-serviceCharge">
-						充电单价：{{item.single_price.toFixed(2)}}元 | 服务费：{{item.service_price.toFixed(2)}}元
-					</view>
-				</view> 
+						<view v-if="item.current" class="product_tip">
+							<view class="product_tip_bg"></view>
+							<p>当前</p>
+						</view>
+					</view> 
+				</view>
+				
 			</view>
+<!--			<view class="line-box"><u-line color="#999999" /></view>-->
 		</view>
 	<view class="hint">
 		*充电费用仅供参考，请以充电桩上的费用为准。
@@ -33,27 +41,16 @@
 <script>
 	import * as api from "@/apis/site.js"
 	let _self;
+	var formatNum=function(num) {
+		let res = Number(num);
+		return res < 10 ? '0' + res : res;
+	};
+	
 	export default {
 		data() {
 			return {
 				elderMode:false,
-				list: [
-			 	{
-					name: '直流快充', 
-				}, 
-				{
-					name: '交流慢充', 
-				} ,
-				{
-					name: '交流慢充', 
-				} ,
-				{
-					name: '交流慢充', 
-				} ,
-				{
-					name: '交流慢充', 
-				} 
-				],
+				list: [{"name":"7KW交流充电桩","items":[{"time":"00:00-07:00","single_price":0.75,"service_price":0.39,"price":1.14},{"time":"07:00-09:00","single_price":0.75,"service_price":0.51,"price":1.26},{"time":"09:00-15:00","single_price":10,"service_price":5,"price":15},{"time":"15:00-24:00","single_price":12,"service_price":8,"price":20}]},{"name":"直流汽车充电桩01","items":[{"time":"00:00-07:00","single_price":0.51,"service_price":1.1,"price":1.61},{"time":"07:00-22:00","single_price":1,"service_price":1.2,"price":2.2}]},{"name":"W4702-80KW双枪直流桩","items":[{"time":"00:00-07:00","single_price":0.75,"service_price":0.39,"price":1.14},{"time":"07:00-09:00","single_price":0.75,"service_price":0.51,"price":1.26},{"time":"09:00-15:00","single_price":0.75,"service_price":0.7,"price":1.45},{"time":"15:00-20:00","single_price":0.75,"service_price":0.51,"price":1.26},{"time":"20:00-22:00","single_price":0.75,"service_price":0.7,"price":1.45},{"time":"22:00-23:00","single_price":0.75,"service_price":0.51,"price":1.26},{"time":"23:00-24:00","single_price":0.75,"service_price":0.39,"price":1.14}]},{"name":"双枪直流桩","items":[{"time":"00:00-07:00","single_price":0.5,"service_price":1.1,"price":1.6},{"time":"07:00-20:00","single_price":1,"service_price":1.2,"price":2.2}]}],
 				items:[],
 				current: 0
 			}
@@ -61,7 +58,12 @@
 		onLoad(op){
 			_self = this; 
 
-
+			let date = new Date();
+			let hours = date.getHours();
+			let minutes = date.getMinutes();
+			let seconds = date.getSeconds();
+			let date_str =  formatNum(hours)+ ':'+ formatNum(minutes);//+ ' ' +formatWeek;
+			
 			if(op!=null && op.stationId!=null){
 				console.log('stationId'+JSON.stringify(op.stationId))
 				let data = {stationId:op.stationId};
@@ -85,6 +87,15 @@
 									subitem.single_price = _subitem.electricityPrice;
 									subitem.service_price = _subitem.servicePrice;
 									subitem.price = _subitem.costPrice;
+									subitem.current = false;			
+									let start_time = subitem.time.substr(0,5);
+									let end_time = subitem.time.substr(6,5);							
+									if(date_str>=start_time &&  date_str<= end_time)
+									{
+										subitem.current = true;										
+									}
+									subitem.startTime = _subitem.startTime;
+									subitem.endTime = _subitem.endTime;
 									item.items.push(subitem);
 								}
 								_self.list.push(item);
@@ -105,13 +116,34 @@
 					
 				}
 			);*/
-		},
+		},		
 		onReady(){
 			this.elderMode = this.carhelp.get('getElderModeClass') == '长辈模式';
 			if(this.elderMode)
 				this.theme('elder')
 			else
 				this.theme('standard')
+			
+			let date = new Date();
+			let hours = date.getHours();
+			let minutes = date.getMinutes();
+			let seconds = date.getSeconds();
+			let date_str =  formatNum(hours)+ ':'+ formatNum(minutes);//+ ' ' +formatWeek;
+			console.log('date_str'+JSON.stringify(date_str))
+			for(let i = 0;i< _self.list.length;i++)
+			{
+				for(let j = 0;j< _self.list[i].items.length;j++){
+					let start_time = _self.list[i].items[j].time.substr(0,5);
+					let end_time = _self.list[i].items[j].time.substr(6,5);
+//					console.log('start time ' +JSON.stringify())
+//					console.log('end time ' +JSON.stringify())
+					if(date_str< start_time)
+						continue;
+					if(date_str> end_time)
+						continue;
+					_self.list[i].items[j].current = true;
+  				}
+			}
 		},
 		methods: {
 			change(index) {
@@ -135,6 +167,35 @@
 </script>
 <style lang="scss" scoped> 
 	@import "@/_theme.scss";
+	
+	.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;
+	  }
+	}
+
 	.main {
 		background-color: #fff;
        
@@ -149,12 +210,14 @@
 				width: 100%;
 				height: 88rpx;
 				position: absolute;
-				top: 172rpx;
-			}
+				top: 145rpx;
+ 			}
 
 		.time-frame {
 			padding-left: 32rpx;
-
+/*			position: absolute;
+			top:260rpx;
+	*/		
 			.time-items {
 				padding-right: 32rpx;
 				height: 152rpx;

pages/searchPile/stationAndPile/stationDetails.vue

@@ -24,20 +24,34 @@
 				 <text class="item-text"> {{info.station.time}}</text>
 
 			</view>
-			<view class="station-address">
+			<view class="station-address" @click="map">
 				<img src="static/img/Frame 201.png" alt="">
 				<view class="address-text" >
 					{{stationDetail.station.address}}
 				</view>
-				<view class="iconfont address-font" @click="map">
-					&#xe60c;
+				<!--
+				<view class="address-font">
+					<view class="iconfont">
+						&#xe60c;
+					</view>
+					<view  class="view-map" >
+						查看地图
+					</view>
+				</view>
+-->
+
+				<view class="iconfont address-font" >
+						&#xe60c;
+						<label class="view-map" style="text-align: center;">查看地图</label>
 				</view>
+			
+				
 			</view>
 		</view> 
 		
 		<view class="price-details">
 			<view class="detail-title">
-				<view class="title-left font-weight5">价格详情</view>
+				<view class="title-left font-weight5">当前价格</view>
 				<view class="title-right" @click="priceDetail">
 					<view class="right-text">价格详情 </view>
 					<view class="iconfont right-font">&#xe600;</view>
@@ -548,27 +562,40 @@
 			}
 
 			.address-text {
-				height: 17px;
-				line-height: 17px;
+/*				height: 17px;
+				line-height: 17px;*/
 				position: absolute;
 				top: 12px;
 				left: 0;
 				@include themeify{
 					font-size: themed('font-size1');
+					line-height: themed('font-size4');
+					height: themed('font-size4');
 				}
 /*				font-size: 12px*/
 			}
-
+			
 			.address-font {
 				@include themeify{
 					font-size: themed('font-size9');
-				}
+/*					line-height: themed('font-size15');
+					height: themed('font-size15');*/
+ 				}
 /*				font-size: 28px;*/
 				color: #4e94ff;
 				position: absolute;
 				top: 0;
 				right: 0;
+ 				.view-map{
+					@include themeify{
+						font-size: themed('font-size1');
+/*						line-height: themed('font-size2');
+						height: themed('font-size2'); */
+					}
+				}
+				
 			}
+			
 		}
 	}