zhonglxcx/zhonglmini/pages/search/search.vue

<template>
	<view>
		<view class="top">
			<view class="input-box">
				<input
					placeholder="请输入关键字"
					placeholder-style="color:#c0c0c0;"
					v-model="searchValue"
					@confirm="toSearch()"
					value="searchValue"
				/>
				<cjl-icon @touch="toSearch()">&#xe60b;</cjl-icon>
			</view>
		</view>
		<view class="history">
			<view>历史记录</view>
			<view class="icon shanchu" @click="clean()"></view>
		</view>
		<view class="item">
			<view class="itemcontent" v-for="item in historyList" :key='item' @click="addkey(item)">{{item}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				showValue: 'name',
				searchValue: '',
				historyList: [],
				type:0,
			}
		},
		onShow(){
			this.historyList=uni.getStorageSync('history')
		},
		onLoad(e){
			if(e.type==1){
				this.type=1;
			}
		},
		methods: {
			toSearch(){
				let getkeyword=this.searchValue;
				let getarrfromsys=uni.getStorageSync('history');
				if(getkeyword!=''){
					// if(getarrfromsys.length>0){
					// 	getarrfromsys.push(getkeyword)
					// }else{
					// 	getarrfromsys=[];
					// 	getarrfromsys.push(getkeyword)
					// }
					if(getarrfromsys.length>0){
						if (getarrfromsys.length >= 30) {
							getarrfromsys.splice(0, getarrfromsys.length-30)
						     // 如果数组长度超过30个数据，删除最早添加的数据
						    // getarrfromsys.shift();
						}
						getarrfromsys.push(getkeyword)
					}else{
						getarrfromsys=[];
						getarrfromsys.push(getkeyword)
					}
					
					uni.setStorageSync('history',getarrfromsys);
					uni.navigateTo({
						url:'../product/product?keyword='+getkeyword
					})
					
					if(this.type==1){
						uni.navigateTo({
							url:'../product/productjiad?keyword='+keyword
						})
					}else{
						uni.navigateTo({
							url:'../product/product?keyword='+keyword
						})
					}
			
				}else{
					uni.showToast({
						title:'请输入关键字',icon:'none'
					})
				}
				
				this.historyList=uni.getStorageSync('history');
			},
			addkey(keyword){
				if(this.type==1){
					uni.navigateTo({
						url:'../product/productjiad?keyword='+keyword
					})
				}else{
					uni.navigateTo({
						url:'../product/product?keyword='+keyword
					})
				}
			},
			clean(){
				uni.setStorageSync('history',[])
				this.historyList=[]
			}
		}
	}
</script>

<style lang="scss">
.top{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.input-box {
		width: 70%;
		height: 60upx;
		background-color: #f5f5f5;
		border-radius: 30upx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 15upx;
		input {
			padding-left: 30upx;
			height: 28upx;
			font-size: 28upx;
		}
		margin-bottom: 15upx;
	}
}
@font-face {font-family:"HMfont-home";src:url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');}
.icon {
		font-family:"HMfont-home" !important;
		font-size:40upx;
		font-style:normal;
		color:#94AFCE;
		&.shanchu {
			&:before{content:"\e6a4";}
		}	
}
.history{
	display: flex;
	justify-content: space-between;
	margin: 20upx 40upx;
	font-size: 35upx;
	color:gray;
}
.item{
	display: flex;
	width: 100%;
	margin: 20upx;
	justify-content: baseline;
	flex-wrap:wrap;
	 .itemcontent{
		 color: #A6A6A6;
		 border-radius: 10upx;
		 padding: 5upx 15upx;
		 background-color: #F7F7F7;
		 margin: 10upx;
	 }
}
</style>