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

<template>
  <div class="family-earnings admin-page">
    <div class="header admin-page-header">
      <h2 class="admin-page-title">家庭收益管理</h2>
      <div class="flex items-center gap-sm">
        <el-input v-model="searchKeyword" placeholder="搜索家庭ID..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="loadList" @clear="loadList" />
        <el-button type="primary" @click="loadList">刷新</el-button>
      </div>
    </div>

    <div class="table-scroll-wrap">
      <el-table :data="list" v-loading="loading" border stripe :max-height="tableHeight" @row-click="showDetail">
        <el-table-column prop="id" label="ID" width="70" />
        <el-table-column prop="familyId" label="家庭ID" width="100" />
        <el-table-column label="累计推荐收入" width="140">
          <template slot-scope="{ row }">
            <span class="amount-orange">{{ fenToYuan(row.totalEarned) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="可支配余额" width="140">
          <template slot-scope="{ row }">
            <span class="amount-green">{{ fenToYuan(row.availableAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="已提现" width="120">
          <template slot-scope="{ row }">
            {{ fenToYuan(row.withdrawnAmount) }}
          </template>
        </el-table-column>
        <el-table-column label="已分配" width="120">
          <template slot-scope="{ row }">
            {{ fenToYuan(row.distributedAmount) }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间" width="160">
          <template slot-scope="{ row }">
            {{ row.updatedAt ? formatTime(row.updatedAt) : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" @click.stop="showDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 家庭收益详情弹窗 -->
    <el-dialog title="家庭收益详情" :visible.sync="detailVisible" width="700px" top="5vh">
      <div v-loading="detailLoading">
        <el-descriptions :column="2" border v-if="detail">
          <el-descriptions-item label="家庭ID">{{ detail.familyId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="累计推荐收入">
            <span class="amount-orange">{{ fenToYuan(detail.totalEarned) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="可支配余额">
            <span class="amount-green">{{ fenToYuan(detail.availableAmount) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="已提现">{{ fenToYuan(detail.withdrawnAmount) }}</el-descriptions-item>
          <el-descriptions-item label="已分配">{{ fenToYuan(detail.distributedAmount) }}</el-descriptions-item>
        </el-descriptions>

        <h4 style="margin:20px 0 10px">成员贡献</h4>
        <el-table :data="detail.members || []" border stripe size="small" :max-height="300" v-if="detail && detail.members && detail.members.length > 0">
          <el-table-column label="昵称" prop="nickname" min-width="120" />
          <el-table-column label="已分配" width="120">
            <template slot-scope="{ row }">{{ fenToYuan(row.allocatedAmount) }}</template>
          </el-table-column>
          <el-table-column label="已消费" width="120">
            <template slot-scope="{ row }">{{ fenToYuan(row.consumedAmount) }}</template>
          </el-table-column>
          <el-table-column label="可用余额" width="120">
            <template slot-scope="{ row }"><span class="amount-green">{{ fenToYuan(row.availableAmount) }}</span></template>
          </el-table-column>
          <el-table-column label="池权限" width="100">
            <template slot-scope="{ row }">
              <el-tag :type="row.canUseFamilyBalance ? 'success' : 'info'" size="mini">
                {{ row.canUseFamilyBalance ? '可用' : '关闭' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="管理员" width="80">
            <template slot-scope="{ row }">
              <el-tag v-if="row.isAdmin" type="warning" size="mini">是</el-tag>
              <span v-else>否</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getFamilyEarningsList, getFamilyEarningsDetail } from '@/api/admin'

export default {
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      searchKeyword: '',
      detailVisible: false,
      detailLoading: false,
      detail: null
    }
  },
  mounted() {
    this.loadList()
  },
  methods: {
    async loadList() {
      this.loading = true
      try {
        var res = await getFamilyEarningsList()
        this.list = res.data || []
      } catch (e) {
        this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },
    async showDetail(row) {
      this.detailVisible = true
      this.detailLoading = true
      try {
        var res = await getFamilyEarningsDetail(row.familyId || row.id)
        this.detail = res.data || row
      } catch (e) {
        this.$message.error('加载详情失败')
        this.detail = row
      } finally {
        this.detailLoading = false
      }
    },
    fenToYuan(fen) {
      if (fen === null || fen === undefined) return '0.00'
      var num = Number(fen)
      if (isNaN(num)) return '0.00'
      return (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 {
  padding: 20px;
}
.amount-orange {
  font-weight: bold;
  color: #e6a23c;
}
.amount-green {
  font-weight: bold;
  color: #67c23a;
}
</style>