jp-51parking/pages/charge/chargeDetails.vue

<template>
	<view>
		<u-navbar title="充电详情">
		</u-navbar>
		<view class="chargeDetails">
			<view class="chargeDetails-item">
				<span>金额</span>
				<p class="price">{{isnull(detail.actualFee!=null?detail.actualFee:detail.estimateFee)}}元</p>
			</view>
			<view class="chargeDetails-item">
				<span>桩名</span>
				<p>{{detail.deviceName}}</p>
			</view>
			<view class="chargeDetails-item">
				<span>桩号</span>
				<p>{{detail.deviceNo}}</p>
			</view>
			<view class="chargeDetails-item">
				<span>充电通道</span>
				<p>{{detail.channelNo}}</p>
			</view>
			<view class="chargeDetails-item">
				<span>结束原因</span>
				<p>{{detail.remark}}</p>
			</view>
			<view class="chargeDetails-item">
				<span>开始时间</span>
				<p>{{detail.startTime}}</p>
			</view>
			<view class="chargeDetails-item">
				<span>结束时间</span>
				<p>{{detail.endTime}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	
	export default {
		data() {
			return {
				id:'',
				detail:{
					
				}
			}
		},
		onLoad(op){
			this.id=op.id;
			this.getInfo()
		},
		methods: {
			isnull(str){
				if(!str){
					return 0
				}else{
					return str
				}
			},
			getInfo(){
				uni.showLoading({
					title:"加载中",mask:true,
				})
				API.chargingDetail(this.id).then((res) => {
					this.detail=res.data.chargingRecord	 
					
					uni.hideLoading()
					 
				}).catch(error => {
						uni.showToast({
							
							title:error
						})
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.chargeDetails{
		background-color: #FFFFFF;
		.chargeDetails-item{
			margin:0 10px;
			border-bottom: 1px solid #F7F7F7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px;
		}
		span{
			color:#999;
		}
		.price{
			font-size: 20px;
			color:#FF3D00;
			font-weight: bold;
		}
	}
</style>