<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> </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; .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>