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

<template>
	<view>
		<u-navbar title="租户管理预警" title-color="#101010">
			
			<view class="slot" style="color: #909399" slot="right"
			 @click="tenantshowAll">
				{{allShow?'全部收起':'全部展开'}}
			</view>
			
		</u-navbar>
		<view class="head-head" style="background: #fff;">
			<u-search placeholder="请输入关键字" :show-action="false"		 v-model="keyword"></u-search>
			<u-tabs :list="listType" v-if="tenantList.length"  style="margin-top: 12rpx;"  :is-scroll="false" :current="selectType"  @change="change" ></u-tabs>
			
		</view>
	
		<view class="head-head-placeholder ">
			
		</view>
		
		<view class="main">
			
			
			<view class="tenant" v-for="(tenant,i) in tenantList"
			
			@click="tenantshow(tenant)"
			 v-show="(keyword==''||(tenant.name&&tenant.name.indexOf(keyword)!=-1))&&selectTypeMethod(tenant,selectType)"
			 :key="i" >
				<view class="tenant-name"  >
					<view class="tenant-name1">
						{{tenant.name}}
					</view>
					<view  class="tenant-name2" v-if="tenant.show"   >
						
						<u-icon name="arrow-up"  color="#909399"   ></u-icon>
					</view>
					<view  class="tenant-name2"   v-else >
						<u-icon name="arrow-down" color="#909399" ></u-icon>
						
					</view>
				</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 v-show="tenant.show">
					<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&&item.name!='电费'" >
						<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" style=" display: flex; justify-content: space-between;">
								<view>
									
								
								自动扣费：<span style="color:#5aa867 ;" v-if="obj.autoDeductFee">是</span>
										<span  style="color:#ee3138 ;" v-else>否</span>
								</view>	
								<view v-if="tenant.minBalance">	
										余额提醒：<span :style="tenant.minBalance<tenant.balance?'color:#5aa867 ;':'color:#ee3138 ;'" >{{tenant.minBalance}}元</span>
								</view>
							</view>
							<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="listType[selectType].count==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 {
				allShow:false,
				tenantList:[],
				getTenantListReady:false,
				keyword:"",
				selectType:0,
				num1:0,
				num2:0,
				num3:0,
				num4:0,
				companyId:"",
				listType: [{
									name: '全部'
								}, {
									name: '余额不足'
								}, {
									name: '即将到期',
									count: 0
					}, {
									name: '已过期',
									count: 0
					}],
			}
		},
		onLoad(op){
			if(op.query){
				this.selectType=op.query;
			}
			if(op.companyId){
				this.companyId=op.companyId
			}
		},
		onReady() {
			
			// this.current=1
			 this.getTenantList()
		
		},
		
		methods: {
			tenantshowAll(item){
				this.allShow=!this.allShow
				for(var i in this.tenantList){
					var obj=this.tenantList[i]
					obj.show=this.allShow
				}
				
				this.$forceUpdate()
			},
			tenantshow(item){
				item.show=!item.show
				this.$forceUpdate()
			},
			change(index) {
				uni.pageScrollTo({
					scrollTop: 0, // 设置一个足够大的值，确保滚动到最底部  
					duration: 300 // 滚动动画时长，单位ms  
				});
							this.selectType = index;
			},
			selectTypeMethod(tenant,selectType){
				var selectType1=selectType;
				// if(selectType){
				// 	selectType1=selectType;
				// }
			
				// if(selectType1==1){
				// 	return tenant.balance<100
				// }
				if(true){
					var bl=false;
					for(var j in tenant.tenantContractList){
						
						var tenant1=tenant.tenantContractList[j]
						
						for(var k in tenant1.contractItemList){
							
							var item=tenant1.contractItemList[k]
							//console.log(item.prepaidEndTime)
							if(tenant1.autoDeductFee!=true){
								console.log(tenant.name)
								continue; 
							}
							if(selectType1==0){
								 bl=true
							}
							if(selectType1==1){
								return tenant.balance<tenant.minBalance
							}
							if(item.paymentMethod==1&&item.name!='电费'){
								
								if(selectType1==2){
									if(item.prepaidEndTime&&this.stateBl(item.prepaidEndTime,30)){
										bl=true;
										
									}
								}
								if(selectType1==3){
									if(item.prepaidEndTime&&this.stateBl(item.prepaidEndTime)){
										
										bl=true;
									}
									
									if(item.prepaidEndTime==null){
										
										bl=true;
									}
								}
								
							}
						}
						
					}
					
					return bl
				}
			},
			thisparseUnixTime(time){
				return parseUnixTime(newDate(time),'{y}年{m}月{d}日')
			},
			stateBl(timekey,day){
				var get=newDate(timekey)
				var time=new Date()
				if(!day){
					 
					return time>get;
				}else{
					
					var get2=newDate(timekey)
					get2.setDate(get2.getDate() - day)
					console.log(timekey)
					return get2<time&&get>time;
				}
			},
			getTenantList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.tenantContractList({
					companyId:this.companyId
				}).then((response) => {
					uni.hideLoading();
					this.getTenantListReady=true
					this.tenantList=response.data.tenantInfoList;
					//this.num1=this.tenantList.length
					
					for(var i in this.tenantList){
						var obj=this.tenantList[i]
						obj.show=false
						if(this.selectTypeMethod(obj,0)){
							this.num1++;
						}
						if(this.selectTypeMethod(obj,1)){
							this.num2++;
							
						}
						if(this.selectTypeMethod(obj,2)){
							this.num3++;
							
						}
						if(this.selectTypeMethod(obj,3)){
							this.num4++;
						}
					}
					this.listType[0].count=this.num1
					this.listType[1].count=this.num2
					this.listType[2].count=this.num3
					this.listType[3].count=this.num4
				}).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;
				 
				     display: flex;
				     justify-content: space-between;
				.tenant-name2{
					width: 50rpx;
				}
			}
		}
		
	}
	
	.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{
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
			padding:24rpx;
			position: fixed;
			    left: 0;
			    right: 0;
			    top: 80rpx;
			    z-index: 991;
				.head-body{
					margin-top: 32rpx;
					    display: flex;
					    justify-content: space-around;
						.head-btn{
							text-align: center;
							width: 31%;
							padding: 12rpx;
							border: 1px solid #f2f2f2;
							background-color:#f2f2f2 ;
							border-radius: 6px;
							span{
								margin-left: 4rpx;
							}
						}
						.head-select{
							border: 1px solid #1677FF;
							background-color:#1677FF ;
							color: #fff;
						}
				}
		}
		.head-head-placeholder{
			height: 200rpx;
			
		}
		
		.slot{
			display: flex;
			align-items: center;
			.img{
				width: 48rpx;
				height: 48rpx;
				margin-right: 4rpx;
			}
		}

</style>