wit-uniapp/pages/Workorder/Tenantbill/companybill/companybill.vue

<template>
	<view class="">
		<view class="topname">
			<view class="topname1" @click="goback">
				<u-icon name="arrow-left" color="#000000" size="36"></u-icon>
			</view>
			<view class="topname2">
				{{ this.fatherparameter.name}}
			</view>
		</view>

		<view class="subsection">
			<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
		</view>
		
		<!-- 列表 -->
		<!-- 账单明细 -->
		<view class="" v-show="cdshow==true">
			<!-- 日期选择器 -->
			<view class="topbilledit">
				<view class="changetime1">
					<picker mode="date" :value="dataForm.costCycle" fields="month" @change="dateChange">
						<view class="selestDate">{{dataForm.costCycle}}</view>
					</picker>
				</view>
				<view class="changetime2">
					<u-icon name="arrow-down-fill" color="#666666" size="20"></u-icon>
				</view>
			</view>
			
			<view class="nodata" v-if="nodata==true" >
				暂无数据
			</view>
			<view class="yesdata" v-if="nodata==false">
				<view class="onerecord">
					共有 <span>1</span>条记录
				</view>
				<view class="records">
					<view class="records1">
						待支付
					</view>
					<view class="Currentamount">
						物业费: <span>￥{{amount}}</span>
					</view>
					<view class="Currentamount">
						管理费:￥ {{glf}}
					</view>
					<view class="Currentamount">
						中央空调使用费:￥ {{ktf}}
					</view>
					<view class="Currentamount">
						电梯费:￥ {{dtf}}
					</view>
				</view>
			</view>			
		</view>
		<!-- 缴费记录 -->
		<view class="" v-show="cdshow==false">
			<view class="topbilledit" @click="typechange">
				<view class="changetime1">
					{{expensedata}}
				</view>
				<view class="changetime2">
					<u-icon name="arrow-down-fill" color="#666666" size="20"></u-icon>
				</view>
			</view>
		<!-- 	列表 -->
			<view class="u-listdata">
				
				
				<u-list  @scrolltolower="scrolltolower" :pagingEnabled='true'>
					<u-list-item v-for="(item, index) in indexList" :key="index">
						
						<view class="companylist" @click="seedetail(item)">
							<view class="settled" v-if="item.status==1">
								预存
							</view>
							<h3>{{item.tenantInfo.name}}</h3>
							<view class="Currentamount">
								扣缴金额: <span>￥{{item.amount}}</span>
							</view>
							<view class="Currentamount">
								账户余额: {{item.surplus}}
							</view>
							<view class="Currentamount">
								租户电话:￥{{item.tenantInfo.tel}}
							</view>
							<view class="Currentamount">
								操作人: {{item.creator}}
							</view>
							<view class="Currentamount">
								扣缴时间: {{item.createDate}}
							</view>
						</view>
				
					</u-list-item>
				</u-list>
				
			</view>
		</view>


		<u-picker :show="showtype" :columns="columnstype" keyName="dictLabel" @confirm="confirmtype" @cancel='canceltype'>
		</u-picker>
	</view>
</template>

<script>
	import {
		isEmpty,
		getDictDataList
	} from "@/utils/index";
	export default {
		data() {
			return {
				showtype: false,
				cdshow: true,
				fatherparameter: {},
				expensedata:'全部',
				list: ['账单明细', '缴费记录', ],
				current: 0,
				dataForm: {
					tenantId: "",
					costCycle: "",
					type: "",
					page: 1,
					limit: 10,
				},
				indexList: [],
				payStatusList: [],
				amount:'',
				dtf:'',
				ktf:'',
				glf:'',
				nodata:true,
				pd:true,
				columnstype: [],
				jfpost: {
					tenantId: "",
					costCycle: "",
					type: "",
					page: 1,
					limit: 10,
				},
				
			}
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
		onLoad: function(options) { //option为object类型，会序列化上个页面传递的参数
			//	console.log(options); //打印出上个页面传递的参数。
			this.fatherparameter = JSON.parse(decodeURIComponent(options.para));
			//	console.log('userInfo', this.fatherparameter);

			this.dataForm.tenantId = this.fatherparameter.id;
			this.dataForm.costCycle = this.fatherparameter.cycle;
			this.dataForm.page = 1;
			
			
			this.jfpost.tenantId = this.fatherparameter.id;
			this.jfpost.costCycle = this.fatherparameter.cycle;
			this.jfpost.page = 1;
			
			this.getalldata();
			this.getPayStatusList();
			this.getPayTypeList();
		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},

		//监听页面隐藏
		onHide() {},
		//监听窗口尺寸变化
		onResize() {},
		//监听页面卸载
		onUnload() {},
		//监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {},


		methods: {
			
			    getPayTypeList() {
					this.columnstype=[getDictDataList("PayType")]
			    },
			
			getPayStatusList() {
				this.payStatusList = getDictDataList("PayStatus");
			//	console.log('0000', this.payStatusList)
			},
			goback() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			
			canceltype() {
				this.showtype = false;
			},
			confirmtype(e) {
				console.log('111111111111111111', e.value[0])
				this.showtype = false;
				this.expensedata = e.value[0].dictLabel;
					if( e.value[0].dictLabel=='全部'){
						this.jfpost.type= '';
					}	else{
						this.jfpost.type= e.value[0].dictValue;
					}		
								
					
				this.indexList=[];
				this.jfpost.page = 1;
				 this.getjfdata();
			},
			typechange() {
				this.showtype = true;
			},
			sectionChange(index) {
				this.current = index;
				if (index == 0) {
					this.cdshow = true;
					this.dataForm.page = 1;
					this.getalldata();
				} else {
					this.cdshow = false;
					this.jfpost.page = 1;
					this.indexList=[];
					 this.getjfdata();
				}
			},
			scrolltolower() {
				if(this.pd){
					this.getjfdata();
				}else{
					 return
				}
			},
			getjfdata(){
				this.$api.get('/payrecord/page', this.jfpost)
					.then(res => {
						//  console.log('111111111111111111',res.data.data.list)
						if (res.data.data.list.length != 0) {
							this.indexList.push(...res.data.data.list);
								this.jfpost.page = this.jfpost.page + 1;
								this.pd=true;
						} else {
							uni.showToast({
								title:'暂无更多数据了',
								icon: 'none',
								duration: 1500
							})
							this.pd=false;
						}									
								
					})
			},
			
			
			dateChange(e) {
				this.myday = e.target.value;
				this.dataForm.costCycle = e.target.value;
				this.jfpost.costCycle = e.target.value;
				
				this.dataForm.page = 1;
				this.getalldata();
			},
			getalldata() {
				this.$api.post('/billinfo/billDetail', this.dataForm)
					.then(res => {
						//console.log('111111111111111111', res.data)
					//	this.indexList = [];
					//	this.indexList = res.data.data;
					//	console.log('222222', this.indexList)
					if(res.data.data.length==0){
						//  console.log('111111111111111111',)
						  this.nodata=true;
					}else{
						this.amount=res.data.data[0].amount;
						this.glf=res.data.data[0].billLists[0].amount;
						this.ktf=res.data.data[0].billLists[1].amount;
						this.dtf=res.data.data[0].billLists[2].amount;
						 this.nodata=false;
					}	
					})
			},

		}
	}
</script>

<style lang="scss">
	.nodata{
		text-align: center;
		padding-top: 400rpx;
		
	}
	.yesdata{
		
	}
	.companylist {
		margin: 20rpx 30rpx;
		background: #fff;
		height: 280rpx;
		border-radius: 10px;
		position: relative;
	
		h3 {
			height: 70rpx;
			line-height: 70rpx;
			padding-left: 30rpx;
		}
	}
	.settled {
		background-color: #09C700;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 14rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}
	.Currentamount {
		padding-left: 30rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #BCB3A7;
	
		span {
			color: #FA5555;
			padding-left: 9rpx;
		}
	}
	.records1{
		background-color: #FA5555;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 14rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}
	.records{
		display: flex;
		flex-direction: column;
		// justify-content: center;
		position: relative;
		width: 690rpx;
		height: 210rpx;
		background: #fff;
		margin: 0 auto;
		border-radius: 9rpx;
	}
	.onerecord{
		width: 750rpx;
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 30rpx;
		color: #999;
		span{
			color: red;
		}
	}
	.topbilledit {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		height: 60rpx;
	}

	.changetime2 {
		padding-left: 10rpx;
	}

	.subsection {
		padding: 30rpx;
		background: #fff;
		margin-top: 30rpx;
	}

	.topname {
		height: 44px;
		width: 750rpx;
		display: flex;
		align-items: center;
	}

	.topname1 {
		width: 50rpx;
		padding-left: 10rpx;
	}

	.topname2 {
		width: 700rpx;
		text-align: center;
		font-weight: bold;
	}
</style>