【小程序】-- 搜索文章

app/src/api/shop.ts

@@ -9,3 +9,20 @@ export function getIndex() {
 export function getDecorate(data: any) {
     return request.get({ url: '/decorate', data })
 }
+
+/**
+ * @description 热门搜索
+ * @return { Promise } 
+ */
+export function getHotSearch() {
+    return request.get({ url: '/hotSearch' })
+}
+
+/**
+ * @description 搜索
+ * @param { string } keyword 关键词
+ * @return { Promise } 
+ */
+export function getSearch(data: { keyword: string, pageNo: number, pageSize: number }) {
+    return request.get({ url: '/search', data })
+}

app/src/enums/appEnums.ts

@@ -19,3 +19,7 @@ export enum SMSEnum {
     CHANGE_MOBILE = 103,
     FIND_PASSWORD = 104
 }
+
+export enum SearchTypeEnum {
+	HISTORY = 'history'
+}

app/src/enums/cacheEnums.ts

@@ -2,3 +2,6 @@
 
 //token
 export const TOKEN_KEY = 'token'
+
+// 搜索历史记录
+export const HISTORY = 'history'

app/src/pages/news/news.vue

@@ -1,9 +1,11 @@
 <template>
     <view class="news" >
 		<!-- 搜索 -->
-		<view class="news-search px-[24rpx] py-[14rpx] bg-white">
+		<navigator url="/pages/search/search">
-		    <u-search placeholder="请输入关键词搜索" disabled :show-action="false"></u-search>
+			<view class="news-search px-[24rpx] py-[14rpx] bg-white">
-		</view>
+				<u-search placeholder="请输入关键词搜索" disabled :show-action="false"></u-search>
+			</view>
+		</navigator>
 		
 		<!-- 内容 -->
         <tabs 

app/src/pages/search/component/suggest.vue

@@ -0,0 +1,67 @@
+<template>
+	<view class="suggest bg-white">
+		
+		<!-- 热门搜索 -->
+		<view class="hot" v-if="hot_search.length">
+			<view class="text-base font-medium pl-[24rpx] pt-[26rpx] pb-[6rpx]">热门搜索</view>
+			
+			<view class="w-full pl-[24rpx] pr-[8rpx]">
+				<block v-for="hotItem in hot_search">
+					<view class="keyword" @click="handleHistoreSearch(hotItem)">{{ hotItem }}</view>
+				</block>
+			</view>
+		</view>
+		
+		<view class="mx-[24rpx] my-[40rpx] border-b border-solid border-0 border-light" v-if="hot_search.length && his_search.length"></view>
+		
+		<!-- 历史搜索 -->
+		<view class="history" v-if="his_search.length">
+			<view class="flex justify-between px-[24rpx] pb-[6rpx]">
+				<view class="text-base font-medium">历史搜索</view>
+				<view class="text-xs text-muted" @click="() => emit('clear')">清空</view>
+			</view>
+			
+			<view class="w-full pl-[24rpx] pr-[8rpx]">
+				<block v-for="hisItem in his_search">
+					<view class="keyword" @click="handleHistoreSearch(hisItem)">{{ hisItem }}</view>
+				</block>
+			</view>
+		</view>
+	</view>
+</template>
+
+
+<script lang="ts" setup>
+    import { ref, reactive, nextTick } from "vue"
+    
+	const emit = defineEmits<{
+	    (event: 'search', value: string): void
+		(event: 'clear', value: void): void
+	}>()
+	
+    const props = withDefaults(defineProps < {
+		hot_search?: string[],
+		his_search?: string[]
+		
+    } > (), {
+        hot_search: [],
+		his_search: []
+    })
+    
+    const handleHistoreSearch = (text: string) => {
+		emit('search', text)
+    }
+</script>
+
+<style lang="scss" scoped>
+	.suggest {
+		height: 100%;
+		.keyword {
+			display: inline-block;
+			margin: 24rpx 16rpx 0 0;
+			padding: 8rpx 24rpx;
+			border-radius: 26rpx;
+			background-color: #F4F4F4;
+		}
+	}
+</style>

app/src/pages/search/search.vue

@@ -0,0 +1,123 @@
+<template>
+	<view class="search">
+		<!-- 搜索框 -->
+		<view class="px-[24rpx] py-[14rpx] bg-white">
+		    <u-search 
+				v-model="keyword" 
+				placeholder="请输入关键词搜索" 
+				height="72" 
+				@search="handleSearch" 
+				@custom="handleSearch" 
+				@clear="search.searching = false"
+			></u-search>
+		</view>
+		
+		<!-- 搜索 -->
+		<view class="search-content">
+			<!--  -->
+			<suggest 
+				v-show="!search.searching"
+				@search="handleSearch"
+				@clear="handleClear"
+				:hot_search="search.hot_search"
+				:his_search="search.his_search"
+			></suggest>
+			
+			<!--  -->
+			<view class="search-content-s pt-[20rpx]" v-show="search.searching">
+				<z-paging 
+					ref="paging" 
+					v-model="search.result" 
+					@query="queryList" 
+					:fixed="false" 
+					height="100%"
+					use-page-scroll
+				>
+					<block v-for="(item, index) in search.result" :key="item.id">
+					    <news-card :item="item" :newsId="item.id"></news-card>
+					</block>
+				</z-paging>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { ref, reactive, shallowRef } from 'vue';
+	import Suggest from "./component/suggest.vue"
+	import { HISTORY } from "@/enums/cacheEnums"
+	import { getHotSearch, getSearch } from "@/api/shop" 
+    import cache from "@/utils/cache"
+	
+	interface Search {
+		hot_search: any
+		his_search: any
+		result: any
+		searching: boolean
+	}
+	
+	const search = reactive<Search>({
+		hot_search: [],
+		his_search: [],
+		result: [],
+		searching: false
+	})
+	const keyword = ref<string>('')
+	const paging = shallowRef()
+
+	const handleSearch = (value: string) => {
+		keyword.value = value
+		if ( keyword.value ) {
+		    if ( !search.his_search.includes(keyword.value) ) {
+		        search.his_search.unshift(keyword.value)
+		        cache.set(HISTORY, search.his_search)
+		    }
+		}
+		paging.value.reload()
+		search.searching = true
+	}
+	
+	const getHotSearchFunc = async () => {
+		try{
+			search.hot_search = await getHotSearch()
+		}catch(e){
+			//TODO handle the exception
+		}
+	}
+	
+	const handleClear = async (): Promise<void> => {
+	    const resModel: any = await uni.showModal({
+	        title: '温馨提示',
+	        content: '是否清空历史记录？'
+	    })
+	    if ( resModel.confirm ) {
+	        cache.set(HISTORY, '')
+	        search.his_search = []
+	    }
+	}
+
+	const queryList = async (pageNo, pageSize) => {
+		const { lists } = await getSearch({
+			keyword: keyword.value,
+			pageNo, pageSize
+		})
+		
+		search.result = lists
+		paging.value.complete(lists);
+	}
+	
+	getHotSearchFunc()
+    search.his_search = cache.get(HISTORY) || new Array()
+</script>
+
+<style lang="scss" scoped>
+	.search {
+		&-content {
+			height: calc(100vh - 46px - env(safe-area-inset-bottom));
+			&-s {
+				height: 100%;
+			}
+		}
+	}
+</style>