cfc/cfc-web/src/views/admin/FamilyEarningsWithdraw.vue

<template>
  <div class="family-earnings-withdraw admin-page">
    <div class="header admin-page-header">
      <h2 class="admin-page-title">家庭收益提现审核</h2>
      <div class="flex items-center gap-sm">
        <el-select v-model="typeFilter" placeholder="类型" @change="loadList" style="width:120px">
          <el-option label="全部" value="" />
          <el-option label="提现" value="withdraw" />
          <el-option label="分配" value="distribute" />
          <el-option label="消费" value="consume" />
          <el-option label="收入" value="earn" />
        </el-select>
        <el-button type="primary" @click="loadList">刷新</el-button>
      </div>
    </div>

    <div class="table-scroll-wrap">
      <el-table :data="list" v-loading="loading" border stripe>
        <el-table-column prop="id" label="ID" width="70" />
        <el-table-column prop="familyId" label="家庭ID" width="90" />
        <el-table-column label="类型" width="100">
          <template slot-scope="{ row }">
            <el-tag :type="typeTag(row.type)" size="mini">{{ typeLabel(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="金额" width="120">
          <template slot-scope="{ row }">
            <span :class="row.amount > 0 ? 'amount-out' : 'amount-in'">{{ row.amount > 0 ? '-' : '+' }}{{ fenToYuan(row.amount) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作人" width="120">
          <template slot-scope="{ row }">
            {{ row.fromUserId || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="160">
          <template slot-scope="{ row }">
            {{ row.createdAt ? formatTime(row.createdAt) : '-' }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      @current-change="onPageChange"
      :current-page="page"
      :page-size="size"
      :total="total"
      layout="total, prev, pager, next"
      class="pagination-wrap"
    />
  </div>
</template>

<script>
import { getFamilyEarningsRecords } from '@/api/admin'

export default {
  data() {
    return {
      list: [],
      loading: false,
      page: 1,
      size: 20,
      total: 0,
      typeFilter: ''
    }
  },
  mounted() {
    this.loadList()
  },
  methods: {
    async loadList() {
      this.loading = true
      try {
        var res = await getFamilyEarningsRecords(0, this.typeFilter)
        if (res.data) {
          this.list = Array.isArray(res.data) ? res.data : [res.data]
          this.total = this.list.length
        }
      } catch (e) {
        this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },
    onPageChange(val) {
      this.page = val
      this.loadList()
    },
    typeTag(type) {
      var map = { earn: 'success', withdraw: 'danger', distribute: 'warning', consume: 'info' }
      return map[type] || 'info'
    },
    typeLabel(type) {
      var map = { earn: '收入', withdraw: '提现', distribute: '分配', consume: '消费' }
      return map[type] || type
    },
    fenToYuan(fen) {
      if (fen === null || fen === undefined) return '0.00'
      var num = Number(fen)
      if (isNaN(num)) return '0.00'
      return Math.abs(num / 100).toFixed(2)
    },
    formatTime(t) {
      if (!t) return '-'
      return t.replace ? t.replace('T', ' ').substring(0, 19) : String(t)
    }
  }
}
</script>

<style scoped>
.family-earnings-withdraw {
  padding: 20px;
}
.amount-out {
  font-weight: bold;
  color: #f56c6c;
}
.amount-in {
  font-weight: bold;
  color: #67c23a;
}
</style>