【小程序】-- 搜索文章
This commit is contained in:
linjinyuan
parent
e0b6bab788
commit
f5204f0e9d
|
|
@ -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 })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,3 +19,7 @@ export enum SMSEnum {
|
|||
CHANGE_MOBILE = 103,
|
||||
FIND_PASSWORD = 104
|
||||
}
|
||||
|
||||
export enum SearchTypeEnum {
|
||||
HISTORY = 'history'
|
||||
}
|
||||
|
|
@ -2,3 +2,6 @@
|
|||
|
||||
//token
|
||||
export const TOKEN_KEY = 'token'
|
||||
|
||||
// 搜索历史记录
|
||||
export const HISTORY = 'history'
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
<template>
|
||||
<view class="news" >
|
||||
<!-- 搜索 -->
|
||||
<view class="news-search px-[24rpx] py-[14rpx] bg-white">
|
||||
<u-search placeholder="请输入关键词搜索" disabled :show-action="false"></u-search>
|
||||
</view>
|
||||
<navigator url="/pages/search/search">
|
||||
<view class="news-search px-[24rpx] py-[14rpx] bg-white">
|
||||
<u-search placeholder="请输入关键词搜索" disabled :show-action="false"></u-search>
|
||||
</view>
|
||||
</navigator>
|
||||
|
||||
<!-- 内容 -->
|
||||
<tabs
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue