linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

综述: 优化分销商管理页面交互功能 

- 在分销商审核列表中，为通过和拒绝按钮添加确认弹窗功能
- 添加禁用分销商时的确认弹窗和原因输入
- 完善分销商状态显示逻辑，统一待审核状态样式
- 添加弹窗样式和交互脚本，提升用户体验
This commit is contained in:
linbin 2025-10-03 01:23:08 +08:00
parent f4c90aee69
commit e2c7950e5f
1 changed files with 213 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
商家端web/品牌管理/分销商管理.html
View File

@ -303,6 +303,80 @@
grid-template-columns: 1fr;
}
}
/* 弹窗样式 */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal.show {
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background-color: white;
padding: 0;
border-radius: 8px;
width: 90%;
max-width: 500px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.modal-header {
padding: 20px 24px;
border-bottom: 1px solid #f0f0f0;
}
.modal-title {
font-size: 18px;
font-weight: 600;
color: #262626;
}
.modal-body {
padding: 24px;
}
.modal-body p {
margin: 0;
font-size: 14px;
color: #666;
line-height: 1.6;
}
.modal-body textarea {
width: 100%;
min-height: 80px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
margin-top: 12px;
resize: vertical;
}
.modal-body textarea:focus {
outline: none;
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid #f0f0f0;
display: flex;
justify-content: flex-end;
gap: 12px;
}
</style>
</head>
<body>
@ -329,7 +403,6 @@
<select style="width: 150px">
<option value="">全部</option>
<option value="0">待审核</option>
<option value="1">已通过</option>
<option value="-1">已拒绝</option>
</select>
</div>
@ -366,8 +439,8 @@
<td><span class="tag tag-warning">待审核</span></td>
<td>-</td>
<td>
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;">通过</button>
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;">拒绝</button>
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('张三')">通过</button>
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('张三')">拒绝</button>
</td>
</tr>
<tr>
@ -378,19 +451,20 @@
<td><span class="tag tag-warning">待审核</span></td>
<td>-</td>
<td>
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;">通过</button>
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;">拒绝</button>
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('李四')">通过</button>
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('李四')">拒绝</button>
</td>
</tr>
<tr>
<td>王五</td>
<td>13800138003</td>
<td>2024-01-17 09:15:00</td>
<td>2024-01-17 16:20:00</td>
<td><span class="tag tag-success">已通过</span></td>
<td>-</td>
<td><span class="tag tag-warning">待审核</span></td>
<td>-</td>
<td>
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('王五')">通过</button>
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('王五')">拒绝</button>
</td>
</tr>
<tr>
@ -401,7 +475,7 @@
<td><span class="tag tag-danger">已拒绝</span></td>
<td>资料不完整</td>
<td>
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;" disabled>详情</button>
</td>
</tr>
<tr>
@ -412,19 +486,20 @@
<td><span class="tag tag-warning">待审核</span></td>
<td>-</td>
<td>
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;">通过</button>
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;">拒绝</button>
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('钱七')">通过</button>
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('钱七')">拒绝</button>
</td>
</tr>
<tr>
<td>孙八</td>
<td>13800138006</td>
<td>2024-01-20 13:25:00</td>
<td>2024-01-20 17:10:00</td>
<td><span class="tag tag-success">已通过</span></td>
<td>-</td>
<td><span class="tag tag-warning">待审核</span></td>
<td>-</td>
<td>
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;" onclick="handleApprove('孙八')">通过</button>
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;" onclick="handleReject('孙八')">拒绝</button>
</td>
</tr>
</tbody>
@ -536,7 +611,7 @@
<td>-</td>
<td>
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;">禁用</button>
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('张三')">禁用</button>
</td>
</tr>
<tr>
@ -549,7 +624,7 @@
<td>-</td>
<td>
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;">禁用</button>
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('李四')">禁用</button>
</td>
</tr>
<tr>
@ -562,7 +637,7 @@
<td>-</td>
<td>
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;">禁用</button>
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('王五')">禁用</button>
</td>
</tr>
<tr>
@ -588,7 +663,7 @@
<td>-</td>
<td>
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;">禁用</button>
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('孙八')">禁用</button>
</td>
</tr>
<tr>
@ -601,7 +676,7 @@
<td>-</td>
<td>
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;">禁用</button>
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('周九')">禁用</button>
</td>
</tr>
<tr>
@ -614,7 +689,7 @@
<td>-</td>
<td>
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;">禁用</button>
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;" onclick="handleDisable('吴十')">禁用</button>
</td>
</tr>
<tr>
@ -641,7 +716,59 @@
</div>
</div>
<!-- 通过确认弹窗 -->
<div id="approveModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">确认通过</h3>
</div>
<div class="modal-body">
<p>确定要通过 <strong id="approveName"></strong> 的申请吗?</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="closeModal('approveModal')">取消</button>
<button class="btn btn-success" onclick="confirmApprove()">确认通过</button>
</div>
</div>
</div>
<!-- 拒绝确认弹窗 -->
<div id="rejectModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">确认拒绝</h3>
</div>
<div class="modal-body">
<p>确定要拒绝 <strong id="rejectName"></strong> 的申请吗?</p>
<textarea id="rejectReason" placeholder="请输入拒绝理由(必填)"></textarea>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="closeModal('rejectModal')">取消</button>
<button class="btn btn-danger" onclick="confirmReject()">确认拒绝</button>
</div>
</div>
</div>
<!-- 禁用确认弹窗 -->
<div id="disableModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">确认禁用</h3>
</div>
<div class="modal-body">
<p>确定要禁用分销商 <strong id="disableName"></strong> 吗?</p>
<textarea id="disableReason" placeholder="请输入禁用原因(必填)"></textarea>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="closeModal('disableModal')">取消</button>
<button class="btn btn-warning" onclick="confirmDisable()">确认禁用</button>
</div>
</div>
</div>
<script>
let currentApplicant = '';
function switchTab(tabName) {
// 移除所有active类
document.querySelectorAll('.tab-item').forEach(item => {
@ -655,6 +782,72 @@
event.target.classList.add('active');
document.getElementById('tab-' + tabName).classList.add('active');
}
// 打开通过弹窗
function handleApprove(name) {
currentApplicant = name;
document.getElementById('approveName').textContent = name;
document.getElementById('approveModal').classList.add('show');
}
// 打开拒绝弹窗
function handleReject(name) {
currentApplicant = name;
document.getElementById('rejectName').textContent = name;
document.getElementById('rejectReason').value = '';
document.getElementById('rejectModal').classList.add('show');
}
// 关闭弹窗
function closeModal(modalId) {
document.getElementById(modalId).classList.remove('show');
}
// 确认通过
function confirmApprove() {
alert(`已通过 ${currentApplicant} 的申请`);
closeModal('approveModal');
// 这里可以添加实际的审核通过逻辑
}
// 确认拒绝
function confirmReject() {
const reason = document.getElementById('rejectReason').value.trim();
if (!reason) {
alert('请输入拒绝理由');
return;
}
alert(`已拒绝 ${currentApplicant} 的申请，理由：${reason}`);
closeModal('rejectModal');
// 这里可以添加实际的审核拒绝逻辑
}
// 打开禁用弹窗
function handleDisable(name) {
currentApplicant = name;
document.getElementById('disableName').textContent = name;
document.getElementById('disableReason').value = '';
document.getElementById('disableModal').classList.add('show');
}
// 确认禁用
function confirmDisable() {
const reason = document.getElementById('disableReason').value.trim();
if (!reason) {
alert('请输入禁用原因');
return;
}
alert(`已禁用分销商 ${currentApplicant}，原因：${reason}`);
closeModal('disableModal');
// 这里可以添加实际的禁用逻辑
}
// 点击弹窗外部关闭
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
event.target.classList.remove('show');
}
}
</script>
</body>
</html>