364 lines
10 KiB
Plaintext
364 lines
10 KiB
Plaintext
<template>
|
||
<view class="container">
|
||
<view class="search">
|
||
<uni-cms-article-search-bar
|
||
ref="searchBar"
|
||
v-model="searchVal"
|
||
:show-placeholder="false"
|
||
:focus="true"
|
||
@clear="showSearchResultPanel = false"
|
||
@confirm="search"
|
||
></uni-cms-article-search-bar>
|
||
</view>
|
||
<view class="search-result" v-if="showSearchResultPanel">
|
||
<uni-cms-article-list
|
||
ref="articleList"
|
||
:collectionList="colList"
|
||
:refresherEnabled="false"
|
||
loadTime="manual"
|
||
style="flex: 1;"
|
||
></uni-cms-article-list>
|
||
</view>
|
||
<template v-else>
|
||
<view class="panel history-panel" v-if="searchHistory.length > 0">
|
||
<view class="panel__title">
|
||
<view class="panel__title-text">
|
||
<text class="text">搜索历史</text>
|
||
</view>
|
||
|
||
<view class="delete-history-btns" v-if="deleteHistoryLoading">
|
||
<text class="text" @click="deleteAllSearchHistory">全部删除</text>
|
||
<text class="text danger" @click="deleteHistoryLoading = false">完成</text>
|
||
</view>
|
||
<uni-cms-article-icons
|
||
class="panel__after-icon"
|
||
type="trash"
|
||
:size="18"
|
||
color="#999"
|
||
@click="deleteHistoryLoading = true"
|
||
v-else
|
||
></uni-cms-article-icons>
|
||
</view>
|
||
<view class="panel__list">
|
||
<view class="panel__list-item" v-for="text in searchHistory">
|
||
<text class="text" @click="search(text)">{{text}}</text>
|
||
<uni-cms-article-icons
|
||
class="icon"
|
||
type="closeempty"
|
||
:size="12"
|
||
color="#999"
|
||
v-if="deleteHistoryLoading"
|
||
@click="deleteSearchHistory(text)"
|
||
></uni-cms-article-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<unicloud-db ref="udb" #default="{ data, loading, error }" field="content"
|
||
collection="opendb-search-hot" orderby="create_date desc,count desc" page-data="replace"
|
||
:page-size="10">
|
||
<view class="panel recommend-panel">
|
||
<view class="panel__title">
|
||
<view class="panel__title-text">
|
||
<text class="text">搜索发现</text>
|
||
<uni-cms-article-icons
|
||
class="icon"
|
||
type="reload"
|
||
:size="14"
|
||
color="#999"
|
||
v-if="!hideSearchRecommend"
|
||
@click="reLoadSearchRecommend"
|
||
></uni-cms-article-icons>
|
||
</view>
|
||
<uni-cms-article-icons
|
||
class="panel__after-icon"
|
||
:type="hideSearchRecommend ? 'eye-slash': 'eye'"
|
||
:size="18"
|
||
color="#999"
|
||
@click="hideSearchRecommend = !hideSearchRecommend"
|
||
></uni-cms-article-icons>
|
||
</view>
|
||
<view class="panel__list">
|
||
<view class="panel__list-tip" v-if="loading">
|
||
<text class="text">正在加载...</text>
|
||
</view>
|
||
<view class="panel__list-tip" v-else-if="error != null">
|
||
<text class="text">{{error.message}}</text>
|
||
</view>
|
||
<view class="panel__list-tip" v-else-if="hideSearchRecommend">
|
||
<text class="text">当前搜索发现已隐藏</text>
|
||
</view>
|
||
<template v-else>
|
||
<view
|
||
class="panel__list-item"
|
||
v-for="(word, index) in data"
|
||
:key="index"
|
||
@click="search(word.getString('content')!)"
|
||
>
|
||
<text class="text">{{ word.getString('content') }}</text>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</unicloud-db>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="uts">
|
||
type ArticleAuthor = {
|
||
_id: string
|
||
nickname: string
|
||
}
|
||
type ArticleItem = {
|
||
_id: string
|
||
title: string
|
||
publish_date: number
|
||
thumbnail: string[]
|
||
user_id: ArticleAuthor[]
|
||
}
|
||
|
||
const db = uniCloud.databaseForJQL()
|
||
const searchLogDB = db.collection('opendb-search-log')
|
||
const cmsArticleDB = db.collection('uni-cms-articles')
|
||
const uniIdUsersDB = db.collection('uni-id-users')
|
||
const localSearchHistoryKey = '__local_search_history'; // 本地历史存储字段名
|
||
const localSearchRecommendHiddenKey = '__local_search_recommend_hidden'; // 本地搜索发现开关字段名
|
||
const localSearchHistoryMax = 10; // 本地历史存储最大值
|
||
export default {
|
||
data() {
|
||
const localSearchRecommendHidden = uni.getStorageSync(localSearchRecommendHiddenKey)
|
||
|
||
return {
|
||
searchVal: "",
|
||
searchHistory: [] as string[],
|
||
searchRecommend: [] as string[],
|
||
deleteHistoryLoading: false,
|
||
hideSearchRecommend: (localSearchRecommendHidden == "" ? false : localSearchRecommendHidden) as boolean,
|
||
showSearchResultPanel: false,
|
||
searchResult: [] as ArticleItem[]
|
||
}
|
||
},
|
||
watch: {
|
||
hideSearchRecommend(newValue) {
|
||
uni.setStorageSync(localSearchRecommendHiddenKey, newValue)
|
||
}
|
||
},
|
||
computed: {
|
||
hasSearchValue(): boolean {
|
||
return this.searchVal != ""
|
||
},
|
||
where(): string {
|
||
let where = "\"article_status\" == 1"
|
||
|
||
if (this.searchVal != "") {
|
||
where += `&& /${this.searchVal}/.test(title)`
|
||
}
|
||
|
||
return where
|
||
},
|
||
colList(): any[] {
|
||
// 返回文章和用户列表
|
||
return [
|
||
cmsArticleDB.where(this.where).field('thumbnail,title,publish_date,user_id').getTemp(),
|
||
uniIdUsersDB.field('_id,nickname').getTemp()
|
||
]
|
||
}
|
||
},
|
||
mounted() {
|
||
// 本地历史存储
|
||
const localSearchHistory = uni.getStorageSync(localSearchHistoryKey)
|
||
this.searchHistory = (localSearchHistory == "" ? [] as string[] : localSearchHistory) as string[]
|
||
},
|
||
methods: {
|
||
deleteAllSearchHistory() {
|
||
uni.showModal({
|
||
title: "确定清空搜索历史吗",
|
||
confirmText: "删除",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.deleteSearchHistory(null)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
deleteSearchHistory(searchText: string | null) {
|
||
let history: string[] = []
|
||
if (searchText != null) {
|
||
history = this.searchHistory.filter((item: string): boolean => item != searchText)
|
||
}
|
||
|
||
this.searchHistory = history
|
||
uni.setStorageSync(localSearchHistoryKey, history)
|
||
|
||
console.log(history.length, 'history.length')
|
||
if (history.length <= 0) {
|
||
this.deleteHistoryLoading = false
|
||
}
|
||
},
|
||
search(searchText: string) {
|
||
searchText = searchText.trim()
|
||
|
||
if (searchText == "" || this.deleteHistoryLoading) return
|
||
// 隐藏键盘
|
||
;(this.$refs['searchBar'] as UniCmsArticleSearchBarComponentPublicInstance)!.hideKeyboard()
|
||
|
||
// 保存搜索历史
|
||
this.setLocalSearchHistory(searchText)
|
||
// 显示搜索结果Panel
|
||
this.showSearchResultPanel = true
|
||
// 搜索
|
||
this.loadSearchResult(searchText)
|
||
// 添加搜索记录
|
||
this.addSearchRecord(searchText)
|
||
},
|
||
loadSearchResult(searchText: string) {
|
||
// 设置查询条件
|
||
this.searchVal = searchText
|
||
|
||
// 延迟0ms后加载数据
|
||
setTimeout(() => {
|
||
(this.$refs['articleList'] as UniCmsArticleListComponentPublicInstance)!.reLoadList()
|
||
}, 0)
|
||
},
|
||
addSearchRecord(searchText: string) {
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
/*
|
||
在此处存搜索记录，如果登录则需要存 user_id，若未登录则存device_id
|
||
*/
|
||
searchLogDB.add({
|
||
// user_id: device_id,
|
||
device_id: systemInfo.deviceId,
|
||
// device_uuid: systemInfo.deviceId,
|
||
content: searchText,
|
||
create_date: Date.now()
|
||
})
|
||
},
|
||
setLocalSearchHistory(searchText: string) {
|
||
const history = this.searchHistory.filter((item: string): boolean => item != searchText)
|
||
|
||
history.unshift(searchText)
|
||
|
||
if (history.length > localSearchHistoryMax) {
|
||
history.pop()
|
||
}
|
||
|
||
this.searchHistory = history
|
||
this.deleteHistoryLoading = false
|
||
uni.setStorageSync(localSearchHistoryKey, history)
|
||
},
|
||
reLoadSearchRecommend() {
|
||
(this.$refs['udb'] as UniCloudDBElement)!.loadData({
|
||
clear: true
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
|
||
.search-result {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
.panel {
|
||
margin-top: 40rpx;
|
||
padding: 10rpx 20rpx;
|
||
|
||
&__title {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
&-text {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.text {
|
||
color: #3e3e3e;
|
||
font-size: 30rpx;
|
||
line-height: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.icon {
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__after-icon {
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
&__list {
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
|
||
&-item {
|
||
background-color: #f6f6f6;
|
||
border-radius: 30rpx;
|
||
padding: 10rpx 20rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 10rpx;
|
||
margin-bottom: 10rpx;
|
||
|
||
.text {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.icon {
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
&-tip {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
flex: 1;
|
||
margin-top: 20rpx;
|
||
|
||
.text {
|
||
font-size: 26rpx;
|
||
color: #808080;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.delete-history-btns {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.text {
|
||
color: #666;
|
||
font-size: 22rpx;
|
||
margin-left: 20rpx;
|
||
|
||
&.danger {
|
||
color: #c0402b;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|