uniapp搜索（历史搜索、热门搜索）

<template>
	<view class="content">
		<view class=""
			style="padding: 10px 15px 10px 15px;display: flex; align-items: center; line-height: 2; background: #fff;">
			<view class=""
				style="flex: 5;padding: 0 10px; border-radius: 1rem;display: flex; align-items: center; justify-content: space-around;background: #f5f5f5; margin-right: 10px;">
				<view class="" style="font-size: 15px;" @tap="change_scope">{{selected_text}}</view>
				<view class="" style="width: 70%;"> <input class="" style="font-size: 15px;" :focus="focus"
						@input="onKeyInput" type="text" value="" v-model="search_content" placeholder="搜索商铺、商品、菜名" />
				</view>
				<view class="" style="padding-top: 6px;">
					<image style="width: 18px;height: 18px;" @tap="search_content==''?Back():clean()"
						src="/static/takeaway/search/clean.png" mode=""></image>
				</view>
			</view>
			<view class="" style="flex: 1; text-align: center;color: #fe8828;" @tap="search(search_content)">
				搜索
			</view>
		</view>
		<view class="" style="background: #fff;" :hidden='search_hidden_show' v-if="history.length!=0">
			<view class=""
				style="padding: 0 15px; display: flex;justify-content: space-between; border-bottom: 1px solid #eee;">
				<view class="" style="font-size: 14px;">历史搜索：</view>
				<view class="" style="font-size: 14px;" @tap="empty">清空</view>
			</view>
			<view class="" style="padding: 15px;">
				<text class=""
					style="display: inline-block;font-size: 12px;background: #f6f6f6;padding: 6px;color: #666;margin: 0 10px 10px 0;"
					v-for="(item, index) in history" :key="index" @tap="history_select(item,index)">{{item}}</text>
			</view>
		</view>
		<view class="" style="background: #fff;" :hidden='search_hidden'>
			<view class="p-15 fsize-14" style="padding: 15px; font-size: 14px; border-bottom: 1px solid #eee;">
				热门搜索：
			</view>
			<view class="" style="padding: 15px;">
				<text class=""
					style="display: inline-block;font-size: 12px;background: #f6f6f6;padding: 6px;color: #666;margin: 0 10px 10px 0;"
					v-for="(item, index) in hot" :key="index" @tap="hot_select(item)">{{item.value}}</text>
			</view>
		</view>
		<view>
			<view class="mask" style="position: fixed; width: 100%;height: 100%;" :hidden="selected"
				@tap="change_scope_close"></view>
			<radio-group class="radio_group" style="background: #fff;position: fixed;width: 90%;border-radius: .5rem"
				:hidden="selected" @change="radioChange">
				<label class="" style="padding: 14px;display: flex;justify-content: space-between;align-items: center;"
					v-for="(item, index) in search_scope" :key="index">
					<view class="" style="display: flex; align-items: center;">
						<image style="width: 20px; height: 20px; margin-right: 6px;" class=""
							src="../../static/logo.png" mode="">
						</image>
						<text class="" style="font-size: 14px;">{{item.title}}</text>
					</view>
					<view>
						<radio :value="item.value" :checked="index === current" />
					</view>
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_scope: [{
					title: '搜索商品',
					value: 'commodity',
					url: '',
					checked: 'true'
				}, {
					title: '搜索店铺',
					value: 'shop',
					url: ''
				}],
				current: 0,
				selected_text: '商品',
				selected: true,
				focus: true,
				hot: [{
					value: '蜜雪冰城蜜雪冰城',
					id: 0
				}, {
					value: '蜜雪冰城',
					id: 1
				}],
				search_content: '',
				history: [],
				search_hidden: false,
				search_hidden_show: false
			}
		},
		onLoad() {
			let that = this
		},
		onReady() {
			let that = this
			let list = uni.getStorageSync('history')
			if (list) {
				that.history = list.slice(0, 3);
			}
		},
		methods: {
			radioChange(e) {
				let that = this
				if (e.target.value == 'commodity') {
					that.selected = true
					that.selected_text = '商品'
				} else {
					that.selected = true
					that.selected_text = '店铺'
				}
			},
			change_scope() {
				let that = this
				that.selected = false
			},
			change_scope_close() {
				let that = this
				that.selected = true
			},
			Back() {
				uni.navigateBack()
			},
			clean() {
				let that = this
				that.search_content = ''
				that.search_hidden = false
				that.search_hidden_show = false
				if (that.history) {
					that.history = that.history.slice(0, 3);

				}
			},
			onKeyInput() {
				let that = this
				if (that.search_content == '') {
					that.search_hidden = false
				} else {
					that.search_hidden = true
				}
			},
			hot_select(item) {
				let that = this
				that.search_content = item.value
				that.search_hidden = true
				that.search(item.value)
			},
			history_select(item, index) {
				let that = this
				that.search_content = item
				that.search_hidden = true
				that.search(item)
			},
			search(search_content) {
				let that = this
				if (search_content == '') {
					uni.showToast({
						title: '搜索内容不能为空',
						icon: 'none'
					})
					return false
				} else {
					if (!that.history.includes(search_content)) {
						that.history.unshift(search_content);
					} else {
						let i = that.history.indexOf(search_content)
						that.history.splice(i, 1);
						that.history.unshift(search_content);
					}
					uni.setStorageSync('history', that.history)
				}
				that.search_hidden_show = true
			},
			empty() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否清理全部搜索历史？该操作不可逆。',
					success: res => {
						if (res.confirm) {
							that.history = [];
							uni.clearStorageSync('history')
							if (that.history.length > 0) {
								that.isHistory = true
							} else {
								that.isHistory = false
							}
						}
					}
				})
			}
		}
	}
</script>

<style>
	.mask {
		background: #00000080;
		z-index: 1001;
		top: 0;
	}

	.radio_group {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1002;
	}
</style>