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">
					岑河物业公司
				</view>
			</view>
			<!-- 规则 -->
			<view class="rules">

				<view class="content">
					<view class="rule1">
						<view class="title">
							用电分类
						</view>
						<view class="value" v-for="(item,index) in groupPriceList" :key="index"
							:class="item.electricPeriodPriceList.length>1 ? '' : 'title3'">
							{{item.name}}
						</view>
						<!-- <view class="value">
							谷段用电
						</view>
						<view class="value title3">
							平段用电
						</view>
						<view class="value">
							尖峰用电
						</view> -->
					</view>
					<view class="rule2">
						<view class="title">
							用电时段
						</view>
						<view class="value" v-for="(item,index) in groupPriceList" :key="index"
							:class="item.electricPeriodPriceList.length>1 ? '' : 'value3'">
							<span v-for="e in item.electricPeriodPriceList">{{e.startTime}}-{{e.endTime}}</span>
						</view>
						<!-- <view class="value">
							23:00-07:00
						</view>
						<view class="value value3">
							<p>07:00-09:00</p>
							<p>15:00-20:00</p>
							<p>22:00-23:00</p>
						</view>
						<view class="value">
							20:00-22:00
						</view> -->
					</view>
					<view class="rule3">
						<view class="title">
							电度电价
						</view>
						<view class="value" v-for="(item,index) in groupPriceList" :key="index"
							:class="item.electricPeriodPriceList.length>1 ? '' : 'value4'">
							<span v-for="e in item.electricPeriodPriceList">{{e.price}}元/度</span>
						</view>
						<view class="value">
							0.37元/度
						</view>
						<view class="value value4">
							0.69元/度
						</view>
						<view class="value">
							1.18元/度
						</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 {
				groupPriceList: [],
				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.groupPriceList = res.data.groupPriceList;
					this.tenantContract = res.data.tenantContract;
					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))+'日';
					}
				}).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;
			display: flex;
			text-align: center;

			.rule1 {
				width: 200rpx;

				.title {
					line-height: 96rpx;
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					font-weight: bold;
				}

				.value {
					color: rgba(51, 51, 51, 1);
					line-height: 96rpx;
					font-weight: bold;
				}
			}

			.rule2,
			.rule3 {
				width: 200rpx;

				.title {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					line-height: 96rpx;
					font-weight: bold;
				}

				.value {
					color: rgba(119, 119, 119, 1);
					line-height: 96rpx;
				}
			}

			.title3 {
				height: 144rpx;
				line-height: 144rpx !important;
			}

			.value3 {
				height: 144rpx;

				p {
					line-height: 48rpx;
				}
			}

			.value4 {
				height: 144rpx;
				line-height: 144rpx !important;
			}

		}

		// 备注
		.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>