2025-10-23

商品搜索

pages/home/index.vue

@@ -5,7 +5,7 @@
 			refresher-enabled="true" @refresherrefresh="reflash">
 			<view class="header-search">
 				<u-search :action-style="searchBtn" shape="square" bg-color="#CADBFF" placeholder="输入商品名称或商品种类"
-					v-model="keyword"></u-search>
+					v-model="keyword" @search="handleSearch" @custom="handleSearch"></u-search>
 			</view>
 
 			<view class="menu-list">
@@ -139,6 +139,7 @@
 		</scroll-view>
 	</view>
 	<Tabbar id="tabbarId"></Tabbar>
+	<u-toast ref="msgToast" duration="6000" />
 </template>
 <script setup lang="ts">
 	import {
@@ -146,6 +147,9 @@
 	} from 'vue';
 	import { mallAPI } from '../../api/mall';
 	import { getImageUrl } from '../../util/common';
+	
+	const msgToast = ref()
+	
 	const instance = getCurrentInstance();
 
 	const height = ref(0)
@@ -170,6 +174,20 @@
 		boxShadow: '0px 4px 4px 0px #FFFFFF40 inset',
 	}
 	const iconWidth = "65%"
+	
+	const handleSearch = () => {
+		if (!keyword.value) {
+			msgToast.value.show({
+				title: '请输入搜索词',
+				type: 'warning'
+			})
+			return
+		}
+		uni.navigateTo({
+			url: '/pages/home/mallSearch?search=' + keyword.value
+		})
+		keyword.value = ''
+	}
 
 	const handleCategory = () => {
 		uni.navigateTo({