hookehuyr

feat(search): 添加搜索页面功能

实现搜索页面基础功能,包括搜索框、筛选条件和结果展示
在首页添加搜索框跳转逻辑
更新应用配置添加搜索页面路由
1 /* 1 /*
2 * @Date: 2025-06-28 10:33:00 2 * @Date: 2025-06-28 10:33:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-03 20:40:08 4 + * @LastEditTime: 2025-07-04 10:34:25
5 * @FilePath: /jgdl/src/app.config.js 5 * @FilePath: /jgdl/src/app.config.js
6 - * @Description: 文件描述 6 + * @Description: 配置文件
7 */ 7 */
8 export default { 8 export default {
9 pages: [ 9 pages: [
...@@ -26,6 +26,7 @@ export default { ...@@ -26,6 +26,7 @@ export default {
26 'pages/myAuthCar/index', 26 'pages/myAuthCar/index',
27 'pages/feedBack/index', 27 'pages/feedBack/index',
28 'pages/helpCenter/index', 28 'pages/helpCenter/index',
29 + 'pages/search/index',
29 ], 30 ],
30 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去 31 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
31 { 32 {
......
1 <!-- 1 <!--
2 * @Date: 2025-06-28 10:33:00 2 * @Date: 2025-06-28 10:33:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-04 10:05:07 4 + * @LastEditTime: 2025-07-04 10:30:39
5 * @FilePath: /jgdl/src/pages/index/index.vue 5 * @FilePath: /jgdl/src/pages/index/index.vue
6 * @Description: 捡个电驴首页 6 * @Description: 捡个电驴首页
7 --> 7 -->
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
16 </nut-col> 16 </nut-col>
17 <nut-col span="18"> 17 <nut-col span="18">
18 <!-- Search Bar --> 18 <!-- Search Bar -->
19 - <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff"> 19 + <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @focus="onFocusSearch" shape="round" background="transparent" input-background="#ffffff">
20 <template #leftin> 20 <template #leftin>
21 <Search2 /> 21 <Search2 />
22 </template> 22 </template>
...@@ -169,8 +169,11 @@ import "./index.less"; ...@@ -169,8 +169,11 @@ import "./index.less";
169 const searchValue = ref('') 169 const searchValue = ref('')
170 const favoriteIds = ref([]) 170 const favoriteIds = ref([])
171 171
172 -const onBlurSearch = () => { 172 +const onFocusSearch = () => {
173 - console.warn(searchValue.value) 173 + // 跳转到搜索页面
174 + Taro.navigateTo({
175 + url: '/pages/search/index'
176 + })
174 } 177 }
175 178
176 // Banner图片 179 // Banner图片
......
1 +/*
2 + * @Date: 2025-07-04 10:33:52
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2025-07-04 10:57:35
5 + * @FilePath: /jgdl/src/pages/search/index.config.js
6 + * @Description: 文件描述
7 + */
8 +export default {
9 + navigationBarTitleText: '',
10 + usingComponents: {
11 + },
12 +}
1 +/* 搜索页面样式 */
2 +.search-page {
3 + background-color: #f5f5f5;
4 + min-height: 100vh;
5 +}
6 +
7 +/* 搜索结果列表样式 */
8 +.search-results-list {
9 + width: 100%;
10 + box-sizing: border-box;
11 +
12 + /* 滚动条样式 */
13 + &::-webkit-scrollbar {
14 + width: 6rpx;
15 + }
16 +
17 + &::-webkit-scrollbar-track {
18 + background: #f1f1f1;
19 + border-radius: 3rpx;
20 + }
21 +
22 + &::-webkit-scrollbar-thumb {
23 + background: #c1c1c1;
24 + border-radius: 3rpx;
25 +
26 + &:hover {
27 + background: #a8a8a8;
28 + }
29 + }
30 +}
31 +
32 +/* 加载状态样式 */
33 +.load-more-container {
34 + padding: 40rpx 0;
35 +
36 + .loading-container {
37 + display: flex;
38 + align-items: center;
39 + justify-content: center;
40 + color: #666;
41 +
42 + .loading-spinner {
43 + width: 32rpx;
44 + height: 32rpx;
45 + border: 4rpx solid #f3f3f3;
46 + border-top: 4rpx solid #f97316;
47 + border-radius: 50%;
48 + animation: spin 1s linear infinite;
49 + margin-right: 16rpx;
50 + }
51 +
52 + .loading-text {
53 + font-size: 28rpx;
54 + color: #666;
55 + }
56 + }
57 +
58 + .no-more-data {
59 + padding: 20rpx 0;
60 + text-align: center;
61 + color: #999;
62 + font-size: 28rpx;
63 + }
64 +}
65 +
66 +/* 旋转动画 */
67 +@keyframes spin {
68 + 0% { transform: rotate(0deg); }
69 + 100% { transform: rotate(360deg); }
70 +}
71 +
72 +/* 空状态样式 */
73 +.empty-state {
74 + .empty-icon {
75 + display: flex;
76 + justify-content: center;
77 + align-items: center;
78 + opacity: 0.6;
79 + }
80 +}
81 +
82 +.no-results-state {
83 + .no-results-icon {
84 + display: flex;
85 + justify-content: center;
86 + align-items: center;
87 + opacity: 0.7;
88 + }
89 +}
90 +
91 +/* 搜索结果卡片样式优化 */
92 +.search-results-list {
93 + .grid {
94 + .bg-white {
95 + transition: all 0.3s ease;
96 + border: 1rpx solid #e5e7eb;
97 +
98 + &:hover {
99 + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
100 + transform: translateY(-2rpx);
101 + }
102 + }
103 + }
104 +}
This diff is collapsed. Click to expand it.