502 lines
10 KiB
Vue
502 lines
10 KiB
Vue
<template>
|
||
<view class="search-page">
|
||
<!-- 顶部导航栏（返回按钮） -->
|
||
<view class="nav-header" :style="{ paddingTop: navPaddingTop + 'px' }">
|
||
<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
|
||
<view class="back-btn" @click="goBack">
|
||
<image class="back-icon" src="/static/icons/Left (左).png" mode="aspectFit" />
|
||
</view>
|
||
<text class="nav-title">搜索</text>
|
||
<view class="nav-placeholder"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 搜索输入框（单独一行） -->
|
||
<view class="search-section">
|
||
<view class="search-input-wrap">
|
||
<image class="search-icon" src="/static/icons/search.png" mode="aspectFit" />
|
||
<input
|
||
class="search-input"
|
||
type="text"
|
||
v-model="keyword"
|
||
placeholder="搜索作品、风格、关键词..."
|
||
placeholder-class="search-placeholder"
|
||
confirm-type="search"
|
||
:focus="autoFocus"
|
||
@confirm="handleSearch"
|
||
@input="handleInput"
|
||
/>
|
||
<view class="clear-btn" v-if="keyword" @click="clearKeyword">
|
||
<text class="clear-text">×</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 搜索历史 -->
|
||
<view class="search-history" v-if="!hasSearched && searchHistory.length > 0">
|
||
<view class="history-header">
|
||
<text class="history-title">搜索历史</text>
|
||
<view class="clear-history" @click="clearHistory">
|
||
<image class="delete-icon" src="/static/icons/del.png" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
<view class="history-tags">
|
||
<view
|
||
class="history-tag"
|
||
v-for="(item, index) in searchHistory"
|
||
:key="index"
|
||
@click="searchByHistory(item)"
|
||
>
|
||
<text class="history-tag-text">{{ item }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 热门搜索 -->
|
||
<view class="hot-search" v-if="!hasSearched && hotKeywords.length > 0">
|
||
<view class="hot-header">
|
||
<text class="hot-title">热门搜索</text>
|
||
</view>
|
||
<view class="hot-tags">
|
||
<view
|
||
class="hot-tag"
|
||
v-for="(item, index) in hotKeywords"
|
||
:key="index"
|
||
@click="searchByHistory(item)"
|
||
>
|
||
<text class="hot-tag-text">{{ item }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 搜索结果 -->
|
||
<view class="search-results" v-if="hasSearched">
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" v-if="!isLoading && workList.length === 0">
|
||
<image class="empty-image" src="/static/icons/search.png" mode="aspectFit" />
|
||
<text class="empty-text">未找到相关作品</text>
|
||
<text class="empty-tip">换个关键词试试吧</text>
|
||
</view>
|
||
|
||
<!-- 作品列表 -->
|
||
<view class="work-list-wrap" v-else>
|
||
<WorkList
|
||
ref="workListRef"
|
||
:works="workList"
|
||
:loading="isLoading"
|
||
:finished="!hasMore"
|
||
@click="handleWorkClick"
|
||
@load-more="loadMore"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { onReachBottom } from '@dcloudio/uni-app'
|
||
import { searchWorks } from '@/api/work'
|
||
import WorkList from '@/components/WorkList/index.vue'
|
||
|
||
// 胶囊按钮信息
|
||
const capsuleInfo = ref({ top: 0, height: 32, width: 87, right: 10 })
|
||
const statusBarHeight = ref(0)
|
||
|
||
// 计算导航栏相关尺寸
|
||
const navPaddingTop = computed(() => capsuleInfo.value.top || statusBarHeight.value)
|
||
const navBarHeight = computed(() => capsuleInfo.value.height + 8 || 40)
|
||
const capsuleHeight = computed(() => capsuleInfo.value.height || 32)
|
||
const capsuleWidth = computed(() => capsuleInfo.value.width || 87)
|
||
|
||
const keyword = ref('')
|
||
const autoFocus = ref(true)
|
||
const hasSearched = ref(false)
|
||
const isLoading = ref(false)
|
||
const workList = ref([])
|
||
const hasMore = ref(true)
|
||
const pageNum = ref(1)
|
||
const pageSize = 10
|
||
|
||
// 搜索历史
|
||
const HISTORY_KEY = 'search_history'
|
||
const MAX_HISTORY = 10
|
||
const searchHistory = ref([])
|
||
|
||
// 热门搜索关键词
|
||
const hotKeywords = ref(['风景', '人物', '动漫', '科幻', '艺术', '写实'])
|
||
|
||
// 加载搜索历史
|
||
const loadHistory = () => {
|
||
try {
|
||
const history = uni.getStorageSync(HISTORY_KEY)
|
||
if (history) {
|
||
searchHistory.value = JSON.parse(history)
|
||
}
|
||
} catch (e) {
|
||
console.error('加载搜索历史失败', e)
|
||
}
|
||
}
|
||
|
||
// 保存搜索历史
|
||
const saveHistory = (word) => {
|
||
if (!word.trim()) return
|
||
|
||
// 去重并添加到头部
|
||
const history = searchHistory.value.filter(item => item !== word)
|
||
history.unshift(word)
|
||
|
||
// 限制数量
|
||
if (history.length > MAX_HISTORY) {
|
||
history.pop()
|
||
}
|
||
|
||
searchHistory.value = history
|
||
uni.setStorageSync(HISTORY_KEY, JSON.stringify(history))
|
||
}
|
||
|
||
// 清空历史
|
||
const clearHistory = () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定清空搜索历史吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
searchHistory.value = []
|
||
uni.removeStorageSync(HISTORY_KEY)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 清空关键词
|
||
const clearKeyword = () => {
|
||
keyword.value = ''
|
||
hasSearched.value = false
|
||
workList.value = []
|
||
}
|
||
|
||
// 返回
|
||
const goBack = () => {
|
||
uni.navigateBack()
|
||
}
|
||
|
||
// 处理输入
|
||
const handleInput = () => {
|
||
// 输入时重置搜索状态
|
||
if (!keyword.value.trim()) {
|
||
hasSearched.value = false
|
||
workList.value = []
|
||
}
|
||
}
|
||
|
||
// 执行搜索
|
||
const handleSearch = async () => {
|
||
const word = keyword.value.trim()
|
||
if (!word) {
|
||
uni.showToast({ title: '请输入搜索内容', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
// 保存搜索历史
|
||
saveHistory(word)
|
||
|
||
// 重置状态
|
||
hasSearched.value = true
|
||
workList.value = []
|
||
pageNum.value = 1
|
||
hasMore.value = true
|
||
|
||
await loadData()
|
||
}
|
||
|
||
// 点击历史搜索
|
||
const searchByHistory = (word) => {
|
||
keyword.value = word
|
||
handleSearch()
|
||
}
|
||
|
||
// 加载数据
|
||
const loadData = async () => {
|
||
if (isLoading.value || !hasMore.value) return
|
||
|
||
isLoading.value = true
|
||
|
||
try {
|
||
const res = await searchWorks({
|
||
keyword: keyword.value.trim(),
|
||
pageNum: pageNum.value,
|
||
pageSize
|
||
})
|
||
|
||
const list = res?.list || []
|
||
|
||
if (pageNum.value === 1) {
|
||
workList.value = list
|
||
} else {
|
||
workList.value = [...workList.value, ...list]
|
||
}
|
||
|
||
hasMore.value = res?.hasNext ?? false
|
||
pageNum.value++
|
||
} catch (e) {
|
||
console.error('搜索失败', e)
|
||
} finally {
|
||
isLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 加载更多
|
||
const loadMore = () => {
|
||
if (!isLoading.value && hasMore.value) {
|
||
loadData()
|
||
}
|
||
}
|
||
|
||
// 点击作品
|
||
const handleWorkClick = (work) => {
|
||
uni.navigateTo({ url: `/pages/work/detail?id=${work.id}` })
|
||
}
|
||
|
||
// 页面触底
|
||
onReachBottom(() => {
|
||
if (hasSearched.value) {
|
||
loadMore()
|
||
}
|
||
})
|
||
|
||
onMounted(() => {
|
||
// 获取系统信息
|
||
const sysInfo = uni.getSystemInfoSync()
|
||
statusBarHeight.value = sysInfo.statusBarHeight || 0
|
||
|
||
// 获取胶囊按钮信息（仅微信小程序）
|
||
// #ifdef MP-WEIXIN
|
||
try {
|
||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||
capsuleInfo.value = {
|
||
top: menuButtonInfo.top,
|
||
height: menuButtonInfo.height,
|
||
width: menuButtonInfo.width,
|
||
right: sysInfo.windowWidth - menuButtonInfo.right
|
||
}
|
||
} catch (e) {
|
||
console.warn('获取胶囊信息失败', e)
|
||
}
|
||
// #endif
|
||
|
||
loadHistory()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.search-page {
|
||
min-height: 100vh;
|
||
background-color: #09090b;
|
||
}
|
||
|
||
/* 顶部导航栏 */
|
||
.nav-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background-color: #09090b;
|
||
}
|
||
|
||
.nav-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.back-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.back-icon {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: #f1f5f9;
|
||
}
|
||
|
||
.nav-placeholder {
|
||
width: 40px;
|
||
}
|
||
|
||
/* 搜索输入区域 */
|
||
.search-section {
|
||
padding: 12px 16px 16px;
|
||
}
|
||
|
||
.search-input-wrap {
|
||
height: 44px;
|
||
background: #18181b;
|
||
border-radius: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 16px;
|
||
gap: 10px;
|
||
border: 1px solid #27272a;
|
||
}
|
||
|
||
.search-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
opacity: 0.5;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
height: 100%;
|
||
font-size: 15px;
|
||
color: #f1f5f9;
|
||
background: transparent;
|
||
}
|
||
|
||
.search-placeholder {
|
||
color: #52525b;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.clear-btn {
|
||
width: 20px;
|
||
height: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #3f3f46;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.clear-text {
|
||
font-size: 14px;
|
||
color: #a1a1aa;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* 搜索历史 */
|
||
.search-history {
|
||
padding: 20px 16px;
|
||
}
|
||
|
||
.history-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.history-title {
|
||
font-size: 14px;
|
||
color: #a1a1aa;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.clear-history {
|
||
padding: 4px;
|
||
}
|
||
|
||
.delete-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.history-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.history-tag {
|
||
background: #27272a;
|
||
border-radius: 16px;
|
||
padding: 6px 14px;
|
||
}
|
||
|
||
.history-tag-text {
|
||
font-size: 13px;
|
||
color: #e4e4e7;
|
||
}
|
||
|
||
/* 热门搜索 */
|
||
.hot-search {
|
||
padding: 0 16px 20px;
|
||
}
|
||
|
||
.hot-header {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.hot-title {
|
||
font-size: 14px;
|
||
color: #a1a1aa;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.hot-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.hot-tag {
|
||
background: #27272a;
|
||
border-radius: 16px;
|
||
padding: 6px 14px;
|
||
}
|
||
|
||
.hot-tag-text {
|
||
font-size: 13px;
|
||
color: #e4e4e7;
|
||
}
|
||
|
||
/* 搜索结果 */
|
||
.search-results {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
/* 空状态 */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 80px 0;
|
||
}
|
||
|
||
.empty-image {
|
||
width: 120px;
|
||
height: 120px;
|
||
opacity: 0.5;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 15px;
|
||
color: #a1a1aa;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.empty-tip {
|
||
font-size: 13px;
|
||
color: #71717a;
|
||
}
|
||
|
||
.work-list-wrap {
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
</style>
|