This commit is contained in:
van
2026-04-10 16:10:30 +08:00
parent 1e5d10964a
commit 97514c8ce2
2 changed files with 89 additions and 3 deletions

View File

@@ -39,13 +39,16 @@ export default {
overflow: hidden;
}
/* 搜索区域 - 固定在顶部 */
/* 搜索区域 - 固定在顶部;限制高度避免矮窗口下占满视口、表格不可见 */
.search-section {
flex-shrink: 0;
background: #fff;
padding: 20px;
border-bottom: 1px solid #e4e7ed;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-height: min(520px, calc(100vh - 84px - 200px));
overflow-y: auto;
overflow-x: hidden;
}
/* 表格区域 - 可滚动 */
@@ -71,6 +74,25 @@ export default {
z-index: 10;
}
.search-section::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.search-section::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.search-section::-webkit-scrollbar-thumb {
background: #c0c0c0;
border-radius: 3px;
}
.search-section::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* 表格区域滚动条样式 */
.table-section::-webkit-scrollbar {
width: 6px;
@@ -106,6 +128,14 @@ export default {
padding: 10px 0;
}
/* 窗口高度较矮时:为表格多留垂直空间、收紧搜索区内边距 */
@media (max-height: 720px) {
.list-layout .search-section {
padding: 12px 16px;
max-height: min(420px, calc(100vh - 84px - 160px));
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.list-layout {

View File

@@ -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,
/** 移动端卡片:当前展开的订单 idnull 表示全部收起,同时只展开一条) */
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;