606 lines
19 KiB
Vue
606 lines
19 KiB
Vue
<template>
|
|
<div class="users-container">
|
|
<!-- Search and Filter Bar -->
|
|
<el-card class="filter-card">
|
|
<el-form :inline="true" :model="filters" class="filter-form">
|
|
<el-form-item label="搜索">
|
|
<el-input
|
|
v-model="filters.search"
|
|
placeholder="昵称/姓名/手机/微信号"
|
|
clearable
|
|
@keyup.enter="handleSearch"
|
|
style="width: 200px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select v-model="filters.status" placeholder="全部" clearable style="width: 120px">
|
|
<el-option label="正常" value="active" />
|
|
<el-option label="已禁用" value="suspended" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="语言">
|
|
<el-select v-model="filters.language" placeholder="全部" clearable style="width: 120px">
|
|
<el-option label="中文" value="zh" />
|
|
<el-option label="English" value="en" />
|
|
<el-option label="Español" value="es" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSearch">
|
|
<el-icon><Search /></el-icon>
|
|
搜索
|
|
</el-button>
|
|
<el-button @click="handleReset">
|
|
<el-icon><Refresh /></el-icon>
|
|
重置
|
|
</el-button>
|
|
<el-button type="success" @click="handleExport" :loading="exporting">
|
|
<el-icon><Download /></el-icon>
|
|
导出CSV
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<!-- User Table -->
|
|
<el-card class="table-card">
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="users"
|
|
stripe
|
|
border
|
|
style="width: 100%"
|
|
@sort-change="handleSortChange"
|
|
>
|
|
<el-table-column prop="avatar" label="头像" width="80" align="center">
|
|
<template #default="{ row }">
|
|
<el-avatar :size="40" :src="row.avatar" icon="UserFilled" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="uid" label="UID" width="100" align="center">
|
|
<template #default="{ row }">
|
|
{{ row.uid || '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="nickname" label="昵称" min-width="120" show-overflow-tooltip />
|
|
<el-table-column prop="realName" label="真实姓名" min-width="100" show-overflow-tooltip>
|
|
<template #default="{ row }">
|
|
{{ row.realName || '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="phone" label="手机号" min-width="120">
|
|
<template #default="{ row }">
|
|
{{ row.phone || '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="wechatId" label="微信号" min-width="120">
|
|
<template #default="{ row }">
|
|
{{ row.wechatId || '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="language" label="语言" width="100" align="center">
|
|
<template #default="{ row }">
|
|
<el-tag :type="getLanguageTagType(row.language)" size="small">
|
|
{{ getLanguageLabel(row.language) }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="balance" label="余额" width="100" align="right" sortable="custom">
|
|
<template #default="{ row }">
|
|
¥{{ parseFloat(row.balance || 0).toFixed(2) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" label="状态" width="100" align="center">
|
|
<template #default="{ row }">
|
|
<el-tag :type="row.status === 'active' ? 'success' : 'danger'" size="small">
|
|
{{ row.status === 'active' ? '正常' : '已禁用' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createdAt" label="注册时间" width="180" sortable="custom">
|
|
<template #default="{ row }">
|
|
{{ formatDate(row.createdAt) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="180" fixed="right" align="center">
|
|
<template #default="{ row }">
|
|
<el-button type="primary" link size="small" @click="handleViewDetails(row)">
|
|
<el-icon><View /></el-icon>
|
|
详情
|
|
</el-button>
|
|
<el-button
|
|
:type="row.status === 'active' ? 'danger' : 'success'"
|
|
link
|
|
size="small"
|
|
@click="handleToggleStatus(row)"
|
|
>
|
|
<el-icon><component :is="row.status === 'active' ? 'Lock' : 'Unlock'" /></el-icon>
|
|
{{ row.status === 'active' ? '禁用' : '启用' }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- Pagination -->
|
|
<div class="pagination-container">
|
|
<el-pagination
|
|
v-model:current-page="pagination.page"
|
|
v-model:page-size="pagination.limit"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:total="pagination.total"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handlePageChange"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
|
|
<!-- User Details Dialog -->
|
|
<el-dialog
|
|
v-model="detailsDialogVisible"
|
|
title="用户详情"
|
|
width="800px"
|
|
destroy-on-close
|
|
>
|
|
<div v-loading="detailsLoading" class="user-details">
|
|
<template v-if="userDetails">
|
|
<!-- Basic Info -->
|
|
<el-descriptions title="基本信息" :column="2" border>
|
|
<el-descriptions-item label="头像">
|
|
<el-avatar :size="60" :src="userDetails.user.avatar" icon="UserFilled" />
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="昵称">{{ userDetails.user.nickname || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="UID">{{ userDetails.user.uid || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="真实姓名">{{ userDetails.user.realName || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="手机号">{{ userDetails.user.phone || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="WhatsApp">{{ userDetails.user.whatsapp || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="微信号">{{ userDetails.user.wechatId || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="语言偏好">
|
|
<el-tag :type="getLanguageTagType(userDetails.user.language)" size="small">
|
|
{{ getLanguageLabel(userDetails.user.language) }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="账户状态">
|
|
<el-tag :type="userDetails.user.status === 'active' ? 'success' : 'danger'" size="small">
|
|
{{ userDetails.user.status === 'active' ? '正常' : '已禁用' }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="账户余额">
|
|
<span class="balance">¥{{ parseFloat(userDetails.user.balance || 0).toFixed(2) }}</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="邀请码">{{ userDetails.user.invitationCode || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="邀请人">
|
|
{{ userDetails.inviter ? (userDetails.inviter.nickname || userDetails.inviter.realName) : '-' }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="注册时间">{{ formatDate(userDetails.user.createdAt) }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="stats-section">
|
|
<el-row :gutter="20">
|
|
<!-- Appointment Stats -->
|
|
<el-col :span="8">
|
|
<el-card shadow="hover" class="stats-card">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<el-icon><Document /></el-icon>
|
|
<span>预约统计</span>
|
|
</div>
|
|
</template>
|
|
<div class="stats-content">
|
|
<div class="stat-item">
|
|
<span class="label">总预约</span>
|
|
<span class="value">{{ userDetails.appointments.total }}</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="label">待处理</span>
|
|
<span class="value warning">{{ userDetails.appointments.pending }}</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="label">已完成</span>
|
|
<span class="value success">{{ userDetails.appointments.completed }}</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="label">已取消</span>
|
|
<span class="value danger">{{ userDetails.appointments.cancelled }}</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<!-- Invitation Stats -->
|
|
<el-col :span="8">
|
|
<el-card shadow="hover" class="stats-card">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<el-icon><UserFilled /></el-icon>
|
|
<span>邀请统计</span>
|
|
</div>
|
|
</template>
|
|
<div class="stats-content">
|
|
<div class="stat-item">
|
|
<span class="label">邀请人数</span>
|
|
<span class="value">{{ userDetails.invitations.totalInvites }}</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="label">累计奖励</span>
|
|
<span class="value primary">¥{{ parseFloat(userDetails.invitations.totalRewards || 0).toFixed(2) }}</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<!-- Withdrawal Stats -->
|
|
<el-col :span="8">
|
|
<el-card shadow="hover" class="stats-card">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<el-icon><Wallet /></el-icon>
|
|
<span>提现统计</span>
|
|
</div>
|
|
</template>
|
|
<div class="stats-content">
|
|
<div class="stat-item">
|
|
<span class="label">提现次数</span>
|
|
<span class="value">{{ userDetails.withdrawals.total }}</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="label">提现金额</span>
|
|
<span class="value primary">¥{{ parseFloat(userDetails.withdrawals.totalAmount || 0).toFixed(2) }}</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="label">待审核</span>
|
|
<span class="value warning">{{ userDetails.withdrawals.waiting }}</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<!-- Login History -->
|
|
<div class="login-history-section">
|
|
<h4>最近登录记录</h4>
|
|
<el-table :data="userDetails.loginHistory" stripe border size="small" max-height="250">
|
|
<el-table-column prop="loginAt" label="登录时间" width="180">
|
|
<template #default="{ row }">
|
|
{{ formatDate(row.loginAt) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="ipAddress" label="IP地址" width="140" />
|
|
<el-table-column prop="deviceInfo" label="设备信息" show-overflow-tooltip>
|
|
<template #default="{ row }">
|
|
{{ row.deviceInfo || row.userAgent || '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<template #footer>
|
|
<el-button @click="detailsDialogVisible = false">关闭</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import api from '@/utils/api'
|
|
|
|
// State
|
|
const loading = ref(false)
|
|
const exporting = ref(false)
|
|
const users = ref([])
|
|
const pagination = reactive({
|
|
page: 1,
|
|
limit: 20,
|
|
total: 0,
|
|
totalPages: 0
|
|
})
|
|
const filters = reactive({
|
|
search: '',
|
|
status: '',
|
|
language: ''
|
|
})
|
|
const sortConfig = reactive({
|
|
sortBy: 'createdAt',
|
|
sortOrder: 'DESC'
|
|
})
|
|
|
|
// Details dialog state
|
|
const detailsDialogVisible = ref(false)
|
|
const detailsLoading = ref(false)
|
|
const userDetails = ref(null)
|
|
|
|
// Fetch user list
|
|
async function fetchUsers() {
|
|
loading.value = true
|
|
try {
|
|
const params = {
|
|
page: pagination.page,
|
|
limit: pagination.limit,
|
|
...filters,
|
|
...sortConfig
|
|
}
|
|
// Remove empty params
|
|
Object.keys(params).forEach(key => {
|
|
if (params[key] === '' || params[key] === null || params[key] === undefined) {
|
|
delete params[key]
|
|
}
|
|
})
|
|
|
|
const response = await api.get('/api/v1/admin/users', { params })
|
|
if (response.data.code === 0) {
|
|
users.value = response.data.data.users
|
|
pagination.total = response.data.data.pagination.total
|
|
pagination.totalPages = response.data.data.pagination.totalPages
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch users:', error)
|
|
ElMessage.error('获取用户列表失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// Fetch user details
|
|
async function fetchUserDetails(userId) {
|
|
detailsLoading.value = true
|
|
try {
|
|
const response = await api.get(`/api/v1/admin/users/${userId}`)
|
|
if (response.data.code === 0) {
|
|
userDetails.value = response.data.data
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch user details:', error)
|
|
ElMessage.error('获取用户详情失败')
|
|
} finally {
|
|
detailsLoading.value = false
|
|
}
|
|
}
|
|
|
|
// Handle search
|
|
function handleSearch() {
|
|
pagination.page = 1
|
|
fetchUsers()
|
|
}
|
|
|
|
// Handle reset
|
|
function handleReset() {
|
|
filters.search = ''
|
|
filters.status = ''
|
|
filters.language = ''
|
|
pagination.page = 1
|
|
fetchUsers()
|
|
}
|
|
|
|
// Handle page change
|
|
function handlePageChange(page) {
|
|
pagination.page = page
|
|
fetchUsers()
|
|
}
|
|
|
|
// Handle page size change
|
|
function handleSizeChange(size) {
|
|
pagination.limit = size
|
|
pagination.page = 1
|
|
fetchUsers()
|
|
}
|
|
|
|
// Handle sort change
|
|
function handleSortChange({ prop, order }) {
|
|
if (prop && order) {
|
|
sortConfig.sortBy = prop
|
|
sortConfig.sortOrder = order === 'ascending' ? 'ASC' : 'DESC'
|
|
} else {
|
|
sortConfig.sortBy = 'createdAt'
|
|
sortConfig.sortOrder = 'DESC'
|
|
}
|
|
fetchUsers()
|
|
}
|
|
|
|
// Handle view details
|
|
function handleViewDetails(row) {
|
|
userDetails.value = null
|
|
detailsDialogVisible.value = true
|
|
fetchUserDetails(row.id)
|
|
}
|
|
|
|
// Handle toggle status
|
|
async function handleToggleStatus(row) {
|
|
const newStatus = row.status === 'active' ? 'suspended' : 'active'
|
|
const actionText = newStatus === 'active' ? '启用' : '禁用'
|
|
|
|
try {
|
|
await ElMessageBox.confirm(
|
|
`确定要${actionText}用户 "${row.nickname || row.realName || row.id}" 吗？`,
|
|
'确认操作',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}
|
|
)
|
|
|
|
const response = await api.put(`/api/v1/admin/users/${row.id}/status`, {
|
|
status: newStatus
|
|
})
|
|
|
|
if (response.data.code === 0) {
|
|
row.status = newStatus
|
|
ElMessage.success(`用户已${actionText}`)
|
|
}
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
console.error('Failed to update user status:', error)
|
|
ElMessage.error('更新用户状态失败')
|
|
}
|
|
}
|
|
}
|
|
|
|
// Handle export CSV
|
|
async function handleExport() {
|
|
exporting.value = true
|
|
try {
|
|
const params = { ...filters }
|
|
Object.keys(params).forEach(key => {
|
|
if (params[key] === '' || params[key] === null || params[key] === undefined) {
|
|
delete params[key]
|
|
}
|
|
})
|
|
|
|
const response = await api.get('/api/v1/admin/users/export/csv', {
|
|
params,
|
|
responseType: 'blob'
|
|
})
|
|
|
|
// Create download link
|
|
const blob = new Blob([response.data], { type: 'text/csv;charset=utf-8;' })
|
|
const url = window.URL.createObjectURL(blob)
|
|
const link = document.createElement('a')
|
|
link.href = url
|
|
link.setAttribute('download', `users-${Date.now()}.csv`)
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
window.URL.revokeObjectURL(url)
|
|
|
|
ElMessage.success('导出成功')
|
|
} catch (error) {
|
|
console.error('Failed to export users:', error)
|
|
ElMessage.error('导出失败')
|
|
} finally {
|
|
exporting.value = false
|
|
}
|
|
}
|
|
|
|
// Helper functions
|
|
function formatDate(dateStr) {
|
|
if (!dateStr) return '-'
|
|
const date = new Date(dateStr)
|
|
return date.toLocaleString('zh-CN', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
})
|
|
}
|
|
|
|
function getLanguageLabel(lang) {
|
|
const labels = {
|
|
zh: '中文',
|
|
en: 'English',
|
|
es: 'Español'
|
|
}
|
|
return labels[lang] || lang
|
|
}
|
|
|
|
function getLanguageTagType(lang) {
|
|
const types = {
|
|
zh: '',
|
|
en: 'success',
|
|
es: 'warning'
|
|
}
|
|
return types[lang] || 'info'
|
|
}
|
|
|
|
// Initialize
|
|
onMounted(() => {
|
|
fetchUsers()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.users-container {
|
|
.filter-card {
|
|
margin-bottom: 20px;
|
|
|
|
.filter-form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
|
|
.table-card {
|
|
.pagination-container {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
.user-details {
|
|
.stats-section {
|
|
margin-top: 20px;
|
|
|
|
.stats-card {
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stats-content {
|
|
.stat-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #ebeef5;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.label {
|
|
color: #909399;
|
|
}
|
|
|
|
.value {
|
|
font-weight: 600;
|
|
color: #303133;
|
|
|
|
&.primary {
|
|
color: #409eff;
|
|
}
|
|
|
|
&.success {
|
|
color: #67c23a;
|
|
}
|
|
|
|
&.warning {
|
|
color: #e6a23c;
|
|
}
|
|
|
|
&.danger {
|
|
color: #f56c6c;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.login-history-section {
|
|
margin-top: 20px;
|
|
|
|
h4 {
|
|
margin-bottom: 12px;
|
|
color: #303133;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.balance {
|
|
font-weight: 600;
|
|
color: #409eff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|