parking_operation/pages/statisticalReport/roadModel/components/revenueReport.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"
          :padding="'0'"
          :tableTh="tableTh"
          :tableData="tableData"
          @pageChange="pageChange"
        />
      </view>
    </view>
    <view class="total">
      <view>
        车辆
        <text>{{ totalData.vehicleCount || 0 }}</text>辆，应收金额
        <text>{{ totalData.payAmount || 0 }}</text>元，实收金额
        <text>{{ totalData.realAmount || 0 }}</text>元，
        欠费金额
        <text>{{ totalData.amtOwe || 0 }}</text>元，其中贵州银行快捷支付
        <text>{{ totalData.quickAmt || 0 }}</text>元，贵州银行聚合支付
        <text>{{ totalData.unionAmt || 0 }}</text>元，微信支付
        <text>{{ totalData.wechatAmt || 0 }}</text>元，无感支付
        <text>{{ totalData.unconsAmt || 0 }}</text>元，现金支付
        <text>{{ totalData.cashAmt || 0 }}</text>元
      </view>
    </view>
  </view>
</template>

<script>
import TableRanking from '@/components/tableRanking.vue';
export default {
  components: {
    TableRanking
  },
  props: {
    tableTh: {
      type: Array,
      default: () => {
        return [
          {
            field: '停车场/路段',
            width: 120,
            key: 'roadName'
          },
          {
            field: '车辆(辆)',
            width: 80,
            key: 'vehicleCount'
          },
          {
            field: '应收金额(元)',
            width: 80,
            key: 'payAmount'
          },
          {
            field: '实收金额(次)',
            width: 80,
            key: 'realAmount'
          },
          {
            field: '欠费金额(元)',
            width: 80,
            key: 'amtOwe'
          },
          {
            field: '贵州银行快捷支付(元)',
            width: 150,
            key: 'quickAmt'
          },
          {
            field: '贵州银行聚合支付(元)',
            width: 150,
            key: 'unionAmt'
          },
          {
            field: '微信(元)',
            width: 80,
            key: 'wechatAmt'
          },
          {
            field: '无感(元)',
            width: 80,
            key: 'unconsAmt'
          },
          {
            field: '现金(元)',
            width: 80,
            key: 'cashAmt'
          }
        ];
      }
    }
  },
  data() {
    return {
      loading: false,
      tableData: {
        current: 1,
        total: 0,
        list: []
      },
      totalData: {},
      currentDate: [],
      beginTime: undefined,
      endTime: undefined
    };
  },
  methods: {
    getData(data) {
      if (data.length) {
        this.beginTime = data[0];
        this.endTime = data[1];
      }
      this.currentDate = data;
      this.tableData.current = 1;
      this.getIncomeTotal();
      this.getIncomeList();
    },
    getIncomeTotal() {
      uni.$u.api.statisticalReportApi
        .getRoadIncomeTotalApi({
          beginTime: this.beginTime,
          endTime: this.endTime
        })
        .then((res) => {
          if (res.code === 200) {
            this.totalData = res.data;
          }
        });
    },
    getIncomeList() {
      this.loading = true;
      uni.$u.api.statisticalReportApi
        .getRoadIncomeListApi({
          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.getIncomeList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import './../../styles/report.scss';
</style>