property/user_ui/work/pages/manage/index.vue

<template>
	<view class="money">
		<view class="moneytop flexc">
			<view class="topl flexc flex1 overh">
				<image :src="adr"></image>
				<view class="over">幸福小区1号楼3单元1204</view>
			</view>
			<view class="topr flexcc flex0" @click="getLsFn">
				<image :src="zd"></image>
				<view>历史账单</view>
			</view>
		</view>
		<view class="count">
			<image :src="bg" class="bgimg"></image>
			<view class="counbox">
				<view class="tit mb16">尊敬的业主/租户您好！</view>
				<view class="num">您的待缴总额<text>677.20</text>元</view>
			</view>
		</view>
		<view class="mdetail">
			<view class="mdtop flexc">
				<!-- <view class="flexc flex0" @click.stop="choseflag=!choseflag">
					<image :src="chose" class="chose" v-if="choseflag"></image>
					<image :src="nchose" class="chose" v-else></image>
						全选
				</view> -->
				<view class="mdtnum">357.20 元</view>
			</view>
			<view>
				<uni-collapse ref="collapse" @change="change">
					<uni-collapse-item title-border="none">
						<template v-slot:title>
							<view class="coltit flexcj">
								<view class="flexc flex0" @click.stop="choseflag=!choseflag">
									<image :src="chose" v-if="choseflag" class="chose"></image>
									<image :src="nchose" v-else class="chose"></image>
										物业管理费
								</view>
								<view class="colnum flexc">
									<view class="num">277.20元</view>
									<view class="btn bga">待缴</view>
									<view class="btn bgb">已缴</view>
								</view>
							</view>	
						</template>
						<view class="content">
							<view class="cuntlist flexc">
								<view class="cltit">计费区间</view>
								<view class="cltxt">2024-11-01 至224-11-30</view>
							</view>
							<view class="cuntlist flexc">
								<view class="cltit">优惠金额</view>
								<view class="cltxt">0.00元</view>
							</view>
							<view class="cuntlist flexc">
								<view class="cltit">违约金额</view>
								<view class="cltxt">0.00元</view>
							</view>
							<view class="cuntlist flexc">
								<view class="cltit">应缴金额</view>
								<view class="cltxt co025">80.00元</view>
							</view>
						</view>
					</uni-collapse-item>
					<uni-collapse-item title-border="none">
						<template v-slot:title>
							<view class="coltit flexcj">
								<view class="flexc flex0" @click.stop="choseflag=!choseflag">
									<image :src="chose" v-if="choseflag" class="chose"></image>
									<image :src="nchose" v-else class="chose"></image>
										能耗费
								</view>
								<view class="colnum flexc">
									<view class="num">277.20元</view>
									<view class="btn bga">待缴</view>
									<view class="btn bgb">已缴</view>
								</view>
							</view>	
						</template>
						<view class="content">
							<view class="cuntlist flexc">
								<view class="cltit">计费区间</view>
								<view class="cltxt">2024-11-01 至224-11-30</view>
							</view>
							<view class="cuntlist flexc">
								<view class="cltit">优惠金额</view>
								<view class="cltxt">0.00元</view>
							</view>
							<view class="cuntlist flexc">
								<view class="cltit">违约金额</view>
								<view class="cltxt">0.00元</view>
							</view>
							<view class="cuntlist flexc">
								<view class="cltit">应缴金额</view>
								<view class="cltxt co025">80.00元</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<view class="mdetail">
			<view class="mdtop flexc">
				<!-- <view class="flexc flex0" @click.stop="choseflag=!choseflag">
					<image :src="chose" class="chose" v-if="choseflag"></image>
					<image :src="nchose" class="chose" v-else></image>
						全选
				</view> -->
				<view class="mdtnum">357.20 元</view>
			</view>
			<view>
				<uni-collapse ref="collapse" @change="change">
					<uni-collapse-item title-border="none">
						<template v-slot:title>
							<view class="coltit flexcj">
								<view class="flexc flex0" @click.stop="choseflag=!choseflag">
									<image :src="chose" v-if="choseflag" class="chose"></image>
									<image :src="nchose" v-else class="chose"></image>
										车位费
								</view>
								<view class="colnum flexc">
									<view class="num">277.20元</view>
									<view class="btn bga">待缴</view>
									<view class="btn bgb">已缴</view>
								</view>
							</view>	
						</template>
						<view class="content">
							<view class="cuntlist flexc">
								<view class="cltit">计费区间</view>
								<view class="cltxt">2024-11-01 至224-11-30</view>
							</view>
							<view class="cuntlist flexc">
								<view class="cltit">优惠金额</view>
								<view class="cltxt">0.00元</view>
							</view>
							<view class="cuntlist flexc">
								<view class="cltit">违约金额</view>
								<view class="cltxt">0.00元</view>
							</view>
							<view class="cuntlist flexc">
								<view class="cltit">应缴金额</view>
								<view class="cltxt co025">80.00元</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<view class="mfoot flexc">
			<view class="mgtit">待支付<text>¥ 357.20</text></view>
			<view class="mfbtn flexcc" @click="getPayFn">支付账单</view>
		</view>
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{},
		data(){
			return{
				adr:require("@/work/static/manage/adr.png"),
				bg:require("@/work/static/manage/bg.png"),
				zd:require("@/work/static/manage/zd.png"),
				chose:require("@/work/static/manage/chose.png"),
				nchose:require("@/work/static/manage/nchose.png"),
				
				choseflag:true,
				list:[],
				pageSize: 10,
				pageNum: 1,
				reachflag: true,
				wtdt:'',
			}
		},
		onLoad: function() {
		
		},
		onPageScroll(e) {
			// var scrollTop = Number(e.scrollTop);
			// // var listTop=Number(this.listTop)-Number(this.nvaHeight)
			// if(scrollTop>2){
			// 	this.scroflag=true
			// }else{
			// 	this.scroflag=false
			// }
		},
		// 上拉触底加载更多触发事件
		onReachBottom() {
			// if (this.reachflag) {
			// 	this.pageNum++
			// 	this.getDataFn()
			// }
		},
		methods:{
			checkPermi, checkRole,
			getLsFn(){
				this.$tab.navigateTo("/work/pages/manage/moneybill")
			},
			getPayFn(){
				this.$tab.navigateTo("/work/pages/manage/pay")
			},
			change(){
				
			},
			getDataFn(){
				var params={
					pageSize:this.pageSize,
					pageNum: this.pageNum,
				}
				params.noticeType=this.tabidx
				getNoticeList(params).then(res=>{
					if(res.code==200){
						if (res.rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = ''
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						if (this.pageNum == 1) {
							this.list = res.rows;
						} else {
							this.list = this.list.concat(res.rows)
						}
					}else{
						this.$toast(res.msg)
					}
				})
				
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.money	/deep/ .uni-collapse-item__title{background: #F3F3F3;margin-top: 10rpx;
border-radius: 10rpx;min-height: 92rpx;padding:12rpx 0 12rpx 24rpx;box-sizing: border-box;}
.money{padding: 124rpx 0 122rpx;
	.moneytop{position: fixed;left: 0;right: 0;top: 0;background: #ffffff;z-index: 2;padding: 24rpx 30rpx 34rpx;
		image{flex: 0 0 auto;}
		.topl{
			image{width: 26rpx;height: 24rpx;margin-right: 26rpx;}
			font-weight: bold;font-size: 26rpx;color: #272727;
		}
		.topr{margin-left: 24rpx;
			min-width: 166rpx;height: 42rpx;background: #EFF4FF;border-radius: 22rpx;background: #EFF4FF;font-weight: bold;font-size: 24rpx;color: #0256FD;padding: 4rpx 12rpx;box-sizing: border-box;
			image{width: 20rpx;height: 22rpx;margin-right: 6rpx;}
		}
	}
	.count{width:720rpx;height: 166rpx;position: relative;margin: 0 auto 30rpx;
		.bgimg{width: 100%;height: 100%;}
		.counbox{position: absolute;left: 0;right: 0;top: 0;bottom: 0;padding-top: 26rpx;padding-left: 42rpx;
			.tit{font-weight: bold;font-size: 22rpx;color: #0AB664;}
			.num{font-weight: bold;font-size: 22rpx;color: #FFFFFF;
				text{font-size: 40rpx;padding: 0 10rpx;}
			}
		}
		
	}
	.mdetail{width: 714rpx;background: #FFFFFF;border-radius: 20rpx;margin: 0 auto;padding: 24rpx;box-sizing: border-box;margin-bottom: 24rpx;
		.mdtop{padding-bottom: 20rpx;
			.mdttit{font-size: 30rpx;color: #272727;flex: 0 0 auto;}
			.mdtnum{font-size: 30rpx;color: #0256FD;font-weight: bold;flex: 1;text-align: right;margin-left: 20rpx;}
		}
		.chose{width: 26rpx;height: 26rpx;margin-right: 18rpx;flex: 0 0 auto;}
		.coltit{
			.table{font-size: 26rpx;color: #272727;font-weight: bold;}
		}
		.colnum{
			.num{font-size: 26rpx;color: #272727;font-weight: bold;}
			.btn{font-weight: 500;font-size: 20rpx;padding: 0 10rpx;margin-left: 16rpx;border-radius: 16rpx;	
				&.bga{color: #FE5A0E;background: #FFE8DE;border: 2rpx solid #FE5A0E;}
				&.bgb{color: #666666;background: #F1F1F1;border: 2rpx solid #C1C1C1;}
			}
		}
		.content{background: #F3F3F3;padding:20rpx 26rpx 4rpx;margin-top: 10rpx;
border-radius: 10rpx;
			.cuntlist{padding: 10rpx 0;}
			.cltit{font-weight: 500;font-size: 24rpx;color: #666666;flex: 0 0 auto;}
			.cltxt{font-weight: 500;font-size: 26rpx;color: #272727;flex: 1;text-align: right;margin-left: 12rpx;}
		}
	}
}
.mfoot{background: #ffffff;position: fixed;left: 0;right: 0;bottom: 0;min-height: 110rpx;z-index: 2;padding: 14rpx 18rpx;box-sizing: border-box;
	.mgtit{font-weight: bold;font-size: 24rpx;color: #272727;flex: 1;text-align: center;
		text{font-weight: bold;margin-left: 16rpx;font-size: 26rpx;color: #F40027;}
	}
	.mfbtn{width: 388rpx;height: 88rpx;font-weight: bold;margin-left: 18rpx;
font-size: 26rpx;color: #FFFFFF;
background: #0256FD;border-radius: 20rpx;}
}
</style>