blandarebiter/AIGC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

创建会员管理页面 - 实现完整的会员列表管理功能，包含表格、筛选、分页等

Browse Source
This commit is contained in:
AIGC Developer
2025-10-22 09:37:59 +08:00
parent 85a625a7f1
commit 4b7604f20c
3 changed files with 517 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/frontend/src/views/Home.vue
View File

@@ -319,7 +319,7 @@ const handlePointClick = (point) => {
// 导航功能
const goToUsers = () => {
ElMessage.info('跳转到会员管理')
router.push('/member-management')
}
const goToOrders = () => {

509
demo/frontend/src/views/MemberManagement.vue Normal file
View File

@@ -0,0 +1,509 @@
<template>
<div class="member-management">
<!-- 左侧导航栏 -->
<aside class="sidebar">
<div class="logo">
<div class="logo-icon"></div>
<span>LOGO</span>
</div>
<nav class="nav-menu">
<div class="nav-item" @click="goToDashboard">
<el-icon><Grid /></el-icon>
<span>数据仪表台</span>
</div>
<div class="nav-item active">
<el-icon><User /></el-icon>
<span>会员管理</span>
</div>
<div class="nav-item" @click="goToOrders">
<el-icon><ShoppingCart /></el-icon>
<span>订单管理</span>
</div>
<div class="nav-item" @click="goToAPI">
<el-icon><Code /></el-icon>
<span>API管理</span>
</div>
<div class="nav-item" @click="goToTasks">
<el-icon><Document /></el-icon>
<span>生成任务记录</span>
</div>
<div class="nav-item" @click="goToSettings">
<el-icon><Setting /></el-icon>
<span>系统设置</span>
</div>
</nav>
<div class="sidebar-footer">
<div class="online-users">
当前在线用户: <span class="highlight">87/500</span>
</div>
<div class="system-uptime">
系统运行时间: <span class="highlight">48小时32分</span>
</div>
</div>
</aside>
<!-- 主内容区域 -->
<main class="main-content">
<!-- 顶部搜索栏 -->
<header class="top-header">
<div class="search-bar">
<el-icon class="search-icon"><Search /></el-icon>
<input type="text" placeholder="搜索你的想要的内容" class="search-input" />
</div>
<div class="header-actions">
<el-icon class="notification-icon"><Bell /></el-icon>
<el-icon class="help-icon"><QuestionFilled /></el-icon>
<div class="user-avatar">
<img src="/images/backgrounds/welcome.jpg" alt="用户头像" />
</div>
</div>
</header>
<!-- 会员列表内容 -->
<section class="member-content">
<div class="content-header">
<h2>会员列表</h2>
<div class="selection-info" v-if="selectedMembers.length > 0">
已选择{{ selectedMembers.length }}项
</div>
</div>
<div class="table-toolbar">
<div class="toolbar-left">
<el-select v-model="selectedLevel" placeholder="全部等级" size="small">
<el-option label="全部等级" value="all" />
<el-option label="专业会员" value="professional" />
<el-option label="标准会员" value="standard" />
</el-select>
</div>
<div class="toolbar-right">
<el-button type="danger" size="small" @click="deleteSelected" :disabled="selectedMembers.length === 0">
<el-icon><Delete /></el-icon>
删除
</el-button>
</div>
</div>
<div class="table-container">
<el-table
:data="memberList"
@selection-change="handleSelectionChange"
class="member-table">
<el-table-column type="selection" width="55" />
<el-table-column prop="id" label="用户ID" width="100" />
<el-table-column prop="username" label="用户名" width="120" />
<el-table-column prop="level" label="会员等级" width="120">
<template #default="{ row }">
<el-tag :type="row.level === '专业会员' ? 'danger' : 'primary'" size="small">
{{ row.level }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="points" label="剩余资源点" width="140">
<template #default="{ row }">
{{ row.points.toLocaleString() }}
</template>
</el-table-column>
<el-table-column prop="expiryDate" label="到期时间" width="120" />
<el-table-column label="编辑" width="80">
<template #default="{ row }">
<el-button type="primary" text size="small" @click="editMember(row)">
编辑
</el-button>
</template>
</el-table-column>
<el-table-column label="删除" width="80">
<template #default="{ row }">
<el-button type="danger" text size="small" @click="deleteMember(row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="totalMembers"
layout="prev, pager, next"
:pager-count="5"
@current-change="handlePageChange"
/>
</div>
</section>
</main>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
// 数据状态
const selectedMembers = ref([])
const selectedLevel = ref('all')
const currentPage = ref(1)
const pageSize = ref(10)
const totalMembers = ref(50)
// 模拟会员数据
const memberList = ref([
{ id: 1001, username: 'Apple', level: '专业会员', points: 1234, expiryDate: '2025-12-31' },
{ id: 1002, username: 'Apple', level: '标准会员', points: 500, expiryDate: '2025-12-31' },
{ id: 1003, username: 'Apple', level: '标准会员', points: 789, expiryDate: '2025-12-31' },
{ id: 1004, username: 'Apple', level: '标准会员', points: 2342, expiryDate: '2025-12-31' },
{ id: 1005, username: 'Samsung', level: '标准会员', points: 90, expiryDate: '2025-12-31' },
{ id: 1006, username: 'Samsung', level: '专业会员', points: 3456, expiryDate: '2025-12-31' },
{ id: 1007, username: 'Apple', level: '专业会员', points: 1200, expiryDate: '2025-12-31' },
{ id: 1008, username: 'Apple', level: '专业会员', points: 800, expiryDate: '2025-12-31' },
{ id: 1009, username: 'Apple', level: '专业会员', points: 1500, expiryDate: '2025-12-31' },
{ id: 1010, username: 'Apple', level: '专业会员', points: 2000, expiryDate: '2025-12-31' }
])
// 导航功能
const goToDashboard = () => {
router.push('/')
}
const goToOrders = () => {
router.push('/orders')
}
const goToAPI = () => {
ElMessage.info('跳转到API管理')
}
const goToTasks = () => {
ElMessage.info('跳转到生成任务记录')
}
const goToSettings = () => {
ElMessage.info('跳转到系统设置')
}
// 表格操作
const handleSelectionChange = (selection) => {
selectedMembers.value = selection
}
const editMember = (member) => {
ElMessage.info(`编辑用户: ${member.username}`)
}
const deleteMember = async (member) => {
try {
await ElMessageBox.confirm(
`确定要删除用户 ${member.username} 吗？`,
'确认删除',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
ElMessage.success('删除成功')
} catch {
ElMessage.info('已取消删除')
}
}
const deleteSelected = async () => {
try {
await ElMessageBox.confirm(
`确定要删除选中的 ${selectedMembers.value.length} 个用户吗？`,
'确认删除',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
ElMessage.success('批量删除成功')
selectedMembers.value = []
} catch {
ElMessage.info('已取消删除')
}
}
const handlePageChange = (page) => {
currentPage.value = page
// 这里应该重新加载数据
ElMessage.info(`切换到第 ${page} 页`)
}
onMounted(() => {
// 初始化数据
})
</script>
<style scoped>
.member-management {
display: flex;
min-height: 100vh;
background: #f8fafc;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* 左侧导航栏 */
.sidebar {
width: 320px;
background: white;
border-right: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
padding: 24px 0;
}
.logo {
display: flex;
align-items: center;
padding: 0 28px;
margin-bottom: 32px;
}
.logo-icon {
width: 24px;
height: 24px;
background: #3b82f6;
border-radius: 4px;
margin-right: 12px;
}
.logo span {
font-size: 18px;
font-weight: 600;
color: #1e293b;
}
.nav-menu {
flex: 1;
padding: 0 24px;
}
.nav-item {
display: flex;
align-items: center;
padding: 18px 24px;
margin-bottom: 6px;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
color: #64748b;
font-size: 16px;
}
.nav-item:hover {
background: #f1f5f9;
color: #334155;
}
.nav-item.active {
background: #eff6ff;
color: #3b82f6;
}
.nav-item .el-icon {
margin-right: 16px;
font-size: 22px;
}
.nav-item span {
font-size: 16px;
font-weight: 500;
}
.sidebar-footer {
padding: 0 32px 20px;
margin-top: auto;
}
.online-users,
.system-uptime {
font-size: 14px;
color: #64748b;
margin-bottom: 10px;
line-height: 1.5;
}
.highlight {
color: #3b82f6;
font-weight: 600;
font-size: 15px;
}
/* 主内容区域 */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
background: #f8fafc;
}
/* 顶部搜索栏 */
.top-header {
background: white;
border-bottom: 1px solid #e2e8f0;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.search-bar {
position: relative;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
left: 12px;
color: #94a3b8;
font-size: 16px;
}
.search-input {
width: 300px;
padding: 8px 12px 8px 40px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
background: #f8fafc;
outline: none;
}
.search-input:focus {
border-color: #3b82f6;
background: white;
}
.search-input::placeholder {
color: #94a3b8;
}
.header-actions {
display: flex;
align-items: center;
gap: 16px;
}
.notification-icon,
.help-icon {
font-size: 20px;
color: #64748b;
cursor: pointer;
}
.user-avatar {
display: flex;
align-items: center;
cursor: pointer;
}
.user-avatar img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
/* 会员内容区域 */
.member-content {
padding: 24px;
flex: 1;
}
.content-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.content-header h2 {
font-size: 24px;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.selection-info {
font-size: 14px;
color: #64748b;
background: #f1f5f9;
padding: 8px 16px;
border-radius: 6px;
}
.table-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.toolbar-left {
display: flex;
align-items: center;
gap: 16px;
}
.table-container {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.member-table {
width: 100%;
}
.pagination-container {
display: flex;
justify-content: center;
margin-top: 24px;
}
/* 响应式设计 */
@media (max-width: 1024px) {
.member-management {
flex-direction: column;
}
.sidebar {
width: 100%;
height: auto;
}
.nav-menu {
display: flex;
overflow-x: auto;
padding: 0 16px;
}
.nav-item {
white-space: nowrap;
margin-right: 16px;
margin-bottom: 0;
}
.sidebar-footer {
display: none;
}
.search-input {
width: 200px;
}
.member-content {
padding: 16px;
}
}
</style>