hookehuyr

fix: 修复搜索组件样式和搜索逻辑问题

- 移除计划书页面搜索栏的白色背景,使其与整体设计一致
- 为资料列表页面搜索栏添加底部边距,改善布局间距
- 优化搜索组件样式:移除边框、设置透明背景、调整圆角大小
- 修复搜索页面逻辑:空关键词时返回空数组,避免显示全部数据
......@@ -8,11 +8,13 @@
:disabled="disabled"
confirm-type="search"
:clearable="showClear"
:border="false"
class="search-input"
@clear="handleClear"
@blur="handleBlur"
@focus="handleFocus"
@confirm="handleSearch"
style="background: transparent;"
>
<template #left>
<IconFont
......@@ -230,11 +232,13 @@ function handleClear() {
}
</script>
<style lang="less" scoped>
<style lang="less">
.search-bar {
padding: 0;
background: white;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
border-radius: 44rpx;
border: 1px solid #e5e7eb;
:deep(.nut-input) {
padding: 24rpx 32rpx;
......@@ -242,10 +246,11 @@ function handleClear() {
}
&.search-bar-rounded {
border-radius: 9999rpx;
border-radius: 44rpx;
overflow: hidden;
:deep(.nut-input) {
border-radius: 9999rpx;
border-radius: 44rpx;
}
}
......
......@@ -7,7 +7,7 @@
<view class="bg-[#F9FAFB] z-10">
<NavHeader :title="pageTitle" />
<view class="px-[32rpx] mt-[32rpx]">
<view class="px-[32rpx] mt-[32rpx] mb-[24rpx]">
<SearchBar
v-model="searchValue"
placeholder="搜索资料..."
......
......@@ -9,7 +9,7 @@
<NavHeader title="我的计划书" />
<!-- Search Bar -->
<view class="bg-white px-[24rpx] py-[16rpx]">
<view class="px-[24rpx] py-[16rpx]">
<SearchBar
v-model="searchValue"
placeholder="搜索计划书名称、客户姓名..."
......
......@@ -268,6 +268,12 @@ const initTabsData = () => {
const searchResults = computed(() => {
if (!hasSearched.value) return []
// ✅ 如果没有关键词,返回空数组(不显示全部数据)
if (!searchKeyword.value.trim()) {
console.log('[Search Results] 没有关键词,返回空数组')
return []
}
// 找到当前选中的 tab
const currentTab = tabsData.value.find(tab => tab.id === activeTabId.value)
console.log('[Search Results] activeTabId:', activeTabId.value)
......@@ -279,17 +285,15 @@ const searchResults = computed(() => {
let results = currentTab.list
// Filter by keyword
if (searchKeyword.value.trim()) {
const keyword = searchKeyword.value.toLowerCase()
console.log('[Search Results] 搜索关键词:', keyword)
console.log('[Search Results] 过滤前数量:', results.length)
const keyword = searchKeyword.value.toLowerCase()
console.log('[Search Results] 搜索关键词:', keyword)
console.log('[Search Results] 过滤前数量:', results.length)
results = results.filter(item =>
item.title.toLowerCase().includes(keyword)
)
results = results.filter(item =>
item.title.toLowerCase().includes(keyword)
)
console.log('[Search Results] 过滤后数量:', results.length)
}
console.log('[Search Results] 过滤后数量:', results.length)
return results
})
......