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 }}</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> -->
				  <image src="../../static/icons/yidu.png" mode="aspectFit"></image>
                  <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 }}</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">
                 <image src="../../static/icons/yidu.png" mode="aspectFit"></image>
                  <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 class="loading-state" v-if="loading">
          <text class="loading-text">加载中...</text>
        </view>
        
        <!-- 底部加载完成提示 -->
        <view class="load-all" v-if="(currentTab === 0 && techLoadAll) || (currentTab === 1 && policyLoadAll)">
          <text class="load-all-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>
import {getTechList,getPolicyList} from '@/api/services/knowledge.js';
export default {
  data() {
    return {
      // 当前标签
      currentTab: 0,

      // 农技知识列表
      techList: [],
      // 政策解读列表
      policyList: [],

      // 分页参数
      techPage: 1,
      policyPage: 1,
      pageSize: 10,
      
      // 加载状态
      loading: false,
      isRefreshing: false,
      
      // 是否全部加载完成
      techLoadAll: false,
      policyLoadAll: false
    }
  },

  mounted() {
	  console.log("process.env.NODE_ENV",process.env.NODE_ENV);
    // 初始化数据加载
    this.loadInitialData();
  },

  methods: {
    // 初始化数据加载
    loadInitialData() {
      if (this.currentTab === 0) {
        this.loadTechList();
      } else {
        this.loadPolicyList();
      }
    },
    
    // 处理Tab切换
    handleTabChange(index) {
      if (this.currentTab === index) {
        return;
      }
      
      this.currentTab = index;
      
      // 切换标签时，如果对应列表为空，则加载数据
      if (index === 0 && this.techList.length === 0) {
        this.loadTechList();
      } else if (index === 1 && this.policyList.length === 0) {
        this.loadPolicyList();
      }
    },

    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true;
      
      if (this.currentTab === 0) {
        this.techPage = 1;
        this.techLoadAll = false;
        await this.loadTechList(true);
      } else {
        this.policyPage = 1;
        this.policyLoadAll = false;
        await this.loadPolicyList(true);
      }
      
      this.isRefreshing = false;
    },

    // 加载更多
    loadMore() {
      if (this.loading) return;
      
      if (this.currentTab === 0 && !this.techLoadAll) {
        this.techPage++;
        this.loadTechList();
      } else if (this.currentTab === 1 && !this.policyLoadAll) {
        this.policyPage++;
        this.loadPolicyList();
      }
    },
    
    // 加载农技知识列表
    async loadTechList(refresh = false) {
      if (this.loading) return;
      
      this.loading = true;
      
      try {
         const result = await getTechList({params: {
            pageNum: this.techPage,
            pageSize: this.pageSize
          }});
		console.log("result",result);
        // 请求成功
        if (result.data.code === 200 && result.data.rows) {
          const newData = result.data.rows;
          
          // 如果是刷新或第一页，则替换列表
          if (refresh || this.techPage === 1) {
            this.techList = newData;
          } else {
            // 否则追加到列表
            this.techList = [...this.techList, ...newData];
          }
          
          // 判断是否加载完全部数据
          if (newData.length < this.pageSize) {
            this.techLoadAll = true;
          }
		  console.log("this.techList",this.techList);
        } else {
          // 请求返回错误
          uni.showToast({
            title: result.msg || '加载失败',
            icon: 'none'
          });
          
          // 如果不是第一页，则减回页码
          if (this.techPage > 1) {
            this.techPage--;
          }
        }
      } catch (error) {
        console.error('加载农技知识列表失败:', error);
        uni.showToast({
          title: '网络异常，请稍后重试',
          icon: 'none'
        });
        
        // 如果不是第一页，则减回页码
        if (this.techPage > 1) {
          this.techPage--;
        }
      } finally {
        this.loading = false;
      }
    },
    
    // 加载政策解读列表
    async loadPolicyList(refresh = false) {
      if (this.loading) return;
      
      this.loading = true;
      
      try {
        const result = await getPolicyList({
          params: {
            pageNum: this.policyPage,
            pageSize: this.pageSize
          }
        })
        
        // 请求成功
        if (result.data.code === 200 && result.data.rows) {
          const newData = result.data.rows;
          
          // 如果是刷新或第一页，则替换列表
          if (refresh || this.policyPage === 1) {
            this.policyList = newData;
          } else {
            // 否则追加到列表
            this.policyList = [...this.policyList, ...newData];
          }
          
          // 判断是否加载完全部数据
          if (newData.length < this.pageSize) {
            this.policyLoadAll = true;
          }
        } else {
          // 请求返回错误
          uni.showToast({
            title: result.msg || '加载失败',
            icon: 'none'
          });
          
          // 如果不是第一页，则减回页码
          if (this.policyPage > 1) {
            this.policyPage--;
          }
        }
      } catch (error) {
        console.error('加载政策解读列表失败:', error);
        uni.showToast({
          title: '网络异常，请稍后重试',
          icon: 'none'
        });
        
        // 如果不是第一页，则减回页码
        if (this.policyPage > 1) {
          this.policyPage--;
        }
      } finally {
        this.loading = false;
      }
    },

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

<style scoped>


.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 image {
  padding-right: 6px;
  width: 16px;  /* 设置图标宽度 */
  height: 16px; /* 设置图标高度 */
  vertical-align: middle;
}

.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;
}

/* 加载中状态 */
.loading-state {
  text-align: center;
  padding: 20rpx 0;
}

.loading-text {
  font-size: 24rpx;
  color: #999;
}

/* 加载全部状态 */
.load-all {
  text-align: center;
  padding: 30rpx 0;
}

.load-all-text {
  font-size: 24rpx;
  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>