share-fun-web/src/views/statistics/withdrawalRecord/index.vue

<template>
  <div class="">
    <div class="m-10 bg-w p-20 br-10 f-sa-s">
      <div class="f-fs-c f-col">
        <div style="font-size: 16px;">总收入金额</div>
        <div class="mt-4" style="font-weight: bold; font-size: 18px;">
          {{ statistics.sumPaidPrice }}
        </div>
      </div>
      <div class="f-fs-c f-col">
        <div style="font-size: 16px;">成功提现金额</div>
        <div class="mt-4" style="font-weight: bold; font-size: 18px;">
          {{ statistics.undrawnAmount }}
        </div>
      </div>
      <div class="f-fs-c f-col">
        <div style="font-size: 16px;">未提现金额</div>
        <div class="mt-4" style="font-weight: bold; font-size: 18px;">
          {{ statistics.withdrawalAmount }}
        </div>
      </div>
    </div>

    <toolbar @on-filter="filterData" @on-reset="filterData" />

    <base-table
      class="m-10 bg-w p-20 br-10"
      :columns="columns"
      :items="items"
      :pagination="pagination"
      :page-change="pageChange"
    />
  </div>
</template>

<script>
import toolbar from './toolbar';
import mxFilterList from '@/mixins/filterList';
import { getPage, getCount } from '@/api/statistics/withdrawalRecord';

export default {
  name: 'WithdrawalRecord',

  components: { toolbar },

  mixins: [
    mxFilterList({
      fetchList: getPage // 在下方data再声明一个 fetchList: iGetList 同等效果
    })
  ],

  data() {
    return {
      columns: [
        {
          key: 'id',
          name: '提现编号',
          width: this.$col.b
        },
        {
          key: 'transactionId',
          name: '第三方支付标识',
          minWidth: this.$col.b
        },
        {
          key: 'accountName',
          name: '提现用户',
          width: this.$col.m
        },
        {
          key: 'phonenumber',
          name: '账号手机号码',
          width: this.$col.m
        },
        {
          key: 'channels',
          name: '提现渠道',
          width: this.$col.s
        },
        {
          key: 'value',
          name: '提现金额',
          minWidth: this.$col.s,
          render: (h, { row }) => h('span', `￥${row.value}`)
        },
        {
          key: 'createAt',
          name: '提现时间',
          width: this.$col.b
        },
        {
          key: 'auditStatus',
          name: '审核状态',
          width: this.$col.s,
          type: 'tag',
          fetchTagType: val => {
            switch (val) {
              case 1:
                return 'success';
              case 0:
                return 'info';
              case -1:
                return 'danger';
              default:
                return 'info';
            }
          },
          tagName: row => {
            switch (row.auditStatus) {
              case 1:
                return '通过';
              case 0:
                return '待审核';
              case -1:
                return '拒绝';
              default:
                return '-';
            }
          }
        },
        {
          key: 'auditMsg',
          name: '审核备注',
          width: this.$col.b,
          'show-overflow-tooltip': true
        },
        {
          key: 'action',
          name: '操作',
          width: '120',
          render: (h, { row }) => {
            const action = [];
            row.auditStatus === 0 &&
              action.push(
                h(
                  'el-button',
                  {
                    props: {
                      type: 'text'
                    },
                    on: {
                      click: () =>
                        this.$WithdrawalRecordVerifyItemModal({
                          id: row.id,
                          auditStatus: row.auditStatus
                        })
                    }
                  },
                  '审核'
                )
              );
            return h('div', action);
          }
        }
      ],
      statistics: {}
    };
  },
  created() {
    this.$g_on('withdrawal_record_reload', this.reload);
  },

  beforeDestroy() {
    this.$g_off('withdrawal_record_reload', this.reload);
  },

  methods: {
    async pageChange(page) {
      this.pagination.page = page;
      const inParams = {
        ...this.filter,
        ...this.internalFilterObj,
        start: this.pagination.page,
        limit: this.pagination.pageSize
      };

      const { data, msg } = await this.apiList(inParams);
      const res2 = await getCount(inParams);
      this.statistics = res2.data;
      if ('data' in data) {
        const items = data.data;
        if (items.length === 0 && this.pagination.page > 1) {
          this.pageChange(1);
        } else {
          this.items = items;
          this.pagination.total = data.total;
        }
        this.loadCallBack(data);
      }
    }
  }
};
</script>

<style type="scss" scoped></style>