diff --git a/App.vue b/App.vue
index 4742415..35e8216 100644
--- a/App.vue
+++ b/App.vue
@@ -75,6 +75,11 @@
 		transition: all 0.2s ease;
 	}
 
+	.topbar {
+		background-color: $uni-color-error;
+		height: 176rpx;
+	}
+
 	//占位 空符
 	.extra-space {
 		height: 156rpx;
diff --git a/components/cartBut/cartBut.vue b/components/cartBut/cartBut.vue
index 79867b7..843c31b 100644
--- a/components/cartBut/cartBut.vue
+++ b/components/cartBut/cartBut.vue
@@ -28,16 +28,68 @@
 </template>
 
 <script>
+	import {
+		formatPrice,
+		totalPrice
+	} from '@/utils/index.js'
 	export default {
 		name: "cartBut",
 		data() {
 			return {
 
-			};
+			}
+		},
+		methods: {
+			// 购物车价格总和
+			totalPrice,
+			//"选好了"执行
+			handleSeled() {
+				const regex = /^(\+?\d{1,4}[\s-]?)?\d{3}\*{4}\d{4}$/
+				if (regex.test(this.$store.state.userInfo.tel)) { //手机号合法
+					if (Number(this.minimumOrderDifference) <= 0) { //起送价判断
+						uni.navigateTo({ //跳转到订单页面
+							url: '/pages/shop/confirm'
+						})
+					} else {
+						uni.showToast({
+							title: '未达到起送价',
+							icon: 'error'
+						})
+					}
+				} else { //手机号不合法 获取为空
+					uni.navigateTo({ //跳转到获取手机号页面
+						url: '/pages/main/getTel'
+					})
+				}
+			}
+		},
+		computed: {
+			//购物车总价
+			total() {
+				return this.totalPrice(this.$store.state.cartList)
+			},
+			//起送差价
+			minimumOrderDifference() {
+				return Number(this.shopCon.price_min) - Number(this.total)
+			},
+			//商品信息
+			shopCon() {
+				return this.$store.state.shopCon
+			},
+		},
+		filters: {
+			formatPrice //格式化价格
 		}
 	}
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+	.cartBox {
+		z-index: 10071;
+		width: calc(100vw - 48rpx);
+		height: 156rpx;
+		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 1) 100%);
+		position: absolute;
+		bottom: 0rpx;
+	}
 </style>
\ No newline at end of file
diff --git a/pages/shop/list.vue b/pages/shop/list.vue
index 0043c2e..7781886 100644
--- a/pages/shop/list.vue
+++ b/pages/shop/list.vue
@@ -1,10 +1,16 @@
 <template>
 	<view class="vh100 flex column">
 		<!-- topbar -->
-		<u-navbar title="开始点餐" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
+		<u-navbar bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
 			<view class="u-nav-slot" slot="left">
 				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
 			</view>
+			<view class="u-nav-slot ofh" slot="center" @click="handlerGoSearch">
+				<view class="searchBut flex mac fz28 fcb p-l-24 rad16">
+					<u-icon name="search" color="#e5e5e5" size="28"></u-icon>
+					搜一搜你想吃的餐品
+				</view>
+			</view>
 		</u-navbar>
 		<!-- 地址框 -->
 		<view class="flex column p-24 borderB bg-w">
@@ -61,33 +67,7 @@
 			</scroll-view>
 		</view>
 		<!-- 购物车按钮 -->
-		<view class="p-l-24 p-r-24 cartBox">
-			<view v-if="total === 0" class="rad16 bg-g flex ofh" style="height: 108rpx;">
-				<view class="bg-b" style="width: 152rpx;"></view>
-				<view class="flex1 flex mac p-l-24">
-					<u--image src="/static/icons/cafe-48.svg" width="96rpx" height="96rpx" />
-					<view class="m-l-12 fz36 fb">未选购餐品</view>
-				</view>
-			</view>
-			<view v-else class="bg-m rad16 flex" style="height: 108rpx;">
-				<view class="flex md p-b-12">
-					<u--image src="/static/icons/planeBox-100.svg" width="136rpx" height="136rpx"
-						@click="$store.commit('setCartShow',!$store.state.cartShow)" />
-				</view>
-				<view class="fci fz36 flex1 flex msb">
-					<view class="flex1 p-l-12 flex column mc"
-						@click="$store.commit('setCartShow',!$store.state.cartShow)">
-						<view class="fz36 fb">¥{{total | formatPrice}}</view>
-						<view class="fz24" v-if="minimumOrderDifference>0">还差¥{{minimumOrderDifference | formatPrice}}起送
-						</view>
-					</view>
-					<view class="flex column mac mc" style="width: 180rpx;" @click="handleSeled">
-						<view class="fz36">选好了</view>
-						<view class="fz24">Order</view>
-					</view>
-				</view>
-			</view>
-		</view>
+		<cartBut></cartBut>
 		<!-- 购物车折叠层 -->
 		<cartFold></cartFold>
 	</view>
@@ -95,9 +75,7 @@
 
 <script>
 	import {
-		formatTime,
-		formatPrice,
-		totalPrice
+		formatTime
 	} from '@/utils/index.js'
 
 	export default {
@@ -136,10 +114,6 @@
 			shopCon() {
 				return this.$store.state.shopCon
 			},
-			//起送差价
-			minimumOrderDifference() {
-				return Number(this.shopCon.price_min) - Number(this.total)
-			},
 			//分类列表
 			menuList() {
 				return this.$store.state.menuList
@@ -148,14 +122,14 @@
 			spuList() {
 				return this.$store.state.spuList
 			},
-			//购物车总价
-			total() {
-				return this.totalPrice(this.$store.state.cartList)
-			}
 		},
 		methods: {
-			// 购物车价格总和
-			totalPrice,
+			//跳转到搜索页
+			handlerGoSearch() {
+				uni.navigateTo({
+					url: '/pages/shop/search'
+				})
+			},
 			// 点击左边的栏目切换
 			async swichMenu(index) {
 				clearTimeout(this.scrollingTiemout) //每次点击导航栏重置timeout延时
@@ -267,31 +241,20 @@
 					}
 				}, 10)
 			},
-			//"选好了"执行
-			handleSeled() {
-				const regex = /^(\+?\d{1,4}[\s-]?)?\d{3}\*{4}\d{4}$/
-				if (regex.test(this.$store.state.userInfo.tel)) { //手机号合法
-					uni.navigateTo({ //跳转到订单页面
-						url: '/pages/shop/confirm'
-					})
-				} else { //手机号不合法 获取为空
-					uni.navigateTo({ //跳转到获取手机号页面
-						url: '/pages/main/getTel'
-					})
-				}
-			}
 		},
 		filters: {
 			formatTime, //格式化时间
-			formatPrice //格式化价格
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.topbar {
-		background-color: $uni-color-error;
-		height: 176rpx;
+	.searchBut {
+		margin-right: 100rpx;
+		color: #e5e5e5;
+		width: 360rpx;
+		height: 64rpx;
+		background-color: rgba(0, 0, 0, 0.15);
 	}
 
 	.backBut {
@@ -337,13 +300,4 @@
 	.menuItemH {
 		background-color: $uni-color-error;
 	}
-
-	.cartBox {
-		z-index: 10071;
-		width: calc(100vw - 48rpx);
-		height: 156rpx;
-		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 1) 100%);
-		position: absolute;
-		bottom: 0rpx;
-	}
 </style>
\ No newline at end of file
diff --git a/pages/shop/search.vue b/pages/shop/search.vue
new file mode 100644
index 0000000..d9145bd
--- /dev/null
+++ b/pages/shop/search.vue
@@ -0,0 +1,97 @@
+<template>
+	<view class="vh100 flex column">
+		<!-- topbar -->
+		<u-navbar title="搜索商品" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
+			<view class="u-nav-slot" slot="left">
+				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
+			</view>
+		</u-navbar>
+
+		<!-- 搜索框 -->
+		<view class="search-container flex mac m-l-24 m-r-24">
+			<input class="borderno rad16 m-r-12 bg-w fz28 p-12 flex1" v-model="searchQuery" placeholder="请输入商品名称"
+				@input="handleSearch" />
+			<u-icon name="search" color="#d43030" size="32" @click="handleSearch"></u-icon>
+		</view>
+
+		<!-- 搜索结果展示 -->
+		<view class="m-l-24 m-r-24 flex1 ofa">
+			<view v-if="filteredSpuList.length > 0">
+				<listItem v-for="spuItem in filteredSpuList" :key="spuItem.id" :spu="spuItem" />
+			</view>
+			<template v-else>
+				<u-divider v-if="searchQuery" text="没有找到相关商品" :hairline="true"></u-divider>
+			</template>
+			<!-- 底部空白占位 -->
+			<view class="extra-space2"></view>
+		</view>
+		<!-- 购物车按钮 -->
+		<cartBut></cartBut>
+		<!-- 购物车折叠层 -->
+		<cartFold></cartFold>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				searchQuery: '', // 绑定搜索框的输入内容
+				filteredSpuList: [], // 存储过滤后的spu列表
+			}
+		},
+		computed: {
+			// spuList 直接从 Vuex 获取
+			spuList() {
+				return this.$store.state.spuList
+			}
+		},
+		watch: {
+			// 监听 spuList 的变化，初始化过滤
+			spuList(newSpuList) {
+				this.filteredSpuList = this.filterSpuList(this.searchQuery, newSpuList)
+			},
+			// 监听 searchQuery，实时更新过滤结果
+			searchQuery(newQuery) {
+				this.filteredSpuList = this.filterSpuList(newQuery, this.spuList)
+			}
+		},
+		methods: {
+			// 搜索处理方法
+			handleSearch() {
+				if (this.searchQuery.trim() === '') {
+					this.filteredSpuList = [] // 如果搜索框为空，清空结果
+				} else {
+					this.filteredSpuList = this.filterSpuList(this.searchQuery, this.spuList) // 执行过滤
+				}
+			},
+
+			// 过滤 spuList
+			filterSpuList(query, spuList) {
+				if (!query.trim()) return [] // 如果没有输入关键词，返回所有商品
+
+				const lowerQuery = query.toLowerCase()
+
+				return spuList.filter(spuItem => {
+					// 过滤 name 字段
+					const nameMatch = spuItem.name.toLowerCase().includes(lowerQuery)
+
+					// 过滤 pro_tag 数组
+					const tagMatch = spuItem.pro_tag.some(tag => tag.toLowerCase().includes(lowerQuery))
+
+					// 过滤 bind_sku 中的 name 字段
+					const skuMatch = spuItem.bind_sku.some(sku => sku.tit.toLowerCase().includes(lowerQuery))
+
+					// 如果 name、pro_tag 或 bind_sku 匹配，返回该 spu
+					return nameMatch || tagMatch || skuMatch
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.search-container {
+		height: 100rpx;
+	}
+</style>
\ No newline at end of file