fix: 修复搜索组件样式和搜索逻辑问题
- 移除计划书页面搜索栏的白色背景,使其与整体设计一致 - 为资料列表页面搜索栏添加底部边距,改善布局间距 - 优化搜索组件样式:移除边框、设置透明背景、调整圆角大小 - 修复搜索页面逻辑:空关键词时返回空数组,避免显示全部数据
Showing
4 changed files
with
16 additions
and
7 deletions
| ... | @@ -8,11 +8,13 @@ | ... | @@ -8,11 +8,13 @@ |
| 8 | :disabled="disabled" | 8 | :disabled="disabled" |
| 9 | confirm-type="search" | 9 | confirm-type="search" |
| 10 | :clearable="showClear" | 10 | :clearable="showClear" |
| 11 | + :border="false" | ||
| 11 | class="search-input" | 12 | class="search-input" |
| 12 | @clear="handleClear" | 13 | @clear="handleClear" |
| 13 | @blur="handleBlur" | 14 | @blur="handleBlur" |
| 14 | @focus="handleFocus" | 15 | @focus="handleFocus" |
| 15 | @confirm="handleSearch" | 16 | @confirm="handleSearch" |
| 17 | + style="background: transparent;" | ||
| 16 | > | 18 | > |
| 17 | <template #left> | 19 | <template #left> |
| 18 | <IconFont | 20 | <IconFont |
| ... | @@ -230,11 +232,13 @@ function handleClear() { | ... | @@ -230,11 +232,13 @@ function handleClear() { |
| 230 | } | 232 | } |
| 231 | </script> | 233 | </script> |
| 232 | 234 | ||
| 233 | -<style lang="less" scoped> | 235 | +<style lang="less"> |
| 234 | .search-bar { | 236 | .search-bar { |
| 235 | padding: 0; | 237 | padding: 0; |
| 236 | background: white; | 238 | background: white; |
| 237 | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | 239 | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); |
| 240 | + border-radius: 44rpx; | ||
| 241 | + border: 1px solid #e5e7eb; | ||
| 238 | 242 | ||
| 239 | :deep(.nut-input) { | 243 | :deep(.nut-input) { |
| 240 | padding: 24rpx 32rpx; | 244 | padding: 24rpx 32rpx; |
| ... | @@ -242,10 +246,11 @@ function handleClear() { | ... | @@ -242,10 +246,11 @@ function handleClear() { |
| 242 | } | 246 | } |
| 243 | 247 | ||
| 244 | &.search-bar-rounded { | 248 | &.search-bar-rounded { |
| 245 | - border-radius: 9999rpx; | 249 | + border-radius: 44rpx; |
| 250 | + overflow: hidden; | ||
| 246 | 251 | ||
| 247 | :deep(.nut-input) { | 252 | :deep(.nut-input) { |
| 248 | - border-radius: 9999rpx; | 253 | + border-radius: 44rpx; |
| 249 | } | 254 | } |
| 250 | } | 255 | } |
| 251 | 256 | ... | ... |
| ... | @@ -7,7 +7,7 @@ | ... | @@ -7,7 +7,7 @@ |
| 7 | <view class="bg-[#F9FAFB] z-10"> | 7 | <view class="bg-[#F9FAFB] z-10"> |
| 8 | <NavHeader :title="pageTitle" /> | 8 | <NavHeader :title="pageTitle" /> |
| 9 | 9 | ||
| 10 | - <view class="px-[32rpx] mt-[32rpx]"> | 10 | + <view class="px-[32rpx] mt-[32rpx] mb-[24rpx]"> |
| 11 | <SearchBar | 11 | <SearchBar |
| 12 | v-model="searchValue" | 12 | v-model="searchValue" |
| 13 | placeholder="搜索资料..." | 13 | placeholder="搜索资料..." | ... | ... |
| ... | @@ -9,7 +9,7 @@ | ... | @@ -9,7 +9,7 @@ |
| 9 | <NavHeader title="我的计划书" /> | 9 | <NavHeader title="我的计划书" /> |
| 10 | 10 | ||
| 11 | <!-- Search Bar --> | 11 | <!-- Search Bar --> |
| 12 | - <view class="bg-white px-[24rpx] py-[16rpx]"> | 12 | + <view class="px-[24rpx] py-[16rpx]"> |
| 13 | <SearchBar | 13 | <SearchBar |
| 14 | v-model="searchValue" | 14 | v-model="searchValue" |
| 15 | placeholder="搜索计划书名称、客户姓名..." | 15 | placeholder="搜索计划书名称、客户姓名..." | ... | ... |
| ... | @@ -268,6 +268,12 @@ const initTabsData = () => { | ... | @@ -268,6 +268,12 @@ const initTabsData = () => { |
| 268 | const searchResults = computed(() => { | 268 | const searchResults = computed(() => { |
| 269 | if (!hasSearched.value) return [] | 269 | if (!hasSearched.value) return [] |
| 270 | 270 | ||
| 271 | + // ✅ 如果没有关键词,返回空数组(不显示全部数据) | ||
| 272 | + if (!searchKeyword.value.trim()) { | ||
| 273 | + console.log('[Search Results] 没有关键词,返回空数组') | ||
| 274 | + return [] | ||
| 275 | + } | ||
| 276 | + | ||
| 271 | // 找到当前选中的 tab | 277 | // 找到当前选中的 tab |
| 272 | const currentTab = tabsData.value.find(tab => tab.id === activeTabId.value) | 278 | const currentTab = tabsData.value.find(tab => tab.id === activeTabId.value) |
| 273 | console.log('[Search Results] activeTabId:', activeTabId.value) | 279 | console.log('[Search Results] activeTabId:', activeTabId.value) |
| ... | @@ -279,7 +285,6 @@ const searchResults = computed(() => { | ... | @@ -279,7 +285,6 @@ const searchResults = computed(() => { |
| 279 | let results = currentTab.list | 285 | let results = currentTab.list |
| 280 | 286 | ||
| 281 | // Filter by keyword | 287 | // Filter by keyword |
| 282 | - if (searchKeyword.value.trim()) { | ||
| 283 | const keyword = searchKeyword.value.toLowerCase() | 288 | const keyword = searchKeyword.value.toLowerCase() |
| 284 | console.log('[Search Results] 搜索关键词:', keyword) | 289 | console.log('[Search Results] 搜索关键词:', keyword) |
| 285 | console.log('[Search Results] 过滤前数量:', results.length) | 290 | console.log('[Search Results] 过滤前数量:', results.length) |
| ... | @@ -289,7 +294,6 @@ const searchResults = computed(() => { | ... | @@ -289,7 +294,6 @@ const searchResults = computed(() => { |
| 289 | ) | 294 | ) |
| 290 | 295 | ||
| 291 | console.log('[Search Results] 过滤后数量:', results.length) | 296 | console.log('[Search Results] 过滤后数量:', results.length) |
| 292 | - } | ||
| 293 | 297 | ||
| 294 | return results | 298 | return results |
| 295 | }) | 299 | }) | ... | ... |
-
Please register or login to post a comment