ds_mobile_app/mobile/pages/search/search.vue

<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<!-- 这里是状态栏，除了h5不需要，其他端都需要 -->
		</view>
		<!-- #endif -->
		<!-- 搜索头部分 start -->
		<view class='sea_input_part'>
			<!-- #ifndef MP-WEIXIN -->
			<text class="back_icon iconfont iconziyuan2" @click="navBack"></text>
			<!-- #endif -->
			<view class="search_center">
				<image class="search_icon" :src="imgUrl+'search.png'"></image>
				<input class='sea_input' type='text' :value="input_val" :placeholder="$L('请输入关键词')" @input="inputChange"
					@confirm='search' maxlength="50"></input>
				<image class='clear_content' v-show="input_val" @click="clearInputVal"
					:src="imgUrl+'input_clear.png'" />
			</view>
			<text class='sea_btn' @click="btnSearch()">{{$L('搜索')}}</text>
		</view>
		<!-- 搜索头部分 end -->

		<!-- 搜索历史 start -->
		<view class="search-item" v-if="history_val && history_val.length" style="padding-bottom: 0;">
			<view class="search-title">
				<text>{{$L('搜索历史')}}</text>
				<view class="del" @click="clearHistory">
					<image :src="imgUrl+'del_search.png'" />
				</view>
			</view>

			<view class="search-con">
				<view class="item" v-for="(item,index) in history_val" :key="index" @click="btnSearch(item)">{{item}}
				</view>
			</view>
		</view>
		<!-- 搜索历史 end -->

		<!-- 热门搜索 start -->
		<view class="search-item" v-if="hotSearchData && hotSearchData.length">
			<view class="search-title">
				<text>{{$L('热门搜索')}}</text>
			</view>

			<view class="search-con">
				<block v-for="(item,index) in hotSearchData" :key="index" >
					<view class="item" @click="btnSearch(item)" v-if="item">{{item}}
					</view>
				</block>
			</view>
		</view>
		<!-- 热门搜索 end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				input_val: '', //搜索内容
				history_val: [],
				hotSearchData: [],
			}
		},
		onLoad(option) {
			this.getHotSearchData();
			this.getHistoryList();
		},
		onShow() {
		},
		methods: {
			//获取热门搜索词
			getHotSearchData() {
				var param = {}
				param.url = 'v3/system/front/setting/getSettings'
				param.data = {}
				param.data.names = 'hot_search_words'
				this.$request(param).then(res => {
					if (res.state == 200) {
						this.hotSearchData = res.data[0].split(',');
					}
				})
			},
			//获取历史记录
			getHistoryList() {
				let history_data = uni.getStorageSync('his_keyword');
				if (history_data) {
					let his_array = history_data.split("~");
					let last_arr = [];
					for (var i = 0; i < his_array.length; i++) {
						!this.$checkSpace(his_array[i]) && last_arr.push(his_array[i]);
					}
					this.history_val = last_arr;
			}
		},
		//清除搜索历史
		clearHistory() {
			uni.removeStorageSync('his_keyword');
			this.history_val = [];
		},
		inputChange(e) {
			this.input_val = e.detail.value
		},
		//点击弹起的键盘按钮时触发
		search(e) {
			if (this.input_val != '') {
				this.btnSearch();
			}
		},
		//搜索事件
		btnSearch(val = '') {

			let {
				input_val
			} = this;

			if (val) {
				input_val = val;
				this.input_val = val;
			}
			input_val = input_val.trim();
			if (input_val.length > 0) {
				this.setHistoryData();
			}
			//跳转商品列表页
			uni.navigateTo({
				url: `/pages/product/list?keyword=${encodeURIComponent(input_val)}&source=search`
			});
		},
		//设置缓存
		setHistoryData() {
			let {
				history_val,
				input_val
			} = this;
			let tmp_data = [...history_val];
			tmp_data.unshift(input_val);
			// 最多取15条，不重复且不为空的数据
			tmp_data = tmp_data.reduce((a, b) => {
				(a.length <= 14 && b && a.indexOf(b) == -1) ? a.push(b): null;
				return a;
			}, [])
			let history_val_str = tmp_data.join('~');
			this.history_val = tmp_data;
			uni.setStorageSync("his_keyword", history_val_str)
		},
		//清空输入内容
		clearInputVal() {
			this.input_val = '';
		},
		navBack() {
			uni.navigateBack();
		},
	}
	}
</script>

<style lang='scss'>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	page {
		background-color: #fff;
		width: 750rpx;
		margin: 0 auto;
	}

	.sea_input_part {
		position: relative;
		display: flex;
		align-items: center;
		height: 88rpx;

		.back_icon {
			padding-left: 20rpx;
		}

		.sea_input {
			flex: 1;
			height: 65rpx;
			font-size: 24rpx;
			color: #333;
		}

		.search_center {
			display: flex;
			align-items: center;
			border: none;
			flex: 1;
			height: 65rpx;
			margin-left: 20rpx;
			padding-left: 20rpx;
			border-radius: 32.5rpx;
			background-color: #f5f5f5;

			.search_icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 22rpx;
			}
		}

		.clear_content {
			width: 45rpx !important;
			height: 45rpx !important;
			margin-right: 15rpx !important;
		}

		.sea_btn {
			font-size: 28rpx;
			color: #2D2D2D;
			padding: 10rpx 25rpx;
			flex-shrink: 0;
		}

		&:after {
			position: absolute;
			content: '';
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1rpx;
			background-color: #eee;
			transform: scaleY(0.5);
		}
	}

	.search-item {
		padding: 30rpx 28rpx;

		.search-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 48rpx;
			color: #2D2D2D;
			font-size: 28rpx;
			font-weight: bold;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.search-con {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.item {
				height: 50rpx;
				padding: 0 18rpx;
				color: #2D2D2D;
				line-height: 50rpx;
				font-size: 24rpx;
				background-color: #F5F5F5;
				border-radius: 25rpx;
				margin-right: 20rpx;
				margin-top: 20rpx;
				max-width: 274rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}
		}
	}
</style>