education_mp/pagesA/search/index.vue

<template>
<view class="searchLayout">
		<view class="search">
			<uni-search-bar 
			@confirm="onSearch"
			@cancel="onClear"
			@clear="onClear"
			focus 
			placeholder="搜索"
			v-model="queryParams.keyword">
			</uni-search-bar>
		</view>
		
		<view v-if="!classList.length || noSearch">
			<view class="history" v-if="historySearch.length">
				<view class="topTitle">
					<view class="text">最近搜索</view>
					<view class="icon" @click="removeHistory">
						<uni-icons type="trash" size="25"></uni-icons>
					</view>
				</view>
				<view class="tabs">
					<view class="tab" v-for="tab in historySearch" :key="tab" @click="clickTab(tab)">{{tab}}</view>		
				</view>
			</view>
			
			<view class="recommend">
				<view class="topTitle">
					<view class="text">热门搜索</view>				
				</view>
				<view class="tabs">				
					<view class="tab" v-for="tab in recommendList" :key="tab" @click="clickTab(tab)">{{tab}}</view>
				</view>
			</view>
		</view>
		<view class="noSearch" v-if="noSearch">
			<!-- <uv-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png"></uv-empty> -->
			没有符合你的东西拉~
		</view>
		<view v-else>
			<view class="list">
				<navigator :url="`/pages/preview/preview?id=${item._id}`"  class="item" 
				v-for="item in classList" :key="item._id">				
					<image :src="item.smallPicurl" mode="aspectFill"></image>				
				</navigator>
			</view>		
			<view class="lodinglayout" v-if="noData || classList.length"><!-- <uni-load-more :status="noData?'noMore':'loading'"/> --></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//查询参数
				queryParams:{	
					pageNum:1,
					pageSize:12,
					keyword:""
				},
				//搜索历史词
				historySearch:uni.getStorageSync("historySearch") || [],
				//热门搜索词
				recommendList:["美女","帅哥","宠物","卡通"],
				//没有更多
				noData : false,
				//没有搜索结果
				noSearch : false,
				//搜索结果列表
				classList : [],
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">

.searchLayout{
	.search{
		padding:0 10rpx;
	}
	.topTitle{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		color:#999;
	}
	.history{
		padding:30rpx;		
	}
	.recommend{
		padding:30rpx;
	}
	.tabs{
		display: flex;		
		align-items: center;
		flex-wrap: wrap;
		padding-top:20rpx;
		.tab{
			background: #F4F4F4;
			font-size: 28rpx;
			color:#333;
			padding:10rpx 28rpx;
			border-radius: 50rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}
	}	
	.list{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 5rpx;
		padding:20rpx 5rpx;		
		.item{
			height: 440rpx;
			image{
				width: 100%;
				height: 100%;
				display: block;
			}			
		}		
	}
}
</style>