wsh5485
0eb0cf12fb
移除不再需要的测试脚本、调试页面和解决方案文档，包括： - 各种测试PHP文件(test.php, test_filters.php等) - VIP功能测试和调试页面(test_vip*.php, vip_debug_page.html等) - 数据库连接测试脚本(test_db_connection.php) - 解决方案文档(SOLUTIONS.md, VIP_*_Report.md)
490 lines
19 KiB
HTML
490 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VIP客户搜索调试工具</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Consolas', monospace;
|
|
margin: 20px;
|
|
background: #1e1e1e;
|
|
color: #d4d4d4;
|
|
}
|
|
|
|
.debug-panel {
|
|
background: #2d2d30;
|
|
border: 1px solid #3e3e42;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.debug-title {
|
|
color: #4ec9b0;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
border-bottom: 2px solid #4ec9b0;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.test-button {
|
|
background: #0078d4;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
font-family: 'Consolas', monospace;
|
|
}
|
|
|
|
.test-button:hover {
|
|
background: #106ebe;
|
|
}
|
|
|
|
.test-button.success {
|
|
background: #107c10;
|
|
}
|
|
|
|
.test-button.error {
|
|
background: #d83b01;
|
|
}
|
|
|
|
.output {
|
|
background: #1e1e1e;
|
|
border: 1px solid #3e3e42;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
font-family: 'Consolas', monospace;
|
|
white-space: pre-wrap;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.output.success {
|
|
border-left: 4px solid #107c10;
|
|
}
|
|
|
|
.output.error {
|
|
border-left: 4px solid #d83b01;
|
|
}
|
|
|
|
.output.info {
|
|
border-left: 4px solid #0078d4;
|
|
}
|
|
|
|
.search-input {
|
|
background: #3c3c3c;
|
|
border: 1px solid #5a5a5a;
|
|
color: #d4d4d4;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
width: 300px;
|
|
margin: 10px 5px;
|
|
font-family: 'Consolas', monospace;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.status-loading { background: #ff8c00; }
|
|
.status-success { background: #107c10; }
|
|
.status-error { background: #d83b01; }
|
|
.status-warning { background: #ff8c00; }
|
|
|
|
.customer-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 10px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.customer-card {
|
|
background: #252526;
|
|
border: 1px solid #3e3e42;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.customer-name {
|
|
color: #4ec9b0;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.customer-phone {
|
|
color: #d4d4d4;
|
|
font-size: 12px;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.customer-car {
|
|
color: #9cdcfe;
|
|
font-size: 11px;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.json-viewer {
|
|
background: #1e1e1e;
|
|
border: 1px solid #3e3e42;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
font-family: 'Consolas', monospace;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="debug-panel">
|
|
<div class="debug-title">🔧 VIP客户搜索调试工具</div>
|
|
|
|
<!-- 数据库连接测试 -->
|
|
<div>
|
|
<h3><span class="status-indicator status-loading" id="db-status"></span>数据库连接测试</h3>
|
|
<button class="test-button" onclick="testDatabaseConnection()">测试数据库连接</button>
|
|
<div id="db-output" class="output" style="display: none;"></div>
|
|
</div>
|
|
|
|
<!-- VIP数据加载测试 -->
|
|
<div>
|
|
<h3><span class="status-indicator status-loading" id="data-status"></span>VIP数据加载测试</h3>
|
|
<button class="test-button" onclick="testVIPDataLoading()">加载VIP客户数据</button>
|
|
<div id="data-output" class="output" style="display: none;"></div>
|
|
<div id="customers-display" style="display: none;"></div>
|
|
</div>
|
|
|
|
<!-- 搜索功能测试 -->
|
|
<div>
|
|
<h3><span class="status-indicator status-loading" id="search-status"></span>搜索功能测试</h3>
|
|
<div style="margin: 10px 0;">
|
|
<input type="text" id="debug-search-input" class="search-input"
|
|
placeholder="输入搜索关键词" oninput="testSearch()">
|
|
<button class="test-button" onclick="testSearch()">搜索</button>
|
|
<button class="test-button" onclick="clearSearch()">清除</button>
|
|
</div>
|
|
<div id="search-output" class="output" style="display: none;"></div>
|
|
<div id="search-results" class="customer-list" style="display: none;"></div>
|
|
</div>
|
|
|
|
<!-- 完整流程测试 -->
|
|
<div>
|
|
<h3><span class="status-indicator status-loading" id="flow-status"></span>完整流程测试</h3>
|
|
<button class="test-button" onclick="testFullFlow()">运行完整流程测试</button>
|
|
<div id="flow-output" class="output" style="display: none;"></div>
|
|
</div>
|
|
|
|
<!-- 实时监控 -->
|
|
<div>
|
|
<h3><span class="status-indicator status-success" id="monitor-status"></span>实时监控</h3>
|
|
<div id="monitor-output" class="output"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let vipCustomers = [];
|
|
let debugLog = [];
|
|
|
|
// 添加调试日志
|
|
function addLog(message, type = 'info') {
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const logMessage = `[${timestamp}] ${message}`;
|
|
|
|
debugLog.push(logMessage);
|
|
updateMonitor();
|
|
|
|
console.log(logMessage);
|
|
}
|
|
|
|
// 更新监控显示
|
|
function updateMonitor() {
|
|
const monitorOutput = document.getElementById('monitor-output');
|
|
monitorOutput.textContent = debugLog.join('\n');
|
|
monitorOutput.scrollTop = monitorOutput.scrollHeight;
|
|
}
|
|
|
|
// 设置状态指示器
|
|
function setStatus(elementId, status) {
|
|
const indicator = document.getElementById(elementId);
|
|
indicator.className = `status-indicator status-${status}`;
|
|
}
|
|
|
|
// 显示输出
|
|
function showOutput(elementId, content, type = 'info') {
|
|
const output = document.getElementById(elementId);
|
|
output.className = `output ${type}`;
|
|
output.textContent = content;
|
|
output.style.display = 'block';
|
|
}
|
|
|
|
// 测试数据库连接
|
|
async function testDatabaseConnection() {
|
|
addLog('开始测试数据库连接...');
|
|
setStatus('db-status', 'loading');
|
|
|
|
try {
|
|
const response = await fetch('get_vip_customers.php');
|
|
addLog(`API响应状态: ${response.status} ${response.statusText}`);
|
|
addLog(`响应头: ${JSON.stringify([...response.headers.entries()])}`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
const text = await response.text();
|
|
addLog(`原始响应: ${text.substring(0, 200)}${text.length > 200 ? '...' : ''}`);
|
|
|
|
if (text.trim().startsWith('{') || text.trim().startsWith('[')) {
|
|
try {
|
|
const data = JSON.parse(text);
|
|
addLog('JSON解析成功', 'success');
|
|
setStatus('db-status', 'success');
|
|
showOutput('db-output', `数据库连接成功！\n状态码: ${response.status}\n数据格式: ${Array.isArray(data) ? '数组' : '对象'}\n记录数: ${Array.isArray(data) ? data.length : 'N/A'}`, 'success');
|
|
} catch (e) {
|
|
addLog(`JSON解析失败: ${e.message}`, 'error');
|
|
setStatus('db-status', 'error');
|
|
showOutput('db-output', `JSON解析失败: ${e.message}\n原始内容: ${text}`, 'error');
|
|
}
|
|
} else {
|
|
setStatus('db-status', 'error');
|
|
showOutput('db-output', `响应不是JSON格式:\n${text}`, 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
addLog(`数据库连接失败: ${error.message}`, 'error');
|
|
setStatus('db-status', 'error');
|
|
showOutput('db-output', `数据库连接失败:\n${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// 测试VIP数据加载
|
|
async function testVIPDataLoading() {
|
|
addLog('开始测试VIP数据加载...');
|
|
setStatus('data-status', 'loading');
|
|
|
|
try {
|
|
const response = await fetch('get_vip_customers.php');
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
const text = await response.text();
|
|
const data = JSON.parse(text);
|
|
|
|
if (Array.isArray(data)) {
|
|
vipCustomers = data;
|
|
addLog(`成功加载 ${data.length} 条VIP客户数据`, 'success');
|
|
setStatus('data-status', 'success');
|
|
showOutput('data-output', `✅ 数据加载成功！\n总计: ${data.length} 条记录\n\n详细数据:\n${JSON.stringify(data, null, 2)}`, 'success');
|
|
|
|
// 显示客户列表
|
|
displayCustomers(data);
|
|
|
|
// 测试搜索功能
|
|
testSearchLogic();
|
|
|
|
} else {
|
|
setStatus('data-status', 'error');
|
|
showOutput('data-output', `❌ 数据格式错误: ${JSON.stringify(data)}`, 'error');
|
|
}
|
|
|
|
} catch (error) {
|
|
addLog(`VIP数据加载失败: ${error.message}`, 'error');
|
|
setStatus('data-status', 'error');
|
|
showOutput('data-output', `❌ 数据加载失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// 显示客户列表
|
|
function displayCustomers(customers) {
|
|
const displayDiv = document.getElementById('customers-display');
|
|
|
|
if (customers.length === 0) {
|
|
displayDiv.innerHTML = '<p>没有找到VIP客户数据</p>';
|
|
displayDiv.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
let html = `<h4>VIP客户列表 (${customers.length}条):</h4><div class="customer-list">`;
|
|
|
|
customers.forEach((customer, index) => {
|
|
html += `
|
|
<div class="customer-card">
|
|
<div class="customer-name">${index + 1}. ${customer.customer_name}</div>
|
|
<div class="customer-phone">📞 ${customer.phone}</div>
|
|
<div class="customer-car">🚗 ${customer.car_model || '未知'} - ${customer.car_number || '未知'}</div>
|
|
<div class="customer-email">✉️ ${customer.email || '无邮箱'}</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
html += '</div>';
|
|
displayDiv.innerHTML = html;
|
|
displayDiv.style.display = 'block';
|
|
}
|
|
|
|
// 测试搜索逻辑
|
|
function testSearchLogic() {
|
|
addLog('测试搜索逻辑...');
|
|
|
|
if (vipCustomers.length === 0) {
|
|
addLog('没有VIP客户数据可搜索', 'warning');
|
|
return;
|
|
}
|
|
|
|
// 测试不同搜索词
|
|
const testTerms = [
|
|
vipCustomers[0].customer_name.substring(0, 1), // 名字第一个字
|
|
vipCustomers[0].phone.substring(0, 3), // 电话前3位
|
|
'张', // 中文名测试
|
|
'139' // 号段测试
|
|
];
|
|
|
|
testTerms.forEach(term => {
|
|
const results = searchCustomers(vipCustomers, term);
|
|
addLog(`搜索"${term}": 找到 ${results.length} 个结果`, results.length > 0 ? 'success' : 'warning');
|
|
});
|
|
}
|
|
|
|
// 搜索客户
|
|
function searchCustomers(customers, term) {
|
|
if (!term || term.trim() === '') return [];
|
|
|
|
const searchTerm = term.toLowerCase().trim();
|
|
|
|
return customers.filter(customer => {
|
|
const name = (customer.customer_name || '').toLowerCase();
|
|
const phone = (customer.phone || '');
|
|
|
|
return name.includes(searchTerm) || phone.includes(searchTerm);
|
|
});
|
|
}
|
|
|
|
// 测试搜索
|
|
function testSearch() {
|
|
const searchTerm = document.getElementById('debug-search-input').value.trim();
|
|
|
|
if (searchTerm === '') {
|
|
document.getElementById('search-results').style.display = 'none';
|
|
document.getElementById('search-output').style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
addLog(`开始搜索: "${searchTerm}"`);
|
|
setStatus('search-status', 'loading');
|
|
|
|
const results = searchCustomers(vipCustomers, searchTerm);
|
|
|
|
addLog(`搜索"${searchTerm}"完成，找到 ${results.length} 个结果`);
|
|
setStatus('search-status', results.length > 0 ? 'success' : 'warning');
|
|
|
|
if (results.length === 0) {
|
|
showOutput('search-output', `❌ 搜索"${searchTerm}"未找到匹配结果\n\nVIP客户总数: ${vipCustomers.length}\n\n可用的搜索测试:\n• 姓名: 张、王、李\n• 手机号: 13900139001、13900139002、13900139003`, 'warning');
|
|
document.getElementById('search-results').style.display = 'none';
|
|
} else {
|
|
showOutput('search-output', `✅ 搜索"${searchTerm}"找到 ${results.length} 个结果:\n\n${results.map(r => `• ${r.customer_name} (${r.phone})`).join('\n')}`, 'success');
|
|
displaySearchResults(results, searchTerm);
|
|
}
|
|
}
|
|
|
|
// 显示搜索结果
|
|
function displaySearchResults(results, searchTerm) {
|
|
const resultsDiv = document.getElementById('search-results');
|
|
let html = `<h4>搜索结果 (${results.length}条):</h4>`;
|
|
|
|
results.forEach((customer, index) => {
|
|
// 高亮关键词
|
|
const highlightName = highlightText(customer.customer_name, searchTerm);
|
|
const highlightPhone = highlightText(customer.phone, searchTerm);
|
|
|
|
html += `
|
|
<div class="customer-card">
|
|
<div class="customer-name">${highlightName}</div>
|
|
<div class="customer-phone">📞 ${highlightPhone}</div>
|
|
<div class="customer-car">🚗 ${customer.car_model || '未知'} - ${customer.car_number || '未知'}</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
resultsDiv.innerHTML = html;
|
|
resultsDiv.style.display = 'block';
|
|
}
|
|
|
|
// 高亮文本
|
|
function highlightText(text, searchTerm) {
|
|
if (!text || !searchTerm) return text || '';
|
|
|
|
const regex = new RegExp(`(${searchTerm})`, 'gi');
|
|
return text.replace(regex, '<mark style="background: yellow; color: black;">$1</mark>');
|
|
}
|
|
|
|
// 清除搜索
|
|
function clearSearch() {
|
|
document.getElementById('debug-search-input').value = '';
|
|
document.getElementById('search-results').style.display = 'none';
|
|
document.getElementById('search-output').style.display = 'none';
|
|
addLog('清除搜索结果');
|
|
}
|
|
|
|
// 测试完整流程
|
|
async function testFullFlow() {
|
|
addLog('开始完整流程测试...');
|
|
setStatus('flow-status', 'loading');
|
|
|
|
let steps = [];
|
|
|
|
try {
|
|
// 步骤1: 测试数据库连接
|
|
steps.push('1. 数据库连接测试');
|
|
const response = await fetch('get_vip_customers.php');
|
|
if (!response.ok) throw new Error('数据库连接失败');
|
|
|
|
// 步骤2: 加载数据
|
|
steps.push('2. VIP数据加载测试');
|
|
const data = JSON.parse(await response.text());
|
|
if (!Array.isArray(data)) throw new Error('数据格式错误');
|
|
vipCustomers = data;
|
|
|
|
// 步骤3: 搜索测试
|
|
steps.push('3. 搜索功能测试');
|
|
const testResults = searchCustomers(vipCustomers, '张');
|
|
if (testResults.length === 0) throw new Error('搜索功能异常');
|
|
|
|
steps.push('4. 数据显示测试');
|
|
|
|
setStatus('flow-status', 'success');
|
|
showOutput('flow-output', `✅ 完整流程测试通过！\n\n执行的步骤:\n${steps.join('\n')}\n\nVIP客户总数: ${vipCustomers.length}\n搜索测试结果: ${testResults.length} 个`, 'success');
|
|
|
|
addLog('完整流程测试通过', 'success');
|
|
|
|
} catch (error) {
|
|
setStatus('flow-status', 'error');
|
|
showOutput('flow-output', `❌ 完整流程测试失败!\n\n已执行步骤:\n${steps.join('\n')}\n\n错误信息: ${error.message}`, 'error');
|
|
addLog(`完整流程测试失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// 页面加载完成后自动运行测试
|
|
window.addEventListener('load', function() {
|
|
addLog('VIP搜索调试工具加载完成');
|
|
|
|
// 3秒后自动开始测试
|
|
setTimeout(() => {
|
|
testDatabaseConnection();
|
|
setTimeout(() => {
|
|
testVIPDataLoading();
|
|
}, 2000);
|
|
}, 3000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |