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

474
src/pages/admin/subscriptions/index.vue
View File

@@ -5,7 +5,7 @@
>
<!-- 单用户模式头部 -->
<template #actions v-if="singleUserMode">
<div class="single-user-header">
<div :class="['single-user-header', isMobile ? 'flex-col' : '']">
<div class="user-info">
<el-icon class="user-icon"><user /></el-icon>
<div class="user-details">
@@ -13,18 +13,20 @@
<div class="user-phone">{{ currentUser?.phone || '-' }}</div>
</div>
</div>
<div class="user-actions">
<el-button @click="showBatchPriceDialog" type="warning" size="small">
<div :class="['user-actions', isMobile ? 'w-full flex-wrap' : '']">
<el-button :size="isMobile ? 'small' : 'small'" @click="showBatchPriceDialog" type="warning">
<el-icon><edit /></el-icon>
一键改价
<span :class="isMobile ? 'hidden sm:inline' : ''">一键改价</span>
<span :class="isMobile ? 'sm:hidden' : 'hidden'">改价</span>
</el-button>
<el-button @click="exitSingleUserMode" type="info" size="small">
<el-button :size="isMobile ? 'small' : 'small'" @click="exitSingleUserMode" type="info">
<el-icon><close /></el-icon>
取消
<span :class="isMobile ? 'hidden sm:inline' : ''">取消</span>
</el-button>
<el-button @click="goBackToUsers" type="primary" size="small">
<el-button :size="isMobile ? 'small' : 'small'" @click="goBackToUsers" type="primary">
<el-icon><back /></el-icon>
返回用户管理
<span :class="isMobile ? 'hidden sm:inline' : ''">返回用户管理</span>
<span :class="isMobile ? 'sm:hidden' : 'hidden'">返回</span>
</el-button>
</div>
</div>
@@ -84,113 +86,186 @@
</template>
<template #buttons>
<el-button @click="resetFilters">重置筛选</el-button>
<el-button type="primary" @click="loadSubscriptions">应用筛选</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="loadSubscriptions" :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="subscriptions.length === 0" class="text-center py-12">
<!-- 移动端卡片布局 -->
<div v-else-if="isMobile && subscriptions.length > 0" class="subscription-cards">
<div
v-for="subscription in subscriptions"
:key="subscription.id"
class="subscription-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">{{ subscription.product?.name || subscription.product_admin?.name || '未知产品' }}</span>
<el-tag v-if="subscription.product?.is_package || subscription.product_admin?.is_package" type="success" size="small">组合包</el-tag>
</div>
<div class="text-xs text-gray-500">编号: {{ subscription.product?.code || subscription.product_admin?.code || '-' }}</div>
<div v-if="!singleUserMode" class="text-xs text-gray-500 mt-1">公司: {{ subscription.user?.company_name || '未知公司' }}</div>
</div>
</div>
<div class="card-body">
<div class="card-row">
<span class="card-label">订阅价格</span>
<span class="card-value text-red-600 font-semibold">¥{{ formatPrice(subscription.price) }}</span>
</div>
<div v-if="(subscription.product?.price || subscription.product_admin?.price) && (subscription.product?.price || subscription.product_admin?.price) !== subscription.price" class="card-row">
<span class="card-label">折扣</span>
<span class="card-value text-blue-600 text-sm">{{ calculateDiscount(subscription.product?.price || subscription.product_admin?.price, subscription.price) }}折</span>
</div>
<div class="card-row">
<span class="card-label">产品原价</span>
<span class="card-value text-gray-700">¥{{ formatPrice(subscription.product?.price || subscription.product_admin?.price) }}</span>
</div>
<div class="card-row">
<span class="card-label">成本价</span>
<span class="card-value text-gray-600">¥{{ formatPrice(subscription.product_admin?.cost_price) }}</span>
</div>
<div class="card-row">
<span class="card-label">订阅时间</span>
<span class="card-value text-sm">{{ formatDate(subscription.created_at) }} {{ formatTime(subscription.created_at) }}</span>
</div>
</div>
<div class="card-footer">
<div class="action-buttons">
<el-button
type="primary"
size="small"
@click="handleEditPrice(subscription)"
class="action-btn"
>
调整价格
</el-button>
<el-button
type="info"
size="small"
@click="handleViewDetails(subscription)"
class="action-btn"
>
查看详情
</el-button>
</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="subscriptions"
style="width: 100%"
:header-cell-style="{
background: '#f8fafc',
color: '#475569',
fontWeight: '600',
fontSize: '14px'
}"
:cell-style="{
fontSize: '14px',
color: '#1e293b'
}"
>
<el-table-column label="公司名称" min-width="200">
<template #default="{ row }">
<div>
<div class="font-medium text-gray-900">{{ row.user?.company_name || '未知公司' }}</div>
<div class="text-sm text-gray-500">{{ row.user?.phone || '-' }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="产品信息" min-width="200">
<template #default="{ row }">
<div>
<div class="font-medium text-gray-900">{{ row.product?.name || row.product_admin?.name || '未知产品' }}</div>
<div class="text-sm text-gray-500">{{ row.product?.code || row.product_admin?.code || '-' }}</div>
<el-tag v-if="row.product?.is_package || row.product_admin?.is_package" type="success" size="small" class="mt-1">组合包</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="price" label="订阅价格" width="150">
<template #default="{ row }">
<div class="flex flex-col gap-1">
<span class="font-semibold text-red-600">¥{{ formatPrice(row.price) }}</span>
<div v-if="(row.product?.price || row.product_admin?.price) && (row.product?.price || row.product_admin?.price) !== row.price" class="text-xs text-blue-600">
({{ calculateDiscount(row.product?.price || row.product_admin?.price, row.price) }}折)
</div>
</div>
</template>
</el-table-column>
<el-table-column label="产品原价" width="120">
<template #default="{ row }">
<span class="font-medium text-gray-700">¥{{ formatPrice(row.product?.price || row.product_admin?.price) }}</span>
</template>
</el-table-column>
<el-table-column label="成本价" width="120">
<template #default="{ row }">
<span class="font-medium text-gray-600">¥{{ formatPrice(row.product_admin?.cost_price) }}</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="操作" width="200" fixed="right">
<template #default="{ row }">
<div class="flex items-center space-x-2">
<el-button
type="primary"
size="small"
@click="handleEditPrice(row)"
>
调整价格
</el-button>
<el-button
type="info"
size="small"
@click="handleViewDetails(row)"
>
查看详情
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 空状态 -->
<div v-if="!loading && subscriptions.length === 0" class="text-center py-12">
<el-empty description="暂无订阅数据">
<el-button type="primary" @click="loadSubscriptions">
重新加载
</el-button>
</el-empty>
</div>
<div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
<el-table
:data="subscriptions"
style="width: 100%"
:header-cell-style="{
background: '#f8fafc',
color: '#475569',
fontWeight: '600',
fontSize: '14px'
}"
:cell-style="{
fontSize: '14px',
color: '#1e293b'
}"
>
<el-table-column label="公司名称" min-width="200">
<template #default="{ row }">
<div>
<div class="font-medium text-gray-900">{{ row.user?.company_name || '未知公司' }}</div>
<div class="text-sm text-gray-500">{{ row.user?.phone || '-' }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="产品信息" min-width="200">
<template #default="{ row }">
<div>
<div class="font-medium text-gray-900">{{ row.product?.name || row.product_admin?.name || '未知产品' }}</div>
<div class="text-sm text-gray-500">{{ row.product?.code || row.product_admin?.code || '-' }}</div>
<el-tag v-if="row.product?.is_package || row.product_admin?.is_package" type="success" size="small" class="mt-1">组合包</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="price" label="订阅价格" width="150">
<template #default="{ row }">
<div class="flex flex-col gap-1">
<span class="font-semibold text-red-600">¥{{ formatPrice(row.price) }}</span>
<div v-if="(row.product?.price || row.product_admin?.price) && (row.product?.price || row.product_admin?.price) !== row.price" class="text-xs text-blue-600">
({{ calculateDiscount(row.product?.price || row.product_admin?.price, row.price) }}折)
</div>
</div>
</template>
</el-table-column>
<el-table-column label="产品原价" width="120">
<template #default="{ row }">
<span class="font-medium text-gray-700">¥{{ formatPrice(row.product?.price || row.product_admin?.price) }}</span>
</template>
</el-table-column>
<el-table-column label="成本价" width="120">
<template #default="{ row }">
<span class="font-medium text-gray-600">¥{{ formatPrice(row.product_admin?.cost_price) }}</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="操作" width="200" fixed="right">
<template #default="{ row }">
<div class="flex items-center space-x-2">
<el-button
type="primary"
size="small"
@click="handleEditPrice(row)"
>
调整价格
</el-button>
<el-button
type="info"
size="small"
@click="handleViewDetails(row)"
>
查看详情
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<template #pagination>
@@ -200,7 +275,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"
/>
@@ -211,7 +287,7 @@
<el-dialog
v-model="priceDialogVisible"
title="调整订阅价格"
width="600px"
:width="isMobile ? '90%' : '600px'"
class="price-dialog"
>
<el-form
@@ -340,9 +416,19 @@
</el-form>
<template #footer>
<div class="flex justify-end gap-3">
<el-button @click="priceDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleUpdatePrice" :loading="updatingPrice">
<div :class="['flex gap-3', isMobile ? 'flex-col' : 'justify-end']">
<el-button
:class="isMobile ? 'w-full' : ''"
@click="priceDialogVisible = false"
>
取消
</el-button>
<el-button
type="primary"
:class="isMobile ? 'w-full' : ''"
@click="handleUpdatePrice"
:loading="updatingPrice"
>
确认调整
</el-button>
</div>
@@ -353,7 +439,7 @@
<el-dialog
v-model="batchPriceDialogVisible"
title="一键改价"
width="500px"
:width="isMobile ? '90%' : '500px'"
class="batch-price-dialog"
>
<el-form
@@ -433,10 +519,16 @@
</el-form>
<template #footer>
<div class="flex justify-end gap-3">
<el-button @click="batchPriceDialogVisible = false">取消</el-button>
<div :class="['flex gap-3', isMobile ? 'flex-col' : 'justify-end']">
<el-button
:class="isMobile ? 'w-full' : ''"
@click="batchPriceDialogVisible = false"
>
取消
</el-button>
<el-button
type="warning"
:class="isMobile ? 'w-full' : ''"
@click="handleBatchUpdatePrice"
:loading="updatingBatchPrice"
>
@@ -454,6 +546,7 @@ import { productAdminApi, 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 { Back, Close, Edit, QuestionFilled, User, Warning } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
@@ -462,6 +555,9 @@ import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 移动端检测
const { isMobile, isTablet } = useMobileTable()
// 响应式数据
const loading = ref(false)
const subscriptions = ref([])
@@ -1120,6 +1216,82 @@ const handleBatchUpdatePrice = async () => {
background: #f8fafc !important;
}
/* 移动端卡片布局 */
.subscription-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.subscription-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) {
.single-user-header {
@@ -1133,9 +1305,93 @@ const handleBatchUpdatePrice = async () => {
justify-content: flex-end;
}
.price-dialog :deep(.el-dialog) {
.price-dialog :deep(.el-dialog),
.batch-price-dialog :deep(.el-dialog) {
margin: 20px;
width: calc(100% - 40px) !important;
}
/* 表格在移动端优化 */
.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;
}
}
/* 超小屏幕进一步优化 */
@media (max-width: 480px) {
.subscription-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;
}
}
</style>