<template>
<view class="page">
<view class="contain">
<u-cell-group class="toptemplate" style="flex:0">
<u-cell :title="mytitle" @click="floorchange">
<u-icon slot="icon" size="40" color="#fff" name="map"></u-icon>
<u-icon slot="right-icon" size="40" color="#fff" name="search"></u-icon>
</u-cell>
</u-cell-group>
<view class="topbill">
<view class="topbilledit">
<view class="changetime1">
<picker mode="date" :value="myday" fields="month" @change="dateChange">
<view class="selestDate">{{myday}}</view>
</picker>
</view>
<view class="changetime2">
<u-icon name="arrow-down-fill" color="#999" size="20"></u-icon>
</view>
</view>
<view class="topbilledit" @click="typechange">
<view class="changetime1">
{{mytype}}
</view>
<view class="changetime2">
<u-icon name="arrow-down-fill" color="#999" size="20"></u-icon>
</view>
</view>
</view>
<view class="u-listdata">
<view style="padding:16rpx 0 16rpx 32rpx">
共有 <span style="color: red">{{totalnumber}}</span>条记录
</view>
<u-list @scrolltolower="scrolltolower" :pagingEnabled='true' style="height:400px;flex:1;">
<u-list-item v-for="(item, index) in indexList" :key="index">
<view class="companylist" @click="seedetail(item)">
<view class="settled outstanding" v-if="item.status==1">
已结清
</view>
<view class="outstanding" v-if="item.status==0">
未结清
</view>
<h3>{{item.name}}</h3>
<view class="Currentamount">
本期金额: <span>￥{{item.feeTotal}}</span>
</view>
<view class="Currentamount">
账户余额:￥{{item.balance}}
</view>
<view class="Currentamount">
联系电话: {{item.tel}}
</view>
</view>
</u-list-item>
</u-list>
</view>
</view>
<u-picker :show="showtype" :itemHeight="80" :columns="columnstype" keyName="label" @confirm="confirmtype"
@cancel='canceltype'>
</u-picker>
<u-picker :show="showfloor" :itemHeight="80" ref="uPicker" :loading="loading" @confirm="confirmfloor"
@cancel='cancelfloor' :columns="columns" keyName="orgName" @change="changeHandler"></u-picker>
<u-notify ref="uNotify" :show="showdct" message="服务器请求失败"></u-notify>
</view>
</template>
<script>
export default {
components: {},
data() {
const currentDate = this.getDate({
format: 'yyyy-mm'
})
return {
totalnumber: 0,
indexList: [],
dataForm: {
projectId: "",
buildingId: "",
storeyId: "",
cycle: "",
status: "",
page: 1,
limit: 10,
},
showtype: false,
showdct: false,
mytitle: '',
alldata: [],
showfloor: false,
loading: false,
columns: [],
pd: true,
columnData: [],
myday: '',
mytype: '全部',
showPicker: false,
myday: currentDate,
columnstype: [
[{
label: '全部',
id: ''
}, {
label: '未结清',
id: 0
},
{
label: '已结清',
id: 1
}
]
],
}
},
//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
onLoad() {
this.getfloor();
},
//监听页面隐藏
onHide() {},
//监听窗口尺寸变化
onResize() {},
//监听页面卸载
onUnload() {},
//监听用户下拉动作，一般用于下拉刷新
onPullDownRefresh() {},
methods: {
seedetail(e) {
let faltesdata = {
name: e.name,
id: e.id,
cycle: e.cycle
}
uni.navigateTo({
url: "/pages/Workorder/Tenantbill/companybill/companybill?para=" + encodeURIComponent(JSON
.stringify(faltesdata))
})
},
scrolltolower() {
if (this.pd) {
this.getalldata();
} else {
return
}
},
getalldata() {
this.$api.get('/billinfo/paypage', this.dataForm)
.then(res => {
this.totalnumber = res.data.data.total;
if (res.data.data.list.length != 0) {
this.indexList.push(...res.data.data.list);
this.dataForm.page = this.dataForm.page + 1;
this.pd = true;
} else {
uni.showToast({
title: '暂无更多数据了',
icon: 'none',
duration: 1500
})
this.pd = false;
}
})
},
canceltype() {
this.showtype = false;
},
confirmtype(e) {
this.showtype = false;
this.mytype = e.value[0].label;
this.dataForm.status = e.value[0].id;
this.indexList = [];
this.dataForm.page = 1;
this.getalldata();
},
typechange() {
this.showtype = true;
},
dateChange(e) {
this.myday = e.target.value;
this.dataForm.cycle = e.target.value;
this.dataForm.page = 1;
this.indexList = [];
this.getalldata();
},
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;
// day = day > 9 ? day : '0' + day;
return `${year}-${month}`;
},
getfloor() {
this.$api.get('/control/getOrgStructureTree/', {})
.then(res => {
if (res.data.code == 0) {
this.dataForm.projectId = res.data.data[0].orgId;
this.mytitle = res.data.data[0].orgName;
this.alldata = res.data.data[0].childrenList;
this.columns = [
res.data.data[0].childrenList,
res.data.data[0].childrenList[0].childrenList
]
let allfloor = [];
for (let i = 0; i < res.data.data[0].childrenList.length; i++) {
allfloor.push(res.data.data[0].childrenList[i].childrenList)
}
this.columnData = allfloor;
this.indexList = [];
this.dataForm.page = 1;
this.getalldata();
} else {
this.showdct = true
}
})
},
floorchange() {
this.showfloor = true;
},
changeHandler(e) {
const {
columnIndex,
index,
// 微信小程序无法将picker实例传出来，只能通过ref操作
picker = this.$refs.uPicker
} = e
if (columnIndex === 0) {
this.loading = true
picker.setColumnValues(1, this.columnData[index])
this.loading = false
}
},
confirmfloor(e) {
this.mytitle = e.value[0].orgName + e.value[1].orgName;
this.dataForm.buildingId = e.value[0].orgId;
this.dataForm.storeyId = e.value[1].orgId;
this.indexList = [];
this.dataForm.page = 1;
this.showfloor = false;
this.getalldata();
},
cancelfloor() {
this.showfloor = false;
},
}
}
</script>
<style lang="scss">
.companylist {
margin: 24rpx 32rpx 0;
background: #fff;
padding: 24rpx 32rpx ;
border-radius: 8rpx;
position: relative;
h3 {
margin-bottom: 24rpx;
}
.Currentamount {
line-height: 40rpx;
margin-bottom: 6rpx;
color: #999;
span {
color: #FA5555;
padding-left: 9rpx;
}
}
.outstanding{
position: absolute;
width:96rpx;
height: 48rpx;
border-radius: 0 8rpx 0 20rpx;
right:0;
line-height: 48rpx;
text-align: center;
top:0;
z-index: 1;
font-size: 22rpx;
background-color:#FA5555 ;
color: #fff;
&.settled{
background-color:#09C700 ;
}
}
}
.topbill {
display: flex;
justify-content: space-around;
align-items: center;
height: 88rpx;
background-color: #fff;
.topbilledit {
display: flex;
justify-content: space-around;
align-items: center;
}
.changetime1 {
padding-right: 10rpx;
}
}
.page {
height: 100%;
overflow: hidden;
.contain {
height: 100%;
padding: 0;
display: flex;
flex-direction: column;
.u-listdata {
height: 400px;
flex: 1;
display: flex;
flex-direction: column;
}
}
}
</style>