shuhi-ui/src/views/finance/withdrawal/index.vue

<template>
  <ele-page flex-table>
    <page-search @search="reload" :status="useStatus"></page-search>

    <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
      <template #toolbar>
        <div class="flex items-center mb-4">
          <el-statistic
            :value="statistics.totalWithdrawMoney"
            title="提现累计金额"
            value-style="font-size:30px"
            class="mr-10"
          ></el-statistic>
          <el-statistic
            :value="statistics.unWithdrawMoney"
            title="待提现金额"
            value-style="font-size:30px"
            class="mr-10"
          ></el-statistic>
          <el-statistic
            :value="statistics.auditWithdrawMoney"
            title="提现中金额"
            value-style="font-size:30px"
            class="mr-10"
          ></el-statistic>
          <el-statistic
            :value="statistics.withdrawSuccessMoney"
            title="已提现金额"
            value-style="font-size:30px"
            class="mr-10"
          ></el-statistic>
          <el-statistic
            :value="statistics.averageWithdrawDuration"
            title="平均提现时长"
            value-style="font-size:30px"
            class="mr-10"
          ></el-statistic>
          <el-statistic
            :value="statistics.noWithdrawMoney"
            title="长期不提现金额"
            value-style="font-size:30px"
            class="mr-10"
          ></el-statistic>
        </div>

        <div class="flex items-center mb-6">
          <div class="common-title mr-10">交易记录</div>
          <el-button
            type="primary"
            v-permission="'finance:withdrawal:batchAudit'"
            @click="handleStepAudit()"
          >
            一键审核
          </el-button>
        </div>

        <el-radio-group @change="handleStatusChange" v-model="useStatus">
          <el-radio-button label="全部" value="" />
          <el-radio-button label="提现中" value="2" />
          <el-radio-button label="提现完成" value="4" />
          <el-radio-button label="提现失败" value="5" />
          <el-radio-button label="长期不提现用户" value="6" />
        </el-radio-group>
      </template>

      <template #status="{ row }">
        {{ statusDicts.find((d) => d.value == row.status)?.label }}
      </template>

      <template #action="{ row }">
        <div>
          <el-button
            type="primary"
            link
            v-permission="'finance:withdrawal:detail'"
            @click="handleUpdate(row)"
          >
            [详情]
          </el-button>
          <el-button
            type="primary"
            link
            v-if="row.status == 1"
            v-permission="'finance:withdrawal:audit'"
            @click="handleChangeStatus(row)"
          >
            [审核]
          </el-button>
        </div>
      </template>
    </common-table>

    <!-- 审核弹窗 -->
    <audit-dialog ref="auditDialogRef" @success="reload" />
  </ele-page>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import CommonTable from '@/components/CommonPage/CommonTable.vue';
  import pageSearch from './components/page-search.vue';
  import { useDictData } from '@/utils/use-dict-data';
  import request from '@/utils/request';
  import auditDialog from './components/audit-dialog.vue';

  defineOptions({ name: 'withdrawal' });

  // 添加统计数据的响应式对象
  const statistics = reactive({
    totalWithdrawMoney: 0,
    unWithdrawMoney: 0,
    auditWithdrawMoney: 0,
    withdrawSuccessMoney: 0,
    averageWithdrawDuration: 0,
    noWithdrawMoney: 0
  });

  // 获取统计数据
  async function fetchStatistics() {
    try {
      const res = await request.get('/sys/finance/withdrawSum');
      if (res.data.code === 200) {
        Object.assign(statistics, res.data.data);
      }
    } catch (error) {
      console.error('获取统计数据失败:', error);
    }
  }

  onMounted(() => {
    fetchStatistics();
  });

  const [statusDicts] = useDictData(['withdrawal_status']);

  const useStatus = ref('');
  function handleStatusChange(value) {
    if (value === '6') {
      pageConfig.pageUrl = '/sys/finance/noWithdrawList';
      pageRef.value?.reload();
    } else {
      pageConfig.pageUrl = '/sys/finance/withdrawList';
      pageRef.value.reload({ status: value });
    }
  }

  //提现类型 	string
  const withdrawTypeDicts = ref([
    { label: '微信', value: 1 },
    { label: '支付宝', value: 2 }
  ]);
  /** 表格列配置 */
  const columns = ref([
    {
      type: 'selection',
      columnKey: 'selection',
      width: 50,
      align: 'center',
      fixed: 'left'
    },
    { label: '提现时间', prop: 'createTime', align: 'center', width: 180 },
    { label: '用户名', prop: 'nickName', align: 'center', minWidth: 140 },
    {
      label: '支付单号/流水号',
      prop: 'transferNo',
      align: 'center',
      minWidth: 160
    },
    {
      label: '对方账户',
      prop: 'withdrawType',
      align: 'center',
      formatter: (row) =>
        withdrawTypeDicts.value.find((d) => d.value == row.withdrawType)
          ?.label
    },
    { label: '金额', prop: 'withdrawMoney', align: 'center' },
    {
      label: '交易状态',
      prop: 'status',
      align: 'center',
      formatter: (row) =>
        statusDicts.value.find((d) => d.dictValue == row.status)?.dictLabel
    },
    {
      label: '交易类型',
      prop: 'withdrawType',
      align: 'center',
      formatter: (row) => '提现'
    },
    {
      columnKey: 'action',
      label: '操作',
      width: 140,
      align: 'center',
      slot: 'action',
      fixed: 'right'
    }
  ]);

  /** 页面组件实例 */
  const pageRef = ref(null);
  const auditDialogRef = ref(null);

  const pageConfig = reactive({
    pageUrl: '/sys/finance/withdrawList',
    fileName: '提现管理',
    cacheKey: 'withdrawalTable'
  });

  //刷新表格
  function reload(where) {
    pageRef.value?.reload(where);
  }

  //审核
  function handleChangeStatus(row) {
    auditDialogRef.value?.handleOpen(row.id);
  }

  //一键审核
  function handleStepAudit() {
    const selections = pageRef.value?.getSelections();
    if (!selections?.length) {
      ElMessage.warning('请至少选择一条数据');
      return;
    }
    auditDialogRef.value?.handleOpen(selections.map(item => item.id));
  }
</script>