englishread-front/subPages/home/search.vue

<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>