feat: 优化搜索页面交互体验 - 修复搜索触发逻辑，优化页面显示和搜索状态指示

pages/activityList/index.vue

@@ -2,11 +2,14 @@
 	<view class="page">
 		<!-- 固定搜索栏 -->
 		<view class="fixed-search" :style="{ top: statusBaeHeight + 'px' }">
-			<SearchBar 
+			<view class="search-box" @tap="toSearch">
-				:placeholders="'搜索酒款/品牌'" 
+				<view class="search-input-container">
-				:bgcolor="'#19367A'" 
+					<text class="search-placeholder">输入酒款名称，品牌名称，啤酒风格</text>
-				:borderRs="'0px 0px 24rpx 24rpx'"
+					<view class="search-icon-container">
-			/>
+						<uni-icons type="search" size="24" color="#fff"></uni-icons>
+					</view>
+				</view>
+			</view>
 		</view>
 
 		<!-- 筛选栏 -->
@@ -48,14 +51,11 @@
 	} from '@/api/platform.js'
 	import commonTitle from '@/components/commonTitle.vue'
 	import rowBeer from '@/components/rowBeer.vue'
-	import SearchBar from '@/components/SearchBar.vue';
-
 
 	export default {
 		components: {
 			commonTitle,
 			rowBeer,
-			SearchBar,
 		},
 		data() {
 			return {
@@ -113,18 +113,12 @@
 					uni.navigateTo({
 						url: '/pages/index/newBeer'
 					})
-					// uni.navigateTo({
-					// 	url: '/pagesActivity/newWine'
-					// })
-					// uni.navigateTo({
-					// 	url: '/pages/activityList/details'
-					// })
 				}
 			},
 			// 搜索
 			toSearch() {
 				uni.navigateTo({
-					url: '/pages/index/searchBeer'
+					url: '/pagesActivity/homeSearch'
 				})
 			},
 			// 查询广告弹窗 banner列表
@@ -200,32 +194,70 @@
 </script>
 
 <style lang="scss" scoped>
-	.page {
+.page {
 	background: #F9F9F9;
 	height: 100vh;
 	overflow-y: auto;
-	}
+}
 
-	.fixed-search {
+.fixed-search {
 	position: fixed;
 	left: 0;
 	right: 0;
 	z-index: 1001; /* 提高导航栏层级 */
 	background-color: #19367A;
 	border-radius: 0 0 24rpx 24rpx;		
+	padding: 20rpx 0;
+	transition: all 0.3s ease;
+}
 
-		/* 保持搜索栏原有圆角 */
+.search-box {
-		:deep(.search-container) {
+	padding: 0 30rpx;
-			border-radius: 0 0 24rpx 24rpx !important;
+}
-		}
-	}
 
-	.content-container {
+.search-input-container {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	background-color: #fff;
+	border-radius: 30rpx;
+	overflow: hidden;
+	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+	height: 80rpx;
+	position: relative;
+}
+
+.search-placeholder {
+	flex: 1;
+	padding: 0 20rpx;
+	font-size: 28rpx;
+	color: #999;
+	position: relative;
+}
+
+.search-icon-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 80rpx;
+	height: 80rpx;
+	background-color: #D42E78;
+	border-radius: 0 30rpx 30rpx 0;
+	color: #fff;
+	transition: all 0.3s ease;
+	
+	&:active {
+		transform: scale(0.95);
+		opacity: 0.9;
+	}
+}
+
+.content-container {
 	padding-top: 0rpx;
-	}
+}
 
-	/* 筛选导航栏 */
+/* 筛选导航栏 */
-	.filter-bar {
+.filter-bar {
 	position: sticky;
 	top:80rpx;
 	z-index: 1000;
@@ -233,21 +265,23 @@
 	box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
 	margin-top: -40rpx;
 	padding-top: 40rpx;
-	}
+}
 
-	.choose-center {
+.choose-center {
 	height: 112rpx;
 	width: 100%;
 	padding: 24rpx;
 	background: #FFFFFF;
+}
 
-		.choose-navs {
+.choose-navs {
 	// 导航选项的样式
 	font-family: Roboto;
 	font-size: 24rpx;
 	font-weight: 500;
+}
 
-			.choose-navs-txt {
+.choose-navs-txt {
 	// 导航选项文本的样式
 	width: 144rpx;
 	height: 64rpx;
@@ -255,20 +289,21 @@
 	border-radius: 12rpx;
 	background: #F9F9F9;
 	margin-right: 16rpx;
+	
 	&.actives {
 		// 选中状态的样式
 		color: #FFF;
 		background: #D42E78;
 	}
-			}
+}
-		}
-	}
 
-	.title-box {
+.title-box {
 	padding: 24rpx 32rpx;
 	// margin-bottom: 24rpx;
 	// margin-top: 24rpx;
-		.title {
+}
+
+.title {
 	font-size: 32rpx;
 	color: #030303;
 	font-weight: 600;
@@ -279,9 +314,9 @@
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-		}
+}
 
-		.sub {
+.sub {
 	font-family: Roboto;
 	font-size: 24rpx;
 	font-weight: normal;
@@ -295,6 +330,5 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
-		}
+}
-	}
 </style>