ContestPortal/src/views/news/components/newsList.vue

<template>
  <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"  v-default-image>
          </div>
          <el-divider />
        </li>
      </ul>
    </el-tab-pane>
  </el-tabs>
</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,'daaaaaaa')
    console.log(response.result.records,'ddddddd')
    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>
.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>