jp-charge/pagesFinance/user/chargingDetails.vue

<template>
	<view>
		<ujp-navbar title="充电价格详情"></ujp-navbar>
		<!-- 主体 -->
		<!-- 充电桩信息 -->
		<view class="main"> 
			<!-- 收费标准 -->
						 <view class="rates" v-if="prices&&prices.length">
							<view class="rates-title">
								<view class="title-left">
									收费标准
								</view>
								<view class="title-right">
									充电功率计费
								</view>
			
							</view> 
							<!-- 时段分类 -->
							 <view class="time-rates">
								
								<view class="time-part" v-for="(item,index) in prices" :key="index">
									<view class="part-top">
										<view class="time">
											{{item.minPower}}W-{{item.maxPower}}W
										</view>
										<view class="price">
			
											<text class="price-number">{{item.price}}</text>
											<text class="price-unit">元每小时</text>
										</view>
									</view>
									<!-- <view class="part-bottom">
										<view class="unitPrice-servicePrice">
											充电单价：￥{{item.costPrice}} | 服务费：￥{{item.servicePrice}}
										</view>
									</view> -->
								</view>
							 
			
							</view> 
			
						 </view>
					 </view>	
			<!-- 收费标准 -->
			<!-- <view class="rates" v-if="carPrices&&carPrices.length">
				<view class="rates-title">
					<view class="title-left">
						收费标准
					</view>
					<view class="title-right">
						峰谷平电价计费
					</view>

				</view> -->
				<!-- 时段分类 -->
				<!-- <view class="time-rates">
					
					<view class="time-part" v-for="(item,index) in carPrices" :key="index">
						<view class="part-top">
							<view class="time">
								{{item.startTime}}-{{item.endTime}}
							</view>
							<view class="price">

								<text class="price-number">{{item.electricityPrice.toFixed(2)}}</text>
								<text class="price-unit">元/度</text>
							</view>
						</view>
						<view class="part-bottom">
							<view class="unitPrice-servicePrice">
								充电单价：￥{{item.costPrice.toFixed(2)}} | 服务费：￥{{item.servicePrice.toFixed(2)}}
							</view>
						</view>
					</view>
				 
					<view style=" text-align: center;  color: #999999;">*充电费用仅供参考，请以充电桩上的费用为准。</view>

				</view> -->
			<!-- </view> -->
		<!-- </view> -->
		<view class="price-main"  v-if="carPrices&&carPrices.length" >
			<view class="price-item" v-for="(item,i) in carPrices" :key="i" >
						<view class="time " v-if="!item.current">
							{{item.startTime}}-{{item.endTime}}
						</view>
						<view class="time curent" v-if="item.current">
							{{item.startTime}}-{{item.endTime}} <view class="current-time">当前时段</view>
						</view>
						<view class="price">
							<text class="price-1"><text class="num">{{item.costPrice.toFixed(2)}}</text> <text >元/度</text></text> 
							<text class="price-2"   v-if="item.discountServicePrice"  >
								<text class="num">{{((item.servicePrice*1000+item.electricityPrice*1000)/1000).toFixed(2)}}元/度</text>
							</text>
						</view>
						<view class="else-price">
							<view class="electric-price">
								电费{{item.electricityPrice.toFixed(2)}}元/度
							</view>
							
							<view
							 v-if="item.discountServicePrice"
							
							 class="service-price">服务费{{item.discountServicePrice}}元/度(折前{{item.servicePrice.toFixed(2)}}元/度)</view>
							
							<view 
								 v-if="!item.discountServicePrice"
							class="service-price">服务费{{item.servicePrice}}元/度</view>
				
				</view>
					</view>
			 
			
			
			
		</view>
		<u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#F2F4F4">*充电费用仅供参考，请以充电桩上的费用为准。</u-divider>
	</view>


</template>
<script>
	var formatNum=function(num) {
		let res = Number(num);
		return res < 10 ? '0' + res : res;
	};
	import * as API from '@/apis/finance.js'

	export default {
		data() {
			return {
				id:'',
				carPrices: [],
				device: [],
				prices: null,
				description: '温馨提示：充电前请确保您的车辆已与充电桩连接！并关闭车内电源。'
			}
		},
		onLoad(op) {
			if(op){
				this.id=op.id
					this.getInfo()
			}
		},
		onReady() {
		
		},
		methods: {
			carPricesMethod(){
				
				let date = new Date();
				let hours = date.getHours();
				let minutes = date.getMinutes();
				let seconds = date.getSeconds();
				let date_str = formatNum(hours) + ':' + formatNum(minutes); //+ ' ' +formatWeek;
				for (var i in this.carPrices) {
					var obj = this.carPrices[i]
				
					if (date_str >= obj.startTime && date_str <= obj.endTime) {
						obj.current = true;
					}
				
				}
				
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.priceList({
					deviceNo:this.id
				}).then((res) => {
				
					this.carPrices=res.data.carPrices
					this.device=res.data.device
					this.prices=res.data.prices
					if(this.carPrices){
						this.carPricesMethod();
					}
					
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			}
		}
	}
</script>


<style lang="scss">
	page{
		background-color: #F2F4F4;  
	}
	// 头部
	.title {
		width: 100%;
		line-height: 44px;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		border: 1px solid rgba(242, 242, 242, 100);
		position: fixed;
		top: 0;

	}
	.title-left,.title-right{
			font-size: 18px;
	}
	
	// 主体
	.main {
		width: 100%;

		//margin-top: 44px;
		// margin-bottom: 64px;
		//padding-bottom: 234px;
		.main-detail {
			display: flex;
			justify-content: space-between;
			padding: 14px 16px 0 0;
			height: 48px;
			line-height: 48px;
			background-color: #fff;
			border-bottom: 1px solid rgba(242, 242, 242, 100);

			.detail-name {
				margin-left: 16px;
				height: 20px;
				line-height: 23px;
				color: rgba(102, 102, 102, 100);
				font-size: 14px;

			}

			.detail-content {
				height: 23px;
				line-height: 23px;
				color: rgba(51, 51, 51, 100);
				font-size: 14px;

			}
		}

		// 收费标准
		.rates {
			width: 100%;
			background-color: #fff;
			margin-top: 12px;

			.rates-title {
				display: flex;
				justify-content: space-between;
				height: 48px;
				line-height: 48px;
				padding: 0px 16px 0;
				border-bottom: 1px solid rgba(242, 242, 242, 100);
			}

			.time-part {
				width: 100%;

				.part-top {
					display: flex;
					justify-content: space-between;
					padding: 16px;

					.time {
						font-weight: bold;
						color: rgba(16, 16, 16, 100);
						font-size: 18px;
					}

					.price {
						.price-number {
							color: rgba(255, 61, 0, 100);
							font-size: 24px;
							text-align: right;
							font-family: Roboto-regular;
							display: inline-block;
							height: 20px;
							font-weight: 600;
						}

						.price-unit {
							color: rgba(102, 102, 102, 100);
							font-size: 16px;
							text-align: right;
							margin-left: 4px;
							display: inline-block;
							height: 20px;
						}
					}
				}

				.part-bottom {
					.unitPrice-servicePrice {
						eight: 18px;
						color: rgba(136, 136, 136, 100);
						font-size: 18px;
						text-align: right;
						padding-right: 16px;
						padding-bottom: 18px;
					}
				}
			}
		}

		.tips {

			font-size: 12px;
			margin-top: 24px;

			/deep/.u-alert-desc[data-v-4d234687] {
				font-size: 12px
			}
		}
	}

	// 尾部
	.bottom {
		background-color: #fff;
		 
		width: 100%;
		height: 64px;
		line-height: 64px;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		padding: 12px 16px;

		.botton {
			width: 343px;
			height: 40px;
			line-height: 40px;
			border-radius: 50px;
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 16px;
			text-align: center;
			margin: 0 auto;
		}

	}// 价格详情
		.price-main{
			background-color: #fff;
			.price-item{
				padding: 10px 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: 4px;
						padding:2px;
						position: absolute;
						top: 0;
					    right: 0;
						font-size: 14px;
						text-align: center;
					}
				}
				.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:  rgba(153, 153, 153, 100);
					
				}
			}
			
		}
</style>