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

<template>
	<view style="padding-bottom: 296rpx;">
		<u-navbar title="充电价格详情"></u-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 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>
						<view class="price">
							<text style="color: #ff3d00; font-size: 36rpx;">{{item.price.toFixed(2)}}</text>
							<text class="unit">元/度</text>
						</view>
					</view>
					<view class="unitPrice-serviceCharge">
						充电单价：￥{{item.single_price.toFixed(4)}} | 服务费：￥{{item.service_price.toFixed(4)}}
					</view>
				</view> 
			</view>
		</view>
	<view class="hint">
		*充电费用仅供参考，请以充电桩上的费用为准。
	</view>
	</view>
</template>

<script>
	import * as api from "@/apis/site.js"
	let _self;
	export default {
		data() {
			return {
				elderMode:false,
				list: [
			 	{
					name: '直流快充', 
				}, 
				{
					name: '交流慢充', 
				} ,
				{
					name: '交流慢充', 
				} ,
				{
					name: '交流慢充', 
				} ,
				{
					name: '交流慢充', 
				} 
				],
				items:[],
				current: 0
			}
		},
		onLoad(op){
			_self = this; 


			if(op!=null && op.stationId!=null){
				console.log('stationId'+JSON.stringify(op.stationId))
				let data = {stationId:op.stationId};
				api.getChargingStationPrice(data).then(function(res){
//					console.log('data'+JSON.stringify(res))
					if(res.result){
						let data = res.data;
						if(data.prices){
							console.log('data'+JSON.stringify(data.prices))
								
							_self.list = [];
							for(let i = 0;i< data.prices.length;i++){
								let _item = data.prices[i];
								let item = {name:data.prices[i].name,items:[]};
								for(let j = 0;j<_item.priceList.length;j++){
									let _subitem = _item.priceList[j];
									console.log('priceList'+JSON.stringify(_subitem))
									
									let subitem = {time:'00:00-07:00',single_price:0.5,service_price:0.25,price:0.75};
									subitem.time = _subitem.startTime + '-'+_subitem.endTime;
									subitem.single_price = _subitem.electricityPrice;
									subitem.service_price = _subitem.servicePrice;
									subitem.price = _subitem.costPrice;
									item.items.push(subitem);
								}
								_self.list.push(item);
							}
							if(_self.list.length>0){
								_self.change(0);
							}
							console.log('站点价格详情'+JSON.stringify(_self.list));
							
						}
					}
				})
			}

/*			api.getPriceDetails(op).then(function(res){
					_self.list = res;
 				},function(err){
					
				}
			);*/
		},
		onReady(){
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
		},
		methods: {
			change(index) {
				this.current = index;
				this.items = this.list[index].items;
			},
			theme(type) {
			  if(type == 'dark')	
			  {
				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";
	.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: 172rpx;
			}

		.time-frame {
			padding-left: 32rpx;

			.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);
						font-size: 32rpx;
					}

					.price {
						.unit {
							color: rgba(102, 102, 102, 100);
							font-size: 28rpx;
							margin-left: 8rpx;
						}
					}

				}

				.unitPrice-serviceCharge {
					float: right;
					font-size: 24rpx;
					color: #888888;
				}
			}
		}
	}
	.hint{
		width: 100%;
		text-align: center;
		color: #999999;
		font-size: 24rpx;
		position: absolute;
		bottom: 24rpx;
		left: 0;
		
		}
		
		.tabs-box{
			width: 90% !important;
		}
</style>