hookehuyr

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

实现搜索页面基础功能,包括搜索框、筛选条件和结果展示
在首页添加搜索框跳转逻辑
更新应用配置添加搜索页面路由
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-03 20:40:08
* @LastEditTime: 2025-07-04 10:34:25
* @FilePath: /jgdl/src/app.config.js
* @Description: 文件描述
* @Description: 配置文件
*/
export default {
pages: [
......@@ -26,6 +26,7 @@ export default {
'pages/myAuthCar/index',
'pages/feedBack/index',
'pages/helpCenter/index',
'pages/search/index',
],
subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
{
......
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-04 10:05:07
* @LastEditTime: 2025-07-04 10:30:39
* @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="搜索品牌型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @focus="onFocusSearch" shape="round" background="transparent" input-background="#ffffff">
<template #leftin>
<Search2 />
</template>
......@@ -169,8 +169,11 @@ import "./index.less";
const searchValue = ref('')
const favoriteIds = ref([])
const onBlurSearch = () => {
console.warn(searchValue.value)
const onFocusSearch = () => {
// 跳转到搜索页面
Taro.navigateTo({
url: '/pages/search/index'
})
}
// Banner图片
......
/*
* @Date: 2025-07-04 10:33:52
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-04 10:57:35
* @FilePath: /jgdl/src/pages/search/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '',
usingComponents: {
},
}
/* 搜索页面样式 */
.search-page {
background-color: #f5f5f5;
min-height: 100vh;
}
/* 搜索结果列表样式 */
.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);
}
}
}
}
This diff is collapsed. Click to expand it.