|
@@ -0,0 +1,375 @@
|
|
|
+<template>
|
|
|
+ <view class="billall">
|
|
|
+
|
|
|
+ <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>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="u-listdata">
|
|
|
+ <view style="padding:10rpx 0 0 30rpx">
|
|
|
+ 共有 <span style="color: red">{{totalnumber}}</span>条记录
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-list @scrolltolower="scrolltolower" :pagingEnabled='true'>
|
|
|
+ <u-list-item v-for="(item, index) in indexList" :key="index">
|
|
|
+
|
|
|
+ <view class="companylist">
|
|
|
+ <view class="settled" v-if="item.isSettled==1">
|
|
|
+ 已结清
|
|
|
+ </view>
|
|
|
+ <view class="outstanding" v-if="item.isSettled==0">
|
|
|
+ 未结清
|
|
|
+ </view>
|
|
|
+ <h3>{{item.tenantName}}</h3>
|
|
|
+ <view class="Currentamount">
|
|
|
+ 欠费金额: <span>¥{{item.amount}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="Currentamount">
|
|
|
+ 欠费天数: {{item.arrearDay}}
|
|
|
+ </view>
|
|
|
+ <view class="Currentamount">
|
|
|
+ 账单类型:{{item.billType}}
|
|
|
+ </view>
|
|
|
+ <view class="Currentamount">
|
|
|
+ 联系电话: {{item.phone}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="Callfee" v-if="item.isExpedit==1" @click.stop="handleClick(item.id)">
|
|
|
+ 催费
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </u-list-item>
|
|
|
+ </u-list>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <u-picker :show="showtype" :columns="columnstype" keyName="dictLabel" @confirm="confirmtype" @cancel='canceltype'>
|
|
|
+ </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,
|
|
|
+ setyesno: true,
|
|
|
+ indexList: [],
|
|
|
+ dataList: [],
|
|
|
+ dataForm: {
|
|
|
+ arrearDay: "",//欠费天数
|
|
|
+ billType: "",//账单类型
|
|
|
+ cycle: currentDate,//欠费周期
|
|
|
+ isExpedit: "",//是否催费0否1是
|
|
|
+ order: "",
|
|
|
+ orderField: "",
|
|
|
+ tenantName: "",//租客名称
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ },
|
|
|
+
|
|
|
+ showtype: false,
|
|
|
+ showdct: false,
|
|
|
+ mytitle: '',
|
|
|
+ alldata: [],
|
|
|
+ showfloor: false,
|
|
|
+ loading: false,
|
|
|
+ columns: [],
|
|
|
+ pd: true,
|
|
|
+ columnData: [],
|
|
|
+ columnstypes:[],
|
|
|
+ myday: '',
|
|
|
+ mytype: '全部',
|
|
|
+ showPicker: false,
|
|
|
+ myday: currentDate,
|
|
|
+ columnstype: [ ],
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参
|
|
|
+ onLoad() {
|
|
|
+ let getDictDataList=uni.getStorageSync('getDictDataList');
|
|
|
+ for(let i=0;i<getDictDataList.length;i++){
|
|
|
+ if(getDictDataList[i].dictType=='PayType'){
|
|
|
+ this.columnstypes=getDictDataList[i].dataList;
|
|
|
+ this.columnstype=[getDictDataList[i].dataList];
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getalldata();
|
|
|
+
|
|
|
+ },
|
|
|
+ //监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
|
|
|
+ onReady() {
|
|
|
+ // 微信小程序需要用此写法
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //监听页面隐藏
|
|
|
+ onHide() {},
|
|
|
+ //监听窗口尺寸变化
|
|
|
+ onResize() {},
|
|
|
+ //监听页面卸载
|
|
|
+ onUnload() {},
|
|
|
+ //监听用户下拉动作,一般用于下拉刷新
|
|
|
+ onPullDownRefresh() {},
|
|
|
+
|
|
|
+
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ handleClick(e) {
|
|
|
+
|
|
|
+ let Temporarydata=[e];
|
|
|
+
|
|
|
+ let stringdata = JSON.stringify(Temporarydata);
|
|
|
+ let finallydata = stringdata.replace (/"/g,'');
|
|
|
+
|
|
|
+ this.$api.post('/expeditrecord/charge',finallydata)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.code == 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '催费成功',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 1500
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.data.msg,
|
|
|
+ icon: 'none',
|
|
|
+ duration: 1500
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.dataForm.page=1;
|
|
|
+ this.indexList=[];
|
|
|
+this.getalldata();
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ scrolltolower() {
|
|
|
+ if (this.pd) {
|
|
|
+ this.getalldata();
|
|
|
+ } else {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getalldata() {
|
|
|
+
|
|
|
+ this.$api.get('/expeditrecord/apppage', this.dataForm)
|
|
|
+ .then(res => {
|
|
|
+
|
|
|
+ this.totalnumber = res.data.data.total;
|
|
|
+ if (res.data.data.list.length != 0) {
|
|
|
+ function transform(a, b) {
|
|
|
+ loop: for (let i = 0; i < a.length; i++) {
|
|
|
+ for (let j = 0; j < b.length; j++) {
|
|
|
+ if (a[i].billType == b[j].dictValue) {
|
|
|
+ a[i].billType = b[j].dictLabel;
|
|
|
+ continue loop;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a[i].billType = a[i].billType;
|
|
|
+ }
|
|
|
+ return a;
|
|
|
+ }
|
|
|
+ res.data.data.list=transform(res.data.data.list, this.columnstypes)
|
|
|
+
|
|
|
+ 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) {
|
|
|
+ if( e.value[0].dictLabel=="全部"){
|
|
|
+ this.showtype = false;
|
|
|
+ this.mytype = e.value[0].dictLabel;
|
|
|
+ this.dataForm.billType ='';
|
|
|
+ this.indexList = [];
|
|
|
+ this.dataForm.page = 1;
|
|
|
+ this.getalldata();
|
|
|
+ }else{
|
|
|
+ this.showtype = false;
|
|
|
+ this.mytype = e.value[0].dictLabel;
|
|
|
+ this.dataForm.billType = e.value[0].dictValue;
|
|
|
+ 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() + 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}`;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<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: space-around;
|
|
|
+ align-items: center;
|
|
|
+ height: 100rpx;
|
|
|
+ background-color: #e6e6e6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topbilledit {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .changetime1 {
|
|
|
+ padding-right: 10rpx;
|
|
|
+ }
|
|
|
+</style>
|