1

components/tab-bar/homeGroupPending.vue

@@ -42,9 +42,17 @@
 					<view class="search-box">
 						<uni-icons type="search" size="18" :color="searchIconColor"></uni-icons>
 						<input type="text" v-model="query.keyWord" confirm-type="search" placeholder="搜索商品或商家"
+							@focus="showSearchHistory" @tap="showSearchHistory" @blur="hideSearchHistory"
 							@confirm="searchGroup" />
 						<view class="search-btn" @tap="searchGroup">搜索</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 class="seckill-entry" @tap="goSeckillGroup">
 					<view class="heat-dot heat-dot-a"></view>
@@ -213,6 +221,9 @@
 
 <script>
 	import { requireLoginToCurrentPage } from '@/utils/authRedirect.js'
+	import { getSearchHistory, saveSearchHistory } from '@/utils/searchHistory.js'
+
+	const GROUP_PENDING_SEARCH_HISTORY_PREFIX = 'group_pending_search_history_v1_'
 
 	export default {
 		name: 'homeGroupPending',
@@ -311,7 +322,9 @@
 					trackWidth: 0,
 					confirmed: false
 				},
-				chromeHeight: 160
+				chromeHeight: 160,
+				searchHistory: [],
+				searchHistoryVisible: false
 			}
 		},
 		computed: {
@@ -341,6 +354,9 @@
 					return 'top:' + top + 'px;left:2.5%;width:95%;'
 				}
 				return 'top:' + top + 'px;'
+			},
+			searchHistoryKey() {
+				return GROUP_PENDING_SEARCH_HISTORY_PREFIX + (this.isStoreScene ? 'store' : 'takeaway')
 			}
 		},
 		watch: {
@@ -362,6 +378,7 @@
 		beforeDestroy() {
 			this.stopDeliveryTimeTimer()
 			clearTimeout(this._swipeOrderTapTimer)
+			clearTimeout(this._searchHistoryTimer)
 		},
 		methods: {
 			measureChrome() {
@@ -443,10 +460,34 @@
 			},
 			searchGroup() {
 				if (!this.isGroupScene) return
+				this.query.keyWord = String(this.query.keyWord || '').trim()
+				this.recordSearchHistory()
+				this.searchHistoryVisible = false
 				this.query.pageNumber = 1
 				this.totalPages = 1
 				this.getGroupList()
 			},
+			showSearchHistory() {
+				clearTimeout(this._searchHistoryTimer)
+				this.searchHistory = getSearchHistory(this.searchHistoryKey)
+				this.searchHistoryVisible = this.searchHistory.length > 0
+			},
+			hideSearchHistory() {
+				clearTimeout(this._searchHistoryTimer)
+				this._searchHistoryTimer = setTimeout(() => {
+					this.searchHistoryVisible = false
+				}, 160)
+			},
+			recordSearchHistory() {
+				if (!this.query.keyWord) return
+				this.searchHistory = saveSearchHistory(this.searchHistoryKey, this.query.keyWord)
+			},
+			selectSearchHistory(keyword) {
+				clearTimeout(this._searchHistoryTimer)
+				this.query.keyWord = keyword
+				this.searchHistoryVisible = false
+				this.searchGroup()
+			},
 			switchScene(scene) {
 				const nextScene = this.normalizeScene(scene)
 				if (this.scene === nextScene) {
@@ -456,6 +497,8 @@
 					return
 				}
 				this.scene = nextScene
+				this.searchHistoryVisible = false
+				this.searchHistory = []
 				this.loadStatus = 'more'
 				if (this.isDeliveryScene) {
 					this.resetDeliveryQuery(true)
@@ -1350,6 +1393,64 @@
 		color: #fff;
 	}
 
+	.search-history-panel {
+		position: absolute;
+		top: 72rpx;
+		left: 0;
+		right: 0;
+		z-index: 30;
+		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;
+	}
+
+	.store-scene .search-history-panel {
+		border-color: rgba(255, 221, 188, 0.76);
+		box-shadow: 0 18rpx 42rpx rgba(178, 102, 48, 0.16);
+	}
+
+	.search-history-title {
+		color: rgba(0, 35, 28, 0.52);
+		font-size: 20rpx;
+		font-weight: 900;
+		line-height: 28rpx;
+	}
+
+	.store-scene .search-history-title {
+		color: #9a6a4a;
+	}
+
+	.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.72), rgba(186, 255, 236, 0.72));
+		color: #08735d;
+		font-size: 21rpx;
+		font-weight: 900;
+		line-height: 42rpx;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		box-sizing: border-box;
+	}
+
+	.store-scene .search-history-item {
+		background: #fff0dc;
+		color: #e96632;
+	}
+
 	.seckill-entry {
 		width: 172rpx;
 		height: 60rpx;