template-nuxt4/app/pages/admin/applications/member.vue

<template>
  <div class="admin-applications-member">
    <div class="page-header">
      <h3>会员申请管理</h3>
      <a-space>
        <a-button type="primary" @click="navigateTo('/admin/members/review')">前往审核</a-button>
      </a-space>
    </div>

    <div class="stats-row">
      <div class="stat-item blue">
        <div class="stat-num">{{ stats.total }}</div>
        <div class="stat-label">总申请</div>
      </div>
      <div class="stat-item orange">
        <div class="stat-num">{{ stats.pending }}</div>
        <div class="stat-label">待审核</div>
      </div>
      <div class="stat-item green">
        <div class="stat-num">{{ stats.approved }}</div>
        <div class="stat-label">已通过</div>
      </div>
      <div class="stat-item purple">
        <div class="stat-num">{{ stats.enterprise }}</div>
        <div class="stat-label">企业会员</div>
      </div>
      <div class="stat-item teal">
        <div class="stat-num">{{ stats.personal }}</div>
        <div class="stat-label">个人会员</div>
      </div>
    </div>

    <!-- 材料模板 -->
    <div class="template-card">
      <h4>申请材料模板</h4>
      <a-tabs>
        <a-tab-pane key="enterprise" tab="企业会员模板">
          <div class="template-list">
            <div class="template-item">
              <span class="template-icon">📄</span>
              <span class="template-name">企业会员入会申请表（盖章）</span>
              <a-button size="small" type="primary">下载模板</a-button>
            </div>
            <div class="template-desc">所需材料：营业执照副本、法人身份证、单位简介</div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="personal" tab="个人会员模板">
          <div class="template-list">
            <div class="template-item">
              <span class="template-icon">📄</span>
              <span class="template-name">个人会员入会申请表（签字）</span>
              <a-button size="small" type="primary">下载模板</a-button>
            </div>
            <div class="template-desc">所需材料：个人简介、职称证书/学历证书、身份证、研究成果或获奖证明</div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

    <div class="table-card">
      <div class="table-header">
        <span class="table-title">近期申请记录</span>
        <a-button size="small" @click="navigateTo('/admin/members/review')">查看全部并审核 →</a-button>
      </div>
      <a-table
        :columns="columns"
        :data-source="recentApplications"
        :pagination="false"
        row-key="id"
        size="middle"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'type'">
            <a-tag :color="record.type === 'enterprise' ? 'blue' : 'green'">
              {{ record.type === 'enterprise' ? '企业' : '个人' }}
            </a-tag>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :color="record.status === 'pending' ? 'orange' : record.status === 'approved' ? 'green' : 'red'">
              {{ record.status === 'pending' ? '待审核' : record.status === 'approved' ? '已通过' : '已拒绝' }}
            </a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-button size="small" @click="navigateTo('/admin/members/review')">审核</a-button>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
definePageMeta({ layout: 'admin' })
useHead({ title: '会员申请管理' })

const stats = reactive({ total: 20, pending: 5, approved: 14, enterprise: 8, personal: 12 })

const columns = [
  { title: '申请人', dataIndex: 'name', key: 'name' },
  { title: '类型', key: 'type', width: 90 },
  { title: '联系方式', dataIndex: 'contact', key: 'contact' },
  { title: '申请时间', dataIndex: 'applyTime', key: 'applyTime' },
  { title: '状态', key: 'status', width: 100 },
  { title: '操作', key: 'action', width: 80 },
]

const recentApplications = ref([
  { id: 1, name: '广西某科技公司', type: 'enterprise', contact: '139****0001', applyTime: '2024-12-19', status: 'pending' },
  { id: 2, name: '张某某', type: 'personal', contact: '138****0002', applyTime: '2024-12-18', status: 'pending' },
  { id: 3, name: '南宁某咨询机构', type: 'enterprise', contact: '137****0003', applyTime: '2024-12-15', status: 'approved' },
])
</script>

<style scoped>
.admin-applications-member { display: flex; flex-direction: column; gap: 16px; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 10px;
  padding: 14px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.page-header h3 { font-size: 16px; font-weight: 700; color: #1f2937; margin: 0; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.stat-item {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.stat-item.blue { border-top: 3px solid #3b82f6; }
.stat-item.orange { border-top: 3px solid #f97316; }
.stat-item.green { border-top: 3px solid #22c55e; }
.stat-item.purple { border-top: 3px solid #8b5cf6; }
.stat-item.teal { border-top: 3px solid #14b8a6; }

.stat-num { font-size: 28px; font-weight: 800; color: #1f2937; }
.stat-label { font-size: 12px; color: #9ca3af; margin-top: 4px; }

.template-card, .table-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.template-card h4 { font-size: 15px; font-weight: 600; color: #1f2937; margin: 0 0 12px; }

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.table-title { font-size: 15px; font-weight: 600; color: #1f2937; }

.template-list { display: flex; flex-direction: column; gap: 8px; }

.template-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f9fafb;
  border-radius: 8px;
}
.template-icon { font-size: 16px; }
.template-name { flex: 1; font-size: 14px; color: #374151; }

.template-desc {
  font-size: 12px;
  color: #9ca3af;
  padding: 4px 14px;
}
</style>