Browse Source

优化搜索功能,添加规格筛选和高亮显示,修复搜索状态在滚动时重置的问题

Boss
Default User 1 week ago
parent
commit
5e4ba70939
  1. 121
      supply.html

121
supply.html

@ -608,6 +608,25 @@
overscroll-behavior: contain; overscroll-behavior: contain;
/* 只允许垂直触摸操作 */ /* 只允许垂直触摸操作 */
touch-action: pan-y; touch-action: pan-y;
padding-bottom: 20px;
}
/* 响应式调整 - 手机端 */
@media (max-width: 768px) {
.modal-body {
padding: 15px;
padding-bottom: 30px;
}
.form-group {
margin-bottom: 15px;
}
.form-input,
.form-select {
padding: 10px 14px;
font-size: 13px;
}
} }
/* iOS滚动穿透修复 */ /* iOS滚动穿透修复 */
@ -1410,8 +1429,9 @@
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
display: none; display: none;
justify-content: center; justify-content: center;
align-items: center; align-items: flex-start;
z-index: 1500; z-index: 1500;
padding-top: 20px;
} }
.select-modal.active { .select-modal.active {
@ -1422,13 +1442,30 @@
background-color: white; background-color: white;
width: 90%; width: 90%;
max-width: 600px; max-width: 600px;
max-height: 70vh; max-height: 80vh;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
/* 响应式调整 - 手机端 */
@media (max-width: 768px) {
.select-modal {
align-items: flex-start;
padding-top: 10px;
}
.select-content {
width: 95%;
max-height: 85vh;
}
.select-body {
max-height: 60vh;
}
}
.select-header { .select-header {
padding: 20px; padding: 20px;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
@ -1442,6 +1479,14 @@
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain; overscroll-behavior: contain;
max-height: 50vh;
}
/* 响应式调整 - 手机端 */
@media (max-width: 768px) {
.select-body {
max-height: 40vh;
}
} }
.select-search { .select-search {
@ -1686,7 +1731,7 @@
<!-- 搜索框 --> <!-- 搜索框 -->
<div class="search-container"> <div class="search-container">
<div class="search-box"> <div class="search-box">
<input type="text" class="search-input" placeholder="搜索货源名称或地区" id="searchInput" oninput="onSearchInput(event)" onkeypress="onSearchConfirm(event)"> <input type="text" class="search-input" placeholder="搜索货源名称或地区规格" id="searchInput" oninput="onSearchInput(event)" onkeypress="onSearchConfirm(event)">
<div id="clearSearch" class="clear-icon" style="display: none;" onclick="clearSearch()"></div> <div id="clearSearch" class="clear-icon" style="display: none;" onclick="clearSearch()"></div>
</div> </div>
<!-- 当前登录用户信息提示 --> <!-- 当前登录用户信息提示 -->
@ -2139,12 +2184,25 @@
<input type="text" id="regionSearchInput" placeholder="搜索地区" oninput="filterRegionOptions()" style="width: 100%; padding: 10px; border: 1px solid #d9d9d9; border-radius: 8px; font-size: 14px; box-sizing: border-box;"> <input type="text" id="regionSearchInput" placeholder="搜索地区" oninput="filterRegionOptions()" style="width: 100%; padding: 10px; border: 1px solid #d9d9d9; border-radius: 8px; font-size: 14px; box-sizing: border-box;">
<div id="currentRegion" style="margin-top: 10px; padding: 8px 12px; background-color: #f0f8ff; border: 1px solid #91d5ff; border-radius: 4px; font-size: 12px; color: #1890ff;">当前选择: 未选择</div> <div id="currentRegion" style="margin-top: 10px; padding: 8px 12px; background-color: #f0f8ff; border: 1px solid #91d5ff; border-radius: 4px; font-size: 12px; color: #1890ff;">当前选择: 未选择</div>
</div> </div>
<div class="select-body" style="height: 400px;"> <div class="select-body" style="max-height: 50vh;">
<div id="regionOptionsList" style="padding: 10px; height: 100%;"> <div id="regionOptionsList" style="padding: 10px; height: 100%;">
<!-- 省份选择将通过JavaScript动态生成 --> <!-- 省份选择将通过JavaScript动态生成 -->
<div id="provinceList" style="overflow-y: auto; height: 350px;"></div> <div id="provinceList" style="overflow-y: auto; max-height: 40vh;"></div>
</div> </div>
</div> </div>
<!-- 响应式调整 - 手机端 -->
<style>
@media (max-width: 768px) {
#regionOptionsList .select-body {
max-height: 40vh;
}
#provinceList {
max-height: 30vh;
}
}
</style>
<div class="select-footer" style="padding: 16px 20px; display: flex; justify-content: space-between; border-top: 1px solid #f0f0f0; background-color: #fafafa;"> <div class="select-footer" style="padding: 16px 20px; display: flex; justify-content: space-between; border-top: 1px solid #f0f0f0; background-color: #fafafa;">
<button onclick="hideRegionSelectModal()" style="padding: 10px 24px; background-color: #f5f5f5; color: #666; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s ease;">取消</button> <button onclick="hideRegionSelectModal()" style="padding: 10px 24px; background-color: #f5f5f5; color: #666; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s ease;">取消</button>
<button onclick="confirmRegionSelection()" style="padding: 10px 24px; background-color: #1677ff; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s ease;">确定</button> <button onclick="confirmRegionSelection()" style="padding: 10px 24px; background-color: #1677ff; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s ease;">确定</button>
@ -5769,7 +5827,16 @@
// 加载更多货源 // 加载更多货源
function loadMoreSupplies(type) { function loadMoreSupplies(type) {
const pagination = supplyData.pagination[type]; const pagination = supplyData.pagination[type];
const allSupplies = getSuppliesByType(type);
// 获取当前显示的货源列表
let allSupplies;
if (supplyData.searchKeyword) {
// 搜索状态下,使用当前已过滤的货源数据
allSupplies = getSuppliesByType(type);
} else {
// 非搜索状态下,使用原始数据
allSupplies = getSuppliesByType(type);
}
if (pagination.isLoading || !pagination.hasMore) { if (pagination.isLoading || !pagination.hasMore) {
return; return;
@ -5930,6 +5997,13 @@
const region = supply._highlight ? highlightText(supply.region || '', keyword) : (supply.region || ''); const region = supply._highlight ? highlightText(supply.region || '', keyword) : (supply.region || '');
const description = supply._highlight ? highlightText(supply.description || '', keyword) : (supply.description || ''); const description = supply._highlight ? highlightText(supply.description || '', keyword) : (supply.description || '');
// 处理规格高亮
function highlightSpec(spec, keyword) {
if (!keyword || !spec) return spec;
const regex = new RegExp(`(${keyword})`, 'gi');
return spec.replace(regex, '<span style="background-color: #fff3cd; color: #856404; font-weight: 600;">$1</span>');
}
// 处理操作按钮 // 处理操作按钮
let actionsHTML = ''; let actionsHTML = '';
if (supply.status === 'published') { if (supply.status === 'published') {
@ -6031,6 +6105,9 @@
const costprice = costprices[i] || '0'; const costprice = costprices[i] || '0';
const specStatus = specStatuses[i] || '0'; const specStatus = specStatuses[i] || '0';
// 处理规格高亮
const highlightedSpec = supply._highlight ? highlightSpec(spec, keyword) : spec;
// 添加售空标识,根据设备类型显示不同样式 // 添加售空标识,根据设备类型显示不同样式
const soldOutTag = specStatus === '1' ? (DeviceDetector.isMobile() ? const soldOutTag = specStatus === '1' ? (DeviceDetector.isMobile() ?
'<div style="display: flex; justify-content: center; margin-top: 8px;"><span style="color: #f5222d; font-size: 12px; font-weight: 600; padding: 2px 12px; background-color: #fff1f0; border-radius: 12px;">已售空</span></div>' : '<div style="display: flex; justify-content: center; margin-top: 8px;"><span style="color: #f5222d; font-size: 12px; font-weight: 600; padding: 2px 12px; background-color: #fff1f0; border-radius: 12px;">已售空</span></div>' :
@ -6042,7 +6119,7 @@
'border: 1px solid #f0f0f0; padding: 10px; border-radius: 10px; background-color: #fafafa; margin-bottom: 6px; text-align: center;' : 'border: 1px solid #f0f0f0; padding: 10px; border-radius: 10px; background-color: #fafafa; margin-bottom: 6px; text-align: center;' :
'border: 1px solid #f0f0f0; padding: 10px; border-radius: 8px; background-color: #fafafa; margin-bottom: 10px;'; 'border: 1px solid #f0f0f0; padding: 10px; border-radius: 8px; background-color: #fafafa; margin-bottom: 10px;';
specQuantityBoxes += `<div class="spec-quantity-box" style="${specQuantityBoxStyle}">• ${spec}<br>${quantity}件 | ¥${costprice}${soldOutTag}</div>`; specQuantityBoxes += `<div class="spec-quantity-box" style="${specQuantityBoxStyle}">• ${highlightedSpec}<br>${quantity}件 | ¥${costprice}${soldOutTag}</div>`;
} }
return ` return `
@ -6662,7 +6739,34 @@
const result = await response.json(); const result = await response.json();
if (result.success) { if (result.success) {
// 处理搜索结果,添加高亮标记 // 处理搜索结果,添加高亮标记
const highlightedSupplies = result.data.list.map(supply => { let supplies = result.data.list;
// 前端过滤:如果后端没有返回规格搜索结果,在前端进行过滤
if (supplyData.searchKeyword) {
const keyword = supplyData.searchKeyword.toLowerCase();
supplies = supplies.filter(supply => {
// 检查基本字段
if (supply.productName && supply.productName.toLowerCase().includes(keyword)) return true;
if (supply.region && supply.region.toLowerCase().includes(keyword)) return true;
if (supply.description && supply.description.toLowerCase().includes(keyword)) return true;
// 检查规格字段
if (supply.specification) {
if (typeof supply.specification === 'string') {
if (supply.specification.toLowerCase().includes(keyword)) return true;
} else if (Array.isArray(supply.specification)) {
if (supply.specification.some(spec => spec.toLowerCase().includes(keyword))) return true;
}
} else if (supply.spec) {
if (supply.spec.toLowerCase().includes(keyword)) return true;
}
return false;
});
}
// 添加高亮标记
const highlightedSupplies = supplies.map(supply => {
return { return {
...supply, ...supply,
// 标记需要高亮的字段 // 标记需要高亮的字段
@ -6670,6 +6774,7 @@
_searchKeyword: supplyData.searchKeyword _searchKeyword: supplyData.searchKeyword
}; };
}); });
processSupplyData(highlightedSupplies); processSupplyData(highlightedSupplies);
renderSupplyLists(); renderSupplyLists();
} }

Loading…
Cancel
Save