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