|
|
@@ -0,0 +1,408 @@
|
|
|
+<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>
|
