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,101 +194,141 @@
 </script>
 
 <style lang="scss" scoped>
-	.page {
+.page {
-		background: #F9F9F9;
+	background: #F9F9F9;
-		height: 100vh;
+	height: 100vh;
-		overflow-y: auto;
+	overflow-y: auto;
+}
+
+.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 {
+	padding: 0 30rpx;
+}
+
+.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;
 	}
+}
 
-	.fixed-search {
+.content-container {
-		position: fixed;
+	padding-top: 0rpx;
-		left: 0;
+}
-		right: 0;
-		z-index: 1001; /* 提高导航栏层级 */
-		background-color: #19367A;
-		border-radius: 0 0 24rpx 24rpx;		
 
-		/* 保持搜索栏原有圆角 */
+/* 筛选导航栏 */
-		:deep(.search-container) {
+.filter-bar {
-			border-radius: 0 0 24rpx 24rpx !important;
+	position: sticky;
-		}
+	top:80rpx;
+	z-index: 1000;
+	background: #FFFFFF;
+	box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
+	margin-top: -40rpx;
+	padding-top: 40rpx;
+}
+
+.choose-center {
+	height: 112rpx;
+	width: 100%;
+	padding: 24rpx;
+	background: #FFFFFF;
+}
+
+.choose-navs {
+	// 导航选项的样式
+	font-family: Roboto;
+	font-size: 24rpx;
+	font-weight: 500;
+}
+
+.choose-navs-txt {
+	// 导航选项文本的样式
+	width: 144rpx;
+	height: 64rpx;
+	line-height: 64rpx;
+	border-radius: 12rpx;
+	background: #F9F9F9;
+	margin-right: 16rpx;
+	
+	&.actives {
+		// 选中状态的样式
+		color: #FFF;
+		background: #D42E78;
 	}
+}
 
-	.content-container {
+.title-box {
-		padding-top: 0rpx;
+	padding: 24rpx 32rpx;
-	}
+	// margin-bottom: 24rpx;
+	// margin-top: 24rpx;
+}
 
-	/* 筛选导航栏 */
+.title {
-	.filter-bar {
+	font-size: 32rpx;
-		position: sticky;
+	color: #030303;
-		top:80rpx;
+	font-weight: 600;
-		z-index: 1000;
+	line-height: 48rpx;
-		background: #FFFFFF;
+	letter-spacing: normal;
-		box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
+	margin-bottom: 8rpx;
-		margin-top: -40rpx;
+	max-width: 500rpx;
-		padding-top: 40rpx;
+	white-space: nowrap;
-	}
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 
-	.choose-center {
+.sub {
-		height: 112rpx;
+	font-family: Roboto;
-		width: 100%;
+	font-size: 24rpx;
-		padding: 24rpx;
+	font-weight: normal;
-		background: #FFFFFF;
+	line-height: 32rpx;
-		
+	display: flex;
-		.choose-navs {
+	align-items: center;
-			// 导航选项的样式
+	letter-spacing: normal;
-			font-family: Roboto;
+	color: #606060;
-			font-size: 24rpx;
+	margin-bottom: 8rpx;
-			font-weight: 500;
+	max-width: 500rpx;
-			
+	white-space: nowrap;
-			.choose-navs-txt {
+	text-overflow: ellipsis;
-				// 导航选项文本的样式
+	overflow: hidden;
-				width: 144rpx;
+}
-				height: 64rpx;
-				line-height: 64rpx;
-				border-radius: 12rpx;
-				background: #F9F9F9;
-				margin-right: 16rpx;
-				&.actives {
-					// 选中状态的样式
-					color: #FFF;
-					background: #D42E78;
-				}
-			}
-		}
-	}
-	
-	.title-box {
-		padding: 24rpx 32rpx;
-		// margin-bottom: 24rpx;
-		// margin-top: 24rpx;
-		.title {
-			font-size: 32rpx;
-			color: #030303;
-			font-weight: 600;
-			line-height: 48rpx;
-			letter-spacing: normal;
-			margin-bottom: 8rpx;
-			max-width: 500rpx;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-		
-		.sub {
-			font-family: Roboto;
-			font-size: 24rpx;
-			font-weight: normal;
-			line-height: 32rpx;
-			display: flex;
-			align-items: center;
-			letter-spacing: normal;
-			color: #606060;
-			margin-bottom: 8rpx;
-			max-width: 500rpx;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-		}
-	}
 </style>