aquagreen_wechat_app/src/subPackages/pages-sales/knowledgeList.vue

<template>
  <view class="sub-page">
    <TopBar title="行业知识" show-back />

    <view class="px-4 pt-3">
      <!-- 搜索栏：默认白底灰边 -->
      <view class="search-bar mb-3">
        <text class="uni-icons uniui-search search-icon"></text>
        <input
          v-model="searchText"
          class="search-input"
          placeholder="搜索知识标题或关键词"
        />
      </view>

      <!-- 分类筛选 -->
      <view class="filter-bar mb-3">
        <view
          v-for="cat in categories"
          :key="cat.value"
          class="filter-chip"
          :class="{ 'filter-chip-active': currentCategory === cat.value }"
          @click="currentCategory = cat.value"
        >
          {{ cat.label }}
        </view>
      </view>

      <view v-if="loading" class="py-10 text-center">
        <text class="empty-text">加载中...</text>
      </view>

      <view v-else-if="filteredKnowledges.length === 0">
        <EmptyState message="暂无知识内容" />
      </view>

      <view v-else class="glass-card">
        <view
          v-for="item in filteredKnowledges"
          :key="item.id"
          class="notice-row"
          hover-class="row-hover"
          :hover-start-time="0"
          :hover-stay-time="120"
          @click="goToDetail(item.id)"
        >
          <view class="flex items-center justify-between mb-2">
            <text class="row-title truncate flex-1 min-w-0 mr-2">{{ item.title }}</text>
            <text class="type-tag flex-shrink-0">{{ item.category }}</text>
          </view>
          <text class="row-sub notice-content">{{ item.summary }}</text>
          <view class="flex items-center justify-between mt-2">
            <view class="flex items-center">
              <text class="uni-icons uniui-calendar-filled meta-icon mr-1"></text>
              <text class="row-date">{{ formatDate(item.createTime) }}</text>
            </view>
            <view class="flex items-center">
              <text class="uni-icons uniui-eye-filled meta-icon mr-1"></text>
              <text class="row-date">{{ item.viewCount }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'
import { formatDate } from '../../utils'

const loading = ref(false)
const searchText = ref('')
const currentCategory = ref('all')

const categories = [
  { value: 'all', label: '全部' },
  { value: 'operation', label: '操作规范' },
  { value: 'safety', label: '安全知识' },
  { value: 'equipment', label: '设备维护' },
  { value: 'technology', label: '技术文档' },
]

const knowledges = ref([
  { id: '1', title: '化粪池清掏操作规范', category: '操作规范', summary: '详细介绍了化粪池清掏的标准操作流程、安全注意事项及应急处理方案...', createTime: '2026-06-20', viewCount: 128 },
  { id: '2', title: '管道疏通技术要点', category: '技术文档', summary: '管道疏通的常用方法、设备选型及常见问题解决方案...', createTime: '2026-06-18', viewCount: 95 },
  { id: '3', title: '施工现场安全守则', category: '安全知识', summary: '施工现场的安全防护要求、危险源识别及个人防护措施...', createTime: '2026-06-15', viewCount: 210 },
  { id: '4', title: '高压清洗车维护指南', category: '设备维护', summary: '高压清洗车的日常保养、常见故障排查及维修方法...', createTime: '2026-06-10', viewCount: 76 },
])

const filteredKnowledges = computed(() => {
  let result = knowledges.value
  if (currentCategory.value !== 'all') {
    result = result.filter(k => k.category === categories.find(c => c.value === currentCategory.value)?.label)
  }
  if (searchText.value) {
    const keyword = searchText.value.toLowerCase()
    result = result.filter(k => k.title.toLowerCase().includes(keyword) || k.summary.toLowerCase().includes(keyword))
  }
  return result
})

function goToDetail(id: string) {
  uni.navigateTo({ url: `/subPackages/pages-sales/knowledgeDetail?id=${id}` })
}

onMounted(() => {
  loading.value = false
})
</script>

<style scoped>
.sub-page {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f6fbf9;
  padding-bottom: 24px;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 40px;
  border-radius: 999px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

.search-icon {
  font-size: 16px;
  color: #9ca3af;
  margin-right: 8px;
}

.search-input {
  flex: 1;
  font-size: 14px;
  color: #1f2937;
}

/* 筛选条：默认白底灰边，激活态绿色 */
.filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.filter-chip {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  color: #6b7280;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.filter-chip-active {
  color: #ffffff;
  font-weight: 600;
  background: linear-gradient(135deg, #368f6f 0%, #4ba98a 100%);
  border-color: transparent;
}

.glass-card {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(164, 216, 152, 0.35);
  border-radius: 24px;
  box-shadow: 0 18px 50px -12px rgba(54, 143, 111, 0.28);
  overflow: hidden;
  margin-bottom: 12px;
}

.notice-row {
  padding: 14px 16px;
  border-top: 1px solid rgba(164, 216, 152, 0.18);
}

.notice-row:first-child {
  border-top: none;
}

.row-hover {
  background-color: rgba(164, 216, 152, 0.1);
}

.row-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.row-sub {
  font-size: 12px;
  color: #9ca3af;
}

.notice-content {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.row-date {
  font-size: 12px;
  color: #9ca3af;
}

.meta-icon {
  font-size: 12px;
  color: #9ca3af;
}

.type-tag {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #368f6f;
  background-color: rgba(164, 216, 152, 0.24);
}

.empty-text {
  font-size: 13px;
  color: #9ca3af;
}
</style>