jp-charge/pagesFinance/coupon/details.vue

<template>
	<view>
		<ujp-navbar> 优惠券详情</ujp-navbar>



		<view class="details">
			<view class="details-title">
				<h4>优惠券明细</h4>
			</view>

			<view class="details-row" >
				<p>优惠券类型</p>
				<span>免费停车优惠券</span>
			</view>
			<view class="details-row">
				<p>免费停电时长</p>
				<span>
					{{parkingCoupon.freeMinute?minuteConversion(parkingCoupon.freeMinute,1):''}}
					
				</span>
			</view>
			<view class="details-row">
				<p>开始充电时间</p><span>{{chargingRecord.startTime?chargingRecord.startTime:chargingRecord.endTime}}</span>
			</view>
			<view class="details-row">
				<p>结束充电时间</p><span>{{chargingRecord.endTime}}</span>
			</view>
	

			<view class="details-row" >
				<p>订单编号</p>
				<span>{{chargingRecord.flowNo}}</span>
			</view>


			<view v-for="(item,i) in chargeDetails" :key="i" v-if="detail.deviceType!=0">
				<view class="details-row" style=" margin-top: 18px;">
					<p>区间充电量({{item.startTime}}-{{item.endTime}})</p>

					<span v-if="item.fixKwh&&item.kwh">{{(item.kwh+item.fixKwh).toFixed(2) }}度</span>
					<span v-else>{{item.kwh.toFixed(2) }}度</span>

				</view>

		</view>

</view>


		<view class="details">
			<view class="details-title">
				<h4>更多信息</h4>
			</view>

			<view class="details-row">
				<p>车牌号</p><span>{{chargingRecord.carNumber?chargingRecord.carNumber:'未填写'}}</span>
			</view>
			<view class="details-row">
				<p>用户姓名</p><span>{{chargingUser.nickName}}</span>
			</view>
			<view class="details-row">
				<p>联系方式</p><span>{{chargingUser.phone}}</span>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import * as API from '@/apis/coupon.js'
	import {
		minuteConversion
	} from '@/utils'
	export default {
		data() {
			return {
				chargeDetails: [],
				id: '',
				sprList: [

				],
				detail: {

				},
				options0: [

					{
						label: '自行车充电',
						value: 0,
					},
					{
						label: '直流快充',
						value: 1,
					},
					{
						label: '交流慢充',
						value: 2,
					}

				],
				title: "",
				parkingCoupon: {},
				chargingUser: {},
				chargingRecord: {},
				couponObj: null,
			}
		},
		onLoad(op) {



			this.id = op.id;
			this.getInfo()
		},
		methods: {
			minuteConversion(a,b){
				return minuteConversion(a,b)
			},
			getPercent(estimateMinute) {
				var value = "";

				var ms = estimateMinute
				if (ms > 0) {
					var Hour = parseInt(Math.floor(ms / 60));
					var Fen = parseInt(Math.floor(ms % 60));

					if (Hour) {
						value += Hour + "小时"
					}

					if (Fen) {
						value += Fen + "分钟"
					}
				} else {
					value = "0分钟"
				}

				return value;
			},
			back() {
				uni.navigateBack({

				})
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.couponDetails({
					id: this.id
				}).then((res) => {
					this.chargingRecord = res.data.chargingRecord
					this.chargingUser = res.data.chargingUser
					this.parkingCoupon = res.data.parkingCoupon


					uni.hideLoading()

				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.detailsBtn {
		margin: 16px;

		.detailsBtn-btn {
			border-color: #185AC6 !important;
			border-radius: 8px !important;
			background: none !important;
			color: #185AC6 !important;
		}
	}

	.details-title {
		margin-bottom: 16px;

		h4 {
			font-weight: normal;
			font-size: 16px;
			position: relative;
			padding-left: 10px;

			&::after {
				content: '';
				position: absolute;
				height: 12px;
				width: 4px;
				background-color: #27B148;
				left: 0;
				top: 5px;
			}
		}
	}

	.details-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;

		p {
			color: #37393c;
			font-weight: bold;
		}
	}

	.details {
		margin: 34rpx;
		padding: 34rpx;
		background-color: #fff;
		border-radius: 8px;

		.details-head {
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			h4 {
				font-size: 18px;
				font-weight: normal;
				margin-left: 4px;
			}
		}

		.details-price {
			margin-top: 28px;
			display: flex;
			align-items: flex-end;
			justify-content: center;

			h3 {
				font-size: 36px;
				color: #27B148;
				line-height: 36px;
				margin: 0 4px;
				font-weight: normal;
			}

			span {
				font-size: 20px;
				color: #27B148;
			}
		}

		.details-main {
			text-align: center;
			margin-bottom: 20px;

			p {
				color: #777;
				margin-top: 4px;
			}
		}
	}

	.details-row-sum {
		float: right;
		color: #888;
		font-size: 24rpx;

	}
</style>