From 5925265e69bc5b790ecf2d65825584b521458df6 Mon Sep 17 00:00:00 2001
From: air <30444667+sszdot@users.noreply.github.com>
Date: Tue, 21 Jan 2025 18:27:59 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=20=20=E5=9E=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9Afeat=20=E3=80=90=E5=8E=9F=20=20=E5=9B=A0=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=20=E9=A1=B5=E9=9D=A2=E7=BB=84=E4=BB=B6=20=E3=80=90=E8=BF=87=20?=
 =?UTF-8?q?=20=E7=A8=8B=E3=80=91=EF=BC=9A1.serarch.vue=E7=BB=84=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=202=E6=8A=8A=E8=B4=AD=E7=89=A9=E8=BD=A6=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=8F=90=E5=8F=96=E5=87=BA=E6=9D=A5=E4=BD=9C=E4=B8=BA?=
 =?UTF-8?q?=E5=8D=95=E7=8B=AC=E7=BB=84=E4=BB=B63.=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=20=E5=9C=A8=E5=89=8D=E7=AB=AF=E5=81=9A?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E8=BF=87=E6=BB=A4=E8=BF=9B=E8=A1=8C=20?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E7=BB=93=E6=9E=9C=E7=9A=84=E8=BE=93=E5=87=BA?=
 =?UTF-8?q?=20=E3=80=90=E5=BD=B1=20=20=E5=93=8D=E3=80=91=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动
---
 App.vue                        |  5 ++
 components/cartBut/cartBut.vue | 58 ++++++++++++++++++--
 pages/shop/list.vue            | 88 ++++++++----------------------
 pages/shop/search.vue          | 97 ++++++++++++++++++++++++++++++++++
 4 files changed, 178 insertions(+), 70 deletions(-)
 create mode 100644 pages/shop/search.vue

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