jp-51parking/pagesFinance/user/chargingDetails.vue

<template>
	<view>
		<u-navbar title="充电价格详情"></u-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 style="
			    text-align: center;
			    color: #999999;
			">*充电费用仅供参考，请以充电桩上的费用为准。</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}}</text>
								<text class="price-unit">元/度</text>
							</view>
						</view>
						<view class="part-bottom">
							<view class="unitPrice-servicePrice">
								充电单价：￥{{item.costPrice}} | 服务费：￥{{item.servicePrice}}
							</view>
						</view>
					</view>
				 
					<view style="
    text-align: center;
    color: #999999;
">*充电费用仅供参考，请以充电桩上的费用为准。</view>

				</view>

			</view>


		</view>
		<!-- 底部按钮 -->

	</view>


</template>
<script>
	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: {
			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
				
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			}
		}
	}
</script>


<style lang="scss">
	// 头部
	.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;
		}

	}
</style>