1
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user