jp-housekeep-electric/pages/equipmentDataMonitoring/billingRules.vue

<template>
	<view>
		<u-navbar title="计费规则" title-color="#101010"></u-navbar>
		<view class="background">
			<!-- 单位 -->
			<view class="unit">
				<view class="title">
					所属收款单位
				</view>
				<view class="value">
					{{name}}
				</view>
			</view>
			<!-- 规则 -->
			<view class="rules">

				<view class="content">

					<view class="title">
						<view class="title-item">
							用电分类
						</view>
						<view class="title-item">
							用电时段
						</view>
						<view class="title-item">
							电度电价
						</view>
					</view>
					<view class="classify" v-for="(item,index) in electricPeriodPriceList" :key="index"
						 :class="item.timeList.length>1 ? 'classify2' : ''" v-if="item.timeList.length!=0">
						<view class="classify-title">
							{{item.name}}
						</view>
						<view class="classify-value">
							<p v-for="t in item.timeList">{{t.startTime}}-{{t.endTime}}</p>
						</view>
						<view class="classify-value">
							{{item.price}}元/度
						</view>
					</view>
				</view>
			</view>
			
			<!-- 备注 -->
			<view class="remark" v-if="tenantContract!=null">
				<view class="title">
					备注说明：
				</view>
				<view class="value">
					<view class="item">1.计费规则仅展示租赁合同中的计算方式，最终扣费金额以账单中的实际扣费金额为准。

					</view>
					<view class="item" v-if="startTime!=null && endTime!=null">
						2.本次租约有效期：{{startTime}}-{{endTime}}
					</view>
				</view>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	import * as API_electricityMeter from '@/apis/pagejs/electricityMeter.js'
	import {
		parseUnixTime,
		beforeTimeStamp,
		getWeek
	} from '@/apis/utils'

	export default {
		data() {
			return {
				electricPeriodPriceList: [],
				queryDate: '',
				meterId: '',
				name: '',
				tenantContract: null,
				startTime: null,
				endTime: null
			}
		},
		onLoad(op) {
			if (op.id) {
				this.meterId = op.id;
				this.queryDate = op.queryDate;
				this.getBillingRules();
			}
		},
		methods: {
			getBillingRules() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_electricityMeter.billingRules({
					meterId: this.meterId,
					queryDate: this.queryDate + '-01'
				}).then((res) => {
					uni.hideLoading();
					this.name = res.data.name;

					this.tenantContract = res.data.tenantContract;
					if (res.data.tenantContract != null) {
						var startTime = res.data.tenantContract.startTime;
						var endTime = res.data.tenantContract.endTime;
						if (startTime != null) {
							this.startTime = startTime.slice(0, 4) + '年' + parseInt(startTime.slice(5, 7)) + '月'
							+ parseInt(startTime.slice(8)) + '日';
						}
						if (endTime != null) {
							this.endTime = endTime.slice(0, 4) + '年' + parseInt(endTime.slice(5, 7)) + '月'
							+ parseInt(endTime.slice(8)) + '日';
						}
					}

					var list = res.data.groupPriceList;
					var list2 = [];
					var list3 = [
						{period: '1',name: '尖峰用电',price: 0,timeList:[]},
						{period: '2',name: '高峰用电',price: 0,timeList:[]},
						{period: '3',name: '平段用电',price: 0,timeList:[]},
						{period: '4',name: '谷段用电',price: 0,timeList:[]}
					];
					for (var i = 0; i < list.length; i++) {
						list2 = [...list2, ...list[i].electricPeriodPriceList];
					}
					for (var m = 0; m < list2.length; m++) {
						for (var n = 0; n < list3.length; n++) {
							if(list2[m].period == list3[n].period) {
								list3[n].price = list2[m].price;
								list3[n].timeList.push({
									startTime: list2[m].startTime,
									endTime: list2[m].endTime
								});
							}
						}
					}
					this.electricPeriodPriceList = list3;
					// console.log(this.electricPeriodPriceList)
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.background {
		background: linear-gradient(180deg, rgba(22, 119, 255, 1) 0%, rgba(22, 119, 255, 0) 100%);
		height: 720rpx;
		padding-top: 24rpx;

		.unit {
			background-color: #fff;

			border-radius: 8px;
			padding: 32rpx;
			margin: 0 32rpx;

			.title {
				color: rgba(153, 153, 153, 1);
			}

			.value {
				color: rgba(51, 51, 51, 1);
				font-size: 40rpx;
				margin-top: 16rpx;
				font-weight: bold;
			}
		}
	}

	// 规则
	.rules {
		margin: 24rpx 32rpx 40rpx;
		background-color: #fff;
		padding-bottom: 24rpx;
		border-radius: 8px;

		.content {
			padding: 24rpx;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 96rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				font-weight: bold;

				.title-item {
					width: 33.3%;
				}
			}

			.classify {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 96rpx;

				.classify-title,
				.classify-value {
					width: 33.3%;
					color: #666666;
				}

				.classify-title {
					color: #333333;

				}

			}

			.classify2 {
				height: 200rpx;
			
			}











		}

		// 备注
		.remark {
			padding: 40rpx 32rpx;
			margin: 0 24rpx;
			border-radius: 8px;
			background-color: rgba(242, 244, 246, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			line-height: 34rpx;

			.value {
				margin-top: 16rpx;
			}

			.item {
				margin-bottom: 8rpx;

			}
		}
	}
</style>