pet/pages/assistant/knowledge.vue

<template>
	<view class="knowledge-container page-container-unified">
		<view class="search-container">
			<u-search placeholder="搜索知识" v-model="searchKeyword" @search="searchKnowledge" @custom="searchKnowledge"></u-search>
		</view>
		
		<view class="category-tabs">
			<u-tabs :list="categories" @click="switchCategory" :current="currentCategory"></u-tabs>
		</view>

		<view class="knowledge-list">
			<scroll-view class="knowledge-scroll" scroll-y="true">
				<view class="knowledge-content">
					<view v-for="item in filteredKnowledge" :key="item.id" class="knowledge-card" @click="viewDetail(item)">
						<view class="knowledge-item">
							<text class="knowledge-title">{{ item.title }}</text>
							<text class="knowledge-summary">{{ item.summary }}</text>
							<view class="knowledge-meta">
								<view class="category-tag">
									<text class="tag-text">{{ item.category }}</text>
								</view>
								<text class="read-count">{{ item.readCount }}次阅读</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			currentCategory: 0,
			categories: [
				{ name: '全部' },
				{ name: '饮食' },
				{ name: '健康' },
				{ name: '训练' },
				{ name: '护理' }
			],
			knowledgeList: [
				{
					id: 1,
					title: '猫咪日常饮食指南',
					summary: '了解猫咪的营养需求，选择合适的猫粮和喂食方式',
					category: '饮食',
					readCount: 1234,
					content: '详细的猫咪饮食指南内容...'
				},
				{
					id: 2,
					title: '狗狗疫苗接种时间表',
					summary: '幼犬和成犬的疫苗接种计划和注意事项',
					category: '健康',
					readCount: 856,
					content: '疫苗接种详细说明...'
				},
				{
					id: 3,
					title: '宠物基础训练方法',
					summary: '如何训练宠物基本指令和良好习惯',
					category: '训练',
					readCount: 642,
					content: '训练方法详细介绍...'
				}
			]
		}
	},
	computed: {
		filteredKnowledge() {
			let result = this.knowledgeList
			
			// 分类筛选
			if (this.currentCategory > 0) {
				const categoryName = this.categories[this.currentCategory].name
				result = result.filter(item => item.category === categoryName)
			}
			
			// 搜索筛选
			if (this.searchKeyword) {
				result = result.filter(item => 
					item.title.includes(this.searchKeyword) || 
					item.summary.includes(this.searchKeyword)
				)
			}
			
			return result
		}
	},
	methods: {
		switchCategory(item) {
			this.currentCategory = item.index
		},
		
		searchKnowledge() {
			// 搜索逻辑已在computed中处理
		},
		
		viewDetail(item) {
			uni.navigateTo({
				url: `/pages/assistant/knowledge-detail?id=${item.id}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.knowledge-container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
}

.search-container {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	margin: 0 0 0 0;
	border-radius: 24rpx;
	padding: 20rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	flex-shrink: 0;
}

.category-tabs {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	margin: 20rpx 0 0 0;
	border-radius: 24rpx;
	padding: 20rpx 0;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	flex-shrink: 0;
}

.knowledge-list {
	margin-top: 20rpx;
	flex: 1;
	overflow: hidden;
}

.knowledge-scroll {
	width: 100%;
	height: 100%;
}

.knowledge-content {
	padding: 20rpx 0;
	padding-bottom: 40rpx;
	min-height: 100%;
	box-sizing: border-box;
}

.knowledge-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	margin-bottom: 24rpx;
	border-radius: 24rpx;
	padding: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.3);
	}
}

.knowledge-item {
	.knowledge-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #FF8A80;
		display: block;
		margin-bottom: 16rpx;
	}

	.knowledge-summary {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.4;
		display: block;
		margin-bottom: 20rpx;
	}

	.knowledge-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.category-tag {
			background: rgba(255, 138, 128, 0.1);
			border: 2rpx solid rgba(255, 138, 128, 0.3);
			border-radius: 16rpx;
			padding: 8rpx 16rpx;

			.tag-text {
				font-size: 24rpx;
				color: #FF8A80;
				font-weight: 500;
			}
		}

		.read-count {
			font-size: 24rpx;
			color: #999999;
		}
	}
}
</style>