1

src/views/system/jdorder/orderList.vue

@@ -63,7 +63,17 @@
                 </div>
               </div>
 
-              <div class="jd-filter-group jd-filter-group--status">
+              <div v-if="isDesktopFilterCompact" class="jd-filter-compact-toggle">
+                <el-button type="text" size="small" class="jd-filter-compact-toggle__btn" @click="showFollowUpFilters = !showFollowUpFilters">
+                  <i :class="showFollowUpFilters ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
+                  {{ showFollowUpFilters ? '收起跟进状态' : '展开跟进状态筛选' }}
+                </el-button>
+              </div>
+
+              <div
+                v-show="!isDesktopFilterCompact || showFollowUpFilters"
+                class="jd-filter-group jd-filter-group--status"
+              >
                 <div class="jd-filter-group-head">
                   <span class="jd-filter-group-title">跟进状态</span>
                 </div>
@@ -1198,11 +1208,19 @@ export default {
       // 列表加载后自动同步利润（防快速翻页乱序）
       syncAutoProfitSeq: 0,
       /** 移动端卡片：当前展开的订单 id（null 表示全部收起，同时只展开一条） */
-      mobileExpandedOrderId: null
+      mobileExpandedOrderId: null,
+      /** 视口高度（桌面端用于矮窗口下自动收起「跟进状态」筛选） */
+      viewportHeight: typeof window !== 'undefined' ? window.innerHeight : 900,
+      /** 矮窗口下是否展开「跟进状态」分组（默认依视口在 mounted/resize 中更新） */
+      showFollowUpFilters: true
     }
   },
   computed: {
     ...mapGetters(['device']),
+    /** 桌面端且窗口高度较低：压缩筛选区，避免列表被挤出视口 */
+    isDesktopFilterCompact() {
+      return !this.isMobile && this.viewportHeight < 780
+    },
     isMobile() {
       // 只在移动端返回true，桌面端严格返回false
       if (this.device === 'mobile') {
@@ -1270,13 +1288,37 @@ export default {
     }
     window.addEventListener('message', this.handleOAuthMessage)
   },
+  mounted() {
+    this.viewportHeight = window.innerHeight
+    if (!this.isMobile && this.viewportHeight < 780) {
+      this.showFollowUpFilters = false
+    }
+    this._onJdFilterViewportResize = () => this.onJdFilterViewportResize()
+    window.addEventListener('resize', this._onJdFilterViewportResize, { passive: true })
+  },
   beforeDestroy() {
     // 移除消息监听器
     if (this.handleOAuthMessage) {
       window.removeEventListener('message', this.handleOAuthMessage)
     }
+    if (this._onJdFilterViewportResize) {
+      window.removeEventListener('resize', this._onJdFilterViewportResize)
+    }
   },
   methods: {
+    onJdFilterViewportResize() {
+      const prev = this.viewportHeight
+      const h = window.innerHeight
+      this.viewportHeight = h
+      if (this.isMobile) return
+      const nowCompact = h < 780
+      const wasCompact = prev < 780
+      if (nowCompact && !wasCompact) {
+        this.showFollowUpFilters = false
+      } else if (!nowCompact && wasCompact) {
+        this.showFollowUpFilters = true
+      }
+    },
     /** 凡系分销标识：历史 F 与 F-中文（如 F-王杰）等同 */
     isFanDistributionMark(mark) {
       if (mark == null || mark === '') return false
@@ -2989,6 +3031,20 @@ export default {
   flex-direction: column;
   gap: 0;
 }
+.jd-filter-compact-toggle {
+  width: 100%;
+  margin: 4px 0 2px;
+  padding: 0 4px;
+  box-sizing: border-box;
+}
+.jd-filter-compact-toggle__btn {
+  padding: 4px 0;
+  color: var(--jd-accent);
+  font-size: 13px;
+}
+.jd-filter-compact-toggle__btn i {
+  margin-right: 4px;
+}
 .jd-order-filter-form ::v-deep .el-form-item {
   margin-right: 14px;
   margin-bottom: 12px;