uniapp-hainan/pages/search/search.vue

<template>
	<view>
		<view class="lf-p-t-30 lf-p-r-30 lf-flex lf-w-100 lf-bg-white">
			<u-icon name="search" class="search-icon"></u-icon>
			<input class="rom-search" type="text" v-model="searchContent" @confirm="setSearch()" placeholder="请输入商品名称"/>
		</view>
		<view class="history-card" v-if="historySearch != ''">
			<view class="lf-font-28 lf-color-gray lf-p-b-30 lf-p-l-30">
				历史搜索
			</view>
			<view class="lf-flex lf-flex-wrap lf-p-l-20 lf-p-r-20">
				<view class="search-tag" v-for="(i,index) of historySearch" :key="index" @click="gosearch(i)">{{i}}</view>
			</view>
		</view>
		<view class="history-card" v-else>
			<view class="lf-font-28 lf-color-gray lf-p-b-30 lf-p-l-30">
				历史搜索
			</view>
			<view class="lf-flex lf-flex-wrap lf-p-l-30 lf-p-r-20">
				暂无历史搜索记录
			</view>
		</view>
	</view>
</template>

<script>
	let list = []
	export default {
		data() {
			return {
				historySearch: [],
				searchContent: ''
			}
		},
		methods: {
			gosearch(i) {
				uni.navigateTo({
					url: '/pages/search/searchList?serach_content=' + i
				})
			},
			setSearch() {
				list.push(this.searchContent);
				list = [...new Set(list)];
				uni.navigateTo({
					url: '/pages/search/searchList?serach_content=' + this.searchContent
				})
				setTimeout(() => {
					this.historySearch = list
					uni.setStorageSync('historySearch',this.historySearch)
				},1000)
			}
		},
		onShow() {
			this.historySearch = uni.getStorageSync('historySearch') || [];
			console.log('初始',this.historySearch)
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.history-card {
		background-color: white;
		width: 100%;
		height: 100%;
		padding: 30rpx 0;
	}
	.search-tag {
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		background: #f5f5f5;
		color: #222;
		display: flex;
		align-items: center;
		text-align: center;
		width: max-content;
		height: max-content;
		font-size: 28rpx;
		margin-right: 20rpx;
		&:nth-child(5n) {
			margin-right: 0;
		}
		&:nth-child(n + 6) {
			margin-top: 20rpx;
		}
	}
	.search-icon {
		position: relative;
		bottom: 0;
		left: 54rpx;
	}
	/deep/.input-placeholder{
		color: #777;
		font-size: 28rpx;
	}
	.rom-search {
		width: 686rpx;
		height: 60rpx;
		background: #f5f5f5;
		border-radius: 30rpx;
		padding-left: 74rpx;
		font-size: 28rpx;
	}
</style>