parking_operation/pages/statisticalReport/roadModel/components/arrearsReport.vue

<!-- 欠费统计 -->
<template>
  <view class="container">
    <view class="table">
      <!-- <view class="table-date" v-if="currentDate">{{ currentDate.join(' 至 ') }}</view> -->
      <view class="table-box">
        <TableRanking
          :loading="loading"
          :tableTh="tableTh"
          :tableData="tableData"
          @pageChange="pageChange"
        />
      </view>
    </view>
    <view class="total">
      <view>
        欠费次数
        <text>{{ totalData.oweCount || 0 }}</text>次，欠费金额
        <text>{{ totalData.amtOwe || 0 }}</text>元
      </view>
    </view>
  </view>
</template>

<script>
import TableRanking from '@/components/tableRanking.vue';
export default {
  components: {
    TableRanking
  },
  props: {
    tableTh: {
      type: Array,
      default: () => {
        return [
          { field: '车牌号', key: 'vehicleNo', width: 100 },
          { field: '车主姓名', key: 'name', width: 100 },
          { field: '联系方式', key: 'mobile', width: 100 },
          { field: '欠费次数(次)', width: 80, key: 'oweCount' },
          { field: '欠费金额(元)', width: 80, key: 'amtOwe' }
        ];
      }
    }
  },
  data() {
    return {
      loading: false,
      totalData: {},
      tableData: {
        current: 1,
        total: 0,
        list: []
      },
      currentDate: [],
      beginTime: undefined,
      endTime: undefined
    };
  },
  methods: {
    tabClick(item) {
      this.tabCurName = item.value;
      this.tableData.current = 1;
			this.getArreasReportTotal();
			this.getArreasReportList();
    },
    getData(data) {
      if (data.length) {
        this.beginTime = data[0];
        this.endTime = data[1];
      }
      this.currentDate = data;
      this.tableData.current = 1;
      this.getArreasReportTotal();
      this.getArreasReportList();
    },
    getArreasReportTotal() {
      uni.$u.api.statisticalReportApi
        .getArrearsReportTotalApi({
          beginTime: this.beginTime,
          endTime: this.endTime
        })
        .then((res) => {
          if (res.code === 200) {
            this.totalData = res.data;
          }
        });
    },
    getArreasReportList() {
      this.loading = true;
      uni.$u.api.statisticalReportApi
        .getArrearsReportListApi({
          beginTime: this.beginTime,
          endTime: this.endTime,
          pageNum: this.tableData.current,
          pageSize: 10
        })
        .then((res) => {
          if (res.code === 200) {
            this.tableData.list = res.rows;
            this.tableData.total = res.total;
          }
          this.loading = false;
        });
    },
    pageChange(cur) {
      this.tableData.current = cur;
      this.getArreasReportList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import './../../styles/report.scss';
.tab {
  margin-bottom: 10px;
}
</style>