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)
362 lines
15 KiB
HTML
362 lines
15 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: Arial, sans-serif;
|
|
margin: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
background: #f9f9f9;
|
|
}
|
|
h1, h2 {
|
|
color: #333;
|
|
}
|
|
.test-area {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 6px;
|
|
margin: 20px 0;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin: 10px 0 5px;
|
|
font-weight: bold;
|
|
}
|
|
input {
|
|
padding: 8px;
|
|
width: 200px;
|
|
margin-bottom: 10px;
|
|
}
|
|
button {
|
|
padding: 8px 16px;
|
|
background: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background: #45a049;
|
|
}
|
|
.info-box {
|
|
background: #e3f2fd;
|
|
padding: 15px;
|
|
border-left: 4px solid #2196F3;
|
|
margin: 15px 0;
|
|
}
|
|
.warning-box {
|
|
background: #fff3cd;
|
|
padding: 15px;
|
|
border-left: 4px solid #ffc107;
|
|
margin: 15px 0;
|
|
}
|
|
.instructions {
|
|
background: #d4edda;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
margin: 20px 0;
|
|
}
|
|
.instructions ol {
|
|
margin-top: 10px;
|
|
}
|
|
.test-result {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
background: #f8f9fa;
|
|
border-radius: 4px;
|
|
min-height: 50px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>VIP客户搜索调试面板测试</h1>
|
|
|
|
<div class="info-box">
|
|
<strong>功能说明：</strong>此页面用于测试VIP客户搜索调试面板的默认隐藏功能，以及验证显示/隐藏切换功能是否正常工作。
|
|
</div>
|
|
|
|
<div class="warning-box">
|
|
<strong>默认状态：</strong>调试面板已设置为默认隐藏，您需要点击右上角的"显示"按钮才能看到调试面板。
|
|
</div>
|
|
|
|
<div class="test-area">
|
|
<h2>VIP客户搜索测试</h2>
|
|
<label for="phone-search">输入手机号：</label>
|
|
<input type="text" id="phone-search" placeholder="请输入手机号" value="18699627661">
|
|
<button id="search-btn">搜索VIP客户</button>
|
|
|
|
<div class="test-result" id="search-result">
|
|
<!-- 搜索结果将显示在这里 -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instructions">
|
|
<h3>调试面板操作指南：</h3>
|
|
<ol>
|
|
<li><strong>开启调试面板：</strong>点击页面右上角的"显示"按钮</li>
|
|
<li><strong>查看搜索历史：</strong>在调试面板中可以看到搜索记录和匹配结果</li>
|
|
<li><strong>隐藏调试面板：</strong>点击面板右上角的"隐藏"按钮</li>
|
|
<li><strong>通过控制台显示：</strong>在浏览器控制台执行：<code>document.getElementById('vip-debug-panel').style.display = 'block'</code></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 初始化VIP客户数据
|
|
window.allVIPCustomers = [];
|
|
|
|
// 模拟测试数据
|
|
function initializeTestData() {
|
|
const testVIPs = [
|
|
{ id: 1, customer_name: '张三', phone: '18600000001', plate_number: '京A12345', membership_level: '黄金会员' },
|
|
{ id: 2, customer_name: '李四', phone: '18600000002', plate_number: '京B54321', membership_level: '白金会员' },
|
|
{ id: 3, customer_name: '王五', phone: '18699627661', plate_number: '京C11111', membership_level: '钻石会员' },
|
|
{ id: 4, customer_name: '赵六', phone: '18600000003', plate_number: '京D22222', membership_level: '黄金会员' },
|
|
{ id: 5, customer_name: '钱七', phone: '18600000004', plate_number: '京E33333', membership_level: '白金会员' }
|
|
];
|
|
window.allVIPCustomers = testVIPs;
|
|
console.log('测试VIP数据已初始化:', testVIPs.length, '条记录');
|
|
}
|
|
|
|
// 搜索VIP客户函数
|
|
function searchVIPCustomers(phone) {
|
|
const normalizedPhone = phone.replace(/[^\d]/g, '');
|
|
let matchedVIP = null;
|
|
let potentialMatches = [];
|
|
|
|
if (!window.allVIPCustomers || window.allVIPCustomers.length === 0) {
|
|
return { matched: false, message: 'VIP客户数据为空' };
|
|
}
|
|
|
|
// 精确匹配
|
|
matchedVIP = window.allVIPCustomers.find(vip => vip.phone === normalizedPhone);
|
|
|
|
// 如果没有精确匹配，查找潜在匹配（包含手机号片段）
|
|
if (!matchedVIP) {
|
|
potentialMatches = window.allVIPCustomers.filter(vip =>
|
|
vip.phone.includes(normalizedPhone) ||
|
|
vip.customer_name.includes(phone) ||
|
|
vip.plate_number.includes(phone)
|
|
);
|
|
}
|
|
|
|
// 记录到调试面板（如果面板存在）
|
|
if (typeof logSearchToDebugPanel === 'function') {
|
|
logSearchToDebugPanel(phone, matchedVIP, potentialMatches, {
|
|
normalizedPhone,
|
|
searchTime: new Date().toLocaleString()
|
|
});
|
|
}
|
|
|
|
return {
|
|
matched: !!matchedVIP,
|
|
vip: matchedVIP,
|
|
potentialMatches: potentialMatches,
|
|
message: matchedVIP ? '找到VIP客户' :
|
|
potentialMatches.length > 0 ? '找到潜在匹配' : '未找到匹配的VIP客户'
|
|
};
|
|
}
|
|
|
|
// 设置VIP调试面板
|
|
function setupVIPDebugPanel() {
|
|
// 检查是否已存在调试面板
|
|
if (document.getElementById('vip-debug-panel')) return;
|
|
|
|
// 创建调试面板HTML
|
|
const debugPanel = document.createElement('div');
|
|
debugPanel.id = 'vip-debug-panel';
|
|
debugPanel.style.cssText = `
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
width: 350px;
|
|
max-height: 400px;
|
|
background: #f8f9fa;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
z-index: 10000;
|
|
overflow-y: auto;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
display: none;
|
|
`;
|
|
|
|
debugPanel.innerHTML = `
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
|
<h4 style="margin: 0; font-size: 14px;">VIP客户搜索调试面板</h4>
|
|
<button id="toggle-vip-debug" style="padding: 2px 8px; font-size: 10px;">显示</button>
|
|
</div>
|
|
<div id="debug-status" style="margin-bottom: 10px; padding: 5px; background: #e3f2fd; border-radius: 4px;">
|
|
VIP数据加载状态: <span id="vip-data-status">未加载</span>
|
|
</div>
|
|
<div id="debug-search-history" style="max-height: 250px; overflow-y: auto;">
|
|
<p style="color: #666; font-style: italic; text-align: center;">搜索历史将显示在这里</p>
|
|
</div>
|
|
`;
|
|
|
|
// 添加到页面
|
|
document.body.appendChild(debugPanel);
|
|
|
|
// 注: 调试面板默认隐藏，可通过点击右上角"显示"按钮打开
|
|
|
|
// 添加切换显示/隐藏功能
|
|
document.getElementById('toggle-vip-debug').addEventListener('click', function() {
|
|
const panel = document.getElementById('vip-debug-panel');
|
|
const button = document.getElementById('toggle-vip-debug');
|
|
|
|
if (panel.style.display === 'none') {
|
|
panel.style.display = 'block';
|
|
button.textContent = '隐藏';
|
|
} else {
|
|
panel.style.display = 'none';
|
|
button.textContent = '显示';
|
|
}
|
|
});
|
|
}
|
|
|
|
// 更新调试面板状态
|
|
function updateDebugStatus(status, type = 'info') {
|
|
const statusElem = document.getElementById('vip-data-status');
|
|
if (statusElem) {
|
|
statusElem.textContent = status;
|
|
|
|
// 设置不同状态的颜色
|
|
if (status.includes('成功') || type === 'success') {
|
|
statusElem.style.color = 'green';
|
|
} else if (status.includes('错误') || status.includes('未加载') || type === 'warning') {
|
|
statusElem.style.color = 'red';
|
|
} else {
|
|
statusElem.style.color = 'black';
|
|
}
|
|
}
|
|
}
|
|
|
|
// 记录搜索到调试面板
|
|
function logSearchToDebugPanel(phone, result, potentialMatches, searchInfo = {}) {
|
|
const historyDiv = document.getElementById('debug-search-history');
|
|
if (!historyDiv) return;
|
|
|
|
const logEntry = document.createElement('div');
|
|
logEntry.style.cssText = `
|
|
padding: 8px;
|
|
margin: 5px 0;
|
|
background: #fff;
|
|
border: 1px solid #eee;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
`;
|
|
|
|
let htmlContent = `
|
|
<div style="font-weight: bold; margin-bottom: 4px;">搜索时间: ${searchInfo.searchTime || new Date().toLocaleString()}</div>
|
|
<div>输入: ${phone}</div>
|
|
`;
|
|
|
|
if (searchInfo.normalizedPhone && searchInfo.normalizedPhone !== phone) {
|
|
htmlContent += `<div>标准化后: ${searchInfo.normalizedPhone}</div>`;
|
|
}
|
|
|
|
if (result) {
|
|
htmlContent += `
|
|
<div style="margin-top: 4px; padding-top: 4px; border-top: 1px dashed #ddd;">
|
|
<div style="color: green;">✅ 找到VIP客户:</div>
|
|
<div>姓名: ${result.customer_name}</div>
|
|
<div>手机号: ${result.phone}</div>
|
|
<div>车牌号: ${result.plate_number}</div>
|
|
<div>会员等级: ${result.membership_level}</div>
|
|
</div>
|
|
`;
|
|
} else if (potentialMatches && potentialMatches.length > 0) {
|
|
htmlContent += `
|
|
<div style="margin-top: 4px; padding-top: 4px; border-top: 1px dashed #ddd;">
|
|
<div style="color: orange;">⚠️ 潜在匹配 (${potentialMatches.length}):</div>
|
|
`;
|
|
|
|
potentialMatches.slice(0, 3).forEach(match => {
|
|
htmlContent += `
|
|
<div style="margin-top: 2px; padding-left: 10px;">
|
|
<div>${match.customer_name} (${match.phone})</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
htmlContent += `</div>`;
|
|
} else {
|
|
htmlContent += `
|
|
<div style="color: red; margin-top: 4px;">❌ 未找到匹配的VIP客户</div>
|
|
`;
|
|
}
|
|
|
|
logEntry.innerHTML = htmlContent;
|
|
|
|
// 添加到历史记录顶部
|
|
if (historyDiv.firstChild && historyDiv.firstChild.tagName !== 'P') {
|
|
historyDiv.insertBefore(logEntry, historyDiv.firstChild);
|
|
} else {
|
|
historyDiv.innerHTML = '';
|
|
historyDiv.appendChild(logEntry);
|
|
}
|
|
|
|
// 限制历史记录数量
|
|
const maxEntries = 20;
|
|
const entries = historyDiv.querySelectorAll('div');
|
|
if (entries.length > maxEntries) {
|
|
for (let i = maxEntries; i < entries.length; i++) {
|
|
entries[i].remove();
|
|
}
|
|
}
|
|
}
|
|
|
|
// 页面加载时初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 设置调试面板
|
|
setupVIPDebugPanel();
|
|
|
|
// 初始化测试数据
|
|
initializeTestData();
|
|
updateDebugStatus('加载成功，共 ' + window.allVIPCustomers.length + ' 条记录', 'success');
|
|
|
|
// 搜索按钮事件监听
|
|
document.getElementById('search-btn').addEventListener('click', function() {
|
|
const phone = document.getElementById('phone-search').value.trim();
|
|
const result = searchVIPCustomers(phone);
|
|
const resultDiv = document.getElementById('search-result');
|
|
|
|
if (result.matched) {
|
|
resultDiv.innerHTML = `
|
|
<div style="color: green; font-weight: bold;">找到VIP客户!</div>
|
|
<div>姓名: ${result.vip.customer_name}</div>
|
|
<div>手机号: ${result.vip.phone}</div>
|
|
<div>车牌号: ${result.vip.plate_number}</div>
|
|
<div>会员等级: ${result.vip.membership_level}</div>
|
|
`;
|
|
} else if (result.potentialMatches && result.potentialMatches.length > 0) {
|
|
let potentialHtml = `<div style="color: orange; font-weight: bold;">找到${result.potentialMatches.length}个潜在匹配:</div>`;
|
|
result.potentialMatches.forEach(match => {
|
|
potentialHtml += `
|
|
<div style="margin-top: 5px; padding: 5px; background: #f8f9fa;">
|
|
${match.customer_name} - ${match.phone} (${match.plate_number})
|
|
</div>
|
|
`;
|
|
});
|
|
resultDiv.innerHTML = potentialHtml;
|
|
} else {
|
|
resultDiv.innerHTML = `<div style="color: red;">${result.message}</div>`;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |