wikiboss/xionggeshop
1
0
派生 0
代码 工单 合并请求 Actions 软件包 项目 版本发布 百科 动态

```

浏览代码 
feat(split-order): 优化表格单元格显示和交互体验

- 添加滚动查看功能，支持长文本内容的横向滚动浏览
- 重构CSS样式类，将.cell-main和.cell-sub重命名为.cell-plain和.cell-sub-plain
- 实现悬浮时显示滚动提示和完整内容的功能
- 调整分账订单列表中买家、订单号、失败原因等列的内容展示方式
- 增加scrollCellWheel事件处理函数支持鼠标滚轮横向滚动
- 更新操作提示文字说明新的交互功能
```
这个提交包含在：
可乐加冰
2026-10-05 12:49:27 +08:00
父节点 0fdb813c16
当前提交 11e930f60d
共有 2 个文件被更改，包括 112 次插入 和 34 次删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

136
application/admin/view/shopro/split/order/index.html
查看文件

@@ -26,24 +26,70 @@
gap: 10px;
align-items: center;
}
.cell-main {
.cell-plain {
font-size: 13px;
color: #303133;
line-height: 1.5;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cell-sub {
.cell-sub-plain {
font-size: 12px;
color: #909399;
line-height: 1.5;
margin-top: 4px;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 默认截断；悬浮后横向滚动查看完整内容 */
.scroll-cell {
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
cursor: default;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.scroll-cell:hover {
overflow-x: auto;
cursor: ew-resize;
}
.scroll-cell::-webkit-scrollbar {
height: 4px;
}
.scroll-cell::-webkit-scrollbar-thumb {
background: rgba(116, 56, 213, 0.35);
border-radius: 2px;
}
.scroll-cell-inner {
display: inline-block;
white-space: nowrap;
min-width: min-content;
}
.scroll-hint {
display: none;
font-size: 10px;
color: #c0c4cc;
margin-top: 2px;
white-space: nowrap;
}
.scroll-cell:hover + .scroll-hint,
.scroll-cell-wrap:hover .scroll-hint {
display: block;
}
.scroll-cell-wrap {
max-width: 100%;
}
.amount-cell {
text-align: right;
white-space: nowrap;
}
.amount-cell .money-line {
font-size: 13px;
color: #303133;
line-height: 1.6;
}
.amount-cell .money-line.split-line {
font-size: 12px;
color: #909399;
}
.mono-text {
font-family: Consolas, Monaco, "Courier New", monospace;
@@ -82,11 +128,16 @@
.recv-row {
display: flex;
align-items: center;
flex-wrap: wrap;
flex-wrap: nowrap;
gap: 6px;
font-size: 12px;
line-height: 1.5;
}
.recv-scroll {
flex: 1;
min-width: 0;
max-width: calc(100% - 120px);
}
.recv-role {
display: inline-block;
padding: 0 6px;
@@ -111,11 +162,7 @@
font-size: 12px;
color: #f56c6c;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
}
.op-hint {
font-size: 12px;
@@ -158,24 +205,37 @@
<el-table :data="listData" border stripe v-loading="loading"
empty-text="暂无分账记录。请确认已开启分账，并完成支付/确认收货后再查看。">
<el-table-column label="记录时间" prop="createtime_text" width="156"></el-table-column>
<el-table-column label="买家" min-width="130" show-overflow-tooltip>
<el-table-column label="买家" min-width="130">
<template slot-scope="s">
<div class="cell-main">{{ s.row.buyer_display || '—' }}</div>
</template>
</el-table-column>
<el-table-column label="订单号" min-width="200" show-overflow-tooltip>
<template slot-scope="s">
<div class="cell-main">
<span class="link-text mono-text" @click="openOrder(s.row.order_id)">{{ s.row.order_sn || '—' }}</span>
<span class="channel-tag">{{ s.row.channel_text }}</span>
<div class="scroll-cell-wrap">
<div class="scroll-cell" @wheel="scrollCellWheel">
<div class="scroll-cell-inner cell-plain">{{ s.row.buyer_display || '—' }}</div>
</div>
</div>
<div class="cell-sub mono-text" v-if="s.row.out_order_no">分账 {{ s.row.out_order_no }}</div>
</template>
</el-table-column>
<el-table-column label="金额" width="112" align="right">
<el-table-column label="订单号" min-width="200">
<template slot-scope="s">
<div class="cell-main">订单 <span class="money-text">￥{{ formatMoney(s.row.total_amount) }}</span></div>
<div class="cell-sub">分账 ￥{{ formatMoney(s.row.split_amount) }}</div>
<div class="scroll-cell-wrap">
<div class="scroll-cell" @wheel="scrollCellWheel">
<div class="scroll-cell-inner cell-plain">
<span class="link-text mono-text" @click="openOrder(s.row.order_id)">{{ s.row.order_sn || '—' }}</span>
<span class="channel-tag">{{ s.row.channel_text }}</span>
</div>
</div>
<div class="scroll-hint">悬浮可左右滑动</div>
<div class="scroll-cell" @wheel="scrollCellWheel" v-if="s.row.out_order_no" style="margin-top:4px;">
<div class="scroll-cell-inner cell-sub-plain mono-text">分账 {{ s.row.out_order_no }}</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="金额" width="128" align="right">
<template slot-scope="s">
<div class="amount-cell">
<div class="money-line">订单 <span class="money-text">￥{{ formatMoney(s.row.total_amount) }}</span></div>
<div class="money-line split-line">分账 <span class="money-text">￥{{ formatMoney(s.row.split_amount) }}</span></div>
</div>
</template>
</el-table-column>
<el-table-column label="分账接收方" min-width="260">
@@ -183,13 +243,17 @@
<div v-if="s.row.receiver_details && s.row.receiver_details.length" class="recv-list">
<div v-for="(r, idx) in s.row.receiver_details" :key="idx" class="recv-row">
<span class="recv-role">{{ r.role_label }}</span>
<span class="recv-name">{{ r.display_name }}</span>
<span class="recv-account" v-if="r.account">{{ r.account }}</span>
<div class="scroll-cell recv-scroll" @wheel="scrollCellWheel" v-if="r.display_name || r.account">
<div class="scroll-cell-inner">
<span class="recv-name">{{ r.display_name }}</span>
<span class="recv-account" v-if="r.account"> {{ r.account }}</span>
</div>
</div>
<span class="recv-amt">￥{{ formatMoney(r.amount) }}</span>
</div>
<div v-if="s.row.receiver_preview" class="recv-preview-hint">按当前规则预估（历史失败单未落库明细）</div>
</div>
<span v-else class="cell-sub">—</span>
<span v-else class="cell-sub-plain">—</span>
</template>
</el-table-column>
<el-table-column label="状态" width="88" align="center">
@@ -197,10 +261,14 @@
<span :class="'status-tag s' + s.row.status">{{ s.row.status_text }}</span>
</template>
</el-table-column>
<el-table-column label="失败原因" min-width="140" show-overflow-tooltip>
<el-table-column label="失败原因" min-width="140">
<template slot-scope="s">
<div v-if="s.row.fail_reason" class="fail-reason" :title="s.row.fail_reason">{{ s.row.fail_reason }}</div>
<span v-else class="cell-sub">—</span>
<div v-if="s.row.fail_reason" class="scroll-cell-wrap">
<div class="scroll-cell" @wheel="scrollCellWheel">
<div class="scroll-cell-inner fail-reason">{{ s.row.fail_reason }}</div>
</div>
</div>
<span v-else class="cell-sub-plain">—</span>
</template>
</el-table-column>
<el-table-column label="重试" width="56" align="center" prop="retry_count"></el-table-column>
@@ -224,7 +292,7 @@
</el-pagination>
</div>
<p class="op-hint" style="margin-top:10px;">
「重试分账」仅对<strong>失败</strong>记录有效，会向通道重新发起分账；「同步状态」只拉取最新结果并更新本页，不会重复扣款。
订单号、分账单号等长字段<strong>鼠标悬浮后可左右滑动</strong>查看完整内容；「重试分账」仅对失败记录有效；「同步状态」只拉取通道结果，不会重复扣款。
</p>
</div>
</div>