novel-front-app/pages_order/novel/bookList.vue

<template>
	<view class="page">
		<navbar title="搜素" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="search">
		    <uv-search bgColor="#ffffff" 
			placeholder="搜索" 
			inputAlign="left" 
			@search="getData"
			@clear="getData"
			@custom="getData"
			v-model="queryParams.name"
		    showAction="false"></uv-search>
		</view>
		
		<view class="tabs">
			<uv-tabs 
			:list="category" 
			:activeStyle="{color : '#000', fontWeight : 600}" 
			lineColor="#000"
			:inactiveStyle="{color: '#000'}" 
			lineHeight="8rpx" 
			lineWidth="50rpx" 
			:current="current"
		    keyName="title"
			@click="clickTabs"></uv-tabs>
		</view>
		
		<view class="novel-list">
			<novel-item v-for="(item, index) in list" 
		    @click="navigateToDetail(item.id)"
		    :key="index" :book="item" />
		</view>
		
	</view>
</template>

<script>
    import novelItem from '@/components/novel/novelItem.vue'
    import mixinsList from '@/mixins/list.js'
	export default {
        mixins: [mixinsList],
		components: {
            novelItem,
		},
		data() {
			return {
                mixinsListApi : '',
				current : 0,
				category: [],
			}
		},
		onLoad() {
			this.getCategoryList()
		},
		methods: {
            async getCategoryList() {
				
                const data = await this.$fetch('getCategoryList')
				
				data.unshift({
					title : '全部'
				})
				
                this.category = data
				
				this.mixinsListApi = 'getRecommendList'
				
				this.getData()
            },
			beforeGetData(){
				let params = {}
				if(this.category[this.current].id){
					params.shopClass = this.category[this.current].id
				}
				return params
			},
			navigateToDetail(id) {
				// 跳转到小说详情页
				this.$utils.navigateTo(`/pages_order/novel/novelDetail?id=${id}`)
			},
			clickTabs({index}){
				this.current = index
				// 更新对应分类的书籍列表
				this.getData()
			},
		}
	}
</script>

<style scoped lang="scss">
	.search {
		background-color: #fff;
		border-radius: 40rpx;
		display: flex;
		padding: 20rpx;
		margin: 20rpx;
	    :deep(.uv-search__content) {
	        box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
	    }
	}
	.novel-list{
		padding: 20rpx;
	}
</style>