ContestPortal/src/views/news/index.vue

<template>
  <div class="main">
    <el-tabs
      v-model="activeName"
      style="max-width: 70%; margin: auto"
      class="container"
      @tab-click="handleTabClick"
    >
      <el-tab-pane
        v-for="category in categories"
        :key="category.id"
        :label="category.name"
        :name="category.id"
      >
        <ul>
          <li
            v-for="newsItem in getNewsItemsForCategory(category)"
            :key="newsItem.id"
          >
            <div class="box-list" @click.stop="handleNewsClick(newsItem)">
              <div class="left-box-list">
                <p class="list-title">{{ newsItem.title }}</p>
                <p class="list-summary">
                  {{ stripHtmlTags(newsItem.summary) }}
                </p>
                <p class="list-time">{{ newsItem.date }}</p>
              </div>
              <img
                class="news-image"
                :src="newsItem.imageUrl"
                alt="News Image"
            
              />
            </div>
            <el-divider />
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getColumnListApi, queryEssayListApi } from '@/api/news'
let categories = ref([])
let newsItems = ref({})
let activeName = ref('')
const router = useRouter()

//使用正则表达式转换html标签文本
function stripHtmlTags(html) {
  return html.replace(/<[^>]*>/g, '')
}

// 获取栏目信息
const fetchColumnList = async () => {
  const response = await getColumnListApi()
  if (response.success && response.result) {
    categories.value = response.result.filter(
      (category) => category.isShow === '1',
    )
    // 尝试立即加载第一个栏目的新闻列表
    if (categories.value.length > 0) {
      await fetchNewsList(categories.value[0].id)
      activeName.value = categories.value[0].id
    }
  }
}

// 栏目新闻列表查询
const fetchNewsList = async (categoryId) => {
  try {
    const response = await queryEssayListApi(categoryId)
    // console.log(response.success,'是否有响应')
    // console.log(response.result.records,'获取的响应数据')
    if (response.success && response.result.records) {
      newsItems.value[categoryId] = response.result.records.map((data) => ({
        id: data.id,
        title: data.title,
        date: data.publishTime,
        summary: data.content,
        imageUrl: data.comimg ? getAbsoluteImagePath(data.comimg) : '',
      }))
    }
  } catch (error) {
    console.error('获取新闻列表失败', error)
  }
}

//获取图片完整地址
const getAbsoluteImagePath = (relativePath) => {
  const baseImageUrl = 'https://localhost:18085/jeecg-boot/' // 替换为实际的服务器地址
  return baseImageUrl + relativePath
}

// 获取指定栏目的新闻列表
const getNewsItemsForCategory = (category) => {
  return newsItems.value[category.id] || []
}

// 初始化加载栏目列表
onMounted(() => {
  fetchColumnList()
})

// 当选项卡改变时更新当前显示的新闻列表
const handleTabClick = async (tab) => {
  const categoryId = tab.props.name
  if (!newsItems.value[categoryId]?.length) {
    await fetchNewsList(categoryId)
  }
  activeName.value = categoryId
}

// 处理新闻条目的点击事件
const handleNewsClick = (newsItem) => {
  router.push({
    name: 'newsDetail',
    params: { id: newsItem.id.toString() },
  })
}
</script>
<style scoped>
.main {
  margin-top: 100px;
}
.container {
  margin: auto;
  height: 98vh;
  overflow-y: scroll;
  padding: 0;
  display: block;
}
.container::-webkit-scrollbar {
  width: 0;
}
.box-list {
  display: flex;
  width: 95%;
  height: 100px;
  margin-left: 30px;
  margin-bottom: 10px;
  align-items: center;
  cursor: pointer; /* 默认鼠标指针形状 */
}
.box-list:hover {
  background-color: lightgrey; /* 鼠标悬停时改变背景颜色 */
}
.left-box-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding-right: 10px;
}
.list-title {
  font-size: 22px;
  margin-left: 60px;
}
.list-summary {
  font-size: 16px;
  margin-left: 60px;
  margin-top: 15px;
  color: #999999;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis; /* 溢出部分显示为省略号 */
  max-width: calc(100% - 130px); /* 减去右侧图片宽度和内边距 */
}
.list-time {
  margin-left: 60px;
  margin-top: 20px;
  color: #999999;
}
.news-image {
  width: 100px;
  height: 80px;
  margin-right: 30px;
}
</style>