jp-housekeep-hall/pages/deductionRecord/deductionDetails.vue

<template>
	<view>
		<u-navbar title="扣费详情" title-color="#101010"></u-navbar>
		<view class="background">
			<view class="recharge-details">
				<view class="headline">
					<text v-if="tenantBalanceRecord.remark">
						<image class="img" v-if="tenantBalanceRecord.remark.indexOf('水')>-1"
							src="@/assets/img/wImage@1x.png" mode=""></image>
						<image class="img"
							v-else-if="tenantBalanceRecord.remark.indexOf('房')>-1||tenantBalanceRecord.remark.indexOf('租')>-1"
							src="@/assets/img/wImage.png" mode=""></image>
						<image class="img" v-else-if="tenantBalanceRecord.remark.indexOf('保洁')>-1"
							src="@/assets/img/wImage3.png" mode=""></image>
						<image class="img" v-else-if="tenantBalanceRecord.remark.indexOf('物业')>-1"
							src="@/assets/img/wImage4.png" mode=""></image>

						<image class="img" v-else src="@/assets/img/Copy PEokWS2 Copy 1@1x.png" mode=""></image>

					</text>{{tenantBalanceRecord.remark}}
				</view>
				<view class="sum">
					{{tenantBalanceRecord.amount}}
					<span>元</span>
				</view>
				<view class="state">
					已扣费
				</view>
				<view class="details">
					<view class="item">
						<view class="item-title">
							合同信息
						</view>
						<view class="item-value">
							{{tenantContract.remark}}
						</view>
					</view>
					<view class="item" v-if="false">
						<view class="item-title">
							户号
						</view>
						<view class="item-value">
							00880088
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							收费标准  
						</view>
						<view class="item-value" v-if="contractItem.id">
							<template v-if="tenantBalanceRecord.extraJson.chargeType=='2'">
								
							</template>
							<template v-else>
								{{contractItem.price}}{{contractItem.unit}}
							</template>
						</view>
					</view>
					<template v-if="contractItem.id&&tenantBalanceRecord.extraJson.chargeType=='2'">
						<table class="table1" >
							<tr class="tr1">
								<td class="td1">类型</td>
								<td>度数</td>
								<td>价格({{contractItem.unit}})</td>
								<td>金额</td>
							</tr>
							<tr>
								<td class="td1">峰</td>
								<td class="td3">{{tenantBalanceRecord.extraJson.fengKwh}}</td>
								
								<td >{{tenantBalanceRecord.extraJson.fengPrice}}</td>
								<td class="td3">{{tenantBalanceRecord.extraJson.fengFee}}</td>
							</tr>
							<tr>
								<td class="td1">谷</td>
								<td class="td3">{{tenantBalanceRecord.extraJson.guKwh}}</td>
								<td >{{tenantBalanceRecord.extraJson.guPrice}}</td>
								
								<td class="td3">{{tenantBalanceRecord.extraJson.guFee}}</td>
							</tr>
							<tr>
								<td class="td1">平</td>
								<td class="td3">{{tenantBalanceRecord.extraJson.pingKwh}}</td>
								<td >{{tenantBalanceRecord.extraJson.pingPrice}}</td>
								<td class="td3">{{tenantBalanceRecord.extraJson.pingFee}}</td>
								
							</tr>
							<tr>
								<td class="td1">尖</td>
								<td class="td3">{{tenantBalanceRecord.extraJson.jianKwh}}</td>
								<td >{{tenantBalanceRecord.extraJson.jianPrice}}</td>
								<td class="td3">{{tenantBalanceRecord.extraJson.jianFee}}</td>
								
							</tr>
						</table>
						
					</template>
					
					<template v-if="tenantBalanceRecord.remark=='电费'&&tenantBalanceRecord.extraJson">
						
						
						<table class="table1" v-if="tenantBalanceRecord.extraJson.children">
							<tr class="tr1">
								<td></td>
								<td>起止码</td>
								<td>度数</td>
							</tr>
							<tr>
								<td class="td1">{{tenantBalanceRecord.extraJson.meterName}}</td>
								<td>{{tenantBalanceRecord.extraJson.startMeter}}-{{tenantBalanceRecord.extraJson.endMeter}}</td>
								<td class="td3" >{{tenantBalanceRecord.extraJson.kwh}}度</td>
							</tr>
							<tr v-for="(item,i) in tenantBalanceRecord.extraJson.children" :key="i">
								<td class="td1">{{item.meterName}}</td>
								<td>{{item.startMeter}}-{{item.endMeter}}</td>
								<td class="td3">{{item.kwh}}度</td>
							</tr> 
							<tr style="font-weight: bold;color:#fff;background-color:#307af6 ;height: 80rpx;" >
								
								<td   class="td1" colspan="2">扣除后用电量</td>
						
									<td>{{tenantBalanceRecord.extraJson.remainKwh}}度</td>
							</tr>
						</table>
						<template v-else >
							<view class="item" >
								<view class="item-title">
									度数
								</view>
								<view class="item-value">
									{{tenantBalanceRecord.extraJson.kwh}}度
									
								</view>
							</view>
							<view class="item" >
								<view class="item-title">
									起止码
								</view>
								<view class="item-value">
									{{tenantBalanceRecord.extraJson.startMeter}}-{{tenantBalanceRecord.extraJson.endMeter}}
								</view>
							</view>
						</template>
						
					</template>
					 
					<template v-if="contractItem.id&&tenantBalanceRecord.extraJson.sharedKwh!=null">
						
						
						<table class="table1" >
							<tr class="tr1">
								<td></td>
								<td>起止码</td>
								<td>度数</td>
							</tr>
							<tr>
								<td class="td1">楼层电量</td>
								<td>{{tenantBalanceRecord.extraJson.startMeter}}-{{tenantBalanceRecord.extraJson.endMeter}}</td>
								<td class="td3" >{{tenantBalanceRecord.extraJson.totalKwh}}度</td>
							</tr>
							<tr>
								<td class="td1">表计电量</td>
								<td></td>
								<td class="td3" >{{tenantBalanceRecord.extraJson.childSumKwh}}度</td>
							</tr>
							<tr>
								<td class="td1">公摊电量</td>
								<td></td>
								<td class="td3" >{{(tenantBalanceRecord.extraJson.sharedKwh)}}度</td>
							</tr>
							<tr>
								<td class="td1">楼层总面积</td>
								<td></td>
								<td class="td3" >{{tenantBalanceRecord.extraJson.totalHouseArea}}平方米</td>
							</tr>
							<tr>
								<td class="td1">租用面积</td>
								<td></td>
								<td class="td3" >{{tenantBalanceRecord.extraJson.houseArea}}平方米</td>
							</tr>
							<tr>
								<td class="td1">租用面积占比</td>
								<td></td>
								<td class="td3" >{{tenantBalanceRecord.extraJson.houseAreaPercent}}%</td>
							</tr>
							<tr>
								<td class="td1">租户公摊电量</td>
								<td></td>
								<td class="td3" >{{tenantBalanceRecord.extraJson.tenantSharedKwh}}度</td>
							</tr>
							
							
							
						</table>
						
						
					</template>
					
				
					 
				</view>


				<view class="details">
					<view class="item">
						<view class="item-title">
							付款方式
						</view>
						<view class="item-value">
							{{tenantBalanceRecord.methodN}}
						</view>
					</view>
					<!-- 	<view class="item">
						<view class="item-title">
							订单号
						</view>
						<view class="item-value">
					30816112557708460925
						</view>
					</view> -->
					<view class="item">
						<view class="item-title">
							扣费时间
						</view>
						<view class="item-value">
							{{tenantBalanceRecord.createTime}}
						</view>
					</view>
					<!-- <view class="item">
						<view class="item-title">
							支付时间
						</view>
						<view class="item-value">
							2023-08-20 10:29:00
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 返回 -->
		<!-- <button class="back">返回</button> -->
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/deduction.js'

	export default {
		data() {
			return {
				id: '',
				tenantBalanceRecord: {},
				contractItem: {},
				tenantContract: {},

			}
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id
			}
			this.getRechargeDetails()
		},
		methods: {
			
			getRechargeDetails() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.recordDetails({
					id: this.id
				}).then((response) => {
					uni.hideLoading();

					this.contractItem = response.data.contractItem;

					this.tenantContract = response.data.tenantContract;
					this.tenantBalanceRecord = response.data.tenantBalanceRecord;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table1{
		margin: 8rpx 0;
		width: 100%;
		   border-collapse: collapse;
		td{
			border: 1px solid #e7e7e7;
			text-align: end;
			padding: 2px 8px;
		}
		.td1{
			text-align: start;
			min-width: 20%;
			max-width: 30%;
		}
		.td3{
			
			white-space: pre;
		}
		tr{
			 background-color:#f5f5f6 
		}
		.tr1{
			text-align: end;
				font-weight: bold;
		}
		 tr:nth-child(even) {  
		    background-color: #fff;  
		  }  
	}
	.background {

		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);
		padding: 40rpx 32rpx;

		.recharge-details {

			background-color: #fff;
			border-radius: 8px;
			padding: 40rpx 32rpx;
			text-align: center;

			.headline {
				color: rgb(16, 16, 16);
				font-size: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.img {
					width: 48rpx;
					height: 48rpx;
					vertical-align: middle;
				}

			}

			.sum {
				color: rgb(16, 16, 16);
				font-size: 48rpx;
				margin-top: 32rpx;
				span{
					font-size: 28rpx;
				}
				

			}

			.state {
				color: rgb(56, 158, 13);
				margin-top: 8rpx;
			}

			.details {
				margin-top: 40rpx;
				padding-top: 40rpx;
				border-top: 1px solid rgba(241, 241, 241, 1);

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 16rpx;

					.item-title {
						color: rgb(119, 119, 119);
					}

					.item-value {
						color: rgb(48, 48, 48);
					}
				}
			}
		}
	}

	// 返回
	.back {
		border: 1px solid rgba(205, 205, 205, 1);
		border-radius: 8px;
		line-height: 88rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(119, 119, 119, 1);
		font-size: 32rpx;

	}
</style>