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" v-if="tenantBalanceRecord.remark=='电费'">
						<view class="item-title">
							收费标准  
						</view>
						<view class="item-value" v-if="contractItem.id">
							<template v-if="tenantBalanceRecord.extraJson.chargeType=='2'">
								
							</template>
							<template v-else>
								{{tenantBalanceRecord.extraJson.price}}元/度
							</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>价格</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 ;" >
								<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&&tenantBalanceRecord.extraJson.unitSharedMethod==null">
						
						
						<table class="border-table" >
							
							<tr>
								<td class="td1">起止码</td>
								<td>{{tenantBalanceRecord.extraJson.startMeter}}-{{tenantBalanceRecord.extraJson.endMeter}}</td>
							
							</tr>
							<tr>
								<td class="td1">楼层电量</td>
								<td class="td3" >{{tenantBalanceRecord.extraJson.totalKwh}}度
								<span v-if="tenantBalanceRecord.extraJson.lineLoss">(其中线损电量:{{tenantBalanceRecord.extraJson.lineLoss}}度)</span>
								</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 v-if="tenantBalanceRecord.extraJson.allocationRatio">
								<td class="td1">分摊系数</td>
								<!-- <td></td> -->
								<td class="td3" >{{tenantBalanceRecord.extraJson.allocationRatio}}</td>
							</tr>
							<tr >
								<td class="td1">电价</td>
								<!-- <td></td> -->
								<td class="td3" >{{tenantBalanceRecord.extraJson.price}}元/度</td>
							</tr>
						<tr style="font-weight: bold;color:#fff;background-color:#307af6 ;" >
							
								<td class="td1">租户分摊电量</td>
								<!-- <td></td> -->
								<td class="td3" >{{tenantBalanceRecord.extraJson.tenantSharedKwh}}度</td>
							</tr>
							
							
							
						</table>
						
						
					</template>
					<template v-if="contractItem.id&&tenantBalanceRecord.extraJson.unitSharedMethod!=null">
						
						<template v-if="row.extraJson.publicSharedMethod == null">
							
						<table class="border-table">
						    <tr>
						      <td>起始码</td>
						      <td>{{row.extraJson.startMeter +"-" + row.extraJson.endMeter}}</td>
						    </tr>
						    <tr>
						      <td>楼层电量</td>
						      <td>
						        {{ row.extraJson.totalKwh }}度{{
						          row.extraJson.lineLoss > 0
						            ? "(其中线损电量:" +
						              row.extraJson.lineLoss +
						              "度)"
						            : ""
						        }}</td>
						    </tr>
						    <tr>
						      <td>表计电量</td>
						      <td>{{ row.extraJson.childSumKwh }}度</td>
						    </tr>
						    <tr>
						      <td>公摊电量</td>
						      <td>{{ row.extraJson.sharedKwh }}度</td>
						    </tr>
						    <tr>
						      <td>分摊方式</td>
						      <td>{{ explainSharedMethod(row.extraJson.unitSharedMethod) }}</td>
						    </tr>
							
						    <template v-if="row.extraJson.unitSharedMethod=='2'">
						    <tr>
						      <td>总租用面积</td>
						      <td>{{ row.extraJson.totalHouseArea }}平方米</td>
						    </tr>
						    <tr>
						      <td>租户租用面积</td>
						      <td>{{ row.extraJson.houseArea }}平方米</td>
						    </tr>
						    </template>
							
						    <template v-if="row.extraJson.unitSharedMethod=='3'">
						    <tr>
						      <td>租户用电量</td>
						      <td>{{ row.extraJson.childKwh }}度</td>
						    </tr>
						    </template>
							
						    <tr>
						      <td>分摊占比</td>
						      <td>{{ row.extraJson.unitSharedRatio }}%</td>
						    </tr>
						   
						    <tr>
						      <td>电价</td>
						      <td>{{ row.extraJson.price }}元/度</td>
						    </tr>
							
							<tr  style="font-weight: bold;color:#fff;background-color:#307af6 ;">
							  <td>合用分摊电量</td>
							  <td>{{ row.extraJson.tenantSharedKwh }}度</td>
							</tr>
						  </table>
						</template>
						
						<template v-else-if="row.extraJson.publicSharedMethod != null">
						  <!--公用分摊电量-->
						  <table class="border-table">
						    <tr>
						      <td>公用电量</td>
						      <td>{{ row.extraJson.publicKwh }}度</td>
						    </tr>                      
						    <tr>
						      <td>分摊方式</td>
						      <td>{{ explainSharedMethod(row.extraJson.publicSharedMethod) }}</td>
						    </tr>
						    <template v-if="row.extraJson.publicSharedMethod=='2'">
						      <tr>
						        <td>总租用面积</td>
						        <td>{{ row.extraJson.totalHouseArea }}平方米</td>
						      </tr>
						      <tr>
						        <td>租户租用面积</td>
						        <td>{{ row.extraJson.houseArea }}平方米</td>
						      </tr>
						    </template>                      
						    <template v-if="row.extraJson.publicSharedMethod=='3'">
						    <tr>
						      <td>总用电量</td>
						      <td>{{ row.extraJson.totalKwh }}度</td>
						    </tr>
						    <tr>
						      <td>租户用电量</td>
						      <td>{{ row.extraJson.selfKwh }}度</td>
						    </tr>
						    </template>
						    <tr>
						      <td>分摊占比</td>
						      <td>{{ row.extraJson.publicSharedRatio }}%</td>
						    </tr>
						  
						    <tr>
						      <td>电价</td>
						      <td>{{ row.extraJson.price }}元/度</td>
						    </tr>
							
							<tr  style="font-weight: bold;color:#fff;background-color:#307af6 ;" >
							  <td>公用分摊电量</td>
							  <td>{{ row.extraJson.tenantSharedKwh }}度</td>
							</tr>
						  </table>
							
							</template>
						
						
						
					</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'
	//import * as API from '@/apis/pagejs/tenantList.js'

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

			}
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id
			}
			this.getRechargeDetails()
		},
		methods: {
			explainSharedMethod(value) {
			      switch(value){
			        case "2":
			          return "按面积分摊";
			        case "3":
			          return "按电量分摊";
			        case "4":
			          return "按比例分摊";
			        default:
			          return "";
			      }
			    },
			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;
					this.row = response.data.tenantBalanceRecord;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table1,.border-table{
		margin: 8rpx 0;
		width: 100%;
		   border-collapse: collapse;
		td{
			border: 1px solid #e7e7e7;
			text-align: end;
			
			padding: 16rpx 16rpx;
		}
		
		tr{
			 background-color:#f5f5f6 
		}
		tr{
			td:first-child{
				    white-space: pre;
				text-align: start;
				min-width: 20%;
				max-width: 30%;
			}
			td:last-child{
				white-space: pre;
			}
		}
		
		.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>