jp-housekeep-hall/pages/billingRules/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">
					{{companyInfo.fullName}}
				</view>
			</view>
			
			<view class="rules">
				<view class="tabs" v-if="false">
					<u-tabs font-size="24" :gutter="30" :item-width="100" :list="list" :is-scroll="false" :current="current"
						@change="change"></u-tabs>
				</view>
			
				<view class="content" v-for="(item,i) in queryList" :key="i">
					<view class="name-title">
						承租方：
					
					</view>
					<view class="name">
						{{tenantInfo.fullName}}
			
					</view>
					<view class="address">
						地址：{{item.address}}
					</view>
					<view class="address">
						租赁期：{{thisparseUnixTime(item.contractStartTime)}} 至 {{thisparseUnixTime(item.contractEndTime)}}
					</view>
					<view class="contentRule1">
						
						<u-table>
							<u-th>
								<u-tr>
									<u-td>名称</u-td>
								<!-- 	 -->
									<u-td>价格</u-td>
									<u-td>单位</u-td>
									
									
								</u-tr>
							</u-th>
							<template v-for="(it,j) in item.contractItemList" >
								<u-tr  :key="j">
									<u-td>{{it.name}}</u-td>
								<!-- 	<u-td>{{it.paymentMethodN}}</u-td> -->
									<u-td>{{it.price}}</u-td>
									<u-td>元{{it.unit?'/'+it.unit:''}}</u-td>
									
								</u-tr>
							
							</template>
							
						</u-table> 
						
						
					</view>
			
			
				</view>
				
				<!-- 备注 -->
				<view class="remark" v-if="false">
					<view class="title">
						备注说明：
					</view>
					<view class="value">
						<view class="item">
1.计费规则仅展示租赁合同中的计算方式，最终扣费金额以账单中的实际扣费金额为准。



						</view>
			
						<view class="item">
2.本次租约有效期：2024年2月1日至2024年7月31日
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 规则 -->
		


	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/deduction.js'
import {
		parseUnixTime
	
	} from '@/apis/utils'
	export default {
		data() {
			return {
				formData: {
					pageIndex: 1,
					pageSize: 9999,
				},
				list: [{
					name: '电费'
				}, {
					name: '水费'
				}, {
					name: '租金',

				}, {
					name: '保洁费',

				}, {
					name: '物业服务费',

				}],
				current: 0,
				queryList: [],
				companyInfo:{},
				tenantInfo:{}
			}
		},
		onReady() {
			this.companyInfo=this.carhelp.getPersonInfoPlus().companyInfo
			this.tenantInfo=this.carhelp.getPersonInfoPlus().tenantInfo
			
			this.contractList();
		},
		methods: {
			thisparseUnixTime(time){
				return parseUnixTime(new Date(time),'{y}年{m}月{d}日')
			},
			contractList() {

				API.contractList(this.formData).then((response) => {
					uni.hideLoading();
					this.queryList = response.data.data;
				}).catch(error => {
					uni.hideLoading();

				})
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

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

		.unit {
			background-color: #fff;
			margin: 0 32rpx;
			border-radius: 8px;
			padding: 32rpx;

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

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

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

		/deep/.u-tabs {
			border-radius: 8px;

		}

		.content {
			padding: 24rpx;
			.name-title {
			    color: #999999;
			}
			.name {
				margin: 16rpx 0;
				color: rgba(16, 16, 16, 1);
				font-size: 38rpx;
			}

			.address {
				margin: 8rpx 0;
			}

			.contentRule1 {
				

				.rule1 {
					//width: 298rpx;
						display: flex;
					.title {
						line-height: 96rpx;
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;
					}

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



		}

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