添加主页面搜索菜单功能

src/pages/index/index.vue

@@ -1,11 +1,30 @@
 <template>
 	<view class="u-wrap">
-		<!-- <view class="u-search-box"> -->
+		<view class="serch txt-16">
-		<!-- <view class="u-search-inner">
+			<uni-search-bar class="flex1" placeholder="请输入菜单名称" @confirm="search" @input="input" cancelButton="none"
-				<u-icon name="search" color="#909399" :size="28"></u-icon>
+				@clear="clearfilterlist">
-				<text class="u-search-text">搜索</text>
+			</uni-search-bar>
-			</view> -->
+			<button class="mini-btn" type="primary" size="mini" style="margin-right:15rpx; font-size: 16px;"
-		<!-- </view> -->
+				@click="search">搜索</button>
+		</view>
+
+		<view class="item-container" style="align-items: center; width: 100%;">
+			<view class="thumb-box" v-for="(item1, index1) in filterList" :key="index1" @click="openCheck(item1.path)"
+				style="text-align: center; ">
+				<view class="" style="position: relative; ">
+					<image class="item-menu-image" :src="'/static/menus/'+item1.componentName" mode="">
+					</image>
+					<view class="">
+						<text class="item-menu-name">{{item1.name}}</text>
+					</view>
+				</view>
+			</view>
+			<view v-if="serchval.length >0 && nomore == true" class="nomore"
+				style=" width: 100%; justify-content: center; margin: 20rpx;">
+				<text style="font-size: 35rpx;">暂无数据</text>
+			</view>
+		</view>
+
 		<view class="u-menu-wrap">
 			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
 				:scroll-into-view="itemId">
@@ -75,7 +94,9 @@
 				count: 1,
 				position: [-10, -10],
 				timer: null,
-				menusCount: {}
+				menusCount: {},
+				filterList: [],
+				serchval: ""
 			}
 		},
 		onLoad() {
@@ -346,6 +367,7 @@
 				uni.navigateTo({
 					url: "/" + url
 				});
+				this.filterList = []
 			},
 			showMessage(message) {
 				this.$refs.comMessage.showMessage(message, res => {
@@ -354,6 +376,36 @@
 					}
 				});
 			},
+			search() {
+				let that = this
+				that.filterList = []
+				that.nomore = false
+				if (that.serchval.length !== 0) {
+					this.tabbar.forEach((v) => {
+						v.children.forEach((i) => {
+							if (i.name.indexOf(that.serchval) !== -1) {
+								// console.log("dddd", i)
+								that.filterList.push(i)
+							}
+						})
+					})
+					if (that.filterList == 0) {
+						that.nomore = true
+					}
+				}
+			},
+			clearfilterlist() {
+				let that = this;
+				that.filterList = [];
+			},
+			input(v) {
+				console.log("222", v)
+				this.serchval = v
+				this.nomore = false
+				if (this.serchval == "") {
+					this.clearfilterlist()
+				}
+			},
 		}
 	}
 </script>
@@ -501,4 +553,27 @@
 		line-height: 36rpx;
 		border-radius: 50%;
 	}
+
+	.serch {
+		width: 100%;
+		display: flex;
+		/* 	height: 130upx; */
+		align-items: center;
+	}
+
+	.flex1 {
+		flex: 1;
+		font-size: 18px;
+	}
+
+	.menu {
+		width: 100%;
+	}
+
+	.nomore {
+		font-size: 30rpx;
+		color: #666;
+		text-align: center;
+		align-items: center;
+	}
 </style>