UniAPP搜索页面，存储关键词

Posted 2022-05-28 huangzhen-yy

<template>
	<view class="container">
		<!-- 搜索条 -->
		<!-- <view class="searchTopBox">
			<view class="searchBoxRadius">
				<view class="grace-search-icon searchBoxIcon"></view>
				<input class="searchBoxIpt" type="search" v-model="ipt" @confirm="searchNow($event)" placeholder="关键字"></input>
			</view>
		</view> -->
		<view class="u1">
			<image src="../../static/img/logo.png" mode="" style="width: 128upx; height: 51upx;"></image>
			<view class="sousuo">
				<input type="text" value="" placeholder="请输入关键字搜索" focus="true" v-model="ipt" @confirm="searchNow($event)"/>
				<image src="../../static/img/sousuo.png" mode="" type="search"  @tap="searchNow($event)"></image>
			</view>
		</view> 
		
		
		<!-- 搜索历史 -->
		<view class="searchBotBox">
			<view class="ov">
				<view class="fl">历史搜索</view>
				<view @tap="clearKey" class="fr grace-more-r grace-search-remove">
					<image src="../../static/img/sc.png" mode=""></image>
					</view>
			</view>
			<view class="searchHistoryBox">
				<view class="searchHistoryBoxItem" v-for="(item,index) in searchKey" :key=‘index‘ @click="qusousuo(item)">
					item
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default 
		data() 
			return 
				searchKey: [],
				ipt:‘‘,
				searchClose: true,
				jiaodian:true
			
		,
		onLoad() 
			console.log(this.ipt.length)
		,
		onShow() 
			try
				var vv = uni.getStorageSync(‘searchLocal‘) || "";
				if(vv) 
					this.searchKey = JSON.parse(vv);
				 else 
					this.searchKey = [];
				
			 catch(e)
				console.log(e)
			
		,
		methods: 
			clearKey: function() 
				var that = this;
				uni.showModal(
					title: ‘提示‘,
					content: ‘点击确定将删除所有历史信息，确定删除吗？‘,
					success: function(res) 
						// if (res.confirm) 
							that.searchKey = [];
							uni.setStorage(
								key: ‘searchLocal‘,
								data: that.searchKey
							);
// 						 else if (res.cancel) 
// 
// 						
					
				);

			,
			searchNow(e) 
				console.log(e)
				this.jiaodian=false;
				if (this.ipt == ‘‘) 
					uni.showToast(
						title: ‘未输入搜索关键字‘,
						icon: ‘none‘,
						duration: 1000
					);
					return false;
				
				var that = this;
				var newArr = that.searchKey;
				console.log(newArr.length)
				if(this.searchKey.indexOf(this.ipt) == -1)
					newArr.unshift(this.ipt);
				
				if(newArr.length >= 11 )
					newArr.pop()
				
				console.log(newArr.length)
				newArr = JSON.stringify(newArr);//转换成json格式的数据
				uni.setStorage(
					key: ‘searchLocal‘,
					data: newArr
				);
				this.qusousuo(this.ipt);
			,
			qusousuo(e)
				console.log(e);
				this.ipt = "";
				uni.navigateTo(
					url:‘sousuo2?goods_name=‘+e
				)
			
		
	
	
</script>
<style lang="scss">
	.container
		padding-left:30upx;
		padding-right: 30upx;
		// background: pink;
	
	.u1
		display: flex;
		justify-content: space-between;
		padding-top: 20upx;
		padding-bottom: 15upx;
		.sousuo
			display: flex;
			position: relative;
			input
				font-size: 24upx;
				line-height: 28upx;
				border-bottom:1px solid #f5f5f5;
				width: 515upx;
			
			image
				width: 35upx;
				height: 35upx;
				position: absolute;
				right: 30upx;
				z-index: 3;
			
		
	
	
	page 
		background: #FFF;
	

	.ov 
		overflow: hidden;
	

	.fl 
		float: left;
		font-family: PingFang-SC-Medium;
		font-size: 16px;
		font-weight: normal;
		font-stretch: normal;
		line-height: 20px;
		letter-spacing: 0px;
		color: #666666;
	

	.fr 
		float: right;
	
	.fr image
		width:35upx;
		height: 37upx;
	
	.searchTopBox 
		width: 100%;
		background-color: #0b877f;
		height: 100upx;
		box-sizing: border-box;
		padding-top: 15upx;
	

	.searchBoxRadius 
		width: 90%;
		height: 70upx;
		background-color: #fff;
		margin-left: 5%;
		overflow: hidden;
		border-radius: 35upx;
	

	.searchBoxIcon 
		font-size: 40upx;
		margin-top: 20upx;
		margin-left: 20upx;
		float: left;
	

	.searchBoxIpt 
		height: 70upx;
		line-height: 70upx;
		margin-left: 20upx;
		float: left;
	

	.searchBotBox 
		width: 100%;
		margin-top: 30upx;
		padding: 15upx 3%;
		box-sizing: border-box;
	

	.searchHistoryBox 
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		margin-top: 40upx;
	

	.searchHistoryBoxItem 
		float: left;
		font-size: 26upx;
		color: #666;
		line-height: 49upx;
		height: 50upx;
		padding: 0 20upx;
		border-radius: 50upx;
		margin:15upx 30upx 15upx 0;
		border: 1px solid #ccc;
		text-align: center;
	
</style>

　　主要是将搜索的关键词存储在uni.setStorage(key: ‘searchLocal‘,data: newArr);中，每次先查询一下将该次搜索的关键词与历史记录数组进行对比，indexof,查找不到将关键词存储到里面。