app/pages/search/search.vue

<template>
	<view class="page">
		<!-- 这里是状态栏, 每个页面都需要有, 目的不让页面覆盖状态栏 -->
		<view :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="big-search-wrapper">
			<image
				class="header-right-search icon-search"
				src="/static/images/icon-back.png"
				@click="back"
			/>
			<view class="search-box">
				<view class="search-box-left">
					<image
						class="header-right-search search-image"
						src="/static/images/icon-search.png"
					/>
				</view>

				<input
					type="text"
					:model="searchContent"
					:value="searchContent"
					@input="typingContent"
					@confirm="doSearch"
					confirm-type="search"
					placeholder="请输入内容~"
					maxlength="10"
					class="search-input"
				/>

				<!-- 	<view class="search-box-right">
					<image
						class="scan-image"
						src="/static/images/icon-scan-qrcode.png"
						@click="scan"
					/>
				</view> -->
			</view>
			<view
				class="sbtn"
				@click="doSearch"
			>
				搜索
			</view>
		</view>

		<view class="history">
			<view
				v-for="(h, index) in historyList"
				:key="index"
				class="history-item-wrapper"
			>
				<view
					class="time-and-text"
					@click="searchByHistory(h)"
				>
					<image
						class="time-image"
						src="/static/images/icon-time.png"
					/>
					<text class="history-text">{{ h }}</text>
				</view>
				<image
					class="delete-image"
					src="/static/images/icon-delete.png"
					@click="removeHistoryItem(index)"
				/>
			</view>

			<view
				v-if="historyList.length == 0"
				class="clear-all-wrapper"
				@click="removeAllHistory"
			>
				<text class="clear-all"></text>
			</view>
			<view
				v-else
				class="clear-all-wrapper"
				@click="removeAllHistory"
			>
				<text class="clear-all">清除所有搜索记录</text>
			</view>
		</view>
	</view>
</template>

<script>
let system = uni.getSystemInfoSync();
import storage from '@/utils/storage.js'; //缓存
import { isStrEmpty } from '@/utils/tools.js';
export default {
	data() {
		return {
			searchContent: '',
			historyList: []
		};
	},
	onLoad() {
		this.statusBarHeight = system.statusBarHeight;

		// 从本地缓存获得搜索的历史记录
		let historyListJSON = uni.getStorageSync('historyList') || null;
		console.log(historyListJSON);
		if (historyListJSON != null && historyListJSON != undefined) {
			this.historyList = JSON.parse(historyListJSON);
		} else {
			this.historyList = [];
		}
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		scan() {
			// 扫描二维码跳转视频详情，先不做
			// uni.scanCode({
			// 	success: (e) => {
			// 		let result = e.result;
			// 		let vlogId = JSON.parse(result).content;
			// 		uni.navigateTo({
			// 			url: '../vlog/vlog?vlogId=' + vlogId
			// 		});
			// 	}
			// });
		},
		typingContent(e) {
			this.searchContent = e.detail.value;
		},
		searchByHistory(searchContent) {
			console.log(searchContent);
			this.searchContent = searchContent;
			this.doSearch();
		},
		doSearch() {
			var searchContent = this.searchContent;
			if (isStrEmpty(this.searchContent)) {
				uni.showToast({
					title: '搜索关键字为空!',
					icon: 'none',
					duration: 2000
				});
				this.searchContent = '';
				return;
			}

			let tempList = this.historyList;
			// 判断搜索内容是否已经存在, 如果存在, 则移除
			for (let i = 0; i < tempList.length; i++) {
				let old = tempList[i];
				if (this.searchContent === old) {
					tempList.splice(i, 1);
					break;
				}
			}
			tempList.unshift(searchContent);

			// 如果超过10个, 则删除第一一项
			if (tempList.length > 10) {
				tempList.splice(0, 1);
				this.historyList = tempList;
			}

			// 保存到本地缓存
			uni.setStorageSync('historyList', JSON.stringify(this.historyList));

			// 跳转页面, 把搜索条件携带过去
			uni.navigateTo({
				url: 'searchList?search=' + searchContent
			});
		},

		removeHistoryItem(index) {
			this.historyList.splice(index, 1);
			uni.setStorageSync('historyList', JSON.stringify(this.historyList));
		},

		removeAllHistory() {
			this.historyList = [];
			uni.setStorageSync('historyList', JSON.stringify(this.historyList));
		}
	}
};
</script>

<style lang="scss" scope>
.page {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #181b27;

	.big-search-wrapper {
		padding: 30rpx;
		display: flex;
		align-items: flex-start;
		flex-direction: row;
		justify-content: space-between;
		.header-right-search {
			height: 100rpx;
		}
		.icon-search {
			width: 50rpx;
			height: 50rpx;
			opacity: 0.8;
		}
		.search-box {
			display: flex;
			flex-direction: row;
			.search-box-left {
				padding: 0 10rpx;
				display: flex;
				flex-direction: row;
				background-color: #55565e;
				border-top-left-radius: 6rpx;
				border-bottom-left-radius: 6rpx;
				.search-image {
					width: 50rpx;
					height: 50rpx;
					opacity: 0.8;
				}
			}
		}
		.search-input {
			width: 410rpx;
			height: 50rpx;
			background-color: #55565e;
			font-size: 28rpx;
			color: #ffffff;
			border-top-right-radius: 6rpx;
			border-bottom-right-radius: 6rpx;
		}
		.search-box-right {
			padding: 0 16rpx;
			display: flex;
			flex-direction: row;
			background-color: #55565e;
			border-top-right-radius: 6rpx;
			border-bottom-right-radius: 6rpx;
			.scan-image {
				width: 50rpx;
				height: 50rpx;
				opacity: 0.8;
			}
		}
		.sbtn {
			height: 50rpx;
			line-height: 50rpx;
			color: #ffffff;
			font-size: 28rpx;
		}
	}

	.history {
		.history-item-wrapper {
			padding: 16rpx 26rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.time-and-text {
				display: flex;
				flex-direction: row;
				width: 500rpx;
				.time-image {
					width: 40rpx;
					height: 40rpx;
				}
				.history-text {
					color: #ffffff;
					font-size: 30rpx;

					margin-left: 20rpx;
				}
			}
			.delete-image {
				width: 30rpx;
				height: 30rpx;
				opacity: 0.9;
			}
		}
		.clear-all-wrapper {
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin-top: 40rpx;
			.clear-all {
				color: #f1f1f1;
				font-size: 28rpx;
			}
		}
	}
}
</style>