pupil/packageSearch/search/search.vue

<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="top-search">
			<customer-searchbar ref="search" :queryParam="queryParam" :search-bar-top="searchBarTop"
				:search-bar-height="searchBarHeight" @search="goSearch" @back="goBack" />
		</view>
		<!-- 最近搜索 -->
		<view class="recent-search" :style="{marginTop: Number(searchBarTop + searchBarHeight) + 'px',}">
			<view class="title">
				<text class="title-text">最近搜索</text>
				<u-icon name="trash" color="#666666" size="24" @click="clearRecentSearch" />
			</view>
			<view class="recent-record">
				<view v-if="recentRecordList.length > 0" class="no-empty-record">
					<view v-for="(item, index) in recentRecordList" :key="index" class="tag-item">
						<u-tag bg-color="#eee" borderColor="#eee" color="#666" :text="item"
							@click="recentSearch(item)" />
					</view>
				</view>
				<view v-else>
					<view class="empty-record">
						<text>暂无搜索记录</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 搜索发现 -->
		<view class="search-found">
			<view class="title">
				<text class="title-text">搜索发现</text>
			</view>
			<view class="found-record">
				<view v-for="(item, index) in foundList" :key="index" class="tag-item">
					<u-tag bg-color="#eee" borderColor="#eee" color="#666" :text="item.name"
						@click="recentSearch(item.name)" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast
	} from 'service/request.js'
	export default {
		data() {
			return {
				searchBarTop: 0, //搜索栏的外边框高度，单位px
				searchBarHeight: 0, //搜索栏的高度，单位px
				queryParam: '',
				recentRecordList: [],
				foundList: []
			}
		},
		onLoad() {
			this.getDiscover()
			const tempList = uni.getStorageSync('storage_search_record')
			this.recentRecordList = tempList ? tempList : [];
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.searchBarTop = menuButtonInfo.top;
			this.searchBarHeight = menuButtonInfo.height;
		},
		methods: {
			goSearch(param) {
				if (!param) {
					toast.warn('请输入搜索内容')
					return
				}
				this.queryParam = param
				const index = this.recentRecordList.findIndex(item => {
					return item === param
				})
				if (index > -1) {
					this.recentRecordList.splice(index, 1)
				}
				this.recentRecordList.unshift(param)
				try {
					uni.setStorageSync('storage_search_record', this.recentRecordList);
				} catch (e) {
					// error
				}
				uni.navigateTo({
					url: '../search-products/search-products?title=' + param
				})
			},
			goBack() {
				uni.navigateBack()
			},
			recentSearch(obj) {
				this.queryParam = obj
				// console.log(obj)
			},
			clearRecentSearch() {
				this.recentRecordList = []
				try {
					uni.setStorageSync('storage_search_record', this.recentRecordList);
				} catch (e) {
					// error
				}
			},
			getDiscover() {
				this.$apiServe.getDiscover().then(res => {
					this.foundList = res.data.data
				}).finally(_ => {})
			}
		}
	}
</script>

<style lang="less">
	.top-search {
		position: relative;
	}

	.recent-search {
		.title {
			padding: 32rpx 10rpx;
			display: flex;
			justify-content: space-between;

			.title-text {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #3E3E3E;
				line-height: 42rpx;
			}
		}

		.recent-record {
			.empty-record {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 28rpx;
				text-align: center;
			}

			.no-empty-record {
				display: flex;
				flex-wrap: wrap;
				padding: 0 10rpx;

				.tag-item {
					margin: 0 20rpx 20rpx 0;
				}
			}
		}
	}

	.search-found {
		.title {
			padding: 32rpx 10rpx;

			.title-text {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #3E3E3E;
				line-height: 42rpx;
			}
		}

		.found-record {
			display: flex;
			flex-wrap: wrap;
			padding: 0 10rpx;

			.tag-item {
				margin: 0 20rpx 20rpx 0;
			}
		}
	}
</style>