Merge branch 'main' of http://182.92.169.222:3000/dlsx/ContestPortal
JayChou
8 months ago
commit
a7b8536ad7
4 changed files with 169 additions and 191 deletions
@ -1,164 +0,0 @@ |
||||
<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> |
||||
@ -1,12 +1,166 @@ |
||||
<template> |
||||
<div class="container"> |
||||
<router-view/> |
||||
<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" v-default-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-top:100px; |
||||
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> |
||||
Loading…
Reference in new issue