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)
358 lines
13 KiB
HTML
358 lines
13 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;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.test-container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.test-title {
|
|
color: #333;
|
|
border-bottom: 2px solid #007bff;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
background: #f8f9fa;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.input-group {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
input, button {
|
|
padding: 8px 12px;
|
|
margin: 5px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
button {
|
|
background: #007bff;
|
|
color: white;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
button:hover {
|
|
background: #0056b3;
|
|
}
|
|
|
|
.search-results {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
border: 1px solid #ddd;
|
|
margin-top: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.vip-item {
|
|
padding: 10px;
|
|
border-bottom: 1px solid #eee;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.vip-item:hover {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.vip-item.selected {
|
|
background: #cce7ff;
|
|
}
|
|
|
|
.highlight {
|
|
background: yellow;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.success {
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.error {
|
|
color: #dc3545;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.status {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.status.success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
.status.error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1 class="test-title">🚀 VIP客户功能测试页面</h1>
|
|
|
|
<!-- 数据加载测试 -->
|
|
<div class="test-section">
|
|
<h3>📊 1. VIP客户数据加载测试</h3>
|
|
<button onclick="testVIPLoading()">测试VIP数据加载</button>
|
|
<div id="loading-status"></div>
|
|
<div id="vip-data-display"></div>
|
|
</div>
|
|
|
|
<!-- 搜索功能测试 -->
|
|
<div class="test-section">
|
|
<h3>🔍 2. VIP客户搜索功能测试</h3>
|
|
<div class="input-group">
|
|
<label>搜索关键词：</label>
|
|
<input type="text" id="search-input" placeholder="输入姓名或手机号" oninput="testSearch()">
|
|
<button onclick="testSearch()">搜索</button>
|
|
<button onclick="clearSearch()">清除</button>
|
|
</div>
|
|
<div id="search-results" class="search-results" style="display: none;"></div>
|
|
</div>
|
|
|
|
<!-- 选择功能测试 -->
|
|
<div class="test-section">
|
|
<h3>✅ 3. VIP客户选择功能测试</h3>
|
|
<div id="selection-status"></div>
|
|
</div>
|
|
|
|
<!-- 集成测试 -->
|
|
<div class="test-section">
|
|
<h3>🔄 4. 集成测试（模拟真实使用场景）</h3>
|
|
<button onclick="runIntegrationTest()">运行完整测试流程</button>
|
|
<div id="integration-results"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let vipCustomers = [];
|
|
let selectedCustomer = null;
|
|
|
|
// 测试VIP客户数据加载
|
|
async function testVIPLoading() {
|
|
const statusDiv = document.getElementById('loading-status');
|
|
const displayDiv = document.getElementById('vip-data-display');
|
|
|
|
statusDiv.innerHTML = '<div class="status">正在加载VIP客户数据...</div>';
|
|
|
|
try {
|
|
console.log('开始测试VIP数据加载...');
|
|
|
|
const response = await fetch('get_vip_customers.php');
|
|
console.log('VIP数据API响应状态:', response.status);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
const text = await response.text();
|
|
console.log('VIP数据原始响应:', text);
|
|
|
|
const data = JSON.parse(text);
|
|
console.log('VIP数据解析结果:', data);
|
|
|
|
vipCustomers = data;
|
|
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
statusDiv.innerHTML = '<div class="status success">✅ VIP客户数据加载成功！</div>';
|
|
|
|
let html = '<h4>VIP客户列表：</h4>';
|
|
html += `<p>总共 <strong>${data.length}</strong> 个VIP客户</p>`;
|
|
html += '<div style="max-height: 200px; overflow-y: auto;">';
|
|
|
|
data.forEach((vip, index) => {
|
|
html += `
|
|
<div style="padding: 5px; border-bottom: 1px solid #eee;">
|
|
<strong>${index + 1}. ${vip.customer_name}</strong> -
|
|
<span>${vip.phone}</span>
|
|
${vip.car_model ? `<br>车型: ${vip.car_model}` : ''}
|
|
${vip.car_number ? `<br>车牌: ${vip.car_number}` : ''}
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
html += '</div>';
|
|
displayDiv.innerHTML = html;
|
|
} else {
|
|
statusDiv.innerHTML = '<div class="status error">❌ VIP客户数据为空或格式错误</div>';
|
|
displayDiv.innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('VIP数据加载测试失败:', error);
|
|
statusDiv.innerHTML = `<div class="status error">❌ VIP数据加载失败: ${error.message}</div>`;
|
|
displayDiv.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
// 测试搜索功能
|
|
function testSearch() {
|
|
const searchTerm = document.getElementById('search-input').value.trim();
|
|
const resultsDiv = document.getElementById('search-results');
|
|
|
|
if (searchTerm === '') {
|
|
resultsDiv.style.display = 'none';
|
|
resultsDiv.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
console.log('开始搜索测试:', searchTerm);
|
|
|
|
// 模拟搜索逻辑
|
|
const results = vipCustomers.filter(vip =>
|
|
(vip.customer_name && vip.customer_name.includes(searchTerm)) ||
|
|
(vip.phone && vip.phone.includes(searchTerm))
|
|
);
|
|
|
|
console.log('搜索结果:', results);
|
|
|
|
let html = `<p>搜索 "<strong>${searchTerm}</strong>" 找到 <strong>${results.length}</strong> 个结果：</p>`;
|
|
|
|
if (results.length === 0) {
|
|
html += '<p>❌ 未找到匹配的VIP客户</p>';
|
|
} else {
|
|
results.forEach((vip, index) => {
|
|
// 高亮搜索关键词
|
|
const name = highlightSearchTerm(vip.customer_name, searchTerm);
|
|
const phone = highlightSearchTerm(vip.phone, searchTerm);
|
|
|
|
html += `
|
|
<div class="vip-item" onclick="selectVipCustomerTest('${vip.id}', '${vip.customer_name}', '${vip.phone}')">
|
|
<strong>${name}</strong> - ${phone}
|
|
${vip.car_model ? `<br><small>车型: ${vip.car_model}</small>` : ''}
|
|
</div>
|
|
`;
|
|
});
|
|
}
|
|
|
|
resultsDiv.innerHTML = html;
|
|
resultsDiv.style.display = 'block';
|
|
}
|
|
|
|
// 高亮搜索关键词
|
|
function highlightSearchTerm(text, searchTerm) {
|
|
if (!text || !searchTerm) return text || '';
|
|
const regex = new RegExp(`(${searchTerm})`, 'gi');
|
|
return text.replace(regex, '<span class="highlight">$1</span>');
|
|
}
|
|
|
|
// 清除搜索
|
|
function clearSearch() {
|
|
document.getElementById('search-input').value = '';
|
|
document.getElementById('search-results').style.display = 'none';
|
|
document.getElementById('search-results').innerHTML = '';
|
|
}
|
|
|
|
// 测试选择VIP客户
|
|
function selectVipCustomerTest(id, name, phone) {
|
|
selectedCustomer = { id, name, phone };
|
|
|
|
const statusDiv = document.getElementById('selection-status');
|
|
statusDiv.innerHTML = `
|
|
<div class="status success">
|
|
✅ 成功选择VIP客户: <strong>${name}</strong> (${phone})
|
|
</div>
|
|
`;
|
|
|
|
// 清除搜索结果
|
|
clearSearch();
|
|
|
|
console.log('VIP客户选择测试:', selectedCustomer);
|
|
}
|
|
|
|
// 运行集成测试
|
|
async function runIntegrationTest() {
|
|
const resultsDiv = document.getElementById('integration-results');
|
|
resultsDiv.innerHTML = '<div class="status">正在运行集成测试...</div>';
|
|
|
|
let testResults = [];
|
|
|
|
// 测试1: 加载VIP数据
|
|
try {
|
|
await testVIPLoading();
|
|
testResults.push('✅ VIP数据加载测试通过');
|
|
} catch (error) {
|
|
testResults.push(`❌ VIP数据加载测试失败: ${error.message}`);
|
|
}
|
|
|
|
// 测试2: 搜索功能
|
|
if (vipCustomers.length > 0) {
|
|
const testTerm = vipCustomers[0].customer_name.substring(0, 1);
|
|
const results = vipCustomers.filter(vip =>
|
|
(vip.customer_name && vip.customer_name.includes(testTerm)) ||
|
|
(vip.phone && vip.phone.includes(testTerm))
|
|
);
|
|
|
|
if (results.length > 0) {
|
|
testResults.push(`✅ 搜索功能测试通过 (搜索"${testTerm}"找到${results.length}个结果)`);
|
|
} else {
|
|
testResults.push(`❌ 搜索功能测试失败 (搜索"${testTerm}"未找到结果)`);
|
|
}
|
|
|
|
// 测试3: 选择功能
|
|
const testCustomer = vipCustomers[0];
|
|
selectVipCustomerTest(testCustomer.id, testCustomer.customer_name, testCustomer.phone);
|
|
|
|
if (selectedCustomer && selectedCustomer.id === testCustomer.id) {
|
|
testResults.push('✅ VIP客户选择功能测试通过');
|
|
} else {
|
|
testResults.push('❌ VIP客户选择功能测试失败');
|
|
}
|
|
} else {
|
|
testResults.push('❌ 无法测试搜索和选择功能 (无VIP客户数据)');
|
|
}
|
|
|
|
// 显示测试结果
|
|
let resultsHtml = '<h4>集成测试结果：</h4>';
|
|
testResults.forEach(result => {
|
|
resultsHtml += `<p>${result}</p>`;
|
|
});
|
|
|
|
const successCount = testResults.filter(r => r.startsWith('✅')).length;
|
|
const totalTests = testResults.length;
|
|
|
|
resultsHtml += `<hr><p><strong>总体结果：${successCount}/${totalTests} 项测试通过</strong></p>`;
|
|
|
|
if (successCount === totalTests) {
|
|
resultsHtml += '<p class="success">🎉 所有测试都通过了！VIP客户功能工作正常。</p>';
|
|
} else {
|
|
resultsHtml += '<p class="error">⚠️ 部分测试失败，请检查相关功能。</p>';
|
|
}
|
|
|
|
resultsDiv.innerHTML = resultsHtml;
|
|
}
|
|
|
|
// 页面加载完成后自动运行测试
|
|
window.addEventListener('load', function() {
|
|
console.log('VIP功能测试页面加载完成');
|
|
setTimeout(() => {
|
|
testVIPLoading();
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |