team/tyapi-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移动端页面适配

Browse Source
This commit is contained in:
18278715334
2025-12-10 14:17:31 +08:00
parent 403e2c28c0
commit ffbdcb29c4
13 changed files with 3169 additions and 645 deletions
Download Patch File Download Diff File Expand all files Collapse all files

623
src/pages/admin/users/index.vue
View File

@@ -5,16 +5,16 @@
>
<!-- 统计信息 -->
<template #actions>
<div class="flex gap-4">
<div class="stat-item">
<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">
<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">
<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>
@@ -74,150 +74,279 @@
</template>
<template #buttons>
<el-button @click="resetFilters">重置筛选</el-button>
<el-button type="primary" @click="loadUsers">应用筛选</el-button>
<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="users.length === 0" class="text-center py-12">
<el-empty description="暂无用户数据" />
<!-- 移动端卡片布局 -->
<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 class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
<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>
<!-- 桌面端表格布局 -->
<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="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
<el-table-column prop="is_active" label="激活状态" width="120">
<template #default="{ row }">
<el-tag
:type="row.is_active ? 'success' : 'warning'"
size="small"
type="primary"
@click="handleViewUser(row)"
>
查看详情
</el-button>
{{ row.is_active ? '已激活' : '未激活' }}
</el-tag>
</template>
</el-table-column>
<!-- 充值按钮 -->
<el-tooltip
v-if="!row.is_certified"
content="需要企业认证后才能进行充值操作"
placement="top"
<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)"
: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-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>
@@ -241,40 +370,16 @@
</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>
</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>
@@ -285,7 +390,8 @@
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
:layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
:small="isMobile"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
@@ -296,12 +402,12 @@
<el-dialog
v-model="userDialogVisible"
title="用户详情"
width="800px"
:width="isMobile ? '90%' : '800px'"
class="user-dialog"
>
<div v-if="selectedUser" class="space-y-6">
<!-- 用户统计信息 -->
<div class="grid grid-cols-3 gap-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>
@@ -319,7 +425,7 @@
<!-- 基本信息 -->
<div class="user-info">
<h3 class="text-lg font-semibold text-gray-900 mb-4">基本信息</h3>
<div class="grid grid-cols-2 gap-4">
<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>
@@ -358,7 +464,7 @@
<!-- 企业信息 -->
<div v-if="selectedUser.enterprise_info" class="enterprise-info">
<h3 class="text-lg font-semibold text-gray-900 mb-4">企业信息</h3>
<div class="grid grid-cols-2 gap-4">
<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>
@@ -440,7 +546,7 @@
<el-dialog
v-model="rechargeDialogVisible"
title="用户充值"
width="500px"
:width="isMobile ? '90%' : '500px'"
class="recharge-dialog"
>
<div v-if="selectedUser" class="space-y-6">
@@ -509,9 +615,19 @@
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="rechargeDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmitRecharge" :loading="rechargeLoading">
<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>
@@ -526,6 +642,7 @@ 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'
@@ -533,6 +650,9 @@ import { useRouter } from 'vue-router'
// 获取路由实例
const router = useRouter()
// 移动端检测
const { isMobile, isTablet } = useMobileTable()
// 响应式数据
const loading = ref(false)
const users = ref([])
@@ -1037,6 +1157,82 @@ const handleMoreAction = (command) => {
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 {
@@ -1063,6 +1259,101 @@ const handleMoreAction = (command) => {
.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;
}
}
/* 禁用按钮样式优化 */