439 lines
22 KiB
HTML
439 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>E-Commerce Order Audit System V9.0 (Modern)</title>
|
||
<style>
|
||
body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: #f4f7f6; margin: 0; color: #333; font-size: 14px; }
|
||
ul { list-style: none; padding: 0; margin: 0; }
|
||
a { text-decoration: none; color: #007bff; transition: 0.2s; }
|
||
a:hover { color: #0056b3; }
|
||
hr { border: 0; border-top: 1px solid #e1e4e8; margin: 20px 0; }
|
||
|
||
.app-container { max-width: 1600px; margin: 0 auto; background: white; min-height: 100vh; display: flex; flex-direction: column; }
|
||
|
||
.header-bar { background-color: #2c3e50; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
|
||
.header-bar h1 { margin: 0; font-size: 18px; font-weight: 600; }
|
||
.header-bar p { margin: 0; font-size: 12px; color: #bdc3c7; }
|
||
.nav-links a { color: #ecf0f1; margin-left: 15px; font-size: 13px; }
|
||
|
||
.main-wrapper { display: flex; flex: 1; }
|
||
|
||
.sidebar { width: 240px; background-color: #f8f9fa; border-right: 1px solid #e1e4e8; padding: 20px; flex-shrink: 0; }
|
||
.sidebar h3 { font-size: 12px; text-transform: uppercase; color: #6c757d; margin-top: 20px; margin-bottom: 10px; font-weight: 700; }
|
||
.sidebar ul li a { display: block; padding: 8px 12px; border-radius: 4px; color: #495057; }
|
||
.sidebar ul li a:hover { background-color: #e9ecef; color: #007bff; }
|
||
|
||
.notice-box { background: #fff3cd; border: 1px solid #ffeeba; padding: 10px; border-radius: 4px; margin-bottom: 10px; font-size: 12px; }
|
||
.metric-box p { margin: 5px 0; font-weight: 500; }
|
||
.ad-banner { display: none; }
|
||
|
||
.content-area { flex: 1; padding: 25px; background: #fff; }
|
||
.content-area h2 { margin-top: 0; border-bottom: 2px solid #007bff; padding-bottom: 10px; display: inline-block; }
|
||
|
||
.filter-panel fieldset { border: 1px solid #ced4da; border-radius: 5px; padding: 15px; margin-bottom: 20px; background: #fdfdfd; }
|
||
.filter-panel legend { font-weight: bold; color: #495057; padding: 0 5px; }
|
||
.form-row { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||
.form-row label { font-weight: 500; width: 70px; }
|
||
input[type="text"], input[type="number"], select { padding: 5px 10px; border: 1px solid #ced4da; border-radius: 4px; width: 150px; }
|
||
.btn-group button { padding: 6px 12px; cursor: pointer; border: 1px solid transparent; border-radius: 4px; font-size: 13px; }
|
||
.btn-primary { background-color: #007bff; color: white; }
|
||
.btn-secondary { background-color: #6c757d; color: white; }
|
||
|
||
.order-list { margin-top: 20px; }
|
||
.order-card { border: 1px solid #e1e4e8; border-radius: 6px; padding: 15px; margin-bottom: 15px; position: relative; transition: box-shadow 0.2s; display: grid; grid-template-columns: 2fr 3fr 1fr 2fr; gap: 15px; align-items: start; }
|
||
.order-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-color: #007bff; }
|
||
|
||
.order-header { grid-column: 1 / -1; display: flex; justify-content: space-between; background: #f8f9fa; padding: 8px 10px; margin: -15px -15px 10px -15px; border-bottom: 1px solid #e1e4e8; border-radius: 6px 6px 0 0; }
|
||
.tag-urgent { color: #dc3545; font-weight: bold; }
|
||
.tag-normal { color: #28a745; }
|
||
|
||
.order-details ul li { margin-bottom: 4px; color: #555; font-size: 13px; }
|
||
|
||
.status-panel span:first-child { font-weight: bold; display: block; margin-bottom: 5px; }
|
||
.status-panel span:last-child { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 12px; }
|
||
.status-ok { background: #d4edda; color: #155724; }
|
||
.status-risk { background: #f8d7da; color: #721c24; }
|
||
.status-manual { background: #fff3cd; color: #856404; }
|
||
|
||
.action-panel { display: flex; flex-direction: column; gap: 5px; }
|
||
.action-panel button { padding: 5px 10px; cursor: pointer; background: white; border: 1px solid #ced4da; border-radius: 3px; font-size: 12px; }
|
||
.action-panel button:hover { background: #f0f0f0; }
|
||
|
||
.log-footer { grid-column: 1 / -1; font-size: 11px; color: #999; border-top: 1px dashed #eee; padding-top: 5px; margin-top: 5px; }
|
||
|
||
.system-alert-row { background-color: #fff3cd; padding: 10px; text-align: center; border: 1px solid #ffeeba; border-radius: 4px; margin-bottom: 15px; color: #856404; }
|
||
.promo-row { display: none; }
|
||
|
||
.footer-bar { padding: 20px; text-align: center; font-size: 12px; color: #aaa; border-top: 1px solid #eee; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="app-container">
|
||
<div class="header-bar">
|
||
<h1>全球购订单审核后台 V9.0</h1>
|
||
<p>当前操作员: <strong>AUDITOR_4421</strong> | 部门: 华东区审核组 | 状态: 在线</p>
|
||
<nav class="nav-links">
|
||
<a href="#">控制台首页</a> |
|
||
<a href="#">待审核队列(99+)</a> |
|
||
<a href="#">异常单处理</a> |
|
||
<a href="#">历史订单查询</a> |
|
||
<a href="#">绩效考核</a> |
|
||
<a href="#">系统设置</a> |
|
||
<a href="#" onclick="alert('安全退出中...')">退出登录</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="main-wrapper">
|
||
|
||
<div class="sidebar">
|
||
<h3>快捷菜单</h3>
|
||
<ul>
|
||
<li><a href="#">普通订单审核</a></li>
|
||
<li><a href="#">VIP订单加急</a></li>
|
||
<li><a href="#">跨境订单报关</a></li>
|
||
<li><a href="#">退换货申请</a></li>
|
||
<li><a href="#">发票开具申请</a></li>
|
||
</ul>
|
||
|
||
<h3>系统公告</h3>
|
||
<div class="notice-box">
|
||
<p><strong>[重要] 关于双11大促期间服务器扩容通知</strong><br>请各位审核员注意，系统将于凌晨... [查看更多]</p>
|
||
<p><strong>[行政] 下午茶预定统计</strong><br>今天的奶茶统计截止到14:00...</p>
|
||
<p><strong>[推广] 内部员工购福利</strong><br>最新款机械键盘由外设组提供...</p>
|
||
</div>
|
||
|
||
<h3>数据监控</h3>
|
||
<div class="metric-box">
|
||
<p>今日审核量: 142</p>
|
||
<p>平均耗时: 45s</p>
|
||
<p>错误率: 0.1%</p>
|
||
</div>
|
||
|
||
<div class="ad-banner">
|
||
<a href="#">[广告] 护眼台灯团购中</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-area">
|
||
<h2>待审核队列 (区域: 电子产品)</h2>
|
||
|
||
<form class="filter-panel">
|
||
<fieldset>
|
||
<legend>高级检索条件</legend>
|
||
<div class="form-row">
|
||
<label>订单号:</label> <input type="text" placeholder="输入订单号">
|
||
<label>用户ID:</label> <input type="text" placeholder="输入用户ID">
|
||
<label>金额范围:</label> <input type="number"> - <input type="number">
|
||
</div>
|
||
<div class="form-row">
|
||
<label>风险等级:</label>
|
||
<select>
|
||
<option>全部</option>
|
||
<option>低风险</option>
|
||
<option>中风险</option>
|
||
<option>高风险 (建议拦截)</option>
|
||
</select>
|
||
<label>包含商品:</label> <input type="text">
|
||
</div>
|
||
<div class="form-row btn-group">
|
||
<button type="button" class="btn-primary" onclick="alert('查询中...')">查询订单</button>
|
||
<button type="button" class="btn-secondary">重置条件</button>
|
||
<button type="button" class="btn-secondary">导出Excel</button>
|
||
</div>
|
||
<div class="form-row">
|
||
<small style="color:#999">注意：查询耗时可能较长，请勿频繁点击。</small>
|
||
</div>
|
||
</fieldset>
|
||
</form>
|
||
|
||
<div style="margin-bottom: 20px; padding: 10px; background: #f1f3f5; border-radius: 4px;">
|
||
<input type="checkbox" id="checkAll"> 全选当页
|
||
<button class="btn-primary" style="margin-left: 10px;">批量通过</button>
|
||
<button class="btn-secondary">批量驳回</button>
|
||
<button class="btn-secondary">转交上级</button>
|
||
</div>
|
||
|
||
<div class="order-list">
|
||
|
||
<div class="order-card">
|
||
<div class="order-header">
|
||
<div><input type="checkbox" class="order-check"> <strong>订单号: 20251221-A001</strong></div>
|
||
<span class="tag-urgent">[加急]</span>
|
||
</div>
|
||
<div class="order-details">
|
||
<ul>
|
||
<li>用户: user_9921 (信用分: 780)</li>
|
||
<li>商品: RTX 5090 显卡 x 2</li>
|
||
<li>总价: 34,999.00 CNY</li>
|
||
<li>收货地: 北京市海淀区...</li>
|
||
<li>下单时间: 2025-12-21 14:30:22</li>
|
||
</ul>
|
||
</div>
|
||
<div class="status-panel">
|
||
<span>系统判定: </span> <span class="status-ok">正常</span>
|
||
</div>
|
||
<div class="action-panel">
|
||
<button class="btn-primary">详情</button>
|
||
<button style="color: green;">通过</button>
|
||
<button style="color: red;" onclick="auditReject(this)">驳回</button>
|
||
<button>挂起</button>
|
||
<button>备注</button>
|
||
</div>
|
||
<div class="log-footer">
|
||
<small>日志: 用户IP未变动，支付指纹匹配。</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="system-alert-row">
|
||
<div>
|
||
<strong>系统消息: 服务器负载过高 (Warn: CPU 92%)</strong>
|
||
</div>
|
||
<p style="margin:5px 0 0 0; font-size:12px;">请审核员稍安勿躁，技术部正在扩容节点，页面可能出现卡顿。</p>
|
||
</div>
|
||
|
||
<div class="order-card">
|
||
<div class="order-header">
|
||
<div><input type="checkbox" class="order-check"> <strong>订单号: 20251221-A002</strong></div>
|
||
<span class="tag-normal">[常规]</span>
|
||
</div>
|
||
<div class="order-details">
|
||
<ul>
|
||
<li>用户: temp_user_001 (信用分: N/A)</li>
|
||
<li>商品: 游戏点卡充值 5000元</li>
|
||
<li>总价: 5,000.00 CNY</li>
|
||
<li>收货地: 虚拟发货</li>
|
||
<li>下单时间: 2025-12-21 14:31:05</li>
|
||
</ul>
|
||
</div>
|
||
<div class="status-panel">
|
||
<span>系统判定: </span> <span class="status-risk">高风险 (疑似盗刷)</span>
|
||
</div>
|
||
<div class="action-panel">
|
||
<button class="btn-primary">详情</button>
|
||
<button style="color: green;">通过</button>
|
||
<button style="color: red;" onclick="auditReject(this)">驳回</button>
|
||
<button>挂起</button>
|
||
<button>备注</button>
|
||
</div>
|
||
<div class="log-footer">
|
||
<small>日志: 该IP今日已尝试下单5次，均失败。</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="order-card">
|
||
<div class="order-header">
|
||
<div><input type="checkbox" class="order-check"> <strong>订单号: 20251221-A003</strong></div>
|
||
<span class="tag-normal">[常规]</span>
|
||
</div>
|
||
<div class="order-details">
|
||
<ul>
|
||
<li>用户: loyal_cust_88 (信用分: 900)</li>
|
||
<li>商品: 婴儿奶粉 x 6罐</li>
|
||
<li>总价: 1,200.00 CNY</li>
|
||
<li>收货地: 上海市浦东新区...</li>
|
||
<li>下单时间: 2025-12-21 14:32:10</li>
|
||
</ul>
|
||
</div>
|
||
<div class="status-panel">
|
||
<span>系统判定: </span> <span class="status-ok">正常</span>
|
||
</div>
|
||
<div class="action-panel">
|
||
<button class="btn-primary">详情</button>
|
||
<button style="color: green;">通过</button>
|
||
<button style="color: red;" onclick="auditReject(this)">驳回</button>
|
||
<button>挂起</button>
|
||
<button>备注</button>
|
||
</div>
|
||
<div class="log-footer">
|
||
<small>日志: 历史购买记录匹配。</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="promo-row">
|
||
<div align="center">
|
||
<p>--- 推广：公司内部二手交易群已建立，欢迎加入 ---</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="order-card">
|
||
<div class="order-header">
|
||
<div><input type="checkbox" class="order-check"> <strong>订单号: 20251221-A004</strong></div>
|
||
<span class="tag-normal">[大宗]</span>
|
||
</div>
|
||
<div class="order-details">
|
||
<ul>
|
||
<li>用户: company_buyer_22 (信用分: 850)</li>
|
||
<li>商品: 办公椅 x 50</li>
|
||
<li>总价: 15,000.00 CNY</li>
|
||
<li>收货地: 深圳市南山区...</li>
|
||
<li>下单时间: 2025-12-21 14:35:00</li>
|
||
</ul>
|
||
</div>
|
||
<div class="status-panel">
|
||
<span>系统判定: </span> <span class="status-manual">需要人工复核</span>
|
||
</div>
|
||
<div class="action-panel">
|
||
<button class="btn-primary">详情</button>
|
||
<button style="color: green;">通过</button>
|
||
<button style="color: red;" onclick="auditReject(this)">驳回</button>
|
||
<button>挂起</button>
|
||
<button>备注</button>
|
||
</div>
|
||
<div class="log-footer">
|
||
<small>日志: 首次大额采购。</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="order-card">
|
||
<div class="order-header">
|
||
<div><input type="checkbox" class="order-check"> <strong>订单号: 20251221-A005</strong></div>
|
||
<span class="tag-normal">[常规]</span>
|
||
</div>
|
||
<div class="order-details">
|
||
<ul>
|
||
<li>用户: gamer_123 (信用分: 600)</li>
|
||
<li>商品: 机械键盘 (红轴)</li>
|
||
<li>总价: 499.00 CNY</li>
|
||
<li>收货地: 广州市天河区...</li>
|
||
<li>下单时间: 2025-12-21 14:36:11</li>
|
||
</ul>
|
||
</div>
|
||
<div class="status-panel">
|
||
<span>系统判定: </span> <span class="status-ok">正常</span>
|
||
</div>
|
||
<div class="action-panel">
|
||
<button class="btn-primary">详情</button>
|
||
<button style="color: green;">通过</button>
|
||
<button style="color: red;" onclick="auditReject(this)">驳回</button>
|
||
<button>挂起</button>
|
||
<button>备注</button>
|
||
</div>
|
||
<div class="log-footer">
|
||
<small>日志: 无。</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="order-card">
|
||
<div class="order-header">
|
||
<div><input type="checkbox" class="order-check"> <strong>订单号: 20251221-A006</strong></div>
|
||
<span class="tag-normal">[常规]</span>
|
||
</div>
|
||
<div class="order-details">
|
||
<ul>
|
||
<li>用户: new_user_009 (信用分: 550)</li>
|
||
<li>商品: 蓝牙耳机</li>
|
||
<li>总价: 199.00 CNY</li>
|
||
<li>收货地: 成都市武侯区...</li>
|
||
<li>下单时间: 2025-12-21 14:38:44</li>
|
||
</ul>
|
||
</div>
|
||
<div class="status-panel">
|
||
<span>系统判定: </span> <span class="status-ok">正常</span>
|
||
</div>
|
||
<div class="action-panel">
|
||
<button class="btn-primary">详情</button>
|
||
<button style="color: green;">通过</button>
|
||
<button style="color: red;" onclick="auditReject(this)">驳回</button>
|
||
<button>挂起</button>
|
||
<button>备注</button>
|
||
</div>
|
||
<div class="log-footer">
|
||
<small>日志: 新用户首单。</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="order-card">
|
||
<div class="order-header">
|
||
<div><input type="checkbox" class="order-check"> <strong>订单号: 20251221-A007</strong></div>
|
||
<span class="tag-urgent">[高风险]</span>
|
||
</div>
|
||
<div class="order-details">
|
||
<ul>
|
||
<li>用户: unknown_ip_proxy (信用分: 120)</li>
|
||
<li>商品: 礼品卡 x 100</li>
|
||
<li>总价: 10,000.00 CNY</li>
|
||
<li>收货地: 邮件接收</li>
|
||
<li>下单时间: 2025-12-21 14:40:01</li>
|
||
</ul>
|
||
</div>
|
||
<div class="status-panel">
|
||
<span>系统判定: </span> <span class="status-risk">拦截</span>
|
||
</div>
|
||
<div class="action-panel">
|
||
<button class="btn-primary">详情</button>
|
||
<button style="color: green;">通过</button>
|
||
<button style="color: red;" onclick="auditReject(this)">驳回</button>
|
||
<button>挂起</button>
|
||
<button>备注</button>
|
||
</div>
|
||
<div class="log-footer">
|
||
<small>日志: 代理IP检测，建议立即封锁。</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="order-card">
|
||
<div class="order-header">
|
||
<div><input type="checkbox" class="order-check"> <strong>订单号: 20251221-A008</strong></div>
|
||
<span class="tag-normal">[常规]</span>
|
||
</div>
|
||
<div class="order-details">
|
||
<ul>
|
||
<li>用户: daily_buyer (信用分: 700)</li>
|
||
<li>商品: 卫生纸 x 1箱</li>
|
||
<li>总价: 89.00 CNY</li>
|
||
<li>收货地: 武汉市洪山区...</li>
|
||
<li>下单时间: 2025-12-21 14:41:20</li>
|
||
</ul>
|
||
</div>
|
||
<div class="status-panel">
|
||
<span>系统判定: </span> <span class="status-ok">正常</span>
|
||
</div>
|
||
<div class="action-panel">
|
||
<button class="btn-primary">详情</button>
|
||
<button style="color: green;">通过</button>
|
||
<button style="color: red;" onclick="auditReject(this)">驳回</button>
|
||
<button>挂起</button>
|
||
<button>备注</button>
|
||
</div>
|
||
<div class="log-footer">
|
||
<small>日志: 正常复购。</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div align="center" style="margin-top:30px;">
|
||
<button class="btn-secondary" style="width: 200px; padding: 10px;">加载更多数据 (10/99+)</button>
|
||
<p style="color:#ccc; font-size:10px;">网络延迟: 23ms</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bar">
|
||
<p>© 2025 Global E-Commerce Group. Internal System.</p>
|
||
<p>Confidentiality Level: High. Do not screenshot.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.getElementById('checkAll').addEventListener('change', function(e) {
|
||
const checks = document.querySelectorAll('.order-check');
|
||
checks.forEach(c => c.checked = e.target.checked);
|
||
});
|
||
|
||
function auditReject(btn) {
|
||
const card = btn.closest('.order-card');
|
||
const orderId = card.querySelector('strong').innerText;
|
||
if(confirm(`确认驳回 ${orderId} 吗？请输入驳回理由:`)) {
|
||
card.style.opacity = '0.5';
|
||
card.style.background = '#e9ecef';
|
||
btn.innerText = '已驳回';
|
||
btn.disabled = true;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html> |