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.propertyManagement}}
				</view>
			</view>
			
				
			<view class="rules" v-if="queryList.length">
				<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.name}}
			
					</view>
					
					<view class="address">
						
					</view>
					<view class="contentRule1">
						<view>收费标准</view>
						<u-table>
							<u-th style="padding:0">
								<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" v-if="!it.periodPriceList">
									<u-td>{{it.name}}</u-td>
								<!-- 	<u-td>{{it.paymentMethodN}}</u-td> -->
									<u-td>{{it.price}}</u-td>
									<u-td>{{it.unit}}</u-td>
									
								</u-tr>
							
							</template>
							
						</u-table> 
						
						
					</view>
					
					<view class="contentRule1" style="margin-top: 20rpx;"  v-for="(it,j) in item.contractItemList"  v-if="it.periodPriceList">
						<template >
						<view>收费标准-{{it.name}}  ({{it.unit}})</view>
						<u-table>
							<u-th style="padding:0">
								<u-tr >
										<u-td>类型 </u-td>
									<u-td>时段</u-td>
								<!-- 	 -->
								
									<u-td>价格</u-td>
									
									
								</u-tr>
							</u-th>
							
								<u-tr  :key="k" v-for="(ito,k) in it.periodPriceList"   >
									<u-td>{{ito.periodN}}</u-td> 
									<u-td>{{ito.startTime}}-{{ito.endTime}}</u-td>
									
									<u-td>{{ito.price}}</u-td>
								
									
								</u-tr>
							
						
							
						</u-table> 
							</template>
						
					</view>
			
			<!-- 备注 -->
							<view class="remark" >
								
								<view class="title" v-if="false&&item.remark">
									备注说明：
								</view>
								<view class="value">
									<view class="item" v-if="false&&item.remark">
										{{item.remark}}
			
									</view>
									<view class="item" v-if="item.address">
										租住地址：{{item.address}}
									</view>
									<view class="item">
										租赁期：{{thisparseUnixTime(item.contractStartTime)}} 至 {{thisparseUnixTime(item.contractEndTime)}}
									</view>
								</view>
							</view>
				</view>
				
				
			</view>
			<view class="rules" v-else>
				
			
				<view class="content" >
					
					<view class="address">
						{{queryBl?'未签订合同,请联系物业方':'加载中...'}}
					</view>
					
			
			<!-- 备注 -->
					
				</view>
				
				
			</view>
			<u-divider  nonetext="没有找到相关内容"
				border-color="#CFD2D5">已经到底了</u-divider>
			
		</view>
		<!-- 规则 -->
	


	</view>
</template>

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

				}, {
					name: '保洁费',

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

				}],
				current: 0,
				queryList: [],
				companyInfo:{},
				tenantInfo:{},
				queryBl:false,
			}
		},
		
		onReady() {
			
			if(this.carhelp.getPersonInfoPlus().companyInfo){
				this.companyInfo=this.carhelp.getPersonInfoPlus().companyInfo
			}
			
			this.tenantInfo=this.carhelp.getPersonInfoPlus().tenantInfo
			
			this.contractList();
		},
		methods: {
			thisparseUnixTime(time){
				return parseUnixTime(newDate(time),'{y}年{m}月{d}日')
			},
			contractList() {
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.contractList(this.formData).then((response) => {
					uni.hideLoading();
					this.queryList = response.data.data;
					this.queryBl=true
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			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;

		::v-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-top:  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>