zhibo/pages/home/productSearch.vue

<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="search-cont">
			<view class="inner">
				<image class="icon-search" src="../../static/images/search.png" mode=""></image>
				<input type="text" value="" placeholder="输入药品名称" confirm-type="搜索" @confirm="goSearch" :focus='setFocus' placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="title-box">
			<text class="title">历史搜索</text>
			<image src="../../static/images/del.png" mode="" @click="clearHistory"></image>
		</view>
		<view class="data-list">
			<view class="item" v-for="(item,index) in searchHistory" :key="index" @click="doSearch(item)">
				{{ item }}
			</view>
		</view>
		<!-- 推荐搜索 -->
		<view class="title-box">
			<text class="title">推荐搜索</text>
		</view>
		<view class="data-list">
			<view class="item" v-for="(item,index) in topSearch" :key="index" @click="doSearch(item)">
				{{ item }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setFocus: false,
				// 历史搜索
				searchHistory: [],
				// 推荐搜索
				topSearch: []
			};
		},
		onShow() {
			this.setFocus = true
			this.searchHistory=this.utils.getHisSearch();
			var config=uni.getStorageSync('config');
			if(config!=null&&config!=undefined&&config!=""){
				this.topSearch=JSON.parse(config).hotSearch.split(',');
			}
		},
		methods:{
			// 清空历史搜索数据
			clearHistory() {
				this.utils.clearHisSearch();
				this.searchHistory=this.utils.getHisSearch();
			},
			doSearch(item){
				uni.navigateTo({
					url: './productList?key=' + item
				})
			},
			goSearch(e) {
				if(e.detail.value!=null&&e.detail.value!=""){
					this.utils.addHisSearch(e.detail.value);
				}
				uni.navigateTo({
					url: './productList?key=' + e.detail.value
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		.search-cont{
			padding: 16upx 30upx;
			background-color: #FFFFFF;
			.inner{
				box-sizing: border-box;
				width: 100%;
				height: 72upx;
				background: #F7F7F7;
				border-radius: 36upx;
				display: flex;
				align-items: center;
				padding: 0 30upx;
				.icon-search{
					width: 28upx;
					height: 28upx;
					margin-right: 20upx;
				}
				input{
					height: 60upx;
					line-height: 60upx;
					flex: 1;
				}
			}
		}
		.title-box{
			padding: 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
			}
			image{
				width: 30upx;
				height: 30upx;
			}
		}
		.data-list{
			padding: 0upx 10upx 30upx;
			display: flex;
			flex-wrap: wrap;
			.item{
				padding: 0 30upx;
				height: 56upx;
				line-height: 56upx;
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				background: #F5F5F5;
				border-radius: 28upx;
				margin: 0 20upx 20upx 0;
			}
		}
	}
</style>