9181c7144f
feat(split): 完善分账接收方列表展示功能 - 添加用户信息查询和展示，包括昵称、手机号等用户详情 - 增加汇付进件状态显示和账号匹配校验功能 - 优化前端表格界面，新增用户关联信息、进件核对状态等列 - 改进数据格式化处理，提供更详细的分账接收方信息展示 - 更新表单提示文案，明确用户ID填写规则和要求 ```
169 行
7.0 KiB
HTML
169 行
7.0 KiB
HTML
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
||
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
|
||
<style>
|
||
#splitReceiverIndex {
|
||
padding: 0 20px 30px;
|
||
background: #f5f7fa;
|
||
min-height: 100%;
|
||
}
|
||
.page-card {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 16px 20px;
|
||
margin-bottom: 12px;
|
||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
||
}
|
||
.page-intro {
|
||
font-size: 13px;
|
||
color: #606266;
|
||
line-height: 1.7;
|
||
margin: 0;
|
||
}
|
||
.page-intro strong { color: #303133; font-weight: 600; }
|
||
.cell-plain {
|
||
font-size: 13px;
|
||
color: #303133;
|
||
line-height: 1.5;
|
||
white-space: nowrap;
|
||
}
|
||
.cell-sub-plain {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
line-height: 1.5;
|
||
margin-top: 3px;
|
||
white-space: nowrap;
|
||
}
|
||
.scroll-cell {
|
||
max-width: 100%;
|
||
overflow-x: hidden;
|
||
overflow-y: hidden;
|
||
-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;
|
||
}
|
||
.mono-text {
|
||
font-family: Consolas, Monaco, "Courier New", monospace;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
.role-tag {
|
||
display: inline-block;
|
||
padding: 0 8px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
line-height: 20px;
|
||
background: #f0ebfa;
|
||
color: #7438D5;
|
||
}
|
||
.uid-text {
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
.match-tag {
|
||
display: inline-block;
|
||
padding: 0 6px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
line-height: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
.match-tag.ok { background: #f0f9eb; color: #67c23a; }
|
||
.match-tag.warn { background: #fdf6ec; color: #e6a23c; }
|
||
.match-tag.err { background: #fef0f0; color: #f56c6c; }
|
||
.match-tag.neutral { background: #f4f4f5; color: #909399; }
|
||
.status-tag {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
}
|
||
.status-tag.normal { background: #f0f9eb; color: #67c23a; }
|
||
.status-tag.forbidden { background: #fef0f0; color: #f56c6c; }
|
||
#splitReceiverIndex .el-table .cell { line-height: 1.5; }
|
||
</style>
|
||
<div id="splitReceiverIndex" v-cloak>
|
||
<div class="page-card">
|
||
<p class="page-intro">
|
||
<strong>分账接收方</strong>用于网关分账时指定资金接收账户。
|
||
<strong>推广员/区域公司</strong>请填写对应商城 <strong>用户 ID（role_id）</strong>，并与汇付进件 <strong>huifu_id</strong> 保持一致；
|
||
<strong>role_id=0</strong> 表示规则模式下的通用接收方（不按具体用户分账）。
|
||
</p>
|
||
</div>
|
||
<div class="page-card">
|
||
<el-button type="primary" size="small" @click="openAdd">添加接收方</el-button>
|
||
</div>
|
||
<div class="page-card" style="padding-bottom: 8px;">
|
||
<el-table :data="listData" border stripe v-loading="loading" empty-text="暂无接收方，请先添加">
|
||
<el-table-column prop="id" label="记录ID" width="72" align="center"></el-table-column>
|
||
<el-table-column label="角色" width="96" align="center">
|
||
<template slot-scope="s">
|
||
<span class="role-tag">{{ s.row.role_type_text || roleTypeText(s.row.role_type) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="关联用户" min-width="200">
|
||
<template slot-scope="s">
|
||
<div class="cell-plain">
|
||
<span class="uid-text">ID {{ s.row.role_id_text }}</span>
|
||
</div>
|
||
<div class="scroll-cell" @wheel="scrollCellWheel" v-if="s.row.user_id > 0">
|
||
<div class="scroll-cell-inner cell-sub-plain">{{ s.row.user_display }}</div>
|
||
</div>
|
||
<div class="cell-sub-plain" v-else>{{ s.row.user_display }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="通道 / 类型" width="130">
|
||
<template slot-scope="s">
|
||
<div class="cell-plain">{{ s.row.channel_text || channelText(s.row.channel) }}</div>
|
||
<div class="cell-sub-plain">{{ s.row.receiver_type }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="汇付/接收账号" min-width="200">
|
||
<template slot-scope="s">
|
||
<div class="scroll-cell" @wheel="scrollCellWheel">
|
||
<div class="scroll-cell-inner cell-plain mono-text">{{ s.row.receiver_account || '—' }}</div>
|
||
</div>
|
||
<div class="cell-sub-plain" v-if="s.row.receiver_name">名称 {{ s.row.receiver_name }}</div>
|
||
<div class="cell-sub-plain" v-if="s.row.acct_id">子账户 {{ s.row.acct_id }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="进件核对" min-width="150">
|
||
<template slot-scope="s">
|
||
<div class="cell-sub-plain" v-if="s.row.onboard_huifu_id">进件 {{ s.row.onboard_huifu_id }}</div>
|
||
<div class="cell-sub-plain">{{ s.row.onboard_status_text }}</div>
|
||
<span :class="matchTagClass(s.row.account_match_text)">{{ s.row.account_match_text }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" width="72" align="center">
|
||
<template slot-scope="s">
|
||
<span :class="'status-tag ' + (s.row.status === 'forbidden' ? 'forbidden' : 'normal')">
|
||
{{ s.row.status_text || (s.row.status === 'forbidden' ? '禁用' : '正常') }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="140" fixed="right">
|
||
<template slot-scope="s">
|
||
<el-button v-if="!splitHuifuOnly" type="text" @click="syncWx(s.row.id)">同步微信</el-button>
|
||
<span v-else style="color:#909399;font-size:12px;">控台绑定分账关系</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<p style="margin-top:10px;font-size:12px;color:#909399;">
|
||
长账号字段<strong>鼠标悬浮可左右滑动</strong>查看完整内容。按佣金分账时，订单推广员的 user_id 必须在此有对应接收方。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
||
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|