diff --git a/src/views/system/jdorder/orderList.vue b/src/views/system/jdorder/orderList.vue index 558a792..ed40391 100644 --- a/src/views/system/jdorder/orderList.vue +++ b/src/views/system/jdorder/orderList.vue @@ -19,99 +19,121 @@ label-width="76px" label-position="left" > - - - - - - - - - - - - - - - - - - - - - - - - - - 仅显示已完成订单 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 搜索 - 重置 - 导出 - +
+
+ 基础条件 +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + 仅显示已完成订单 + +
+
+ +
+
+ 跟进状态 +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ 查询 +
+
+ + 搜索 + 重置 + 导出 + +
+
@@ -126,6 +148,7 @@
+
腾峰文档配置 推送监控 接收人配置 @@ -138,6 +161,7 @@ 批量复制后返录表 四川商贸录表 批量重算利润 +
@@ -293,14 +317,14 @@
售价 - + 手填
利润 - + 手填
@@ -315,22 +339,14 @@ 重算利润 -
- 后返备注 - - 异常 - 正常 - {{ rebateRemarkCount(row) }} 条记录 - -
下单人 {{ row.buyer || '-' }}
- +
- 退款状态 + 跟进状态
+ style="cursor: pointer; margin-right: 8px;"> {{ row.isReviewPosted === 1 ? '晒过评价' : '未晒评价' }} + + 后返表 + + +
@@ -441,29 +468,35 @@ - + - + - + @@ -480,42 +513,11 @@ - - - - - + + @@ -720,15 +754,17 @@ 物流拉取
- - 删除 +
+ 统计 + +
+ 删除
@@ -2853,18 +2889,25 @@ export default { .jd-order-list-root { --jd-accent: #2563eb; --jd-accent-hover: #1d4ed8; + --jd-warm-title: #c2410c; --jd-border: #e5e7eb; --jd-text: #111827; --jd-muted: #6b7280; --jd-surface: #ffffff; --jd-header: #f8fafc; - --jd-row-hover: #f8fafc; + --jd-row-hover: #fffbf5; --jd-row-stripe: #fafbfc; + /* 表格「统计」胶囊:高度与边框对齐 plain 小按钮 */ + --jd-fn-chip-h: 32px; + --jd-fn-chip-radius: 6px; + --jd-fn-chip-border: var(--jd-border); + --jd-fn-chip-bg: var(--jd-surface); + --jd-fn-chip-text: var(--jd-muted); } -/* 搜索区:更疏、更干净 */ +/* 搜索区:略暖、分层底色 */ .jd-order-list-root ::v-deep .search-section { - background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%); + background: linear-gradient(165deg, #f4f8ff 0%, #fffaf5 42%, #ffffff 100%); border-bottom: 1px solid var(--jd-border); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); padding: 18px 20px 14px; @@ -2888,14 +2931,130 @@ export default { border-radius: 6px; } +/* 筛选分组卡片 */ +.jd-filter-group { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + width: 100%; + box-sizing: border-box; + margin-bottom: 8px; + padding: 10px 12px; + border-radius: 8px; + border: 1px solid var(--jd-border); + gap: 4px 0; +} +.jd-filter-group:last-of-type { + margin-bottom: 2px; +} +.jd-filter-group--basic { + background: linear-gradient(135deg, #f5f9ff 0%, #ffffff 70%); + border-color: #bfdbfe; +} +.jd-filter-group--status { + background: linear-gradient(135deg, #fff8f0 0%, #fff4e6 45%, #ffffff 100%); + border-color: #fdba74; +} +.jd-filter-group--extra { + background: linear-gradient(135deg, #fafaf9 0%, #ffffff 90%); + border-color: #d6d3d1; +} +.jd-filter-group-head { + flex: 0 0 auto; + min-width: 4.5em; + padding-top: 0; + margin-right: 8px; + align-self: center; +} +.jd-filter-group-title { + display: block; + font-size: 13px; + font-weight: 600; + color: var(--jd-text); + line-height: 1.2; + white-space: nowrap; +} +.jd-filter-group--status .jd-filter-group-title { + color: var(--jd-warm-title); +} +.jd-filter-group-body { + flex: 1; + min-width: 240px; + display: flex; + flex-wrap: wrap; + align-items: flex-start; +} +.jd-order-filter-form ::v-deep .jd-filter-status-select { + width: 118px; +} +.jd-order-filter-form ::v-deep .jd-filter-rebate-select { + width: 188px; + max-width: 100%; +} +.jd-order-filter-form ::v-deep .jd-filter-actions { + margin-bottom: 0; +} +.jd-order-filter-form ::v-deep .jd-filter-actions .el-form-item__content { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; + line-height: 1; +} +/* 与顶部工具栏一致的筛选区按钮(plain + 圆角) */ +.jd-order-filter-form ::v-deep .jd-filter-act-btn { + border-radius: 6px; + font-weight: 500; + letter-spacing: 0.01em; +} +.jd-order-filter-form ::v-deep .jd-filter-act-btn--primary.el-button--primary.is-plain { + color: var(--jd-accent); + border-color: #bfdbfe; + background: #eff6ff; +} +.jd-order-filter-form ::v-deep .jd-filter-act-btn--primary.el-button--primary.is-plain:hover { + color: #fff; + background: var(--jd-accent); + border-color: var(--jd-accent); +} +.jd-order-filter-form ::v-deep .jd-filter-actions .jd-tb-muted.is-plain { + color: var(--jd-muted); + border-color: var(--jd-border); + background: var(--jd-surface); +} +.jd-order-filter-form ::v-deep .jd-filter-actions .jd-tb-muted.is-plain:hover { + color: var(--jd-text); + border-color: #cbd5e1; + background: var(--jd-row-hover); +} +@media (max-width: 768px) { + .jd-filter-group-head { + flex: 1 1 100%; + padding-top: 0; + margin-bottom: 4px; + } + .jd-filter-group-body { + min-width: 100%; + } +} + /* 桌面工具栏:低饱和、统一圆角 */ .jd-order-toolbar { display: flex; flex-wrap: wrap; + align-items: center; gap: 8px; - padding: 12px 0 4px; + padding: 8px 0 4px; border-top: 1px solid var(--jd-border); - margin-top: 8px; + margin-top: 6px; +} +.jd-toolbar-buttons { + display: flex; + flex-wrap: wrap; + gap: 8px; + flex: 1 1 220px; + min-width: 0; + align-items: center; } .jd-order-toolbar ::v-deep .el-button { border-radius: 6px; @@ -3022,7 +3181,7 @@ export default { box-shadow: 4px 0 16px rgba(15, 23, 42, 0.06); } -/* 退款状态:双列压缩行高 */ +/* 跟进状态:双列标签 + 下方后返表条 */ .refund-status-stack { display: flex; flex-direction: row; @@ -3065,6 +3224,37 @@ export default { white-space: nowrap; } +.order-table ::v-deep .jd-rebate-remark-strip { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + gap: 6px 8px; + margin-top: 8px; + padding-top: 8px; + border-top: 1px solid #f1f5f9; +} +.order-table ::v-deep .jd-rebate-remark-strip-label { + flex-shrink: 0; + width: 52px; + font-size: 11px; + font-weight: 500; + color: var(--jd-muted); + line-height: 22px; +} +.order-table ::v-deep .jd-rebate-remark-strip-body { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; + min-width: 0; + flex: 1; +} +.order-table ::v-deep .jd-rebate-remark-empty { + color: #c0c4cc; + font-size: 12px; + line-height: 22px; +} + /* 操作列 */ .jd-action-cell { text-align: left; @@ -3110,12 +3300,75 @@ export default { .order-table ::v-deep .jd-act-link--danger:hover { background: #fef2f2 !important; } -.order-table ::v-deep .jd-action-row--meta .el-switch { +/* 操作列「统计」:与链接按钮同高的胶囊条 */ +.order-table ::v-deep .jd-action-row--meta { + align-items: center; +} +.order-table ::v-deep .jd-count-pill { + display: inline-flex; + align-items: center; + gap: 8px; + box-sizing: border-box; + min-height: var(--jd-fn-chip-h); + padding: 0 10px 0 12px; + border-radius: var(--jd-fn-chip-radius); + background: var(--jd-fn-chip-bg); + border: 1px solid var(--jd-fn-chip-border); margin-right: 6px; + flex-shrink: 0; +} +.order-table ::v-deep .jd-count-pill-label { + font-size: 12px; + font-weight: 600; + letter-spacing: 0.02em; + color: var(--jd-fn-chip-text); + line-height: 1; + user-select: none; +} +.order-table ::v-deep .jd-count-el-switch.el-switch { + margin: 0; + height: 22px; +} +.order-table ::v-deep .jd-count-el-switch.el-switch.is-checked .el-switch__core { + border-color: var(--jd-accent); + background-color: var(--jd-accent); } -.order-table ::v-deep .el-table .jd-order-input-money { - width: 118px !important; +/* 表格内售价渠道 / 售价 / 利润:撑满单元格 */ +.order-table ::v-deep .jd-cell-stretch { + width: 100%; + box-sizing: border-box; + padding: 0 6px; +} +.order-table ::v-deep .jd-cell-stretch--num { + display: block; +} +.order-table ::v-deep .jd-cell-stretch .jd-cell-select-full { + width: 100% !important; + max-width: 100%; +} +.order-table ::v-deep .jd-cell-stretch .jd-order-input-money, +.order-table ::v-deep .jd-cell-stretch .jd-order-input-money.el-input-number { + width: 100% !important; + max-width: 100%; +} +.order-table ::v-deep .jd-cell-stretch--num .jd-order-input-money .el-input__inner { + text-align: right; + padding-left: 8px; + padding-right: 36px; +} +.order-table ::v-deep .jd-col-channel .cell, +.order-table ::v-deep .jd-col-money .cell { + padding-left: 4px; + padding-right: 4px; + font-variant-numeric: tabular-nums; + font-feature-settings: 'tnum' 1; +} +/* 售价列略宽(约四位数价位)、利润列略窄(三位数+两位小数)已在列 min-width 区分 */ +.order-table ::v-deep .jd-col-money .jd-cell-stretch--num .jd-order-input-money--selling .el-input__inner, +.order-table ::v-deep .jd-col-money .jd-cell-stretch--num .jd-order-input-money--profit .el-input__inner { + font-variant-numeric: tabular-nums; + font-feature-settings: 'tnum' 1; } /* 桌面端:占满 ListLayout 表格区,内部表格滚动,表头固定 */ @@ -3249,6 +3502,24 @@ export default { justify-content: flex-end; } +.mobile-order-card .mobile-rebate-remark-inline { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; + width: 100%; + margin-top: 6px; + padding-top: 8px; + border-top: 1px dashed #e5e7eb; + justify-content: flex-end; +} +.mobile-order-card .mobile-rebate-remark-hint { + font-size: 11px; + font-weight: 500; + color: #909399; + margin-right: auto; +} + .rebate-remark-popover .rebate-remark-item { margin-bottom: 10px; padding-bottom: 10px; @@ -3321,19 +3592,15 @@ export default { .order-table ::v-deep .el-table__fixed-right { width: 60px !important; } - - .order-table ::v-deep .el-table__fixed-right-patch { - width: 60px !important; - } - + /* 隐藏桌面端表格 */ .order-table { display: none; } } -/* 桌面端操作按钮优化布局 - 所有按钮一行显示 */ -.desktop-action-buttons-wrapper { +/* 桌面端操作列:新布局为 jd-action-cell 多行,勿用单行强约束 */ +.desktop-action-buttons-wrapper:not(.jd-action-cell) { display: flex; flex-direction: row; align-items: center; @@ -3344,7 +3611,7 @@ export default { gap: 2px; } -.desktop-action-buttons-wrapper .action-row-all { +.desktop-action-buttons-wrapper:not(.jd-action-cell) .action-row-all { display: flex; flex-wrap: wrap; gap: 2px; @@ -3354,7 +3621,7 @@ export default { line-height: 1.2; } -.desktop-action-buttons-wrapper .el-button { +.desktop-action-buttons-wrapper:not(.jd-action-cell) .el-button { padding: 3px 6px !important; font-size: 12px !important; white-space: nowrap !important; @@ -3368,11 +3635,18 @@ export default { align-items: center !important; } -.desktop-action-buttons-wrapper .el-switch { +.desktop-action-buttons-wrapper:not(.jd-action-cell) .el-switch { margin-left: 4px !important; flex-shrink: 0; } +.desktop-action-buttons-wrapper.jd-action-cell { + flex-direction: column; + align-items: stretch; + gap: 0; + flex-wrap: nowrap; +} + /* 桌面端下拉菜单样式 */ ::v-deep .desktop-action-dropdown { min-width: 160px; @@ -3387,20 +3661,16 @@ export default { color: #67C23A; } -/* 桌面端确保操作列正常显示 */ +/* 桌面端确保操作列正常显示(宽度与 el-table-column :width="288" 一致;勿改 fixed-right-patch,否则会出现整块无意义空白列) */ @media (min-width: 769px) { .order-table ::v-deep .action-column { - width: 380px !important; + width: 288px !important; } - + .order-table ::v-deep .el-table__fixed-right { - width: 380px !important; + width: 288px !important; } - - .order-table ::v-deep .el-table__fixed-right-patch { - width: 380px !important; - } - + /* 隐藏移动端按钮 */ .mobile-action-wrapper { display: none !important;