<template>
|
<div class="news-list-page">
|
<div class="page-header">
|
<h1 class="page-title">新闻资讯</h1>
|
<p class="page-description">了解最新的活动动态和行业资讯</p>
|
</div>
|
|
<div class="news-list" v-loading="loading">
|
<div v-if="newsList.length === 0" class="empty-state">
|
<el-empty description="暂无新闻资讯" />
|
</div>
|
|
<div v-else class="news-items">
|
<div
|
v-for="news in newsList"
|
:key="news.id"
|
class="news-item"
|
@click="goToDetail(news.id)"
|
>
|
<div class="news-item-content">
|
<div class="news-item-header">
|
<h3 class="news-item-title">{{ news.title }}</h3>
|
<div class="news-item-meta">
|
<span class="news-item-author">{{ news.author }}</span>
|
<span class="news-item-date">{{ formatDate(news.createTime) }}</span>
|
<span class="news-item-views">浏览 {{ news.viewCount }}</span>
|
</div>
|
</div>
|
|
<div class="news-item-body">
|
<div v-if="news.coverImage" class="news-item-image">
|
<el-image
|
:src="news.coverImage"
|
class="cover-image"
|
fit="cover"
|
lazy
|
/>
|
</div>
|
|
<p class="news-item-summary" v-if="news.summary">
|
{{ news.summary }}
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 分页 -->
|
<div class="pagination" v-if="pagination.total > 0">
|
<el-pagination
|
v-model:current-page="pagination.page"
|
v-model:page-size="pagination.size"
|
:page-sizes="[10, 20, 50]"
|
:total="pagination.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { getPublishedNewsList } from '@/api/news'
|
|
const router = useRouter()
|
const loading = ref(false)
|
|
// 分页信息
|
const pagination = ref({
|
page: 1,
|
size: 10,
|
total: 0
|
})
|
|
// 新闻列表
|
const newsList = ref([])
|
|
// 格式化日期
|
const formatDate = (dateString) => {
|
if (!dateString) return ''
|
const date = new Date(dateString)
|
return date.toLocaleDateString('zh-CN', {
|
year: 'numeric',
|
month: '2-digit',
|
day: '2-digit'
|
})
|
}
|
|
// 加载新闻列表
|
const loadNewsList = async () => {
|
try {
|
loading.value = true
|
const data = await getPublishedNewsList(
|
pagination.value.page - 1,
|
pagination.value.size
|
)
|
|
newsList.value = data?.content || []
|
pagination.value.total = data?.totalElements || 0
|
} catch (error) {
|
console.error('加载新闻列表失败:', error)
|
} finally {
|
loading.value = false
|
}
|
}
|
|
// 分页大小改变
|
const handleSizeChange = (size) => {
|
pagination.value.size = size
|
loadNewsList()
|
}
|
|
// 当前页改变
|
const handleCurrentChange = (page) => {
|
pagination.value.page = page
|
loadNewsList()
|
}
|
|
// 跳转到详情页
|
const goToDetail = (id) => {
|
router.push(`/news/detail/${id}`)
|
}
|
|
onMounted(() => {
|
loadNewsList()
|
})
|
</script>
|
|
<style scoped>
|
.news-list-page {
|
padding: 20px;
|
max-width: 1200px;
|
margin: 0 auto;
|
}
|
|
.page-header {
|
text-align: center;
|
margin-bottom: 30px;
|
}
|
|
.page-title {
|
font-size: 28px;
|
font-weight: 600;
|
color: #333;
|
margin-bottom: 10px;
|
}
|
|
.page-description {
|
font-size: 16px;
|
color: #666;
|
margin: 0;
|
}
|
|
.news-list {
|
min-height: 400px;
|
}
|
|
.empty-state {
|
padding: 40px 0;
|
}
|
|
.news-items {
|
display: flex;
|
flex-direction: column;
|
gap: 20px;
|
}
|
|
.news-item {
|
background: white;
|
border-radius: 8px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
overflow: hidden;
|
transition: all 0.3s ease;
|
cursor: pointer;
|
}
|
|
.news-item:hover {
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
transform: translateY(-2px);
|
}
|
|
.news-item-content {
|
padding: 20px;
|
}
|
|
.news-item-header {
|
margin-bottom: 15px;
|
}
|
|
.news-item-title {
|
font-size: 20px;
|
font-weight: 600;
|
color: #333;
|
margin: 0 0 10px 0;
|
line-height: 1.4;
|
}
|
|
.news-item-meta {
|
display: flex;
|
gap: 20px;
|
font-size: 14px;
|
color: #666;
|
}
|
|
.news-item-body {
|
display: flex;
|
gap: 20px;
|
}
|
|
.news-item-image {
|
flex: 0 0 200px;
|
}
|
|
.cover-image {
|
width: 100%;
|
height: 120px;
|
border-radius: 4px;
|
}
|
|
.news-item-summary {
|
flex: 1;
|
font-size: 15px;
|
color: #555;
|
line-height: 1.6;
|
margin: 0;
|
display: -webkit-box;
|
-webkit-line-clamp: 3;
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
}
|
|
.pagination {
|
margin-top: 30px;
|
display: flex;
|
justify-content: center;
|
}
|
|
@media (max-width: 768px) {
|
.news-list-page {
|
padding: 10px;
|
}
|
|
.page-title {
|
font-size: 24px;
|
}
|
|
.news-item-content {
|
padding: 15px;
|
}
|
|
.news-item-title {
|
font-size: 18px;
|
}
|
|
.news-item-meta {
|
flex-direction: column;
|
gap: 5px;
|
}
|
|
.news-item-body {
|
flex-direction: column;
|
gap: 15px;
|
}
|
|
.news-item-image {
|
flex: none;
|
}
|
|
.cover-image {
|
height: 150px;
|
}
|
}
|
</style>
|
