gxwebsoft/template-nuxt4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版官网模板

Browse Source
This commit is contained in:
赵忠林
2026-04-29 01:33:33 +08:00
commit 0d82386f8f
341 changed files with 64526 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
app/pages/admin/applications/member.vue Normal file
View File

@@ -0,0 +1,186 @@
<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>