JP-ChargeTeam51/pages/searchPile/stationAndPile/chargePriceDetails.vue

<template>
	<view style="padding-bottom: 296rpx;">
		<ujp-navbar title="充电价格详情"></ujp-navbar>
		<view class="main" >
			<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 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="unitPrice-serviceCharge">
							充电单价：{{item.single_price.toFixed(2)}}元 | 服务费：{{item.service_price.toFixed(2)}}元
						</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">
		*充电费用仅供参考，请以充电桩上的费用为准。
	</view>
	</view>
</template>

<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 {
				id:"",
				type:"",
				elderMode:false,
				list:[],
				items:[],
				current: 0
			}
		},
		onLoad(op){
			_self = this; 
			if(op.type){
				this.type=op.type;
			}
			if(op.id){
				this.id=op.id;
			}
			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){
				//('stationId'+JSON.stringify(op.stationId))
				let data = {stationId:op.stationId};
				api.getChargingStationPrice(data).then(function(res){
//					//('data'+JSON.stringify(res))
					if(res.result){
						let data = res.data;
						if(data.prices){
							//('data'+JSON.stringify(data.prices))
								
							_self.list = [];
							for(let i = 0;i< data.prices.length;i++){
								let _item = data.prices[i];
								if(_self.id){
									
									if(_item.id==_self.type){
										_self.current=i;
									}
								}else{
									if(_item.type==_self.type){
										if(_self.current==0){
											_self.current=i;
										}
									}
								}
								
								let item = {name:data.prices[i].name,items:[]};
								for(let j = 0;j<_item.priceList.length;j++){
									let _subitem = _item.priceList[j];
									//('priceList'+JSON.stringify(_subitem))
									
									let subitem = {time:'00:00-07:00',single_price:0,service_price:0,price:0};
									subitem.time = _subitem.startTime + '-'+_subitem.endTime;
									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);
							}
							if(_self.list.length>0){
								_self.change(_self.current);
							}
							//('站点价格详情'+JSON.stringify(_self.list));
							
						}
					}
				})
			}

/*			api.getPriceDetails(op).then(function(res){
					_self.list = res;
 				},function(err){
					
				}
			);*/
		},		
		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;
			//('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);
//					//('start time ' +JSON.stringify())
//					//('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) {
				this.current = index;
				this.items = this.list[index].items;
			},
			theme(type) {
			  if(type == 'elder')	
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				  
			  }
			  else
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				  
			  } 
			}
		}
	}
</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;
       
		.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;
				}
			}
		}
	}
	.hint{
		width: 100%;
		text-align: center;
		color: #999999;
		@include themeify{
			font-size:themed('font-size1'); 
		}
/*		font-size: 24rpx;*/
		position: absolute;
		bottom: 24rpx;
		left: 0;
		
		}
		
		.tabs-box{
			width: 90% !important;
		}
</style>