1

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;
   }
 }
 </style>

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 {
+  &::-webkit-scrollbar {
-    justify-content: flex-start;
+    display: none;
-    padding: 0 8px;
   }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
   
   .nav-item {
-    flex: 1;
+    flex: 0 0 auto;
-    min-width: 60px;
+    min-width: 70px;
-    max-width: 80px;
+    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 {

src/views/system/jdorder/orderList.vue

@@ -3,7 +3,13 @@
     <list-layout>
       <!-- 搜索区域 -->
       <template #search>
-        <el-form :inline="true" :model="queryParams" label-width="80px">
+        <!-- 移动端：搜索表单部分 -->
+        <mobile-search-form
+          :model="queryParams"
+          @search="handleQuery"
+          @reset="resetQuery"
+          @quick-search="handleQuickSearch"
+        >
           <el-form-item label="备注">
             <el-input v-model="queryParams.remark" placeholder="单据备注" clearable size="small" @keyup.enter.native="handleQuery" />
           </el-form-item>
@@ -58,25 +64,26 @@
               <el-option label="未到账" :value="0" />
             </el-select>
           </el-form-item>
-          <el-form-item>
+        </mobile-search-form>
-            <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        
-            <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+        <!-- 操作按钮区域（移动端单独显示） -->
-            <el-button type="warning" size="small" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:jdorder:export']">导出</el-button>
+        <div class="action-buttons-section">
-            <el-button type="success" size="small" icon="el-icon-setting" @click="showAutoWriteConfig = true" title="配置H-TF订单自动写入腾讯文档">腾峰文档配置</el-button>
+          <mobile-button-group
-            <el-button type="info" size="small" icon="el-icon-monitor" @click="showPushMonitor = true" title="查看推送监控和历史记录">推送监控</el-button>
+            :buttons="actionButtons"
-            <el-button type="warning" size="small" icon="el-icon-user" @click="showTouserConfig = true" title="配置分销标识对应的企业微信接收人">接收人配置</el-button>
+            :primary-count="2"
-            <el-button type="primary" size="small" icon="el-icon-refresh-right" @click="handleBatchSyncLogistics" :loading="batchSyncLoading" title="批量同步物流链接到腾讯文档">
+          />
-              <i v-if="!batchSyncLoading"></i>
+        </div>
-              一键发货到腾峰
+        
-            </el-button>
+        <!-- 桌面端按钮组 -->
-            <el-button type="success" size="small" icon="el-icon-check" @click="handleBatchMarkRebateReceived" :loading="batchMarkLoading" title="批量将赔付金额大于0的订单标记为后返到账（仅执行一次）">
+        <div class="desktop-action-buttons">
-              批量标记后返到账
+          <el-button type="warning" size="small" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:jdorder:export']">导出</el-button>
-            </el-button>
+          <el-button type="success" size="small" icon="el-icon-setting" @click="showAutoWriteConfig = true" title="配置H-TF订单自动写入腾讯文档">腾峰文档配置</el-button>
-            <el-button type="warning" size="small" icon="el-icon-sort" @click="handleReverseSyncThirdPartyOrderNo" :loading="reverseSyncLoading" title="从腾讯文档第850行开始，通过物流链接反向匹配订单，将腾讯文档的单号列值写入到订单的第三方单号字段">
+          <el-button type="info" size="small" icon="el-icon-monitor" @click="showPushMonitor = true" title="查看推送监控和历史记录">推送监控</el-button>
-              反向同步第三方单号
+          <el-button type="warning" size="small" icon="el-icon-user" @click="showTouserConfig = true" title="配置分销标识对应的企业微信接收人">接收人配置</el-button>
-            </el-button>
+          <el-button type="primary" size="small" icon="el-icon-refresh-right" @click="handleBatchSyncLogistics" :loading="batchSyncLoading" title="批量同步物流链接到腾讯文档">一键发货到腾峰</el-button>
-          </el-form-item>
+          <el-button type="success" size="small" icon="el-icon-check" @click="handleBatchMarkRebateReceived" :loading="batchMarkLoading" title="批量将赔付金额大于0的订单标记为后返到账（仅执行一次）">批量标记后返到账</el-button>
-        </el-form>
+          <el-button type="warning" size="small" icon="el-icon-sort" @click="handleReverseSyncThirdPartyOrderNo" :loading="reverseSyncLoading" title="从腾讯文档第850行开始，通过物流链接反向匹配订单，将腾讯文档的单号列值写入到订单的第三方单号字段">反向同步第三方单号</el-button>
+        </div>
       </template>
 
       <!-- 表格区域 -->
@@ -286,6 +293,7 @@
           :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize"
           @pagination="getList"
+          class="list-pagination"
         />
       </template>
     </list-layout>
@@ -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;
+  }
+}
 </style>