|
|
@@ -1,22 +1,446 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
-
|
|
|
+ <view class="billall">
|
|
|
+ <u-cell-group>
|
|
|
+ <u-cell :title="mytitle" value="修改" :isLink="true" @click="floorchange">
|
|
|
+ <u-icon slot="icon" size="40" name="map"></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="#666666" 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="#666666" size="20"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <!-- <t-table>
|
|
|
+ <t-tr>
|
|
|
+ <t-th>序号</t-th>
|
|
|
+ <t-th>姓名</t-th>
|
|
|
+ <t-th>年龄</t-th>
|
|
|
+ <t-th>爱好</t-th>
|
|
|
+ <t-th>操作</t-th>
|
|
|
+ </t-tr>
|
|
|
+ <t-tr v-for="item in tableList" :key="item.id">
|
|
|
+ <t-td>{{ item.id + 1 }}</t-td>
|
|
|
+ <t-td>{{ item.name }}</t-td>
|
|
|
+ <t-td>{{ item.age }}</t-td>
|
|
|
+ <t-td>{{ item.hobby }}</t-td>
|
|
|
+ <t-td align="left"> <u-button @click="edit(item)" size="small" type="primary" :plain="true" text="编辑"></u-button></t-td>
|
|
|
+
|
|
|
+ </t-tr>
|
|
|
+ </t-table> -->
|
|
|
+
|
|
|
+<view class="u-listdata">
|
|
|
+
|
|
|
+
|
|
|
+ <u-list @scrolltolower="scrolltolower" :pagingEnabled='true'>
|
|
|
+ <u-list-item v-for="(item, index) in indexList" :key="index">
|
|
|
+ <!-- <u-cell :title="`列表长度-${index + 1}`">
|
|
|
+ <u-avatar slot="icon" shape="square" size="35" :src="item.url"
|
|
|
+ customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
|
|
+ </u-cell> -->
|
|
|
+ <view class="companylist" @click="seedetail(item)">
|
|
|
+ <view class="settled" 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.elecAmount}}
|
|
|
+ </view>
|
|
|
+ <view class="Currentamount">
|
|
|
+ 账户余额:￥{{item.balance}}
|
|
|
+ </view>
|
|
|
+ <view class="Currentamount">
|
|
|
+ 联系电话: {{item.tel}}
|
|
|
+ </view>
|
|
|
+ <view class="Callfee" v-if="item.status==0" @click.stop="handleClick(item.id)">
|
|
|
+ 催费
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </u-list-item>
|
|
|
+ </u-list>
|
|
|
+
|
|
|
+</view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <u-picker :show="showtype" :columns="columnstype" keyName="label" @confirm="confirmtype" @cancel='canceltype'>
|
|
|
+ </u-picker>
|
|
|
+ <u-picker :show="showfloor" 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>
|
|
|
+ // import tTable from '@/components/t-table/t-table.vue';
|
|
|
+ // import tTh from '@/components/t-table/t-th.vue';
|
|
|
+ // import tTr from '@/components/t-table/t-tr.vue';
|
|
|
+ // import tTd from '@/components/t-table/t-td.vue';
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ // tTable,
|
|
|
+ // tTh,
|
|
|
+ // tTr,
|
|
|
+ // tTd
|
|
|
+ },
|
|
|
data() {
|
|
|
+ const currentDate = this.getDate({
|
|
|
+ format: 'yyyy-mm'
|
|
|
+ })
|
|
|
return {
|
|
|
-
|
|
|
+ setyesno: true,
|
|
|
+ // tableList: [{
|
|
|
+ // id: 0,
|
|
|
+ // name: '张三',
|
|
|
+ // age: '19',
|
|
|
+ // hobby: '游泳'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 1,
|
|
|
+ // name: '李四',
|
|
|
+ // age: '21',
|
|
|
+ // hobby: '绘画'
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ indexList: [],
|
|
|
+
|
|
|
+
|
|
|
+ dataList: [],
|
|
|
+ dataForm: {
|
|
|
+ projectId: "",
|
|
|
+ buildingId: "",
|
|
|
+ storeyId: "",
|
|
|
+ cycle: "",
|
|
|
+ status: "",
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ },
|
|
|
+
|
|
|
+ showtype: false,
|
|
|
+ showdct: false,
|
|
|
+ mytitle: '',
|
|
|
+ alldata: [],
|
|
|
+ showfloor: false,
|
|
|
+ loading: false,
|
|
|
+ columns: [],
|
|
|
+ columnData: [],
|
|
|
+ myday: '',
|
|
|
+ mytype: '全部',
|
|
|
+ showPicker: false,
|
|
|
+ myday: currentDate,
|
|
|
+ columnstype: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ label: '全部',
|
|
|
+ id: ''
|
|
|
+ }, {
|
|
|
+ label: '水费',
|
|
|
+ id: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '电费',
|
|
|
+ id: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '物业费',
|
|
|
+ id: 2
|
|
|
+ }, {
|
|
|
+ label: '预存',
|
|
|
+ id: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '补助',
|
|
|
+ id: 4
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '撤销补助',
|
|
|
+ id: 5
|
|
|
+ }, {
|
|
|
+ label: '退费',
|
|
|
+ id: 6
|
|
|
+ },
|
|
|
+
|
|
|
+ ]
|
|
|
+ ],
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
+ //监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
|
|
|
+ onLoad() {
|
|
|
+ this.getfloor();
|
|
|
+ // this.loadmore();
|
|
|
+ },
|
|
|
+ //监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
|
|
|
+ onReady() {
|
|
|
+ // 微信小程序需要用此写法
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //监听页面隐藏
|
|
|
+ onHide() {},
|
|
|
+ //监听窗口尺寸变化
|
|
|
+ onResize() {},
|
|
|
+ //监听页面卸载
|
|
|
+ onUnload() {},
|
|
|
+ //监听用户下拉动作，一般用于下拉刷新
|
|
|
+ onPullDownRefresh() {},
|
|
|
+
|
|
|
+
|
|
|
methods: {
|
|
|
-
|
|
|
+ seedetail(e){
|
|
|
+ console.log('222',e)
|
|
|
+ },
|
|
|
+ handleClick(e){
|
|
|
+ console.log('111111111111111111',e)
|
|
|
+
|
|
|
+ },
|
|
|
+ scrolltolower() {
|
|
|
+ // this.loadmore()
|
|
|
+ this.dataForm.page = this.dataForm.page + 1;
|
|
|
+ console.log('111111111111111111', this.dataForm.page)
|
|
|
+ this.$api.get('/billinfo/paypage', this.dataForm)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.data.list.length != 0) {
|
|
|
+ this.indexList.push(...res.data.data.list);
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title:'暂无更多数据了',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 1500
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('111111111111111111', this.indexList)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loadmore() {
|
|
|
+ // for (let i = 0; i < 30; i++) {
|
|
|
+ // this.indexList.push({
|
|
|
+ // url: this.urls[uni.$u.random(0, this.urls.length - 1)]
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ getalldata() {
|
|
|
+ this.$api.get('/billinfo/paypage', this.dataForm)
|
|
|
+ .then(res => {
|
|
|
+ this.indexList = [];
|
|
|
+ this.indexList = res.data.data.list;
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // edit(item) {
|
|
|
+ // console.log('111111111111111111', item)
|
|
|
+ // },
|
|
|
+ canceltype() {
|
|
|
+ this.showtype = false;
|
|
|
+ },
|
|
|
+ confirmtype(e) {
|
|
|
+ // console.log('111111111111111111', e.value[0])
|
|
|
+ this.showtype = false;
|
|
|
+ this.mytype = e.value[0].label;
|
|
|
+ this.dataForm.cycle = e.value[0].id;
|
|
|
+ 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.getalldata();
|
|
|
+ },
|
|
|
+ getDate(type) {
|
|
|
+ const date = new Date();
|
|
|
+ let year = date.getFullYear();
|
|
|
+ let month = date.getMonth() + 1;
|
|
|
+ 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;
|
|
|
+ //console.log('111111111111111111', 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)
|
|
|
+ }
|
|
|
+ // console.log('111111111111111111',allfloor)
|
|
|
+ this.columnData = allfloor;
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ this.getalldata();
|
|
|
+ },
|
|
|
+ confirmfloor(e) {
|
|
|
+ console.log('222222', e.value)
|
|
|
+ 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.showfloor = false;
|
|
|
+ this.getalldata();
|
|
|
+ },
|
|
|
+ cancelfloor() {
|
|
|
+ this.showfloor = false;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss">
|
|
|
+ .Currentamount {
|
|
|
+ padding-left: 30rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ color: #BCB3A7;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #FA5555;
|
|
|
+ padding-left: 9rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+.Callfee{
|
|
|
+ width: 100rpx;
|
|
|
+ height: 45rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height:45rpx;
|
|
|
+ color: #5C8FFF;
|
|
|
+ border: 1px solid #5C8FFF;
|
|
|
+ font-size: 22rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10rpx;
|
|
|
+ right: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .outstanding {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .billall {}
|
|
|
+
|
|
|
+ .topbill {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100rpx;
|
|
|
+ background-color: #e6e6e6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topbilledit {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .changetime1 {
|
|
|
+ padding-right: 10rpx;
|
|
|
+ }
|
|
|
</style>
|
yanggang