feat: 添加搜索弹窗组件并修改首页搜索交互

实现搜索弹窗组件，包含搜索框、筛选条件和结果展示功能
修改首页搜索框交互，点击后显示搜索弹窗而非跳转页面

@@ -39,6 +39,7 @@ declare module 'vue' {
     PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SearchPopup: typeof import('./src/components/SearchPopup.vue')['default']
     TabBar: typeof import('./src/components/TabBar.vue')['default']
   }
 }

+/* 搜索弹窗样式 */
+.search-page {
+    background-color: #f5f5f5;
+    min-height: 100vh;
+}
+
+/* 搜索头部固定定位 */
+.search-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background-color: #fff;
+}
+
+/* 搜索内容区域 */
+.search-content {
+    margin-top: 200rpx; /* 为固定头部预留空间 */
+}
+
+/* 搜索结果列表样式 */
+.search-results-list {
+    width: 100%;
+    box-sizing: border-box;
+    
+    /* 滚动条样式 */
+    &::-webkit-scrollbar {
+        width: 6rpx;
+    }
+    
+    &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 3rpx;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 3rpx;
+        
+        &:hover {
+            background: #a8a8a8;
+        }
+    }
+}
+
+/* 加载状态样式 */
+.load-more-container {
+    padding: 40rpx 0;
+    
+    .loading-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #666;
+        
+        .loading-spinner {
+            width: 32rpx;
+            height: 32rpx;
+            border: 4rpx solid #f3f3f3;
+            border-top: 4rpx solid #f97316;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-right: 16rpx;
+        }
+        
+        .loading-text {
+            font-size: 28rpx;
+            color: #666;
+        }
+    }
+    
+    .no-more-data {
+        padding: 20rpx 0;
+        text-align: center;
+        color: #999;
+        font-size: 28rpx;
+    }
+}
+
+/* 旋转动画 */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* 空状态样式 */
+.empty-state {
+    .empty-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        opacity: 0.6;
+    }
+}
+
+.no-results-state {
+    .no-results-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        opacity: 0.7;
+    }
+}
+
+/* 搜索结果卡片样式优化 */
+.search-results-list {
+    .grid {
+        .bg-white {
+            transition: all 0.3s ease;
+            border: 1rpx solid #e5e7eb;
+            
+            &:hover {
+                box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+                transform: translateY(-2rpx);
+            }
+        }
+    }
+}
\ No newline at end of file

 <!--
  * @Date: 2025-06-28 10:33:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-04 15:20:58
+ * @LastEditTime: 2025-07-04 16:04:15
  * @FilePath: /jgdl/src/pages/index/index.vue
  * @Description: 捡个电驴首页
 -->
@@ -16,7 +16,7 @@
           </nut-col>
           <nut-col span="18">
             <!-- Search Bar -->
-            <nut-searchbar v-model="searchValue" placeholder="搜索更多商品" @focus="onFocusSearch" shape="round" background="transparent" input-background="#ffffff">
+            <nut-searchbar v-model="searchValue" placeholder="搜索更多商品" :disabled="true" @click-input="onSearchHandle" shape="round" background="transparent" input-background="#ffffff">
               <template #leftin>
                 <Search2 />
               </template>
@@ -153,6 +153,9 @@
 
     <!-- 自定义TabBar -->
     <TabBar />
+
+    <!-- 搜索弹窗 -->
+    <SearchPopup v-model:visible="showSearchPopup" />
   </view>
 </template>
 
@@ -163,17 +166,17 @@ import { ref, onMounted } from 'vue'
 import { useDidShow, useReady } from '@tarojs/taro'
 import { Clock, Star, RectRight, Check, Search2, Shop, Heart1, HeartFill } from '@nutui/icons-vue-taro'
 import TabBar from '@/components/TabBar.vue'
+import SearchPopup from '@/components/SearchPopup.vue'
 import "./index.less";
 
 // 响应式数据
 const searchValue = ref('')
 const favoriteIds = ref([])
+const showSearchPopup = ref(false)
 
-const onFocusSearch = () => {
-  // 跳转到搜索页面
-  Taro.navigateTo({
-    url: '/pages/search/index'
-  })
+const onSearchHandle = () => {
+  // 显示搜索弹窗
+  showSearchPopup.value = true
 }
 
 // Banner图片