|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>举报详情查看测试</title>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
padding: 20px;
|
|
|
min-height: 100vh;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
max-width: 1200px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
background: white;
|
|
|
padding: 30px;
|
|
|
border-radius: 15px;
|
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
color: #667eea;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.subtitle {
|
|
|
color: #666;
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
|
|
|
.form-group {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
label {
|
|
|
display: block;
|
|
|
font-weight: 600;
|
|
|
margin-bottom: 8px;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
input, select {
|
|
|
width: 100%;
|
|
|
padding: 12px;
|
|
|
border: 2px solid #e0e0e0;
|
|
|
border-radius: 8px;
|
|
|
font-size: 14px;
|
|
|
transition: border-color 0.3s;
|
|
|
}
|
|
|
|
|
|
input:focus, select:focus {
|
|
|
outline: none;
|
|
|
border-color: #667eea;
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
padding: 12px 24px;
|
|
|
border: none;
|
|
|
border-radius: 8px;
|
|
|
font-size: 16px;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s;
|
|
|
font-weight: 600;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.btn-primary {
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.btn-primary:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
|
|
}
|
|
|
|
|
|
.btn-secondary {
|
|
|
background: #f0f0f0;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.status {
|
|
|
padding: 15px;
|
|
|
border-radius: 8px;
|
|
|
margin-top: 20px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.status.loading {
|
|
|
background: #e3f2fd;
|
|
|
color: #1976d2;
|
|
|
border-left: 4px solid #1976d2;
|
|
|
}
|
|
|
|
|
|
.status.success {
|
|
|
background: #e8f5e9;
|
|
|
color: #2e7d32;
|
|
|
border-left: 4px solid #4caf50;
|
|
|
}
|
|
|
|
|
|
.status.error {
|
|
|
background: #ffebee;
|
|
|
color: #c62828;
|
|
|
border-left: 4px solid #f44336;
|
|
|
}
|
|
|
|
|
|
.detail-section {
|
|
|
margin-top: 20px;
|
|
|
padding: 20px;
|
|
|
background: #f8f9fa;
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
|
|
|
.detail-title {
|
|
|
font-size: 18px;
|
|
|
font-weight: 600;
|
|
|
color: #667eea;
|
|
|
margin-bottom: 15px;
|
|
|
padding-bottom: 10px;
|
|
|
border-bottom: 2px solid #667eea;
|
|
|
}
|
|
|
|
|
|
.detail-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
gap: 15px;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
.detail-item {
|
|
|
background: white;
|
|
|
padding: 12px;
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
|
|
|
.detail-label {
|
|
|
font-weight: 600;
|
|
|
color: #666;
|
|
|
font-size: 12px;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
.detail-value {
|
|
|
color: #333;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.detail-full {
|
|
|
background: white;
|
|
|
padding: 15px;
|
|
|
border-radius: 6px;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
.content-box {
|
|
|
background: #f0f0f0;
|
|
|
padding: 12px;
|
|
|
border-radius: 6px;
|
|
|
border-left: 4px solid #667eea;
|
|
|
margin-top: 8px;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
.data-display {
|
|
|
background: #f8f9fa;
|
|
|
padding: 20px;
|
|
|
border-radius: 8px;
|
|
|
margin-top: 15px;
|
|
|
max-height: 400px;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.data-display pre {
|
|
|
margin: 0;
|
|
|
white-space: pre-wrap;
|
|
|
word-wrap: break-word;
|
|
|
font-family: 'Courier New', monospace;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
|
|
|
.quick-select {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
flex-wrap: wrap;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
.quick-btn {
|
|
|
padding: 8px 16px;
|
|
|
background: #e0e0e0;
|
|
|
border: none;
|
|
|
border-radius: 6px;
|
|
|
cursor: pointer;
|
|
|
font-size: 13px;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
|
|
|
.quick-btn:hover {
|
|
|
background: #667eea;
|
|
|
color: white;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<div class="card">
|
|
|
<h1>🔍 举报详情查看测试</h1>
|
|
|
<p class="subtitle">测试根据举报人ID、被举报人ID和创建时间查询举报详情</p>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label>举报人ID</label>
|
|
|
<input type="text" id="reporterId" placeholder="例如: 123456" value="123456">
|
|
|
<div class="quick-select">
|
|
|
<button class="quick-btn" onclick="setReporterId('123456')">123456</button>
|
|
|
<button class="quick-btn" onclick="setReporterId('234567')">234567</button>
|
|
|
<button class="quick-btn" onclick="setReporterId('345678')">345678</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label>被举报人ID</label>
|
|
|
<input type="text" id="reportedId" placeholder="例如: 654321" value="654321">
|
|
|
<div class="quick-select">
|
|
|
<button class="quick-btn" onclick="setReportedId('654321')">654321</button>
|
|
|
<button class="quick-btn" onclick="setReportedId('765432')">765432</button>
|
|
|
<button class="quick-btn" onclick="setReportedId('876543')">876543</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label>创建时间</label>
|
|
|
<input type="text" id="createdAt" placeholder="格式: yyyy-MM-dd HH:mm:ss" value="2023-10-05 08:30:15">
|
|
|
<div class="quick-select">
|
|
|
<button class="quick-btn" onclick="setCreatedAt('2023-10-05 08:30:15')">2023-10-05 08:30:15</button>
|
|
|
<button class="quick-btn" onclick="setCreatedAt('2023-10-05 09:45:22')">2023-10-05 09:45:22</button>
|
|
|
<button class="quick-btn" onclick="setCreatedAt('2023-10-05 10:15:33')">2023-10-05 10:15:33</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<button class="btn btn-primary" onclick="getReportDetail()">查询举报详情</button>
|
|
|
<button class="btn btn-secondary" onclick="clearResults()">清空结果</button>
|
|
|
</div>
|
|
|
|
|
|
<div id="status"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card" id="detailSection" style="display: none;">
|
|
|
<div class="detail-title">📋 举报详情</div>
|
|
|
<div id="detailContent"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card" id="rawDataSection" style="display: none;">
|
|
|
<div class="detail-title">💾 原始响应数据</div>
|
|
|
<div class="data-display">
|
|
|
<pre id="rawData"></pre>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
const API_BASE_URL = 'http://localhost:8080/api/users';
|
|
|
|
|
|
function setReporterId(id) {
|
|
|
document.getElementById('reporterId').value = id;
|
|
|
}
|
|
|
|
|
|
function setReportedId(id) {
|
|
|
document.getElementById('reportedId').value = id;
|
|
|
}
|
|
|
|
|
|
function setCreatedAt(time) {
|
|
|
document.getElementById('createdAt').value = time;
|
|
|
}
|
|
|
|
|
|
function showStatus(message, type = 'info') {
|
|
|
const statusDiv = document.getElementById('status');
|
|
|
statusDiv.className = `status ${type}`;
|
|
|
statusDiv.innerHTML = message;
|
|
|
statusDiv.style.display = 'block';
|
|
|
}
|
|
|
|
|
|
function clearResults() {
|
|
|
document.getElementById('status').style.display = 'none';
|
|
|
document.getElementById('detailSection').style.display = 'none';
|
|
|
document.getElementById('rawDataSection').style.display = 'none';
|
|
|
}
|
|
|
|
|
|
async function getReportDetail() {
|
|
|
const reporterId = document.getElementById('reporterId').value.trim();
|
|
|
const reportedId = document.getElementById('reportedId').value.trim();
|
|
|
const createdAt = document.getElementById('createdAt').value.trim();
|
|
|
|
|
|
if (!reporterId || !reportedId || !createdAt) {
|
|
|
showStatus('❌ 请填写所有必填字段', 'error');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
showStatus('🔄 正在查询举报详情...', 'loading');
|
|
|
|
|
|
try {
|
|
|
const requestData = {
|
|
|
reporterId: reporterId,
|
|
|
reportedId: reportedId,
|
|
|
createdAt: createdAt
|
|
|
};
|
|
|
|
|
|
console.log('📤 请求参数:', requestData);
|
|
|
|
|
|
const response = await fetch(`${API_BASE_URL}/reports/detail`, {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json'
|
|
|
},
|
|
|
body: JSON.stringify(requestData)
|
|
|
});
|
|
|
|
|
|
const data = await response.json();
|
|
|
console.log('📥 响应数据:', data);
|
|
|
|
|
|
if (data.success) {
|
|
|
showStatus(
|
|
|
`✅ 查询成功！<br>` +
|
|
|
`数据来源: ${data.dataSource || '未知'}<br>` +
|
|
|
`举报人: ${data.report.reporterId}<br>` +
|
|
|
`被举报人: ${data.report.reportedId}`,
|
|
|
'success'
|
|
|
);
|
|
|
displayDetail(data.report);
|
|
|
displayRawData(data);
|
|
|
} else {
|
|
|
showStatus(`❌ 查询失败: ${data.message}`, 'error');
|
|
|
displayRawData(data);
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('请求失败:', error);
|
|
|
showStatus(`❌ 请求失败: ${error.message}<br>请确认后端服务是否启动`, 'error');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function displayDetail(report) {
|
|
|
const detailContent = document.getElementById('detailContent');
|
|
|
|
|
|
let html = `
|
|
|
<div class="detail-section">
|
|
|
<div class="detail-title">基本信息</div>
|
|
|
<div class="detail-grid">
|
|
|
<div class="detail-item">
|
|
|
<div class="detail-label">举报人ID</div>
|
|
|
<div class="detail-value">${report.reporterId || '-'}</div>
|
|
|
</div>
|
|
|
<div class="detail-item">
|
|
|
<div class="detail-label">被举报人ID</div>
|
|
|
<div class="detail-value">${report.reportedId || '-'}</div>
|
|
|
</div>
|
|
|
<div class="detail-item">
|
|
|
<div class="detail-label">举报理由</div>
|
|
|
<div class="detail-value">${report.reason || '-'}</div>
|
|
|
</div>
|
|
|
<div class="detail-item">
|
|
|
<div class="detail-label">提交时间</div>
|
|
|
<div class="detail-value">${report.submitTime || '-'}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="detail-section">
|
|
|
<div class="detail-title">举报内容</div>
|
|
|
<div class="detail-full">
|
|
|
<div class="detail-label">详细描述</div>
|
|
|
<div class="content-box">${report.reasonDetail || '无详细描述'}</div>
|
|
|
</div>
|
|
|
<div class="detail-full">
|
|
|
<div class="detail-label">被举报内容</div>
|
|
|
<div class="content-box">${report.postContent || '无内容'}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`;
|
|
|
|
|
|
if (report.reporterInfo) {
|
|
|
html += `
|
|
|
<div class="detail-section">
|
|
|
<div class="detail-title">举报人信息</div>
|
|
|
<div class="detail-grid">
|
|
|
<div class="detail-item">
|
|
|
<div class="detail-label">用户ID</div>
|
|
|
<div class="detail-value">${report.reporterInfo.id || '-'}</div>
|
|
|
</div>
|
|
|
<div class="detail-item">
|
|
|
<div class="detail-label">用户名</div>
|
|
|
<div class="detail-value">${report.reporterInfo.name || '-'}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
if (report.reportedInfo) {
|
|
|
html += `
|
|
|
<div class="detail-section">
|
|
|
<div class="detail-title">被举报人信息</div>
|
|
|
<div class="detail-grid">
|
|
|
<div class="detail-item">
|
|
|
<div class="detail-label">用户ID</div>
|
|
|
<div class="detail-value">${report.reportedInfo.id || '-'}</div>
|
|
|
</div>
|
|
|
<div class="detail-item">
|
|
|
<div class="detail-label">用户名</div>
|
|
|
<div class="detail-value">${report.reportedInfo.name || '-'}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
if (report.status === 'processed') {
|
|
|
html += `
|
|
|
<div class="detail-section">
|
|
|
<div class="detail-title">处理信息</div>
|
|
|
<div class="detail-grid">
|
|
|
<div class="detail-item">
|
|
|
<div class="detail-label">处理人</div>
|
|
|
<div class="detail-value">${report.processor || '-'}</div>
|
|
|
</div>
|
|
|
<div class="detail-item">
|
|
|
<div class="detail-label">处理结果</div>
|
|
|
<div class="detail-value">${report.handleResult || '-'}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="detail-full">
|
|
|
<div class="detail-label">处理依据</div>
|
|
|
<div class="content-box">${report.basis || '-'}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
detailContent.innerHTML = html;
|
|
|
document.getElementById('detailSection').style.display = 'block';
|
|
|
}
|
|
|
|
|
|
function displayRawData(data) {
|
|
|
document.getElementById('rawData').textContent = JSON.stringify(data, null, 2);
|
|
|
document.getElementById('rawDataSection').style.display = 'block';
|
|
|
}
|
|
|
|
|
|
// 页面加载时显示提示
|
|
|
window.onload = function() {
|
|
|
showStatus('👋 请输入举报人ID、被举报人ID和创建时间，然后点击查询按钮', 'loading');
|
|
|
};
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
