```
feat(split-order): 优化分账订单列表界面样式 - 调整表格单元格垂直对齐方式为居中,并添加文本换行控制 - 重构金额和来源列的显示结构,分离为独立的列进行展示 - 优化金额数字的字体样式,使用等宽数字格式化 - 改进来源标签的布局方式,使用flex布局增强可读性 - 添加空值占位符显示,提升界面一致性 ```
这个提交包含在:
@@ -9,7 +9,13 @@
|
|||||||
#splitOrderIndex .el-table .cell {
|
#splitOrderIndex .el-table .cell {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
vertical-align: top;
|
vertical-align: middle;
|
||||||
|
word-break: keep-all;
|
||||||
|
}
|
||||||
|
#splitOrderIndex .el-table .col-money .cell,
|
||||||
|
#splitOrderIndex .el-table .col-source .cell {
|
||||||
|
overflow: visible;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.page-card {
|
.page-card {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
@@ -74,32 +80,41 @@
|
|||||||
.status-tag.s2 { background: #f0f9eb; color: #67c23a; }
|
.status-tag.s2 { background: #f0f9eb; color: #67c23a; }
|
||||||
.status-tag.s3 { background: #fdf6ec; color: #e6a23c; }
|
.status-tag.s3 { background: #fdf6ec; color: #e6a23c; }
|
||||||
.status-tag.s4 { background: #fef0f0; color: #f56c6c; }
|
.status-tag.s4 { background: #fef0f0; color: #f56c6c; }
|
||||||
.amount-block {
|
.money-num {
|
||||||
|
display: block;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
line-height: 1.65;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
font-feature-settings: "tnum";
|
||||||
|
white-space: nowrap;
|
||||||
color: #303133;
|
color: #303133;
|
||||||
}
|
}
|
||||||
.amount-block .sub { font-size: 12px; color: #909399; }
|
.money-num.highlight { color: #e1212b; font-weight: 600; }
|
||||||
.source-line {
|
.source-cell {
|
||||||
margin-top: 6px;
|
display: inline-flex;
|
||||||
text-align: right;
|
align-items: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
gap: 4px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
.source-tag {
|
.source-tag {
|
||||||
|
flex-shrink: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
line-height: 18px;
|
line-height: 20px;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.source-tag.commission { background: #ecf5ff; color: #409eff; }
|
.source-tag.commission { background: #ecf5ff; color: #409eff; }
|
||||||
.source-tag.rule { background: #fdf6ec; color: #e6a23c; }
|
.source-tag.rule { background: #fdf6ec; color: #e6a23c; }
|
||||||
.source-detail-btn {
|
.source-detail-btn {
|
||||||
|
flex-shrink: 0;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
margin-left: 4px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.source-detail-btn:hover { color: #7438D5; }
|
.source-detail-btn:hover { color: #7438D5; }
|
||||||
.recv-block {
|
.recv-block {
|
||||||
@@ -212,13 +227,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="金额 / 来源" width="132" align="right">
|
<el-table-column label="订单金额" class-name="col-money" width="96" align="right">
|
||||||
<template slot-scope="s">
|
<template slot-scope="s">
|
||||||
<div class="amount-block">
|
<span class="money-num">¥{{ formatMoney(s.row.total_amount) }}</span>
|
||||||
<div>订单 <span class="money-text">¥{{ formatMoney(s.row.total_amount) }}</span></div>
|
</template>
|
||||||
<div class="sub">分账 <span class="money-text">¥{{ formatMoney(s.row.split_amount) }}</span></div>
|
</el-table-column>
|
||||||
</div>
|
<el-table-column label="分账金额" class-name="col-money" width="96" align="right">
|
||||||
<div class="source-line" v-if="s.row.split_source">
|
<template slot-scope="s">
|
||||||
|
<span class="money-num highlight">¥{{ formatMoney(s.row.split_amount) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="分账来源" class-name="col-source" width="112" align="center">
|
||||||
|
<template slot-scope="s">
|
||||||
|
<div class="source-cell" v-if="s.row.split_source">
|
||||||
<span :class="'source-tag ' + (s.row.split_source === 'commission' ? 'commission' : 'rule')">
|
<span :class="'source-tag ' + (s.row.split_source === 'commission' ? 'commission' : 'rule')">
|
||||||
{{ s.row.split_source === 'commission' ? '按佣金' : '规则兜底' }}
|
{{ s.row.split_source === 'commission' ? '按佣金' : '规则兜底' }}
|
||||||
</span>
|
</span>
|
||||||
@@ -233,6 +254,7 @@
|
|||||||
<span slot="reference" class="source-detail-btn">详情</span>
|
<span slot="reference" class="source-detail-btn">详情</span>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
|
<span v-else style="color:#909399;">—</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="分账给谁" min-width="168">
|
<el-table-column label="分账给谁" min-width="168">
|
||||||
|
|||||||
在新工单中引用
屏蔽一个用户