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 @@
@@ -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 @@
{{ toYuan(scope.row.rebateAmount) }}
-
+
-
-
-
-
+
+
+
+
+
+
—
-
+
-
+
+
+
{{ scope.row.sellingPrice != null ? toYuan(scope.row.sellingPrice) : '—' }}
-
+
-
+
+
+
{{ scope.row.profit != null ? toYuan(scope.row.profit) : '—' }}
@@ -480,42 +513,11 @@
—
-
-
-
- -
-
-
- 异常
- 正常
-
-
- 明细({{ rebateRemarkCount(scope.row) }})
-
-
-
-
-
-
+
+
+
@@ -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;