jude-user-recharge/web/src/views/frontend/components/Me/subordinates.vue

<template>
  <div class="me-subordinates">
    <div class="subordinates-header">
      <h2 class="subordinates-title">我的下级</h2>
    </div>

    <div class="subordinates-content">
      <!-- 过滤/搜索区域 + 汇总指标 -->
      <div class="filter-section">
        <div class="filter-left">
          <el-date-picker
            v-model="searchForm.dateRange"
            class="filter-item date-picker"
            type="daterange"
            unlink-panels
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            range-separator="~"
            value-format="yyyy-MM-dd"
          />

          <el-input
            v-model="searchForm.name"
            placeholder="请输入名称"
            clearable
            class="filter-item name-input"
            @keyup.enter="handleSearch"
          />

          <el-button type="primary" :icon="Search" size="small" class="search-btn" @click="handleSearch">
            搜索
          </el-button>
        </div>

        <!-- 汇总指标 -->
        <div class="summary-item">
          <span class="summary-label">分拥余额:</span>
          <span class="summary-value">
            {{ totalCommission }}
          </span>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="table-section">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: '500' }"
        >
          <el-table-column prop="id" label="ID" width="80" align="center" />
          <el-table-column prop="userName" label="用户名称" min-width="120" align="center" />
          <el-table-column prop="email" label="邮箱" min-width="180" align="center" />
          <el-table-column prop="commissionAmount" label="已得分佣金额" width="140" align="center" />
          <el-table-column prop="registerTime" label="注册时间" width="180" align="center" />
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="{ row }">
              <span class="status-text">{{ row.status }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="operation" label="操作" width="100" align="center">
            <template #default>
              <span class="status-text">详情</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页控件 -->
      <div class="pagination-section">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="pageSizes"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          background
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentPageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

defineOptions({ name: 'MeSubordinates' })

type TableRow = {
  id: number | string
  userName: string
  email: string
  commissionAmount: number
  registerTime: string
  status: string
}

const searchForm = reactive<{ dateRange: string[]; name: string }>({
  dateRange: ['2025-10-01', '2025-10-01'],
  name: ''
})
const totalCommission = ref(30)
const tableData = ref<TableRow[]>([
  { id: '-', userName: '汇总', email: '-', commissionAmount: 30, registerTime: '-', status: '-' },
  { id: 1, userName: '张三', email: 'XXX.qq.com', commissionAmount: 10, registerTime: '2025-10-01 14:32:11', status: '正常' },
  { id: 10, userName: '李四', email: 'XXX.qq.com', commissionAmount: 20, registerTime: '2025-10-01 14:32:11', status: '正常' }
])
const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = [10, 20, 30, 50]
const total = ref(1)

const loadData = () => {
  // TODO: 接入实际 API 获取数据
  console.log('搜索条件:', { ...searchForm })
}

const handleSearch = () => {
  currentPage.value = 1
  loadData()
}

const handlePageSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  loadData()
}

const handleCurrentPageChange = (val: number) => {
  currentPage.value = val
  loadData()
}
</script>

<style scoped lang="scss">
.me-subordinates {
  width: 100%;

  .subordinates-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e4e7ed;

    .subordinates-title {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }
  }

  .subordinates-content {
    padding: 20px 0;
    color: #606266;
  }

  .filter-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
    border-radius: 12px;
    border: 1px solid #e4e7ed;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    .filter-left {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      flex: 1;
      min-width: 300px;
    }

    .filter-item {
      flex: 1;
      min-width: 200px;
    }

    .date-picker {
      max-width: 360px;
    }

    .name-input {
      max-width: 320px;
    }

    .search-btn {
      height: 32px;
      padding: 0 20px;
      font-weight: 500;
      box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
        transform: translateY(-1px);
      }

      &:active {
        transform: translateY(0);
      }
    }

    .summary-item {
      display: flex;
      align-items: center;
      padding: 8px 10px;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(104, 151, 238, 0.15);
      white-space: nowrap;
      flex-shrink: 0;

      .summary-label {
        color: #8c6e1f;
        font-size: 14px;
        font-weight: 500;
      }

      .summary-value {
        position: relative;
        color: #d48806;
        font-weight: 600;
        font-size: 20px;
        letter-spacing: 0.5px;

        .summary-badge {
          position: absolute;
          top: -10px;
          right: -20px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 20px;
          height: 20px;
          padding: 0 5px;
          background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
          color: #fff;
          border-radius: 10px;
          font-size: 11px;
          font-weight: 600;
          line-height: 1;
          box-shadow: 0 2px 4px rgba(255, 152, 0, 0.4);
          border: 2px solid #fff;
        }
      }
    }
  }

  .table-section {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);

    ::v-deep .el-table {
      border: none;

      &::before {
        display: none;
      }

      .el-table__header-wrapper {
        .el-table__header {
          th {
            border-bottom: 2px solid #f0f2f5;
            border-right: none;
          }
        }
      }

      .el-table__body-wrapper {
        .el-table__body {
          tr {
            td {
              border-bottom: 1px solid #f5f7fa;
              border-right: none;
            }

            &:hover {
              background-color: #fafbfc;
            }

            &:last-child {
              td {
                border-bottom: none;
              }
            }
          }
        }
      }

      .status-text {
        color: #409eff;
        font-weight: 500;
      }
    }
  }

  .pagination-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    ::v-deep .el-pagination {
      .el-pagination__total {
        color: #606266;
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
}

@media (max-width: 768px) {
  .me-subordinates {
    .filter-section {
      flex-direction: column;
      align-items: stretch;

      .filter-left {
        width: 100%;
      }

      .filter-item,
      .date-picker,
      .name-input {
        width: 100%;
        max-width: none;
      }

      .search-btn {
        width: 100%;
        margin-top: 8px;
      }

      .summary-item {
        width: 100%;
        justify-content: center;
      }
    }

    .pagination-section {
      justify-content: center;

      ::v-deep .el-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
      }
    }
  }
}
</style>