1375 lines
40 KiB
Vue
1375 lines
40 KiB
Vue
<template>
|
||
<ListPageLayout
|
||
title="用户管理"
|
||
subtitle="管理系统用户信息"
|
||
>
|
||
<!-- 统计信息 -->
|
||
<template #actions>
|
||
<div :class="['flex gap-4', isMobile ? 'flex-wrap justify-center' : '']">
|
||
<div :class="['stat-item', isMobile ? 'flex-1 min-w-0' : '']">
|
||
<div class="stat-value">{{ stats.total_users || 0 }}</div>
|
||
<div class="stat-label">总用户数</div>
|
||
</div>
|
||
<div :class="['stat-item', isMobile ? 'flex-1 min-w-0' : '']">
|
||
<div class="stat-value">{{ stats.certified_users || 0 }}</div>
|
||
<div class="stat-label">已认证用户</div>
|
||
</div>
|
||
<div :class="['stat-item', isMobile ? 'flex-1 min-w-0' : '']">
|
||
<div class="stat-value">{{ stats.active_users || 0 }}</div>
|
||
<div class="stat-label">活跃用户</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template #filters>
|
||
<FilterSection>
|
||
<FilterItem label="搜索用户">
|
||
<el-input
|
||
v-model="filters.phone"
|
||
placeholder="输入手机号"
|
||
clearable
|
||
@input="handleSearch"
|
||
class="w-full"
|
||
/>
|
||
</FilterItem>
|
||
|
||
<FilterItem label="认证状态">
|
||
<el-select
|
||
v-model="filters.is_certified"
|
||
placeholder="选择认证状态"
|
||
clearable
|
||
@change="handleFilterChange"
|
||
class="w-full"
|
||
>
|
||
<el-option label="已认证" :value="true" />
|
||
<el-option label="未认证" :value="false" />
|
||
</el-select>
|
||
</FilterItem>
|
||
|
||
<FilterItem label="激活状态">
|
||
<el-select
|
||
v-model="filters.is_active"
|
||
placeholder="选择激活状态"
|
||
clearable
|
||
@change="handleFilterChange"
|
||
class="w-full"
|
||
>
|
||
<el-option label="已激活" :value="true" />
|
||
<el-option label="未激活" :value="false" />
|
||
</el-select>
|
||
</FilterItem>
|
||
|
||
<FilterItem label="企业名称">
|
||
<el-input
|
||
v-model="filters.company_name"
|
||
placeholder="输入企业名称"
|
||
clearable
|
||
@input="handleSearch"
|
||
class="w-full"
|
||
/>
|
||
</FilterItem>
|
||
|
||
<template #stats>
|
||
共找到 {{ total }} 个用户
|
||
</template>
|
||
|
||
<template #buttons>
|
||
<div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
|
||
<el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">
|
||
重置筛选
|
||
</el-button>
|
||
<el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadUsers" :class="isMobile ? 'flex-1' : ''">
|
||
应用筛选
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</FilterSection>
|
||
</template>
|
||
|
||
<template #table>
|
||
<!-- 加载状态 -->
|
||
<div v-if="loading" class="flex justify-center items-center py-12">
|
||
<el-loading size="large" />
|
||
</div>
|
||
|
||
<!-- 移动端卡片布局 -->
|
||
<div v-else-if="isMobile && users.length > 0" class="user-cards">
|
||
<div
|
||
v-for="user in users"
|
||
:key="user.id"
|
||
class="user-card"
|
||
>
|
||
<div class="card-header">
|
||
<div class="flex-1">
|
||
<div class="flex items-center gap-2 mb-1">
|
||
<span class="font-semibold text-base text-blue-600 font-mono">{{ formatPhone(user.phone) }}</span>
|
||
<el-tag
|
||
:type="user.is_active ? 'success' : 'warning'"
|
||
size="small"
|
||
>
|
||
{{ user.is_active ? '已激活' : '未激活' }}
|
||
</el-tag>
|
||
<el-tag
|
||
:type="user.is_certified ? 'success' : 'info'"
|
||
size="small"
|
||
>
|
||
{{ user.is_certified ? '已认证' : '未认证' }}
|
||
</el-tag>
|
||
</div>
|
||
<div v-if="user.username" class="text-xs text-gray-500">用户名: {{ user.username }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-row">
|
||
<span class="card-label">钱包余额</span>
|
||
<span class="card-value text-green-600 font-semibold">¥{{ formatMoney(user.wallet_balance || '0') }}</span>
|
||
</div>
|
||
<div v-if="user.enterprise_info" class="card-row">
|
||
<span class="card-label">企业名称</span>
|
||
<span class="card-value">{{ user.enterprise_info.company_name || '-' }}</span>
|
||
</div>
|
||
<div v-if="user.enterprise_info" class="card-row">
|
||
<span class="card-label">法人姓名</span>
|
||
<span class="card-value text-sm">{{ user.enterprise_info.legal_person_name || '-' }}</span>
|
||
</div>
|
||
<div class="card-row">
|
||
<span class="card-label">注册时间</span>
|
||
<span class="card-value text-sm">{{ formatDate(user.created_at) }} {{ formatTime(user.created_at) }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="action-buttons">
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
@click="handleViewUser(user)"
|
||
class="action-btn"
|
||
>
|
||
查看详情
|
||
</el-button>
|
||
<el-button
|
||
type="warning"
|
||
size="small"
|
||
@click="handleRecharge(user)"
|
||
:disabled="!user.is_certified"
|
||
class="action-btn"
|
||
>
|
||
充值
|
||
</el-button>
|
||
<el-dropdown @command="handleMoreAction" trigger="click">
|
||
<el-button type="info" size="small" :disabled="!user.is_certified" class="action-btn">
|
||
更多<el-icon class="ml-1"><arrow-down /></el-icon>
|
||
</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item :command="{ action: 'subscriptions', user }">
|
||
<el-icon><tickets /></el-icon>
|
||
订阅管理
|
||
</el-dropdown-item>
|
||
<el-dropdown-item :command="{ action: 'api_calls', user }">
|
||
<el-icon><document /></el-icon>
|
||
调用记录
|
||
</el-dropdown-item>
|
||
<el-dropdown-item :command="{ action: 'consumption', user }">
|
||
<el-icon><money /></el-icon>
|
||
消费记录
|
||
</el-dropdown-item>
|
||
<el-dropdown-item :command="{ action: 'recharge_history', user }">
|
||
<el-icon><wallet /></el-icon>
|
||
充值记录
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 桌面端表格布局 -->
|
||
<div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||
<div class="table-container">
|
||
<el-table
|
||
:data="users"
|
||
style="width: 100%"
|
||
:header-cell-style="{
|
||
background: '#f8fafc',
|
||
color: '#475569',
|
||
fontWeight: '600',
|
||
fontSize: '14px'
|
||
}"
|
||
:cell-style="{
|
||
fontSize: '14px',
|
||
color: '#1e293b'
|
||
}"
|
||
>
|
||
<el-table-column prop="phone" label="手机号" width="140">
|
||
<template #default="{ row }">
|
||
<span class="font-mono text-sm">{{ formatPhone(row.phone) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="username" label="用户名" width="120">
|
||
<template #default="{ row }">
|
||
<span class="text-gray-600">{{ row.username || '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="is_active" label="激活状态" width="120">
|
||
<template #default="{ row }">
|
||
<el-tag
|
||
:type="row.is_active ? 'success' : 'warning'"
|
||
size="small"
|
||
>
|
||
{{ row.is_active ? '已激活' : '未激活' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="is_certified" label="认证状态" width="120">
|
||
<template #default="{ row }">
|
||
<el-tag
|
||
:type="row.is_certified ? 'success' : 'info'"
|
||
size="small"
|
||
>
|
||
{{ row.is_certified ? '已认证' : '未认证' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="wallet_balance" label="钱包余额" width="120">
|
||
<template #default="{ row }">
|
||
<span class="font-medium text-green-600">
|
||
¥{{ formatMoney(row.wallet_balance || '0') }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="enterprise_info.company_name" label="企业信息" min-width="200">
|
||
<template #default="{ row }">
|
||
<div v-if="row.enterprise_info" class="space-y-1">
|
||
<div class="flex items-center text-gray-900">
|
||
<span class="w-20 text-gray-500">企业名：</span>
|
||
<span class="font-medium">{{ row.enterprise_info.company_name || '-' }}</span>
|
||
</div>
|
||
<div class="flex items-center text-gray-900">
|
||
<span class="w-20 text-gray-500">法人姓名：</span>
|
||
<span class="text-sm">{{ row.enterprise_info.legal_person_name || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<span v-else class="text-gray-400">-</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="created_at" label="注册时间" width="160">
|
||
<template #default="{ row }">
|
||
<div class="text-sm">
|
||
<div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
|
||
<div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="操作" min-width="300" fixed="right">
|
||
<template #default="{ row }">
|
||
<div class="flex items-center space-x-2">
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
@click="handleViewUser(row)"
|
||
>
|
||
查看详情
|
||
</el-button>
|
||
|
||
<!-- 充值按钮 -->
|
||
<el-tooltip
|
||
v-if="!row.is_certified"
|
||
content="需要企业认证后才能进行充值操作"
|
||
placement="top"
|
||
>
|
||
<el-button
|
||
size="small"
|
||
type="warning"
|
||
@click="handleRecharge(row)"
|
||
:disabled="!row.is_certified"
|
||
>
|
||
充值
|
||
</el-button>
|
||
</el-tooltip>
|
||
<el-button
|
||
v-else
|
||
size="small"
|
||
type="warning"
|
||
@click="handleRecharge(row)"
|
||
>
|
||
充值
|
||
</el-button>
|
||
|
||
<!-- 更多操作按钮 -->
|
||
<el-tooltip
|
||
v-if="!row.is_certified"
|
||
content="需要企业认证后才能查看更多操作"
|
||
placement="top"
|
||
>
|
||
<el-dropdown @command="handleMoreAction" trigger="click">
|
||
<el-button
|
||
size="small"
|
||
type="info"
|
||
:disabled="!row.is_certified"
|
||
>
|
||
更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||
</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item :command="{ action: 'subscriptions', user: row }">
|
||
<el-icon><tickets /></el-icon>
|
||
订阅管理
|
||
</el-dropdown-item>
|
||
<el-dropdown-item :command="{ action: 'api_calls', user: row }">
|
||
<el-icon><document /></el-icon>
|
||
调用记录
|
||
</el-dropdown-item>
|
||
<el-dropdown-item :command="{ action: 'consumption', user: row }">
|
||
<el-icon><money /></el-icon>
|
||
消费记录
|
||
</el-dropdown-item>
|
||
<el-dropdown-item :command="{ action: 'recharge_history', user: row }">
|
||
<el-icon><wallet /></el-icon>
|
||
充值记录
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</el-tooltip>
|
||
<el-dropdown
|
||
v-else
|
||
@command="handleMoreAction"
|
||
trigger="click"
|
||
>
|
||
<el-button size="small" type="info">
|
||
更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||
</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item :command="{ action: 'subscriptions', user: row }">
|
||
<el-icon><tickets /></el-icon>
|
||
订阅管理
|
||
</el-dropdown-item>
|
||
<el-dropdown-item :command="{ action: 'api_calls', user: row }">
|
||
<el-icon><document /></el-icon>
|
||
调用记录
|
||
</el-dropdown-item>
|
||
<el-dropdown-item :command="{ action: 'consumption', user: row }">
|
||
<el-icon><money /></el-icon>
|
||
消费记录
|
||
</el-dropdown-item>
|
||
<el-dropdown-item :command="{ action: 'recharge_history', user: row }">
|
||
<el-icon><wallet /></el-icon>
|
||
充值记录
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div v-if="!loading && users.length === 0" class="text-center py-12">
|
||
<el-empty description="暂无用户数据" />
|
||
</div>
|
||
</template>
|
||
|
||
<template #pagination>
|
||
<el-pagination
|
||
v-if="total > 0"
|
||
v-model:current-page="currentPage"
|
||
v-model:page-size="pageSize"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:total="total"
|
||
:layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
|
||
:small="isMobile"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
</template>
|
||
|
||
<template #extra>
|
||
<!-- 用户详情弹窗 -->
|
||
<el-dialog
|
||
v-model="userDialogVisible"
|
||
title="用户详情"
|
||
:width="isMobile ? '90%' : '800px'"
|
||
class="user-dialog"
|
||
>
|
||
<div v-if="selectedUser" class="space-y-6">
|
||
<!-- 用户统计信息 -->
|
||
<div :class="['grid gap-6', isMobile ? 'grid-cols-1' : 'grid-cols-3']">
|
||
<div class="user-stat-card">
|
||
<div class="user-stat-value">{{ selectedUser.login_count || 0 }}</div>
|
||
<div class="user-stat-label">登录次数</div>
|
||
</div>
|
||
<div class="user-stat-card">
|
||
<div class="user-stat-value">{{ selectedUser.user_type === 'admin' ? '管理员' : '普通用户' }}</div>
|
||
<div class="user-stat-label">用户类型</div>
|
||
</div>
|
||
<div class="user-stat-card">
|
||
<div class="user-stat-value">¥{{ formatMoney(selectedUser.wallet_balance) }}</div>
|
||
<div class="user-stat-label">钱包余额</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 基本信息 -->
|
||
<div class="user-info">
|
||
<h3 class="text-lg font-semibold text-gray-900 mb-4">基本信息</h3>
|
||
<div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
|
||
<div class="info-item">
|
||
<span class="info-label">手机号:</span>
|
||
<span class="info-value">{{ formatPhone(selectedUser.phone) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">用户名:</span>
|
||
<span class="info-value">{{ selectedUser.username || '-' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">激活状态:</span>
|
||
<span class="info-value">
|
||
<el-tag :type="selectedUser.is_active ? 'success' : 'warning'" size="small">
|
||
{{ selectedUser.is_active ? '已激活' : '未激活' }}
|
||
</el-tag>
|
||
</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">认证状态:</span>
|
||
<span class="info-value">
|
||
<el-tag :type="selectedUser.is_certified ? 'success' : 'info'" size="small">
|
||
{{ selectedUser.is_certified ? '已认证' : '未认证' }}
|
||
</el-tag>
|
||
</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">注册时间:</span>
|
||
<span class="info-value">{{ formatDate(selectedUser.created_at) }}</span>
|
||
</div>
|
||
<div v-if="selectedUser.last_login_at" class="info-item">
|
||
<span class="info-label">最后登录:</span>
|
||
<span class="info-value">{{ formatDate(selectedUser.last_login_at) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 企业信息 -->
|
||
<div v-if="selectedUser.enterprise_info" class="enterprise-info">
|
||
<h3 class="text-lg font-semibold text-gray-900 mb-4">企业信息</h3>
|
||
<div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
|
||
<div class="info-item">
|
||
<span class="info-label">企业名称:</span>
|
||
<span class="info-value">{{ selectedUser.enterprise_info.company_name }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">统一社会信用代码:</span>
|
||
<span class="info-value">{{ selectedUser.enterprise_info.unified_social_code }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">法定代表人:</span>
|
||
<span class="info-value">{{ selectedUser.enterprise_info.legal_person_name }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">法定代表人手机:</span>
|
||
<span class="info-value">{{ formatPhone(selectedUser.enterprise_info.legal_person_phone) }}</span>
|
||
</div>
|
||
<div class="info-item col-span-2">
|
||
<span class="info-label">企业地址:</span>
|
||
<span class="info-value">{{ selectedUser.enterprise_info.enterprise_address }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">企业邮箱:</span>
|
||
<span class="info-value">{{ selectedUser.enterprise_info.enterprise_email || '-' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">认证时间:</span>
|
||
<span class="info-value">{{ formatDate(selectedUser.enterprise_info.created_at) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 合同信息部分 -->
|
||
<div v-if="selectedUser.enterprise_info.contracts && selectedUser.enterprise_info.contracts.length > 0" class="contracts-section mt-6">
|
||
<h4 class="text-md font-semibold text-gray-900 mb-3">合同信息</h4>
|
||
<div class="contracts-list space-y-3">
|
||
<div
|
||
v-for="contract in selectedUser.enterprise_info.contracts"
|
||
:key="contract.id"
|
||
class="contract-item bg-gray-50 border border-gray-200 rounded-lg p-4"
|
||
>
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex-1">
|
||
<div class="flex items-center space-x-3 mb-2">
|
||
<span class="text-sm font-medium text-gray-900">{{ contract.contract_name }}</span>
|
||
<el-tag size="small" type="primary">{{ contract.contract_type_name || contract.contract_type }}</el-tag>
|
||
</div>
|
||
<div class="text-sm text-gray-600">
|
||
创建时间: {{ formatDate(contract.created_at) }}
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
@click="handleViewContract(contract)"
|
||
>
|
||
查看合同
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="text-center py-6 text-gray-500">
|
||
暂无合同信息
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 未认证提示 -->
|
||
<div v-else class="text-center py-6 text-gray-500 bg-gray-50 rounded-lg">
|
||
<el-icon class="text-4xl text-gray-300 mb-2"><warning /></el-icon>
|
||
<div class="text-lg font-medium text-gray-600">该用户尚未完成企业认证</div>
|
||
<div class="text-sm text-gray-500 mt-1">完成企业认证后可查看详细信息</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 充值弹窗 -->
|
||
<el-dialog
|
||
v-model="rechargeDialogVisible"
|
||
title="用户充值"
|
||
:width="isMobile ? '90%' : '500px'"
|
||
class="recharge-dialog"
|
||
>
|
||
<div v-if="selectedUser" class="space-y-6">
|
||
<div class="user-info mb-4">
|
||
<div class="info-item">
|
||
<span class="info-label">用户手机:</span>
|
||
<span class="info-value">{{ formatPhone(selectedUser.phone) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">用户类型:</span>
|
||
<span class="info-value">
|
||
<el-tag :type="selectedUser.user_type === 'admin' ? 'danger' : 'primary'" size="small">
|
||
{{ selectedUser.user_type === 'admin' ? '管理员' : '普通用户' }}
|
||
</el-tag>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<el-form
|
||
ref="rechargeFormRef"
|
||
:model="rechargeForm"
|
||
:rules="rechargeRules"
|
||
label-width="100px"
|
||
>
|
||
<el-form-item label="充值方式" prop="rechargeType">
|
||
<el-radio-group v-model="rechargeForm.rechargeType">
|
||
<el-radio label="transfer">对公转账</el-radio>
|
||
<el-radio label="gift">赠送充值</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="充值金额" prop="amount">
|
||
<el-input
|
||
v-model="rechargeForm.amount"
|
||
placeholder="请输入充值金额"
|
||
type="number"
|
||
min="0.01"
|
||
step="0.01"
|
||
>
|
||
<template #append>元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item
|
||
v-if="rechargeForm.rechargeType === 'transfer'"
|
||
label="转账订单号"
|
||
prop="transferOrderID"
|
||
>
|
||
<el-input
|
||
v-model="rechargeForm.transferOrderID"
|
||
placeholder="请输入转账订单号"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="备注信息" prop="notes">
|
||
<el-input
|
||
v-model="rechargeForm.notes"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="请输入备注信息（可选）"
|
||
maxlength="500"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<div :class="['dialog-footer', isMobile ? 'flex-col' : '']">
|
||
<el-button
|
||
:class="isMobile ? 'w-full' : ''"
|
||
@click="rechargeDialogVisible = false"
|
||
>
|
||
取消
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
:class="isMobile ? 'w-full' : ''"
|
||
@click="handleSubmitRecharge"
|
||
:loading="rechargeLoading"
|
||
>
|
||
确认充值
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
</ListPageLayout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { financeApi, userApi } from '@/api'
|
||
import FilterItem from '@/components/common/FilterItem.vue'
|
||
import FilterSection from '@/components/common/FilterSection.vue'
|
||
import ListPageLayout from '@/components/common/ListPageLayout.vue'
|
||
import { useMobileTable } from '@/composables/useMobileTable'
|
||
import { ArrowDown, Document, Money, Tickets, Wallet, Warning } from '@element-plus/icons-vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { useRouter } from 'vue-router'
|
||
|
||
// 获取路由实例
|
||
const router = useRouter()
|
||
|
||
// 移动端检测
|
||
const { isMobile, isTablet } = useMobileTable()
|
||
|
||
// 响应式数据
|
||
const loading = ref(false)
|
||
const users = ref([])
|
||
const total = ref(0)
|
||
const currentPage = ref(1)
|
||
const pageSize = ref(10)
|
||
const userDialogVisible = ref(false)
|
||
const rechargeDialogVisible = ref(false)
|
||
const selectedUser = ref(null)
|
||
const rechargeLoading = ref(false)
|
||
const rechargeFormRef = ref(null)
|
||
|
||
// 统计数据
|
||
const stats = ref({
|
||
total_users: 0,
|
||
active_users: 0,
|
||
certified_users: 0
|
||
})
|
||
|
||
// 筛选条件
|
||
const filters = reactive({
|
||
phone: '',
|
||
user_type: '',
|
||
is_active: null,
|
||
is_certified: null,
|
||
company_name: ''
|
||
})
|
||
|
||
// 充值表单
|
||
const rechargeForm = reactive({
|
||
rechargeType: 'transfer',
|
||
amount: '',
|
||
transferOrderID: '',
|
||
notes: ''
|
||
})
|
||
|
||
// 充值表单验证规则
|
||
const rechargeRules = {
|
||
rechargeType: [
|
||
{ required: true, message: '请选择充值方式', trigger: 'change' }
|
||
],
|
||
amount: [
|
||
{ required: true, message: '请输入充值金额', trigger: 'blur' },
|
||
{
|
||
pattern: /^[1-9]\d*(\.\d{1,2})?$/,
|
||
message: '请输入有效的金额（最少0.01元）',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
transferOrderID: [
|
||
{
|
||
required: true,
|
||
message: '请输入转账订单号',
|
||
trigger: 'blur',
|
||
validator: (rule, value, callback) => {
|
||
if (rechargeForm.rechargeType === 'transfer' && !value) {
|
||
callback(new Error('请输入转账订单号'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
// 搜索防抖
|
||
let searchTimer = null
|
||
|
||
// 初始化
|
||
onMounted(() => {
|
||
loadUsers()
|
||
loadStats()
|
||
})
|
||
|
||
// 加载用户列表
|
||
const loadUsers = async () => {
|
||
loading.value = true
|
||
try {
|
||
const params = {
|
||
page: currentPage.value,
|
||
page_size: pageSize.value,
|
||
...filters
|
||
}
|
||
|
||
const response = await userApi.getUserList(params)
|
||
users.value = response.data?.items || []
|
||
total.value = response.data?.total || 0
|
||
} catch (error) {
|
||
console.error('加载用户失败:', error)
|
||
ElMessage.error('加载用户失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 加载统计数据
|
||
const loadStats = async () => {
|
||
try {
|
||
const response = await userApi.getUserStats()
|
||
stats.value = {
|
||
total_users: response.data?.total_users || 0,
|
||
active_users: response.data?.active_users || 0,
|
||
certified_users: response.data?.certified_users || 0
|
||
}
|
||
} catch (error) {
|
||
console.error('加载统计数据失败:', error)
|
||
ElMessage.error('加载统计数据失败')
|
||
}
|
||
}
|
||
|
||
// 格式化手机号
|
||
const formatPhone = (phone) => {
|
||
// if (!phone) return '-'
|
||
// if (phone.length < 7) return phone
|
||
// return phone.substring(0, 3) + '****' + phone.substring(phone.length - 4)
|
||
return phone
|
||
}
|
||
|
||
// 格式化日期
|
||
const formatDate = (date) => {
|
||
if (!date) return '-'
|
||
return new Date(date).toLocaleDateString('zh-CN')
|
||
}
|
||
|
||
// 格式化时间
|
||
const formatTime = (date) => {
|
||
if (!date) return '-'
|
||
return new Date(date).toLocaleTimeString('zh-CN', {
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
})
|
||
}
|
||
|
||
// 格式化金额
|
||
const formatMoney = (amount) => {
|
||
if (!amount) return '0.00'
|
||
const num = parseFloat(amount)
|
||
if (isNaN(num)) return '0.00'
|
||
return num.toFixed(2)
|
||
}
|
||
|
||
// 处理筛选变化
|
||
const handleFilterChange = () => {
|
||
currentPage.value = 1
|
||
loadUsers()
|
||
}
|
||
|
||
// 处理搜索
|
||
const handleSearch = () => {
|
||
if (searchTimer) {
|
||
clearTimeout(searchTimer)
|
||
}
|
||
searchTimer = setTimeout(() => {
|
||
currentPage.value = 1
|
||
loadUsers()
|
||
}, 500)
|
||
}
|
||
|
||
// 重置筛选
|
||
const resetFilters = () => {
|
||
Object.keys(filters).forEach(key => {
|
||
filters[key] = key.includes('is_') ? null : ''
|
||
})
|
||
currentPage.value = 1
|
||
loadUsers()
|
||
}
|
||
|
||
// 处理分页大小变化
|
||
const handleSizeChange = (size) => {
|
||
pageSize.value = size
|
||
currentPage.value = 1
|
||
loadUsers()
|
||
}
|
||
|
||
// 处理当前页变化
|
||
const handleCurrentChange = (page) => {
|
||
currentPage.value = page
|
||
loadUsers()
|
||
}
|
||
|
||
// 查看用户详情
|
||
const handleViewUser = (user) => {
|
||
selectedUser.value = user
|
||
userDialogVisible.value = true
|
||
}
|
||
|
||
// 查看合同
|
||
const handleViewContract = (contract) => {
|
||
if (contract.contract_file_url) {
|
||
// 在新窗口中打开合同链接
|
||
window.open(contract.contract_file_url, '_blank')
|
||
} else {
|
||
ElMessage.warning('合同文件链接不可用')
|
||
}
|
||
}
|
||
|
||
// 处理充值
|
||
const handleRecharge = (user) => {
|
||
// 检查用户是否已认证
|
||
if (!user.is_certified) {
|
||
ElMessage.warning('该用户尚未完成企业认证，无法进行充值操作')
|
||
return
|
||
}
|
||
|
||
selectedUser.value = user
|
||
// 重置表单
|
||
rechargeForm.rechargeType = 'transfer'
|
||
rechargeForm.amount = ''
|
||
rechargeForm.transferOrderID = ''
|
||
rechargeForm.notes = ''
|
||
rechargeDialogVisible.value = true
|
||
}
|
||
|
||
// 提交充值
|
||
const handleSubmitRecharge = async () => {
|
||
if (!rechargeFormRef.value) return
|
||
|
||
try {
|
||
await rechargeFormRef.value.validate()
|
||
rechargeLoading.value = true
|
||
|
||
const params = {
|
||
user_id: selectedUser.value.id,
|
||
amount: rechargeForm.amount,
|
||
notes: rechargeForm.notes
|
||
}
|
||
|
||
if (rechargeForm.rechargeType === 'transfer') {
|
||
params.transfer_order_id = rechargeForm.transferOrderID
|
||
await financeApi.transferRecharge(params)
|
||
ElMessage.success('对公转账充值成功')
|
||
} else {
|
||
await financeApi.giftRecharge(params)
|
||
ElMessage.success('赠送充值成功')
|
||
}
|
||
|
||
rechargeDialogVisible.value = false
|
||
// 重新加载用户列表
|
||
loadUsers()
|
||
} catch (error) {
|
||
console.error('充值失败:', error)
|
||
ElMessage.error(error.response?.data?.message || '充值失败')
|
||
} finally {
|
||
rechargeLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 处理更多操作
|
||
const handleMoreAction = (command) => {
|
||
const { action, user } = command
|
||
|
||
// 检查用户是否已认证
|
||
if (!user.is_certified) {
|
||
ElMessage.warning('该用户尚未完成企业认证，无法执行此操作')
|
||
return
|
||
}
|
||
|
||
switch (action) {
|
||
case 'subscriptions':
|
||
router.push({
|
||
name: 'AdminSubscriptions',
|
||
query: { user_id: user.id }
|
||
})
|
||
break
|
||
case 'api_calls':
|
||
router.push({
|
||
name: 'AdminUsage',
|
||
query: { user_id: user.id }
|
||
})
|
||
break
|
||
case 'consumption':
|
||
router.push({
|
||
name: 'AdminTransactions',
|
||
query: { user_id: user.id }
|
||
})
|
||
break
|
||
case 'recharge_history':
|
||
router.push({
|
||
name: 'AdminRechargeRecords',
|
||
query: { user_id: user.id }
|
||
})
|
||
break
|
||
default:
|
||
ElMessage.warning('未知操作')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 统计项样式 */
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 16px 24px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||
border-radius: 12px;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
line-height: 1;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 13px;
|
||
color: #64748b;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 用户详情弹窗样式 */
|
||
.user-dialog :deep(.el-dialog) {
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.user-dialog :deep(.el-dialog__header) {
|
||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||
border-bottom: 1px solid rgba(226, 232, 240, 0.6);
|
||
padding: 20px 24px;
|
||
}
|
||
|
||
.user-dialog :deep(.el-dialog__title) {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.user-dialog :deep(.el-dialog__body) {
|
||
padding: 24px;
|
||
max-height: 70vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 企业信息弹窗样式 */
|
||
.enterprise-dialog :deep(.el-dialog) {
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.enterprise-dialog :deep(.el-dialog__header) {
|
||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||
border-bottom: 1px solid rgba(226, 232, 240, 0.6);
|
||
padding: 20px 24px;
|
||
}
|
||
|
||
.enterprise-dialog :deep(.el-dialog__title) {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.enterprise-dialog :deep(.el-dialog__body) {
|
||
padding: 24px;
|
||
}
|
||
|
||
/* 充值弹窗样式 */
|
||
.recharge-dialog :deep(.el-dialog) {
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.recharge-dialog :deep(.el-dialog__header) {
|
||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||
border-bottom: 1px solid rgba(226, 232, 240, 0.6);
|
||
padding: 20px 24px;
|
||
}
|
||
|
||
.recharge-dialog :deep(.el-dialog__title) {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.recharge-dialog :deep(.el-dialog__body) {
|
||
padding: 24px;
|
||
}
|
||
|
||
.recharge-dialog :deep(.el-dialog__footer) {
|
||
background: rgba(248, 250, 252, 0.5);
|
||
border-top: 1px solid rgba(226, 232, 240, 0.4);
|
||
padding: 16px 24px;
|
||
}
|
||
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* 用户统计卡片 */
|
||
.user-stat-card {
|
||
background: rgba(248, 250, 252, 0.8);
|
||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.user-stat-card:hover {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border-color: rgba(59, 130, 246, 0.3);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.user-stat-value {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
line-height: 1;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.user-stat-label {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 用户信息 */
|
||
.user-info {
|
||
background: rgba(248, 250, 252, 0.5);
|
||
border: 1px solid rgba(226, 232, 240, 0.4);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
}
|
||
|
||
/* 企业信息 */
|
||
.enterprise-info {
|
||
background: rgba(248, 250, 252, 0.5);
|
||
border: 1px solid rgba(226, 232, 240, 0.4);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
}
|
||
|
||
/* 合同信息 */
|
||
.contracts-section {
|
||
background: rgba(248, 250, 252, 0.5);
|
||
border: 1px solid rgba(226, 232, 240, 0.4);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.contract-item {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.contract-item:hover {
|
||
background: rgba(255, 255, 255, 0.8);
|
||
border-color: rgba(59, 130, 246, 0.3);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid rgba(226, 232, 240, 0.3);
|
||
}
|
||
|
||
.info-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 14px;
|
||
color: #1e293b;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 表格样式优化 */
|
||
:deep(.el-table) {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
:deep(.el-table th) {
|
||
background: #f8fafc !important;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
}
|
||
|
||
:deep(.el-table td) {
|
||
border-bottom: 1px solid #f1f5f9;
|
||
}
|
||
|
||
:deep(.el-table tr:hover > td) {
|
||
background: #f8fafc !important;
|
||
}
|
||
|
||
/* 移动端卡片布局 */
|
||
.user-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.user-card {
|
||
background: white;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid #f3f4f6;
|
||
}
|
||
|
||
.card-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.card-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
}
|
||
|
||
.card-label {
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
font-weight: 500;
|
||
min-width: 80px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.card-value {
|
||
font-size: 14px;
|
||
color: #1f2937;
|
||
text-align: right;
|
||
word-break: break-word;
|
||
flex: 1;
|
||
}
|
||
|
||
.card-footer {
|
||
padding-top: 12px;
|
||
border-top: 1px solid #f3f4f6;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.action-btn {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 表格容器 */
|
||
.table-container {
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.stat-item {
|
||
padding: 12px 16px;
|
||
min-width: 100px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.user-stat-card {
|
||
padding: 16px;
|
||
}
|
||
|
||
.user-stat-value {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.user-stat-label {
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 表格在移动端优化 */
|
||
.table-container {
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
:deep(.el-table) {
|
||
font-size: 12px;
|
||
min-width: 1000px;
|
||
}
|
||
|
||
:deep(.el-table th),
|
||
:deep(.el-table td) {
|
||
padding: 8px 4px;
|
||
}
|
||
|
||
:deep(.el-table .cell) {
|
||
padding: 0 4px;
|
||
word-break: break-word;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 分页组件在移动端优化 */
|
||
:deep(.el-pagination) {
|
||
justify-content: center;
|
||
}
|
||
|
||
:deep(.el-pagination .el-pagination__sizes) {
|
||
display: none;
|
||
}
|
||
|
||
:deep(.el-pagination .el-pagination__total) {
|
||
display: none;
|
||
}
|
||
|
||
:deep(.el-pagination .el-pagination__jump) {
|
||
display: none;
|
||
}
|
||
|
||
/* 对话框在移动端优化 */
|
||
:deep(.user-dialog .el-dialog__body),
|
||
:deep(.recharge-dialog .el-dialog__body) {
|
||
padding: 16px;
|
||
max-height: 80vh;
|
||
}
|
||
|
||
.dialog-footer {
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕进一步优化 */
|
||
@media (max-width: 480px) {
|
||
.user-card {
|
||
padding: 12px;
|
||
}
|
||
|
||
.card-header {
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.card-body {
|
||
gap: 6px;
|
||
}
|
||
|
||
.card-label {
|
||
font-size: 11px;
|
||
min-width: 70px;
|
||
}
|
||
|
||
.card-value {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.card-row {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 4px;
|
||
}
|
||
|
||
.card-value {
|
||
text-align: left;
|
||
}
|
||
|
||
.action-buttons {
|
||
gap: 6px;
|
||
}
|
||
|
||
.action-btn {
|
||
font-size: 12px;
|
||
padding: 6px 8px;
|
||
}
|
||
}
|
||
|
||
/* 禁用按钮样式优化 */
|
||
:deep(.el-button.is-disabled) {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
:deep(.el-button.is-disabled:hover) {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* 工具提示样式 */
|
||
:deep(.el-tooltip__popper) {
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
}
|
||
</style>
|