134 lines
3.1 KiB
Vue
134 lines
3.1 KiB
Vue
<template>
|
|
<view class="knowledge-container">
|
|
<u-navbar title="宠物知识库" left-icon="arrow-left" @left-click="goBack"></u-navbar>
|
|
|
|
<u-search placeholder="搜索知识" v-model="searchKeyword" @search="searchKnowledge" @custom="searchKnowledge"></u-search>
|
|
|
|
<view class="category-tabs">
|
|
<u-tabs :list="categories" @click="switchCategory" :current="currentCategory"></u-tabs>
|
|
</view>
|
|
|
|
<scroll-view class="knowledge-list" scroll-y="true">
|
|
<u-card v-for="item in filteredKnowledge" :key="item.id" :margin="20" :padding="20" @click="viewDetail(item)">
|
|
<view class="knowledge-item">
|
|
<u-text :text="item.title" type="primary" size="16" bold></u-text>
|
|
<u-text :text="item.summary" type="info" size="14" margin="10rpx 0"></u-text>
|
|
<view class="knowledge-meta">
|
|
<u-tag :text="item.category" type="info" size="mini"></u-tag>
|
|
<u-text :text="item.readCount + '次阅读'" type="tips" size="12"></u-text>
|
|
</view>
|
|
</view>
|
|
</u-card>
|
|
</scroll-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: {
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
|
|
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 {
|
|
background-color: #f8f9fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.category-tabs {
|
|
background-color: white;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.knowledge-list {
|
|
height: calc(100vh - 300rpx);
|
|
}
|
|
|
|
.knowledge-item {
|
|
.knowledge-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
</style>
|