nongxiaoyu/pages/knowledge/index.vue

<template>
  <view class="page-container">
    <!-- 顶部标签导航 -->
    <view class="header-tabs">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 0 }" 
        @click="handleTabChange(0)"
      >
        <text>农技知识</text>
        <view class="tab-line" :class="{ active: currentTab === 0 }"></view>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 1 }" 
        @click="handleTabChange(1)"
      >
        <text>政策解读</text>
        <view class="tab-line" :class="{ active: currentTab === 1 }"></view>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view
      scroll-y
      class="content-container"
      @scrolltolower="loadMore"
      @refresherrefresh="onRefresh"
      refresher-enabled
      :refresher-triggered="isRefreshing"
    >
      <!-- 主内容区域 -->
      <view class="cards-section">
        <!-- 农技知识内容 -->
        <block v-if="currentTab === 0">
          <navigator 
            class="content-card"
            v-for="(item, index) in techList"
            :key="index"
            :url="`/pages/knowledge/detail?id=${item.id}&type=tech`"
            hover-class="card-hover"
          >
            <view class="content-thumbnail">
              <image 
                :src="item.image" 
                mode="aspectFill"
                class="thumbnail-image"
                lazy-load
              />
              <!-- 仅视频类型显示时长和播放按钮 -->
              <template v-if="item.contentType === 'video'">
                <view class="video-duration">{{ item.duration || '35:56' }}</view>
                <view class="play-button">
                  <view class="play-icon"></view>
                </view>
                <view class="content-type-tag video">视频</view>
              </template>
              <!-- 文章类型显示标签 -->
              <template v-else>
                <view class="content-type-tag article">文章</view>
              </template>
            </view>
            <view class="content-info">
              <text class="content-title">{{ item.title }}</text>
              <view class="info-row">
                <text class="source-name">{{ item.source || '中国农业科技' }}</text>
                <view class="view-count">
                  <text class="iconfont icon-eye"></text>
                  <text>已读 {{ item.viewCount }}</text>
                </view>
              </view>
            </view>
          </navigator>
        </block>

        <!-- 政策解读内容 -->
        <block v-if="currentTab === 1">
          <navigator 
            class="content-card"
            v-for="(item, index) in policyList"
            :key="index"
            :url="`/pages/knowledge/detail?id=${item.id}&type=policy`"
            hover-class="card-hover"
          >
            <view class="content-thumbnail">
              <image 
                :src="item.image" 
                mode="aspectFill"
                class="thumbnail-image"
                lazy-load
              />
              <!-- 仅视频类型显示时长和播放按钮 -->
              <template v-if="item.contentType === 'video'">
                <view class="video-duration">{{ item.duration || '28:32' }}</view>
                <view class="play-button">
                  <view class="play-icon"></view>
                </view>
                <view class="content-type-tag video">视频</view>
              </template>
              <!-- 文章类型显示标签 -->
              <template v-else>
                <view class="content-type-tag article">文章</view>
              </template>
            </view>
            <view class="content-info">
              <text class="content-title">{{ item.title }}</text>
              <view class="info-row">
                <text class="source-name">{{ item.source || '农业部官方' }}</text>
                <view class="view-count">
                  <text class="iconfont icon-eye"></text>
                  <text>已读 {{ item.viewCount }}</text>
                </view>
              </view>
            </view>
          </navigator>
        </block>

        <!-- 无数据状态 -->
        <view class="empty-state" v-if="(currentTab === 0 && techList.length === 0) || (currentTab === 1 && policyList.length === 0)">
          <image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
          <text class="empty-text">暂无数据</text>
        </view>
      </view>

      <!-- 底部安全区域 -->
      <view style="height: 120rpx;"></view>
    </scroll-view>

    <!-- AI问答悬浮按钮 -->
    <view class="assistant-btn" @click="navigateToAI" hover-class="btn-hover">
      <image src="/static/icons/ai.png" class="assistant-icon" mode="aspectFit"></image>
      <text class="btn-text">问农小禹</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 当前标签
const currentTab = ref(0)

// 农技知识列表
const techList = ref([
  {
    id: 1,
    title: '水稻高产栽培技术指南',
    description: '详解水稻种植关键技术要点，包括育苗、插秧、水肥管理等全过程技术要领',
    viewCount: '289',
    image: 'https://img.freepik.com/free-photo/rice-field-with-beautiful-sky_74190-7490.jpg',
    type: '农技',
    contentType: 'article', // 标记为文章类型
    source: '农业技术研究院'
  },
  {
    id: 2,
    title: '果树病虫害防治方案视频教学',
    description: '常见果树病虫害的识别方法、防治时期、用药指导，助您果园增产增收',
    viewCount: '856',
    image: 'https://img.freepik.com/free-photo/apple-tree-with-ripe-red-apples_1150-9301.jpg',
    type: '农技',
    contentType: 'video', // 标记为视频类型
    duration: '15:32',
    source: '中国农业科技'
  },
  {
    id: 3,
    title: '科学施肥技术指南',
    description: '解析不同作物的施肥特点，平衡施肥技术，提高肥料利用率',
    viewCount: '667',
    image: 'https://img.freepik.com/free-photo/farmer-holding-chemical-fertilizer-field_1150-7167.jpg',
    type: '农技',
    contentType: 'article', // 标记为文章类型
    source: '农业知识库'
  }
])

// 政策解读列表
const policyList = ref([
  {
    id: 1,
    title: '2024年农业补贴政策要点解读',
    description: '最新农业补贴政策要点解读，包括种粮补贴、农机补贴等各项补贴申请指南',
    viewCount: '2,341',
    date: '05-23',
    image: 'https://img.freepik.com/free-photo/modern-agricultural-machinery-field_1157-46386.jpg',
    type: '政策',
    contentType: 'article', // 标记为文章类型
    source: '农业部官方'
  },
  {
    id: 2,
    title: '农业保险政策专家解析视频',
    description: '农业保险覆盖范围扩大，新增多项保障内容，理赔流程优化',
    viewCount: '1,856',
    date: '05-22',
    image: 'https://img.freepik.com/free-photo/farmer-working-field_1157-46384.jpg',
    type: '政策',
    contentType: 'video', // 标记为视频类型
    duration: '28:45',
    source: '农业部政策宣讲'
  },
  {
    id: 3,
    title: '绿色种植认证办理指南',
    description: '绿色种植认证最新申请流程及注意事项说明',
    viewCount: '1,667',
    date: '05-21',
    image: 'https://img.freepik.com/free-photo/organic-farm-harvest_1157-46078.jpg',
    type: '政策',
    contentType: 'article', // 标记为文章类型
    source: '农业部认证中心'
  }
])

// 刷新加载状态
const isRefreshing = ref(false)

// 处理Tab切换
const handleTabChange = (index) => {
  currentTab.value = index
  console.log('Tab changed to:', index)
}

// 下拉刷新
const onRefresh = async () => {
  isRefreshing.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    // 模拟刷新数据
    if (currentTab.value === 0) {
      // 刷新农技知识数据
      console.log('刷新农技知识数据')
    } else {
      // 刷新政策解读数据
      console.log('刷新政策解读数据')
    }
  } finally {
    isRefreshing.value = false
  }
}

// 加载更多
const loadMore = () => {
  console.log('Loading more content')
  // 模拟加载更多数据
  if (currentTab.value === 0) {
    // 加载更多农技知识数据
    console.log('加载更多农技知识数据')
  } else {
    // 加载更多政策解读数据
    console.log('加载更多政策解读数据')
  }
}

// 跳转AI问答
const navigateToAI = () => {
  uni.navigateTo({
    url: '/pages/ai-chat/index'
  })
}

onMounted(() => {
  console.log('Page mounted, current tab:', currentTab.value)
})
</script>

<style scoped>
/* 引入字体图标 */
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_3266846_kxscvlm9qpp.woff2') format('woff2');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 22rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-robot:before {
  content: "\e64b";
}

.icon-eye:before {
  content: "\e614";
}

/* 页面容器 */
.page-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 头部标签样式 */
.header-tabs {
  display: flex;
  background-color: #fff;
  padding: 0 30rpx;
  position: relative;
  border-bottom: 1rpx solid #f2f2f2;
}

.tab-item {
  position: relative;
  padding: 20rpx 30rpx;
  margin-right: 50rpx;
  font-size: 30rpx;
  color: #666;
  transition: all 0.3s ease;
}

.tab-item.active {
  color: #333;
  font-weight: 600;
}

.tab-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 6rpx;
  background-color: #4dc971;
  border-radius: 3rpx;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.tab-line.active {
  width: 40rpx;
}

/* 内容区域样式 */
.content-container {
  height: calc(100vh - 88rpx);
  box-sizing: border-box;
}

.cards-section {
  padding: 12rpx;
}

/* 内容卡片通用样式 */
.content-card {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  position: relative;
}

.card-hover {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
}

/* 缩略图 */
.content-thumbnail {
  position: relative;
  width: 100%;
  height: 300rpx;
  background-color: #f0f0f0;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 播放按钮 */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70rpx;
  height: 70rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.play-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9rpx 0 9rpx 16rpx;
  border-color: transparent transparent transparent #ffffff;
  margin-left: 4rpx;
}

/* 视频时长 */
.video-duration {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  padding: 3rpx 8rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 18rpx;
  border-radius: 10rpx;
}

/* 内容类型标签 */
.content-type-tag {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  padding: 4rpx 10rpx;
  font-size: 20rpx;
  border-radius: 6rpx;
  z-index: 2;
}

.content-type-tag.video {
  background-color: #4dc971;
  color: #fff;
}

.content-type-tag.article {
  background-color: #3498db;
  color: #fff;
}

/* 内容信息 */
.content-info {
  padding: 16rpx;
  position: relative;
}

.content-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.source-name {
  color: #999;
  font-size: 22rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.view-count {
  color: #c0c0c0;
  font-size: 20rpx;
  display: flex;
  align-items: center;
}

.view-count .iconfont {
  margin-right: 4rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-image {
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 16rpx;
}

.empty-text {
  font-size: 26rpx;
  color: #999;
}

/* AI按钮 */
.assistant-btn {
  position: fixed;
  right: 30rpx;
  bottom: 100rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #42b983, #3db160);
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(66, 185, 131, 0.35);
  z-index: 99;
  transition: all 0.25s ease;
}

.assistant-icon {
  width: 68rpx;
  height: 68rpx;
  margin-right: 10rpx;
}

.btn-hover {
  transform: scale(1.05);
  box-shadow: 0 8rpx 24rpx rgba(66, 185, 131, 0.45);
}

.btn-text {
  font-size: 28rpx;
  color: #fff;
  font-weight: 500;
}
</style>