ufutx-pc-website/src/views/News/News.vue

<template>
  <div class="page-container">
    <!-- 已有Banner组件 -->
    <BannerCarousel />

    <!-- 核心内容区 -->
    <div class="news-content">
      <!-- 标签切换（动态加载） -->
      <el-tabs v-model="activeTab" class="news-tabs" @tab-change="resetPage">
        <el-tab-pane v-for="item in categories" :key="item.name" :label="item.name" :name="item.name">
          <template #label>
            <div class="categories-label">{{ item.name }}</div>
          </template>
        </el-tab-pane>
      </el-tabs>

      <!-- 新闻列表（数据加载后显示） -->
      <div v-if="!loading && newsData.length > 0" class="news-list">
        <div v-for="(item, idx) in filteredNews" :key="idx" class="news-item">
          <img :src="item.pic" alt="image" class="news-cover" />
          <div class="news-info">
            <h3 class="news-title">{{ item.title }}</h3>
            <h3 class="news-label">{{ item.publisher }}</h3>
            <div class="news-wrap" @click="openArticleInNewWindow(item.id)">
              <div class="view-btn">查看详情</div>
              <div class="news-date">
                <img
                  class="icon"
                  src="https://images.health.ufutx.com/202506/13/c5e3552a870fd254610290bbabce5e30.png"
                />
                <p>{{ item.create_time }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 无数据时显示占位图（加载完成且数据为空） -->
      <div v-else-if="!loading && newsData.length === 0" class="empty-state">
        <img
          src="https://images.health.ufutx.com/202507/02/259f20509b57b36199ef7619f8d63733.png"
          alt="暂无数据"
          class="empty-img"
        />
        <p class="empty-text">暂无内容</p>
      </div>
      <!-- 加载状态 -->
      <div v-else class="loading-container">
        <!--        <el-spinner size="large"></el-spinner>-->
        <p>加载中...</p>
      </div>
      <!-- 分页 -->
      <div class="pagination-wrap">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          background
          layout="total,prev, pager, next"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import BannerCarousel from '@/views/News/sections/BannerCarousel.vue'
import request from '@/utils/request' // 假设已有请求工具函数

// 路由相关
// import { useRoute, useRouter } from 'vue-router'
import { openNewWindow } from '@/utils/navigation.ts'

// const route = useRoute()
// const router = useRouter()

// 响应式数据
const activeTab = ref('') // 激活标签
const currentPage = ref(1) // 当前页码
const pageSize = ref(15) // 每页条数
const totalCount = ref(0) // 总数据量
const loading = ref(false) // 加载状态
const categories = ref<Array<any>>([]) // 标签分类
const newsData = ref<Array<any>>([]) // 新闻数据

// 计算当前显示的新闻（带分页）
const filteredNews = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return newsData.value.slice(start, start + pageSize.value)
})

// 跳转详情页（携带文章ID）
const openArticleInNewWindow = (id: number) => {
  openNewWindow(`/articleDetail/${id}`)
}

// 获取标签分类列表
const fetchCategories = async () => {
  loading.value = true
  try {
    // 从接口获取标签分类（:plat从路由参数获取）
    const res = await request.get(`/go/api/:plat/v1/article/category/list`)
    if (res.data.length > 0) {
      categories.value = res.data || []
      // 设置默认激活标签（如果有数据）
      if (categories.value.length > 0) {
        activeTab.value = categories.value[0].name
      }
    } else {
      // ElMessage.error(res.message || '获取分类失败')
    }
  } catch (error: any) {
    console.error('获取分类列表失败', error)
    ElMessage.error('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 获取新闻列表数据
const fetchNewsList = async (category_id: string, page: number) => {
  loading.value = true
  try {
    // 接口参数（type根据标签分类传递）
    const params = {
      category_id: category_id,
      page
    }

    // 调用新闻列表接口
    const res = await request.get(`/go/api/:plat/v1/article/list`, params)

    if (res.code === 0) {
      newsData.value = res.data.data || []
      console.log(newsData.value)
      totalCount.value = res.data.total_count || 0
    } else {
      ElMessage.error(res.message || '获取新闻失败')
    }
  } catch (error: any) {
    console.error('获取新闻列表失败', error)
    ElMessage.error('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 标签切换时重置页码并加载数据
const resetPage = () => {
  currentPage.value = 1
  if (activeTab.value) {
    loadNewsData()
  }
}

// 加载新闻数据（整合标签和分页参数）
const loadNewsData = () => {
  if (!activeTab.value) return
  // 假设标签分类的name对应新闻接口的type参数
  console.log(activeTab.value)
  const category = categories.value.find(item => item.name === activeTab.value)
  if (category) {
    fetchNewsList(category.id || '', currentPage.value)
  }
}

// 分页事件
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  loadNewsData()
}

const handlePageChange = (val: number) => {
  currentPage.value = val
  loadNewsData()
}

// 组件挂载时加载分类和新闻数据
onMounted(async () => {
  await fetchCategories()
  if (activeTab.value) {
    loadNewsData()
  }
})

// 监听标签切换，重新加载数据
// watch(activeTab, () => {
//   loadNewsData()
// })
</script>

<style scoped lang="less">
@import '@/styles/global.less';

.page-container {
  min-height: 100vh;
  background-color: @bg-color;
}

.news-content {
  max-width: 1920px;
  padding: 0 20px;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: @text-color-secondary;

  .el-spinner {
    margin-bottom: 20px;
  }
}

/* 标签切换样式（还原设计的蓝色下划线） */
.news-tabs {
  padding-top: 50px;
  .categories-label {
    font-size: 32px;
  }
  :deep(.el-tabs__nav-wrap) {
    &:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100vw;
      height: 0.5px;
      background-color: #b5b5b5;
      z-index: var(--el-index-normal);
    }
  }

  :deep(.el-tabs__active-bar) {
    background-color: @primary-dark; // 下划线颜色
    height: 3px;
    bottom: -20px !important;
    margin-top: 20px;
  }

  :deep(.el-tabs__header) {
    margin: 0;
    width: 100%;

    .el-tabs__nav {
      justify-content: center;
      width: 100%;
      margin-bottom: 20px;

      .el-tabs__item {
        font-size: @font-size-xxl;
        color: @text-color-secondary;
        margin-right: 104px;

        &.is-active {
          color: @primary-dark; // 激活态文字颜色
        }
      }
    }
  }

  // 响应式适配
  @media (max-width: @tablet-breakpoint) {
    .categories-label {
      font-size: @font-size-lg;
    }
    :deep(.el-tabs__item) {
      margin-right: @space-md;
      font-size: @font-size-lg;
    }

    :deep(.el-tabs__active-bar) {
      bottom: -15px !important;
    }
  }

  @media (max-width: @mobile-breakpoint) {
    :deep(.el-tabs__item) {
      margin-right: @space-sm;
      font-size: @font-size-md;
    }

    :deep(.el-tabs__active-bar) {
      bottom: -10px !important;
    }
  }
}

/* 新闻列表 */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 100px 192px 0;

  .news-item {
    display: flex;
    align-items: center;
    border-bottom: 0.3px solid #b5b5b5;
    padding-bottom: 50px;

    .news-cover {
      width: 500px;
      height: 260px;
      object-fit: cover;
      border-radius: @border-radius-md;
      flex-shrink: 0; /* 禁止收缩，保证宽度不变 */
      margin-right: 30px;
    }

    .news-info {
      width: 100%;
      padding-top: 20px;
      text-align: left;

      .news-title {
        font-size: @font-size-lg;
        font-weight: @font-weight-medium;
        color: @text-color;
        margin-bottom: @space-sm;
      }

      .news-label {
        font-size: @font-size-sm;
        color: @text-color-secondary;
        margin-top: 13px;
        margin-bottom: 76px;
      }

      .news-wrap {
        display: flex;
        justify-content: space-between;

        .view-btn {
          padding: 6px 16px;
          color: @primary-dark;
          border-radius: 4px;
          border: 1px solid var(--1060-ff, #1060ff);
          cursor: pointer;
        }

        .news-date {
          font-size: @font-size-sm;
          color: @text-color-secondary;
          display: flex;
          align-items: center;
          gap: 8px;

          .icon {
            width: 18px;
            height: 18px;
            object-fit: contain;
          }
        }
      }
    }
  }

  // 响应式适配
  @media (max-width: @tablet-breakpoint) {
    padding: @space-xl @space-md 0;

    .news-item {
      flex-direction: column;
      align-items: flex-start;
      gap: @space-lg;

      .news-cover {
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: @space-lg;
      }

      .news-info .news-wrap {
        flex-direction: column;
        gap: @space-sm;

        .view-btn {
          align-self: flex-start;
        }

        .news-date {
          order: -1;
        }
      }
    }
  }

  @media (max-width: @mobile-breakpoint) {
    padding: @space-lg @space-md 0;
    gap: @space-xl;

    .news-item {
      padding-bottom: @space-lg;

      .news-cover {
        height: 180px;
      }

      .news-info .news-title {
        font-size: @font-size-md;
      }

      .news-info .news-label {
        font-size: @font-size-sm;
      }

      .news-info .view-btn {
        font-size: @font-size-xs;
      }
    }
    .news-date {
      .icon {
        width: 40px;
        height: 40px;
      }
      p {
        font-size: @font-size-xs;
      }
    }
  }
}

/* 分页样式 */
.pagination-wrap {
  margin-top: 50px;
  padding-bottom: 170px;
  display: flex;
  justify-content: center;

  :deep(.el-pager li.is-active) {
    color: @primary-dark;
  }

  .el-pagination {
    .el-pagination__total {
      color: @text-color-light;
    }

    .el-pager li.active {
      background-color: @primary-color;
      color: #fff;
    }

    .el-pagination__sizes {
      margin: 0 @space-md;
    }
  }

  // 响应式适配
  @media (max-width: @mobile-breakpoint) {
    .el-pagination {
      .el-pagination__total {
        font-size: @font-size-xs;
      }

      .el-pager li {
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: @font-size-xs;
      }

      .el-pagination__sizes {
        margin: 0 @space-xs;

        .el-input {
          font-size: @font-size-xs;
        }
      }
    }
  }
}
// 无数据占位图样式
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 0; // 与列表区域上下间距保持一致
  text-align: center;

  .empty-img {
    width: 300px; // 调整占位图宽度（根据实际图片比例）
    height: auto;
    margin-bottom: 20px;
    opacity: 0.8; // 轻微降低透明度，避免过于突兀
  }

  .empty-text {
    font-size: 20px;
    color: @text-color-secondary;
    .mt(10px);
  }

  // 响应式适配
  @media (max-width: @mobile-breakpoint) {
    .empty-img {
      width: 200px; // 移动端缩小图片
    }
    .empty-text {
      font-size: @font-size-md;
    }
  }
}
.pagination {
  margin-top: 20px;
  text-align: right;
}

:deep(.el-pager li.is-active) {
  background-color: #1665fc !important;
  color: #ffffff !important;
}
</style>