diff --git a/src/components/ListLayout/index.vue b/src/components/ListLayout/index.vue index 1c74afd..fb4f9c8 100644 --- a/src/components/ListLayout/index.vue +++ b/src/components/ListLayout/index.vue @@ -109,19 +109,26 @@ export default { /* 响应式设计 */ @media (max-width: 768px) { .list-layout { - height: calc(100vh - 50px); /* 移动端调整高度 */ + height: calc(100vh - 48px - 60px); /* 移动端调整高度:减去头部和底部导航 */ } .search-section { - padding: 15px; + padding: 12px; + max-height: 50vh; + overflow-y: auto; + -webkit-overflow-scrolling: touch; } .table-section { - padding: 0 15px; + padding: 0 10px; + flex: 1; + min-height: 0; } .pagination-section { - padding: 10px 15px; + padding: 8px 10px; + /* 移动端隐藏分页,因为很少用 */ + display: none; } } diff --git a/src/components/MobileBottomNav/index.vue b/src/components/MobileBottomNav/index.vue index 733a5b6..fdb95dd 100644 --- a/src/components/MobileBottomNav/index.vue +++ b/src/components/MobileBottomNav/index.vue @@ -106,7 +106,7 @@ export default { const flatRoutes = flattenRoutes(routes) - // 过滤并获取所有主要路由(不限制数量) + // 过滤并获取所有主要路由(不限制数量,显示所有) const mainRoutes = flatRoutes .filter(route => { // 过滤掉一些特殊路由 @@ -118,8 +118,6 @@ export default { !path.startsWith('/user/') }) // 不限制数量,显示所有可用路由 - // 但限制最多10个,避免过多导致显示问题 - .slice(0, 10) // 缓存结果 if (mainRoutes.length > 0) { @@ -212,24 +210,27 @@ export default { background: #fff; border-top: 1px solid #e4e7ed; display: flex; - justify-content: space-around; + justify-content: flex-start; align-items: center; z-index: 1000; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); padding-bottom: env(safe-area-inset-bottom); overflow-x: auto; + overflow-y: hidden; -webkit-overflow-scrolling: touch; + padding: 0 4px; - // 如果导航项超过5个,允许横向滚动 - &.scrollable { - justify-content: flex-start; - padding: 0 8px; + // 隐藏滚动条但保持滚动功能 + &::-webkit-scrollbar { + display: none; } + -ms-overflow-style: none; + scrollbar-width: none; .nav-item { - flex: 1; - min-width: 60px; - max-width: 80px; + flex: 0 0 auto; + min-width: 70px; + max-width: 90px; display: flex; flex-direction: column; align-items: center; @@ -238,7 +239,6 @@ export default { cursor: pointer; transition: all 0.3s; -webkit-tap-highlight-color: transparent; - flex-shrink: 0; .nav-icon { width: 28px; @@ -270,6 +270,7 @@ export default { text-overflow: ellipsis; max-width: 100%; text-align: center; + line-height: 1.2; } &.active { diff --git a/src/views/system/jdorder/orderList.vue b/src/views/system/jdorder/orderList.vue index a1a590a..bb188d4 100644 --- a/src/views/system/jdorder/orderList.vue +++ b/src/views/system/jdorder/orderList.vue @@ -3,7 +3,13 @@ @@ -286,6 +293,7 @@ :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" + class="list-pagination" /> @@ -464,6 +472,8 @@ import { listJDOrders, updateJDOrder, delJDOrder, fetchLogisticsManually, batchMarkRebateReceived, generateExcelText } from '@/api/system/jdorder' import { fillLogisticsByOrderNo, getTokenStatus, getTencentDocAuthUrl, testUserInfo, getAutoWriteConfig, reverseSyncThirdPartyOrderNo } from '@/api/jarvis/tendoc' import ListLayout from '@/components/ListLayout' +import MobileSearchForm from '@/components/MobileSearchForm' +import MobileButtonGroup from '@/components/MobileButtonGroup' import TencentDocAutoWriteConfig from './components/TencentDocAutoWriteConfig' import TencentDocPushMonitor from './components/TencentDocPushMonitor' import DistributionMarkTouserConfig from './components/DistributionMarkTouserConfig' @@ -474,7 +484,9 @@ export default { ListLayout, TencentDocAutoWriteConfig, TencentDocPushMonitor, - DistributionMarkTouserConfig + DistributionMarkTouserConfig, + MobileSearchForm, + MobileButtonGroup }, data() { return { @@ -535,6 +547,19 @@ export default { copiedExcelTextOrderIds: new Set() } }, + computed: { + actionButtons() { + return [ + { key: 'export', label: '导出', type: 'warning', icon: 'el-icon-download', handler: () => this.handleExport() }, + { key: 'config', label: '腾峰文档配置', type: 'success', icon: 'el-icon-setting', handler: () => { this.showAutoWriteConfig = true } }, + { key: 'monitor', label: '推送监控', type: 'info', icon: 'el-icon-monitor', handler: () => { this.showPushMonitor = true } }, + { key: 'touser', label: '接收人配置', type: 'warning', icon: 'el-icon-user', handler: () => { this.showTouserConfig = true } }, + { key: 'sync', label: '一键发货到腾峰', type: 'primary', icon: 'el-icon-refresh-right', handler: () => this.handleBatchSyncLogistics(), loading: this.batchSyncLoading }, + { key: 'mark', label: '批量标记后返到账', type: 'success', icon: 'el-icon-check', handler: () => this.handleBatchMarkRebateReceived(), loading: this.batchMarkLoading }, + { key: 'reverse', label: '反向同步第三方单号', type: 'warning', icon: 'el-icon-sort', handler: () => this.handleReverseSyncThirdPartyOrderNo(), loading: this.reverseSyncLoading } + ] + } + }, created() { // 设置默认日期为今天 this.setDefaultDateRange() @@ -561,6 +586,18 @@ export default { } }, methods: { + /** 快速搜索 */ + handleQuickSearch(keyword) { + if (!keyword) { + this.handleQuery() + return + } + // 快速搜索:在订单号、备注、下单人等字段中搜索 + this.queryParams.orderSearch = keyword + this.queryParams.remark = keyword + this.queryParams.buyer = keyword + this.handleQuery() + }, /** 设置默认日期范围为今天 */ setDefaultDateRange() { const today = new Date() @@ -1655,6 +1692,56 @@ export default { .order-table ::v-deep .el-table__fixed-left { box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); } + +/* 操作按钮区域 */ +.action-buttons-section { + margin-top: 12px; + margin-bottom: 12px; +} + +.desktop-action-buttons { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 12px; +} + +/* 移动端优化 */ +@media (max-width: 768px) { + .action-buttons-section { + margin-top: 8px; + margin-bottom: 8px; + } + + .desktop-action-buttons { + display: none; + } + + /* 移动端隐藏分页或简化显示 */ + .list-pagination { + display: none; /* 移动端隐藏分页,因为很少用 */ + } + + /* 或者简化分页显示 */ + /* .list-pagination ::v-deep .el-pagination { + display: flex; + justify-content: center; + padding: 8px 0; + } + + .list-pagination ::v-deep .el-pagination .el-pagination__sizes, + .list-pagination ::v-deep .el-pagination .el-pagination__total, + .list-pagination ::v-deep .el-pagination .el-pagination__jump { + display: none; + } */ +} + +/* 桌面端隐藏移动端按钮 */ +@media (min-width: 769px) { + .action-buttons-section { + display: none; + } +}