You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
3.7 KiB
140 lines
3.7 KiB
<template>
|
|
<view class="search-container">
|
|
|
|
<!-- 顶部搜索栏 -->
|
|
<view class="search-header">
|
|
<uv-search v-model="searchKeyword" placeholder="请输入内容" :show-action="true" action-text="搜索" :action-style="{
|
|
color: '#fff',
|
|
backgroundColor: '#06DADC',
|
|
borderRadius: '198rpx',
|
|
width: '100rpx',
|
|
height: '64rpx',
|
|
textAlign: 'center',
|
|
fontSize: '26rpx',
|
|
lineHeight: '64rpx',
|
|
}" @search="handleSearch" @custom="handleSearch" @clear="handleSearch"></uv-search>
|
|
<!-- 分类标签栏 -->
|
|
<uv-tabs
|
|
:list="categoryTabs"
|
|
:current="currentTab"
|
|
keyName="title"
|
|
@change="switchTab"
|
|
:scrollable="true"
|
|
:lineColor="'#000'"
|
|
:activeStyle="{ color: '#000', fontWeight: '900' }"
|
|
:inactiveStyle="{ color: '#606266' }"
|
|
></uv-tabs>
|
|
</view>
|
|
|
|
|
|
<!-- 搜索结果列表 -->
|
|
<view class="search-results">
|
|
<BookList :list="list" :isLoading="isLoading" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import MixinList from '@/mixins/list.js'
|
|
import BookList from '@/components/BookList.vue'
|
|
|
|
export default {
|
|
mixins: [MixinList],
|
|
components: {
|
|
BookList
|
|
},
|
|
data() {
|
|
return {
|
|
mixinListApi: 'book.list',
|
|
// 自定义onShow
|
|
mixinListConfig: {
|
|
customOnShow: true,
|
|
},
|
|
searchKeyword: '',
|
|
label: '',
|
|
currentTab: 0,
|
|
categoryTabs: [],
|
|
bookList: [
|
|
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
mixinSetParams() {
|
|
const params = {}
|
|
// 只有当不是"全部"选项时才添加category参数
|
|
if (this.categoryTabs[this.currentTab] && this.categoryTabs[this.currentTab].id) {
|
|
params.category = this.categoryTabs[this.currentTab].id
|
|
}
|
|
if (this.label) {
|
|
params.label = this.label
|
|
}
|
|
if (this.searchKeyword) {
|
|
params.title = this.searchKeyword
|
|
}
|
|
return params
|
|
},
|
|
handleSearch() {
|
|
// console.log('搜索:', this.searchKeyword)
|
|
this.list = []
|
|
this.initPage()
|
|
this.getList(true)
|
|
// 这里添加搜索逻辑
|
|
},
|
|
|
|
switchTab(e) {
|
|
this.currentTab = e.index
|
|
this.initPage()
|
|
this.getList(true)
|
|
},
|
|
// 获取书籍分类
|
|
async getCategory() {
|
|
const categoryRes = await this.$api.book.category()
|
|
if (categoryRes.code === 200) {
|
|
this.categoryTabs = categoryRes.result.map(item => ({
|
|
title: item.title,
|
|
id: item.id
|
|
}))
|
|
// 在数组开头添加"全部"选项
|
|
this.categoryTabs.unshift({
|
|
title: '全部',
|
|
id: null
|
|
})
|
|
}
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
if (options.label) {
|
|
this.label = options.label
|
|
}
|
|
},
|
|
async onShow() {
|
|
await this.getCategory()
|
|
this.getList()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.search-container {
|
|
background: #fff;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.search-header {
|
|
padding: 10rpx 32rpx 6rpx;
|
|
background: #fff;
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
z-index: 9;
|
|
}
|
|
|
|
|
|
.search-results {
|
|
padding: 32rpx;
|
|
}
|
|
</style>
|