143 lines
3.7 KiB
Vue
143 lines
3.7 KiB
Vue
<template>
|
|
<page-meta :page-style="$theme.pageStyle">
|
|
<!-- #ifndef H5 -->
|
|
<navigation-bar
|
|
:front-color="$theme.navColor"
|
|
:background-color="$theme.navBgColor"
|
|
/>
|
|
<!-- #endif -->
|
|
</page-meta>
|
|
<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%"
|
|
>
|
|
<block v-for="item 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/constantEnums'
|
|
import { getHotSearch } from '@/api/shop'
|
|
import cache from '@/utils/cache'
|
|
import { getArticleList } from '@/api/news'
|
|
|
|
interface Search {
|
|
hot_search: {
|
|
data: any[]
|
|
status: number
|
|
}
|
|
his_search: string[]
|
|
result: any
|
|
searching: boolean
|
|
}
|
|
|
|
const search = reactive<Search>({
|
|
hot_search: {
|
|
data: [],
|
|
status: 1
|
|
},
|
|
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
|
|
console.log('获取热门搜索失败=>', e)
|
|
}
|
|
}
|
|
|
|
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 (page_no: number, page_size: number) => {
|
|
try {
|
|
const { lists } = await getArticleList({
|
|
keyword: keyword.value,
|
|
page_no,
|
|
page_size
|
|
})
|
|
paging.value.complete(lists)
|
|
} catch (e) {
|
|
console.log('报错=>', e)
|
|
//TODO handle the exception
|
|
paging.value.complete(false)
|
|
}
|
|
}
|
|
|
|
getHotSearchFunc()
|
|
search.his_search = cache.get(HISTORY) || []
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search {
|
|
&-content {
|
|
height: calc(100vh - 46px - env(safe-area-inset-bottom));
|
|
&-s {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|