From a8f39ece83e82d069858fbe4ca09cd3aec3b89c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=B1=95=E9=B9=8F?= Date: Wed, 19 Nov 2025 12:17:59 +0800 Subject: [PATCH] =?UTF-8?q?fix(vip=E5=8A=9F=E8=83=BD):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8DVIP=E5=AE=A2=E6=88=B7=E6=90=9C=E7=B4=A2=E5=92=8C?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=8A=9F=E8=83=BD=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将全局变量改为window.allVIPCustomers确保数据共享 优化搜索功能添加加载状态和错误处理 改进VIP选择后清除搜索结果和输入框 增强客户类型切换时的数据加载和清除逻辑 --- index.php | 237 +++++++++++++++++++++++++++++----------------- test_vip_fix.html | 136 ++++++++++++++++++++++++++ 2 files changed, 286 insertions(+), 87 deletions(-) create mode 100644 test_vip_fix.html diff --git a/index.php b/index.php index fa16603..ee827c4 100644 --- a/index.php +++ b/index.php @@ -549,7 +549,7 @@ $packages_json = json_encode(array_map(function($package) { console.log('页面初始化完成'); }); - let allVIPCustomers = []; // 全局变量存储所有VIP客户数据 + window.allVIPCustomers = []; // 改为window全局变量，确保在所有函数中可访问 // 加载VIP客户列表 - 返回Promise以支持异步调用 function loadVIPCustomers() { @@ -557,56 +557,54 @@ $packages_json = json_encode(array_map(function($package) { return new Promise((resolve, reject) => { fetch('get_vip_customers.php') - .then(response => { - console.log('VIP客户API响应状态:', response.status); - console.log('VIP客户API响应头:', response.headers); - - if (!response.ok) { - throw new Error(`HTTP ${response.status}: ${response.statusText}`); + .then(response => { + console.log('VIP客户API响应状态:', response.status); + + if (!response.ok) { + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + + return response.text(); + }) + .then(text => { + console.log('VIP客户API原始响应:', text); + + try { + // 先检查是否为空响应 + if (!text || text.trim() === '') { + throw new Error('API返回空响应'); } - return response.text(); - }) - .then(text => { - console.log('VIP客户API原始响应:', text); + const data = JSON.parse(text); - try { - const data = JSON.parse(text); - - // 检查是否是错误响应 - if (data.error) { - throw new Error(data.message || 'API返回错误'); - } - - console.log('VIP客户数据解析成功:', data); - - // 确保数据是数组格式 - if (!Array.isArray(data)) { - throw new Error('API返回数据不是数组格式'); - } - - allVIPCustomers = data; // 存储所有VIP客户数据 - updateVIPSelect(data); // 更新下拉列表 - - console.log('VIP客户列表加载完成，共', data.length, '条记录'); - - // 测试搜索功能 - if (data.length > 0) { - console.log('测试搜索功能...'); - testSearchFunction(); - } - - resolve(data); // 成功完成Promise + // 检查是否是错误响应 + if (data.error) { + throw new Error(data.message || 'API返回错误'); + } + + console.log('VIP客户数据解析成功:', data); + + // 确保数据是数组格式 + if (!Array.isArray(data)) { + throw new Error('API返回数据不是数组格式'); + } + + window.allVIPCustomers = data; // 存储所有VIP客户数据 + updateVIPSelect(data); // 更新下拉列表 + + console.log('VIP客户列表加载完成，共', data.length, '条记录'); + + resolve(data); // 成功完成Promise } catch(e) { console.error('VIP客户数据解析失败:', e); - allVIPCustomers = []; + window.allVIPCustomers = []; reject(e); // 拒绝Promise } }) .catch(error => { console.error('加载VIP客户列表失败:', error); - allVIPCustomers = []; + window.allVIPCustomers = []; reject(error); // 拒绝Promise }); }); @@ -614,12 +612,12 @@ $packages_json = json_encode(array_map(function($package) { // 测试搜索功能 function testSearchFunction() { - if (allVIPCustomers.length > 0) { - console.log('当前VIP客户:', allVIPCustomers); + if (window.allVIPCustomers.length > 0) { + console.log('当前VIP客户:', window.allVIPCustomers); // 模拟搜索测试 - const testTerm = allVIPCustomers[0].customer_name.substring(0, 1); - const results = allVIPCustomers.filter(vip => + const testTerm = window.allVIPCustomers[0].customer_name.substring(0, 1); + const results = window.allVIPCustomers.filter(vip => vip.customer_name.includes(testTerm) || vip.phone.includes(testTerm) ); @@ -640,20 +638,16 @@ $packages_json = json_encode(array_map(function($package) { }); } - // VIP客户搜索功能 - 修复数据加载时序问题 + // VIP客户搜索功能 - 修复版本 function searchVIPCustomers() { console.log('开始搜索VIP客户...'); const searchInput = document.getElementById('vip_search'); const searchResultsDiv = document.getElementById('vip_search_results'); + const vipSelect = document.getElementById('vip_id'); - if (!searchInput) { - console.error('找不到VIP搜索输入框'); - return; - } - - if (!searchResultsDiv) { - console.error('找不到VIP搜索结果容器'); + if (!searchInput || !searchResultsDiv || !vipSelect) { + console.error('找不到必要的DOM元素'); return; } @@ -661,46 +655,74 @@ $packages_json = json_encode(array_map(function($package) { console.log('搜索关键词:', searchTerm); // 检查数据加载状态 - console.log('VIP客户总数:', allVIPCustomers.length); - console.log('VIP客户数据:', allVIPCustomers); + console.log('VIP客户总数:', window.allVIPCustomers.length); + + // 始终显示搜索结果容器 + searchResultsDiv.style.display = 'block'; // 如果数据还没加载完成，先加载数据 - if (allVIPCustomers.length === 0) { + if (window.allVIPCustomers.length === 0) { console.log('VIP客户数据尚未加载，先加载数据...'); + searchResultsDiv.innerHTML = '
正在加载VIP客户数据...
'; + loadVIPCustomers().then(() => { console.log('数据加载完成，重新执行搜索'); - // 重新调用搜索函数 - setTimeout(() => searchVIPCustomers(), 100); + // 数据加载后执行搜索 + performSearch(searchTerm); + }).catch(error => { + console.error('加载VIP数据失败:', error); + searchResultsDiv.innerHTML = '
加载VIP客户数据失败，请重试
'; }); - return; + } else { + // 直接执行搜索 + performSearch(searchTerm); } - if (searchTerm === '') { - clearSearchResults(); - updateVIPSelect(allVIPCustomers); - return; - } - - // 模糊搜索：支持姓名和手机号搜索 - const filteredCustomers = allVIPCustomers.filter(vip => { - const name = (vip.customer_name || '').toLowerCase(); - const phone = (vip.phone || '').toLowerCase(); - const term = searchTerm.toLowerCase(); + function performSearch(term) { + if (term === '') { + searchResultsDiv.innerHTML = ''; + searchResultsDiv.style.display = 'none'; + vipSelect.style.display = 'block'; + return; + } - const nameMatch = name.includes(term); - const phoneMatch = phone.includes(term); + // 模糊搜索：支持姓名和手机号搜索 + const filteredCustomers = window.allVIPCustomers.filter(vip => { + const name = (vip.customer_name || '').toLowerCase(); + const phone = (vip.phone || '').toLowerCase(); + const searchLower = term.toLowerCase(); + + return name.includes(searchLower) || phone.includes(searchLower); + }); - console.log(`检查VIP客户: ${vip.customer_name} (${vip.phone}) - 匹配结果: 姓名=${nameMatch}, 手机=${phoneMatch}`); + console.log('搜索结果数量:', filteredCustomers.length); - return nameMatch || phoneMatch; - }); - - console.log('搜索结果:', filteredCustomers); - displaySearchResults(filteredCustomers, searchTerm); - - // 隐藏下拉列表 - const vipSelect = document.getElementById('vip_id'); - if (vipSelect) { + // 显示搜索结果 + if (filteredCustomers.length === 0) { + searchResultsDiv.innerHTML = '
未找到匹配的VIP客户
'; + } else { + let html = ''; + filteredCustomers.forEach(vip => { + const name = vip.customer_name || ''; + const phone = vip.phone || ''; + const id = vip.id || ''; + + // 高亮处理 + const highlightedName = name.replace(new RegExp(`(${term})`, 'gi'), '$1'); + const highlightedPhone = phone.replace(new RegExp(`(${term})`, 'gi'), '$1'); + + html += ` +
+
${highlightedName}
+
${highlightedPhone}
+ ${vip.car_model || vip.car_number ? `
${vip.car_model || ''} ${vip.car_number || ''}
` : ''} +
+ `; + }); + searchResultsDiv.innerHTML = html; + } + + // 隐藏下拉列表 vipSelect.style.display = 'none'; } } @@ -733,10 +755,11 @@ $packages_json = json_encode(array_map(function($package) { const highlightedPhone = highlightSearchTerm(phone, searchTerm); html += ` -
-
${highlightedName}
-
${highlightedPhone}
-
+
+
${highlightedName}
+
${highlightedPhone}
+ ${vip.car_model || vip.car_number ? `
${vip.car_model || ''} ${vip.car_number || ''}
` : ''} +
`; }); @@ -774,21 +797,32 @@ $packages_json = json_encode(array_map(function($package) { } } - // 选择VIP客户 + // 选择VIP客户 - 修复版本 function selectVIPCustomer(customerId, customerName = '', customerPhone = '') { console.log('选择VIP客户:', customerId, customerName, customerPhone); // 设置下拉选择值 const vipSelect = document.getElementById('vip_id'); + const searchResultsDiv = document.getElementById('vip_search_results'); + const searchInput = document.getElementById('vip_search'); + if (vipSelect) { vipSelect.value = customerId; + vipSelect.style.display = 'block'; console.log('已设置VIP选择值:', customerId); } else { console.error('找不到VIP选择元素'); } // 清除搜索状态 - clearSearchResults(); + if (searchResultsDiv) { + searchResultsDiv.innerHTML = ''; + searchResultsDiv.style.display = 'none'; + } + + if (searchInput) { + searchInput.value = ''; + } // 加载VIP客户信息 loadVIPInfo(); @@ -864,18 +898,47 @@ $packages_json = json_encode(array_map(function($package) { const vipSelectGroup = document.getElementById('vip_select_group'); const newCustomerFields = document.getElementById('new_customer_fields'); + console.log('切换客户类型:', customerType); + if (customerType === 'vip') { vipSelectGroup.style.display = 'block'; newCustomerFields.style.display = 'none'; // 隐藏新客户字段的必填属性 document.getElementById('customer_name').required = false; document.getElementById('phone').required = false; + + // 确保VIP客户数据已加载 + if (window.allVIPCustomers.length === 0) { + console.log('VIP客户数据未加载，开始加载...'); + loadVIPCustomers().then(() => { + console.log('VIP客户数据加载完成，可进行搜索和选择'); + }).catch(error => { + console.error('加载VIP数据失败:', error); + }); + } } else { vipSelectGroup.style.display = 'none'; newCustomerFields.style.display = 'flex'; // 显示新客户字段的必填属性 document.getElementById('customer_name').required = true; document.getElementById('phone').required = true; + + // 清除VIP选择 + const vipSelect = document.getElementById('vip_id'); + if (vipSelect) { + vipSelect.value = ''; + } + + // 清除搜索结果 + const searchResultsDiv = document.getElementById('vip_search_results'); + const searchInput = document.getElementById('vip_search'); + if (searchResultsDiv) { + searchResultsDiv.innerHTML = ''; + searchResultsDiv.style.display = 'none'; + } + if (searchInput) { + searchInput.value = ''; + } } updateSubmitButton(); diff --git a/test_vip_fix.html b/test_vip_fix.html new file mode 100644 index 0000000..c356b58 --- /dev/null +++ b/test_vip_fix.html @@ -0,0 +1,136 @@ + + + + + + VIP功能修复测试 + + + +

VIP功能修复测试报告

+ +
+

修复的问题

+
+
    +
  • 将全局VIP客户数据数组修改为window.allVIPCustomers，确保在所有函数中可访问
    • +
  • 改进了searchVIPCustomers函数，添加加载状态、错误处理和空结果提示
    • +
  • 优化了selectVIPCustomer函数，直接清除搜索结果和输入框
    • +
  • 增强了handleCustomerTypeChange函数，添加数据加载逻辑和清除功能
    • +
+
+ +

JavaScript变量访问修复

+
+

✅ 全局变量已从let allVIPCustomers = [];修改为window.allVIPCustomers = [];

+

✅ 所有函数中对allVIPCustomers的引用都已更新为window.allVIPCustomers

+
+ +

搜索功能优化

+
+

✅ 搜索结果显示逻辑已优化，添加了车辆信息显示

+

✅ 添加了空查询和空结果的处理

+

✅ 实现了搜索关键词高亮功能

+
+ +

VIP选择功能修复

+
+

✅ 修复了选择VIP客户后下拉菜单的更新问题

+

✅ 实现了搜索结果清除和输入框重置

+
+ +

客户类型切换逻辑增强

+
+

✅ 添加了切换到VIP类型时自动加载数据的逻辑

+

✅ 改进了切换回普通客户时的清除逻辑

+

✅ 添加了调试日志以帮助跟踪功能执行

+
+ +

如何测试实际功能

+
+

由于环境限制无法启动PHP服务器，建议在本地环境中进行以下测试：

+
    +
  1. 将修改后的index.php文件部署到支持PHP的服务器上
    2. +
  2. 打开首页，进入预约洗车表单
    3. +
  3. 测试VIP客户类型选择功能
    4. +
  4. 验证VIP客户搜索和模糊匹配功能
    5. +
  5. 确认选择VIP客户后表单正确更新
    6. +
+
+ +

修复代码摘要

+
+

修复的核心问题是JavaScript变量作用域问题和事件处理逻辑不完善：

+
    +
  • 使用全局变量window.allVIPCustomers确保数据在所有函数间共享
    • +
  • 改进了事件处理流程，确保在适当的时机加载数据和更新UI
    • +
  • 添加了完整的错误处理和边界情况处理
    • +
  • 优化了用户界面交互，提高用户体验
    • +
+
+
+ + + + \ No newline at end of file