实现历史搜索记录和搜索功能

uniapp实现搜索功能和搜索历史记录

<template>
	<view class="content">
		<!-- 搜索引擎 这里是模糊查询，后续会加上搜索提示，当您输入关键字下面会来一些提示搜索词，每个设备的搜索记录或者每个账号的搜索记录是不一样的-->
		<view class="search" @click="go">
			<uni-easyinput class="uni-mt-5" v-model="inputValue" :styles="styles" :placeholderStyle="placeholderStyle"
				placeholder="请输入要搜索的关键字" @input="input" prefixIcon="search" type="text" maxlength="16" minlength="6"
				@confirm="search"></uni-easyinput>
		</view>
		<!-- 搜索历史 -->
		<view v-if="isHistory==true" class="searchHistory">
			<view style="display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;padding: 0px 5px;">
				<view>搜索历史:</view>
				<view>
					<image style="width: 50rpx;height: 50rpx;" src="/static/删除.png" @click="empty"></image>
				</view>
			</view>

			<view class="searchHistoryItem">
				<view v-for="(item, index) in searchHistoryList" :key="index">
					<text>{{ item }}</text>
				</view>
			</view> <!-- 通过搜索记录下标数组来计算有数据还是无数据     如果有数据就会显示，如果没数据就不会显示则显示您还没历史记录-->
		</view>
		<view style="text-align: center;color:#A88565;font-size: 26rpx;padding-top:20rpx;" v-if="isHistory==false">
			您还没有历史记录</view>

		<!-- 这里显示搜索索引 -->
		<view v-show="hidden">

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isHistory: true,
				hidden: false,
				//默认显示历史搜索记录，当点击input框时为false
				data: [], //一个空数组
				inputValue: '',
				searchHistoryList: [], //搜索出来的内容
				// inputValue: '',
				password: '',
				placeholderStyle: "color:#A88565;font-size:24rpx",
				styles: {
					color: '#A88565',
					borderColor: '#dedede',
					fontsize: '28rpx'
				}
			};
		},
		methods: {
			go() {
				console.log('点击了搜索框')
			
				
			},
			input(e) {
				console.log('输入内容：', e);
			},
			search() {
				if (this.inputValue == '') {
					uni.showToast({
						title: '搜索内容不能为空'
					})
				} else {
					if (!this.searchHistoryList.includes(this.inputValue)) {
						this.searchHistoryList.unshift(this.inputValue);
						uni.setStorage({
							key: 'searchList',
							data: JSON.stringify(this.searchHistoryList)
						});
						uni.switchTab({
							url: '/pages/shopping/shopping'
						})
					} else {
						//有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
						let i = this.searchHistoryList.indexOf(this.inputValue);
						this.searchHistoryList.splice(i, 1);
						this.searchHistoryList.unshift(this.inputValue);
						// uni.showToast({
						// 	title: '不能重复添加'
						// });
						uni.switchTab({
							url: '/pages/shopping/shopping'
						})
						//这里应该是如果下面有历史记录或者啥的直接跳转到下个页面

						uni.setStorage({
							key: 'searchList',
							data: JSON.stringify(this.searchHistoryList)
						});
					}

				}
			},
			//清空历史记录
			empty() {
				uni.showModal({
					title: '提示',
					content: '是否清理全部搜索历史？该操作不可逆。',
					success: res => {
						if (res.confirm) {
							uni.removeStorage({
								key: 'searchList'
							});
							this.searchHistoryList = [];
							console.log(this.searchHistoryList)
							if (this.searchHistoryList.length > 0) {
								this.isHistory = true

							} else {

								this.isHistory = false

							}
						}
					}
				})


			}
		},
		async onLoad() {
			let list = await uni.getStorage({
				key: 'searchList'
			});
			console.log(list[1].data);
			if (list[1].data) {
				this.searchHistoryList = JSON.parse(list[1].data);
			}
	var a = this.searchHistoryList.length
			console.log(a)
			if (this.searchHistoryList.length > 0) {
				this.isHistory = true

			} else {

				this.isHistory = false

			}

		},
		onShow() {
			var a = this.searchHistoryList.length
			console.log(a)
			if (this.searchHistoryList.length > 0) {
				this.isHistory = true

			} else {

				this.isHistory = false

			}
		},
		onReady() {
		
		},



	}
</script>
<style lang="scss">
	.content {
		width: 750rpx;
		height: 100%;

		// background-color: #47474A;
		/deep/ .is-input-border {
			margin: 25rpx;
			width: 700rpx !important;
			border-radius: 10rpx !important;
			height: 70rpx;
		}

		.searchInput {
			background-color: #f8f9fa;
			width:440rpx;
			margin-left: 10rpx;
		}

		.searchHistory {
			width: 100%;
			margin-top: 10rpx;
		}

		.searchHistoryItem {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		.searchHistoryItem view {
			text-align: center;
			width:120rpx;
			border-radius: 30rpx;
			height: 40rpx;
			border: 2px solid #f4f4f4;
			margin: 0rpx 10rpx;
			background-color: lightgray;
		}
	}
</style>