1

package2/group/groupBuyList.vue

@@ -14,8 +14,16 @@
 					<view class="title-search" :style="{'margin-top': menuButtonInfo.top +'px'}">
 						<uni-icons type="search" size="16" color="#08735d"></uni-icons>
 						<input class="search-input" type="text" placeholder="搜索商家/美食" v-model="searchForm.keyWord"
+							@focus="showSearchHistory" @tap="showSearchHistory" @blur="hideSearchHistory"
 							@confirm="goSearch" confirm-type="search" />
 						<view class="search-trend" @tap.stop="goSearch">搜索</view>
+						<view class="search-history-panel" v-if="searchHistoryVisible && searchHistory.length">
+							<view class="search-history-title">历史搜索</view>
+							<view class="search-history-list">
+								<view class="search-history-item" v-for="item in searchHistory" :key="item"
+									@tap.stop="selectSearchHistory(item)">{{item}}</view>
+							</view>
+						</view>
 					</view>
 				</view>
 			</view>
@@ -215,11 +223,13 @@
 <script>
 	import { buildHomeSharePath } from '@/utils/sharePath.js'
 	import { hasLogin, requireLoginToCurrentPage } from '@/utils/authRedirect.js'
+	import { getSearchHistory, saveSearchHistory } from '@/utils/searchHistory.js'
 
 	const SHARE_TARGET_PATH = '/package2/group/groupBuyList'
 	const GROUP_META_CACHE_TTL = 5 * 60 * 1000
 	const GROUP_EAT_TYPE_CACHE_KEY = 'group_buy_eat_type_cache_v1'
 	const GROUP_SHOP_AREA_CACHE_PREFIX = 'group_buy_shop_area_cache_v1_'
+	const GROUP_BUY_SEARCH_HISTORY_KEY = 'group_buy_list_search_history_v1'
 
 	export default {
 		data() {
@@ -376,7 +386,9 @@
 				onlineWorkerTotal: 0,
 				onlineWorkerAreaList: [],
 				onlineWorkerInterval: 2500,
-				onlineWorkerDuration: 500
+				onlineWorkerDuration: 500,
+				searchHistory: [],
+				searchHistoryVisible: false
 			}
 		},
 		components: {
@@ -475,6 +487,12 @@
 			// 	mask: true
 			// })
 		},
+		onHide() {
+			this.searchHistoryVisible = false
+		},
+		onUnload() {
+			clearTimeout(this._searchHistoryTimer)
+		},
 		onShareAppMessage() {
 			return this.buildShareInfo()
 		},
@@ -553,9 +571,32 @@
 			},
 			goSearch() {
 				this.searchForm.keyWord = (this.searchForm.keyWord || '').trim()
+				this.recordSearchHistory()
+				this.searchHistoryVisible = false
 				this.searchForm.pageNumber = 1
 				this.getShopList()
 			},
+			showSearchHistory() {
+				clearTimeout(this._searchHistoryTimer)
+				this.searchHistory = getSearchHistory(GROUP_BUY_SEARCH_HISTORY_KEY)
+				this.searchHistoryVisible = this.searchHistory.length > 0
+			},
+			hideSearchHistory() {
+				clearTimeout(this._searchHistoryTimer)
+				this._searchHistoryTimer = setTimeout(() => {
+					this.searchHistoryVisible = false
+				}, 160)
+			},
+			recordSearchHistory() {
+				if (!this.searchForm.keyWord) return
+				this.searchHistory = saveSearchHistory(GROUP_BUY_SEARCH_HISTORY_KEY, this.searchForm.keyWord)
+			},
+			selectSearchHistory(keyword) {
+				clearTimeout(this._searchHistoryTimer)
+				this.searchForm.keyWord = keyword
+				this.searchHistoryVisible = false
+				this.goSearch()
+			},
 			buyingye(item) {
 				uni.showToast({
 					title: this.getShopStatus(item) == 2 ? '店铺暂停营业' : '店铺不在营业时间！',
@@ -1031,7 +1072,7 @@
 		left: 0;
 		right: 0;
 		z-index: 1000;
-		overflow: hidden;
+		overflow: visible;
 		background:
 			radial-gradient(circle at 12% 8%, rgba(197, 255, 153, 0.5), transparent 34%),
 			radial-gradient(circle at 90% 18%, rgba(175, 255, 231, 0.48), transparent 36%),
@@ -1098,6 +1139,8 @@
 		box-sizing: border-box;
 		box-shadow: 0 14rpx 34rpx rgba(20, 115, 88, 0.12);
 		border: 1rpx solid rgba(255, 255, 255, 0.86);
+		position: relative;
+		z-index: 3;
 	}
 
 	.search-word-swiper {
@@ -1138,6 +1181,50 @@
 		color: #08735d;
 	}
 
+	.search-history-panel {
+		position: absolute;
+		top: 70rpx;
+		left: 0;
+		right: 0;
+		z-index: 80;
+		padding: 18rpx 18rpx 16rpx;
+		border-radius: 28rpx;
+		background: rgba(255, 255, 255, 0.96);
+		border: 1rpx solid rgba(255, 255, 255, 0.88);
+		box-shadow: 0 18rpx 42rpx rgba(20, 115, 88, 0.16);
+		box-sizing: border-box;
+	}
+
+	.search-history-title {
+		color: rgba(0, 35, 28, 0.52);
+		font-size: 20rpx;
+		font-weight: 900;
+		line-height: 28rpx;
+	}
+
+	.search-history-list {
+		display: flex;
+		flex-wrap: wrap;
+		margin-top: 12rpx;
+	}
+
+	.search-history-item {
+		max-width: 100%;
+		height: 42rpx;
+		margin: 0 12rpx 10rpx 0;
+		padding: 0 16rpx;
+		border-radius: 999rpx;
+		background: linear-gradient(90deg, rgba(220, 255, 156, 0.74), rgba(186, 255, 236, 0.74));
+		color: #08735d;
+		font-size: 21rpx;
+		font-weight: 900;
+		line-height: 42rpx;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		box-sizing: border-box;
+	}
+
 	.title-tab {
 		width: 94%;
 		margin: 0 auto;

package2/group/studentStoreList.vue

@@ -21,10 +21,18 @@
 								</swiper-item>
 							</swiper> -->
 							<input class="hot-search-input" type="text" :placeholder="searchPlaceholder" v-model="searchForm.keyWord"
-								confirm-type="search" @confirm="goSearch" />
+								confirm-type="search" @focus="showSearchHistory" @tap="showSearchHistory"
+								@blur="hideSearchHistory" @confirm="goSearch" />
 						</view>
 						<view class="trend-badge" @tap.stop="goSearch">搜索</view>
 					</view>
+					<view class="search-history-panel" v-if="searchHistoryVisible && searchHistory.length">
+						<view class="search-history-title">历史搜索</view>
+						<view class="search-history-list">
+							<view class="search-history-item" v-for="item in searchHistory" :key="item"
+								@tap.stop="selectSearchHistory(item)">{{item}}</view>
+						</view>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -145,8 +153,10 @@
 <script>
 	import { buildHomeSharePath } from '@/utils/sharePath.js'
 	import { hasLogin, requireLoginToCurrentPage } from '@/utils/authRedirect.js'
+	import { getSearchHistory, saveSearchHistory } from '@/utils/searchHistory.js'
 
 	const SHARE_TARGET_PATH = '/package2/group/studentStoreList'
+	const STUDENT_STORE_SEARCH_HISTORY_KEY = 'student_store_search_history_v1'
 
 	export default {
 		data() {
@@ -261,7 +271,9 @@
 					sub: '拼桌更划算'
 				}],
 				shopList: [],
-				areaKind: 1
+				areaKind: 1,
+				searchHistory: [],
+				searchHistoryVisible: false
 			}
 		},
 		computed: {
@@ -328,6 +340,12 @@
 			this.enableShareMenu()
 			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
 		},
+		onHide() {
+			this.searchHistoryVisible = false
+		},
+		onUnload() {
+			clearTimeout(this._searchHistoryTimer)
+		},
 		onReachBottom() {
 			if (this.searchForm.pageNumber >= this.totalPages || this.loadStatus === 'loading') return
 			this.searchForm.pageNumber += 1
@@ -545,12 +563,38 @@
 				this.resetList()
 				this.getShopList()
 			},
-			focusSearch() {},
+			focusSearch() {
+				this.showSearchHistory()
+			},
 			goSearch() {
+				this.searchForm.keyWord = String(this.searchForm.keyWord || '').trim()
+				this.recordSearchHistory()
+				this.searchHistoryVisible = false
 				this.clearCategoryCondition()
 				this.resetList()
 				this.getShopList()
 			},
+			showSearchHistory() {
+				clearTimeout(this._searchHistoryTimer)
+				this.searchHistory = getSearchHistory(STUDENT_STORE_SEARCH_HISTORY_KEY)
+				this.searchHistoryVisible = this.searchHistory.length > 0
+			},
+			hideSearchHistory() {
+				clearTimeout(this._searchHistoryTimer)
+				this._searchHistoryTimer = setTimeout(() => {
+					this.searchHistoryVisible = false
+				}, 160)
+			},
+			recordSearchHistory() {
+				if (!this.searchForm.keyWord) return
+				this.searchHistory = saveSearchHistory(STUDENT_STORE_SEARCH_HISTORY_KEY, this.searchForm.keyWord)
+			},
+			selectSearchHistory(keyword) {
+				clearTimeout(this._searchHistoryTimer)
+				this.searchForm.keyWord = keyword
+				this.searchHistoryVisible = false
+				this.goSearch()
+			},
 			clearCategoryCondition() {
 				this.checkedTab = ''
 				this.searchForm.shopType = ''
@@ -1333,6 +1377,50 @@
 		animation: softBeat 2.8s ease-in-out infinite;
 	}
 
+	.search-history-panel {
+		position: absolute;
+		top: 84rpx;
+		left: 0;
+		right: 0;
+		z-index: 60;
+		padding: 18rpx 18rpx 16rpx;
+		border-radius: 28rpx;
+		background: rgba(255, 255, 255, 0.96);
+		border: 1rpx solid rgba(255, 221, 188, 0.76);
+		box-shadow: 0 18rpx 42rpx rgba(178, 102, 48, 0.16);
+		box-sizing: border-box;
+	}
+
+	.search-history-title {
+		color: #9a6a4a;
+		font-size: 20rpx;
+		font-weight: 900;
+		line-height: 28rpx;
+	}
+
+	.search-history-list {
+		display: flex;
+		flex-wrap: wrap;
+		margin-top: 12rpx;
+	}
+
+	.search-history-item {
+		max-width: 100%;
+		height: 42rpx;
+		margin: 0 12rpx 10rpx 0;
+		padding: 0 16rpx;
+		border-radius: 999rpx;
+		background: #fff0dc;
+		color: #e96632;
+		font-size: 21rpx;
+		font-weight: 900;
+		line-height: 42rpx;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		box-sizing: border-box;
+	}
+
 	.hot-keywords {
 		margin-top: 14rpx;
 		display: flex;