wsh5485/carwash_order
Archived
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases 8 Wiki Activity

fix(vip功能): 修复VIP客户搜索和选择功能的问题

Browse Source 
将全局变量改为window.allVIPCustomers确保数据共享
优化搜索功能添加加载状态和错误处理
改进VIP选择后清除搜索结果和输入框
增强客户类型切换时的数据加载和清除逻辑
This commit is contained in:
吴展鹏
2025-11-19 12:17:59 +08:00
parent 5619a1882e
commit a8f39ece83
2 changed files with 286 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+150 -87
View File
@@ -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 = '<div class="loading">正在加载VIP客户数据...</div>';
loadVIPCustomers().then(() => {
console.log('数据加载完成，重新执行搜索');
// 重新调用搜索函数
setTimeout(() => searchVIPCustomers(), 100);
// 数据加载后执行搜索
performSearch(searchTerm);
}).catch(error => {
console.error('加载VIP数据失败:', error);
searchResultsDiv.innerHTML = '<div class="search-error">加载VIP客户数据失败，请重试</div>';
});
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 = '<div class="no-results">未找到匹配的VIP客户</div>';
} 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'), '<span class="highlight">$1</span>');
const highlightedPhone = phone.replace(new RegExp(`(${term})`, 'gi'), '<span class="highlight">$1</span>');
html += `
<div class="vip-search-item" onclick="selectVIPCustomer('${id}', '${name}', '${phone}')">
<div class="customer-name">${highlightedName}</div>
<div class="customer-phone">${highlightedPhone}</div>
${vip.car_model || vip.car_number ? `<div class="customer-car">${vip.car_model || ''} ${vip.car_number || ''}</div>` : ''}
</div>
`;
});
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 += `
<div class="vip-result" onclick="selectVIPCustomer('${id}', '${name}', '${phone}')">
<div class="vip-name">${highlightedName}</div>
<div class="vip-phone">${highlightedPhone}</div>
</div>
<div class="vip-search-item" onclick="selectVIPCustomer('${id}', '${name}', '${phone}')">
<div class="customer-name">${highlightedName}</div>
<div class="customer-phone">${highlightedPhone}</div>
${vip.car_model || vip.car_number ? `<div class="customer-car">${vip.car_model || ''} ${vip.car_number || ''}</div>` : ''}
</div>
`;
});
@@ -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();