jp-housekeep-manage/pages/tenantList/contractList.vue

<template>
	<view>
		<u-navbar title="租户余额管理" title-color="#101010"></u-navbar>
		<view class="head-head">
			<u-search placeholder="请输入关键字" :show-action="false"		 v-model="keyword"></u-search>
			
		</view>
		<view class="head-head-placeholder ">
			
		</view>
		
		<view class="main">
			
			
			<view class="tenant" v-for="(tenant,i) in tenantList"
			 v-show="keyword==''||(tenant.name&&tenant.name.indexOf(keyword)!=-1)"
			 :key="i" >
				<view class="tenant-name">
					{{tenant.name}}

				</view>
				<view class="balance">
					<view class="title">
						<view class="icon">
							<image class="img" src="@/assets/img/wallet@3x.png" mode=""></image>
						</view>
						<view class="text">
							账户余额
							<span class="state" v-if="tenant.balance<0">已欠费</span>
						</view>
					</view>
				
					<view class="balance-number">
						<view class="number" :class="{
							number2:tenant.balance<0
						}" >
							{{tenant.balance}}元
						</view>
						
					</view>
				</view>
				<view>
					<view  class="deadline" v-for="(obj,i) in tenant.tenantContractList" :key="i">
					<view class="deadline-item"  v-for="(item,i) in obj.contractItemList" :key="i" v-if="item.paymentMethod==1" >
						<view class="item-icon">
							
							<image class="img" v-if="item.name.indexOf('水')>-1" src="@/assets/img/deadline2.png" mode=""></image>
								<image class="img"  v-else-if="item.name.indexOf('房')>-1||item.name.indexOf('租')>-1" src="@/assets/img/deadline1.png" mode=""></image>
								<image class="img"  v-else-if="item.name.indexOf('保洁')>-1" src="@/assets/img/deadline4.png" mode=""></image>
								<image class="img" v-else-if="item.name.indexOf('物业')>-1"  src="@/assets/img/deadline3.png" mode=""></image>
								
							<image class="img" v-else src="@/assets/img/deadline3.png" mode=""></image>
							
							
						</view>
						<view class="date-box" :class="{
							stateBl:stateBl(item.prepaidEndTime)
						}">
							<view class="classify">
								{{item.name}} 
							</view>
							<view class="classify">
								 <span class="state" v-if="item.prepaidEndTime&&stateBl(item.prepaidEndTime)">已到期</span>
								<span class="state" v-if="!item.prepaidEndTime">未交费</span>
							</view>
							<view class="date" v-if="item.prepaidEndTime">
								已缴费至 <text class="state">{{item.prepaidEndTime}}</text>
							</view>
							
						</view>
					</view>
						<view  class="remark" >
							<view class="item" v-if="obj.address">
								租住地址：{{obj.address}}
							</view>
							<view class="item">
								租赁期：{{thisparseUnixTime(obj.contractStartTime)}} 至 {{thisparseUnixTime(obj.contractEndTime)}}
							</view>
						</view>
					</view>
					
				</view>
			</view>
			
		</view>
		<u-divider :isnone="tenantList.length==0"  nonetext="无记录"
			border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/tenantList.js'
	import {
		newDate,parseUnixTime
	} from '@/apis/utils'
	export default {
		data() {
			return {
				tenantList:[],
				getTenantListReady:false,
				keyword:""
			}
		},
		onReady() {
			// this.current=1
			 this.getTenantList()
		
		},
		methods: {
			thisparseUnixTime(time){
				return parseUnixTime(newDate(time),'{y}年{m}月{d}日')
			},
			stateBl(time){
				var get=newDate(time)
				var time=new Date()
				return get<time;
			},
			getTenantList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.tenantContractList().then((response) => {
					uni.hideLoading();
					this.getTenantListReady=true
					this.tenantList=response.data.tenantInfoList;
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		
		margin-top: 24rpx;
		.tenant{
			background-color: #fff;
			
			color: rgba(51,51,51,1);
			font-size: 32rpx;
			 margin: 24rpx;
			border-radius: 8px;
			.tenant-name{
				font-size: 40rpx;
				font-weight: bold;
				 padding: 24rpx;

			}
		}
		
	}
	
	.balance{
		 padding: 24rpx 24rpx;
		  border-bottom: 1px solid #F4F4F4;
		      display: flex;
		      justify-content: space-between;
	}
	
	.title {
		display: flex;
	
		.icon {
			width: 40rpx;
			height: 40rpx;
	
			.img {
				width: 100%;
				height: 100%;
	
			}
		}
	
		.text {
			margin-left: 16rpx;
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			font-weight: bold;
	
			.state {
				    white-space: pre;
				
				margin-left: 16rpx;
				color: rgba(238, 49, 56, 1);
			}
		}
	}
	
	.balance-number {
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		// margin-top: 16rpx;
		// margin-left: 56rpx;
		.number2 {
		
			color: rgba(238, 49, 56, 1);
		
		}
		.number {
			
			//font-size: 56rpx;
			font-weight: bold;
	
		}
	
		.recharge {
			width: 144rpx;
			height: 56rpx;
			line-height: 56rpx;
			border-radius: 50px;
			background: linear-gradient(85.19deg, rgba(255, 61, 0, 1) 4.89%, rgba(255, 123, 0, 1) 95.37%);
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	}
	
	// 期限
		.deadline {
			
			display: flex;
			flex-wrap: wrap;
	        .remark{
				    font-size: 24rpx;
					  padding: 24rpx ;
			}
	
			 .deadline-item:first-of-type{
				 
				  //border-top: 1px solid #F4F4F4;
			 }
			 .deadline-item:last-of-type{
				
				// border-left: 1px solid #F4F4F4;
			 }
			.deadline-item {
				border-bottom: 1px solid #F4F4F4;
				border-right: 1px solid #F4F4F4;
				width: 50%;
				display: flex;
	            padding: 24rpx ;
				
				
				.item-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
					.img {
						width: 100%;
						height: 100%;
						vertical-align: middle;
					}
				}
				.stateBl{
					.state {
						// white-space: pre;
						color: rgba(238, 49, 56, 1);
					}
				}
				.date-box {
					
					.state {
						 white-space: pre;
						//color: rgba(238, 49, 56, 1);
					}
					text{
						margin-left: 8rpx;
					}
	
					.classify {
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;
						font-weight: bold;
						
	
					}
					.date{
						color: rgba(51,51,51,1);
						font-size: 24rpx;
						margin-top: 4rpx;
					}
				}
			}
		}
		.head-head{
			background: #fff;
			padding:24rpx;
			position: fixed;
			    left: 0;
			    right: 0;
			    top: 80rpx;
			    z-index: 991;
		}
		.head-head-placeholder{
			height: 112rpx;
			
		}
		
		

</style>