front/pages/source/search.vue

<template>
	<view class="margin-sm">
		<use-tabbar :tabbar="false"></use-tabbar>
		
		<!-- 搜索框区域 -->
		<view class="search-area margin-bottom-sm pos-r w-full dflex-b border-radius-big margin-top-sm">
			<view class="dflex-c flex1 pos-r">
				<text class="iconfont iconsousuo-01 search-icon"></text>
				<input 
					class="search-input" 
					placeholder="请输入关键字" 
					maxlength="20"
					:focus="true" 
					v-model="keyword" 
					type="text" />
			</view>
			<view class="bg-base padding-tb-16 padding-lr-lg" @click="doSearch">搜索</view>
		</view>

		<!-- 搜索历史 -->
		<view class="padding padding-bottom-xs pos-r w-full margin-bottom-sm bg-main border-radius"
			v-if="historyList.length > 0">
			<view class="padding-bottom-sm dflex-b">
				<view class="dflex margin-left-sm">
					<text class="fwb ft-dark">搜索历史</text>
				</view>
				<view class="iconfont iconlajitong-01 pos-a pos-right dflex-c ft-dark padding" @click="clearHistory"></view>
			</view>
			<view class="dflex dflex-wrap-w">
				<view
					class="item margin-right-sm margin-bottom-sm dflex bg-drak border-radius-lg padding-tb-xs padding-lr"
					v-for="(item, index) in historyList" :key="index" @click="selectHistory(item)">
					<text class="clamp" style="max-width: 25vw;">{{item}}</text>
				</view>
			</view>
		</view>

		<!-- 热门搜索 -->
		<view class="padding w-full bg-main padding-bottom-xs border-radius"
			v-if="fetch && fetch.hot && fetch.hot.length > 0">
			<view class="padding-bottom-sm dflex-b">
				<view class="dflex margin-left-sm">
					<text class="fwb ft-dark">热门搜索</text>
				</view>
			</view>
			<view class="dflex dflex-wrap-w">
				<view
					class="item margin-right-sm margin-bottom-sm dflex bg-drak border-radius-lg padding-tb-xs padding-lr"
					v-for="(item, index) in fetch.hot" :key="index" @click="selectHot(item)">
					<text>{{item.value}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				source: 1,
				max: 20,
				fetch: {},
				// 搜索关键字
				keyword: '',
				// 历史搜索
				historyList: [],
			};
		},
		onLoad(options) {
			if (options) {
				if (!options.id) {
					return this.Dever.goHome();
				}
				if (options.source) {
					this.source = options.source
				}
				this.id = options.id;
			}
			this.keyword = '';
			this.loadData();
			this.loadHistory();
		},
		methods: {
			loadData() {
				this.DeverApi.get(this, 'source.search', {
					channel_id: this.id,
					source: this.source
				});
			},

			doSearch() {
				if (!this.keyword.trim()) return

				// 保存搜索词到历史
				this.saveHistory(this.keyword.trim())

				var url = 'source/list?search=' + this.keyword + '&id=' + this.id + '&type=2&source=' + this.source;
				this.keyword = '';
				this.Dever.location(url)
			},

			// 保存到本地缓存
			saveHistory(keyword) {
				let list = this.historyList

				// 去重：如果已存在，先删掉
				list = list.filter(item => item !== keyword)
				list.unshift(keyword) // 插入到最前
				
				if (list.length > this.max) {
					list = list.slice(0, this.max)
				}

				this.historyList = list
				uni.setStorageSync('searchHistory', list)
			},

			// 加载历史
			loadHistory() {
				const list = uni.getStorageSync('searchHistory') || []
				this.historyList = list
			},

			// 清空历史
			clearHistory() {
				this.Dever.confirm('确定清空搜索历史吗？', res => {
					this.historyList = []
					uni.removeStorageSync('searchHistory')
				})
			},

			// 点击历史记录
			selectHistory(item) {
				this.keyword = item
				this.doSearch()
			},
			
			// 点击热门搜索
			selectHot(item) {
				this.keyword = item.value
				this.doSearch()
			}
		}
	};
</script>

<style>
	.search-area {
		background: #fff;
		position: relative;
	}

	.search-icon {
		position: absolute;
		left: 14px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 28rpx;
		color: #999;
		z-index: 2;
	}

	.search-input {
		padding-left: 60rpx; /* 给图标留空间 */
		height: 72rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		width: 100%;
		background-color: #fff;
	}

	.uni-input-placeholder {
		color: grey;
	}
</style>