<template>
<view class="container">
<!-- 顶部固定区域 -->
<view class="header-section">
<view class="banner-section">
<!-- 修复：使用英文双引号 -->
<image class="banner-image" :src="bannerData
.imageUrl" />
</view>
<view class="title">{{ bannerData
.title }}</view>
</view>
<!-- 分隔线 -->
<view class="section-divider"></view>
<!-- 内容包装器 -->
<view class="content-wrapper">
<!-- 可滚动区域 -->
<view class="scroll-container">
<scroll-view
scroll-y="true"
:enhanced="true"
:show-scrollbar="false"
class="scroll-view"
>
<view
v-for="item in newsList"
:key="item
.id"
class="news-item"
@click="navigateToDetail(item)"
>
<view class="news-content">
<text class="news-title">{{ item
.title }}</text>
<text class="news-summary">{{ item
.summary }}</text>
<text class="news-date">{{ item
.publishDate }}</text>
</view>
<view
class="status-box"
:class="item
.read ? 'read' : 'unread'"
>
{{ item
.read ? '已阅' : '未阅' }}
</view>
</view>
<!-- 加载状态提示 -->
<!-- 修复：使用统一的 loading 变量 -->
<view v-if="listLoading" class="loading-text">加载中
...</view>
<view v-if="!listLoading && newsList
.length === 0" class="no-data">暂无数据</view>
</scroll-view>
</view>
</view>
<!-- 分页组件 -->
<view class="pagination">
<!-- 每页条数选择器 -->
<view class="page-size-selector">
<picker
:value="pageSizeIndex"
:range="pageSizeOptions"
range-key="label"
@change="changePageSize"
>
<view class="selector-box">
<text class="selector-text">{{ pageSize }}条/页</text>
<text class="selector-icon">▼</text>
</view>
</picker>
</view>
<!-- 分页控制 -->
<view class="page-controls">
<button
class="page-btn prev-btn"
:disabled="currentPage === 1"
@click="goToPage(currentPage - 1)"
>
<
</button>
<view class="page-info">
<input
type="number"
v-model="currentPage"
class="page-input"
:min="1"
:max="totalPages"
@blur="validatePage"
/>
<text class="page-total">/ {{ totalPages }}</text>
</view>
<button
class="page-btn next-btn"
:disabled="currentPage >= totalPages"
@click="goToPage(currentPage + 1)"
>
>
</button>
</view>
<!-- 跳转按钮 -->
<button class="go-btn" @click="validatePage">跳转</button>
</view>
</view>
</template>
<script setup>
import { ref, onMounted, computed, watch } from '
vue';
// 顶部横幅数据
const bannerData = ref({
title: '',
imageUrl: ''
});
// 新闻列表数据
const newsList = ref([]);
// 修复：使用统一的加载状态变量
const listLoading = ref(false);
// 分页相关数据
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
// 分页选项配置
const pageSizeOptions = ref([
{ value: 5, label: '5条/页' },
{ value: 10, label: '10条/页' },
{ value: 15, label: '15条/页' },
{ value: 20, label: '20条/页' }
]);
// 计算属性
const pageSizeIndex = computed(() =>
pageSizeOptions
.value
.findIndex(opt => opt
.value === pageSize
.value)
);
const totalPages = computed(() => {
return Math
.ceil(total
.value / pageSize
.value) || 1;
});
// 监听页码变化
watch([currentPage, pageSize], () => {
fetchData();
});
// 获取顶部横幅数据
const fetchBanners = () => {
listLoading
.value = true;
uni
.request({
url: '/api/incorruptFront/culture/index',
method: 'POST',
success: (res) => {
if (res
.statusCode === 200 && res
.data
.code === 200) {
bannerData
.value = {
title: res
.data
.data
.title,
imageUrl: res
.data
.data
.imageUrl
};
} else {
uni
.showToast({
title: res
.data?
.msg || '请求失败',
icon: 'none'
});
}
},
fail: (err) => {
uni
.showToast({ title: '网络错误', icon: 'error' });
console
.error('请求失败:', err);
},
complete: () => {
listLoading
.value = false;
}
});
};
// 获取廉洁文化资讯列表
const fetchData = () => {
listLoading
.value = true;
uni
.request({
url: '/api/incorruptFront/frontArticle/list',
method: 'GET',
data: {
pageNum: currentPage
.value,
pageSize: pageSize
.value
},
success: (res) => {
if (res
.statusCode === 200 && res
.data
.code === 200) {
newsList
.value = res
.data
.rows
.map(item => ({
id: item
.articleId,
title: item
.title,
summary: item
.articleDescribe,
publishDate: item
.publishDate,
read: Math
.random() > 0
.5 // 模拟阅读状态
}));
total
.value = res
.data
.total;
} else {
uni
.showToast({
title: res
.data?
.msg || '获取数据失败',
icon: 'none'
});
}
},
fail: (err) => {
uni
.showToast({ title: '网络错误', icon: 'error' });
console
.error('请求失败:', err);
},
complete: () => {
listLoading
.value = false;
}
});
};
// 改变每页条数
const changePageSize = (e) => {
const index = e
.detail
.value;
pageSize
.value = pageSizeOptions
.value[index]
.value;
currentPage
.value = 1;
};
// 跳转到指定页码
const goToPage = (page) => {
if (page < 1 || page > totalPages
.value) return;
currentPage
.value = page;
};
// 验证页码
const validatePage = () => {
if (currentPage
.value < 1) currentPage
.value = 1;
if (currentPage
.value > totalPages
.value) currentPage
.value = totalPages
.value;
};
// 跳转详情页
const navigateToDetail = (item) => {
uni
.navigateTo({
url: `/pages/IntegrityCulture/IntegrityCultureDetail/IntegrityCultureDetail?articleId=${item
.id}`
});
};
onMounted(() => {
fetchBanners();
fetchData();
});
</script>
<style scoped>
/* 整体容器 - 禁止滚动 */
.container {
padding: 30rpx;
background-color: #f9f9f9;
height: 100vh;
overflow: hidden;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* 顶部固定区域 */
.header-section {
flex-shrink: 0;
margin-bottom: 20rpx;
}
.banner-section {
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0
.1);
}
.banner-image {
width: 100%;
height: 320rpx;
display: block;
object-fit: cover;
}
.title {
font-size: 36rpx;
font-weight: bold;
text-align: center;
margin: 20rpx 0;
color: #2c3e50;
position: relative;
padding-top: 20rpx;
}
.title::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 6rpx;
background: linear-gradient(to right, #4caf50, #2196f3, #4caf50);
border-radius: 3rpx;
}
/* 分隔线 */
.section-divider {
height: 1rpx;
background: linear-gradient(to right, #4caf50, #2196f3, #4caf50);
margin: 10rpx 0 20rpx;
opacity: 0
.2;
}
/* 内容包装器 */
.content-wrapper {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
/* 滚动区域容器 */
.scroll-container {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0
.05);
}
/* 滚动视图 */
.scroll-view {
flex: 1;
height: 100%;
}
/* 隐藏滚动条 */
.scroll-view ::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
/* 新闻项样式 */
.news-item {
padding: 30rpx;
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1rpx solid #eee;
transition: background-color 0
.2s;
position: relative;
}
.news-item:active {
background-color: #f5f7fa;
}
.news-content {
flex: 1;
padding-right: 20rpx;
}
.news-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
display: block;
margin-bottom: 10rpx;
}
.news-summary {
font-size: 28rpx;
color: #666;
display: block;
margin-bottom: 10rpx;
line-height: 1
.5;
}
.news-date {
font-size: 24rpx;
color: #999;
display: block;
}
.status-box {
padding: 8rpx 16rpx;
font-size: 24rpx;
border-radius: 8rpx;
min-width: 80rpx;
text-align: center;
flex-shrink: 0;
align-self: flex-start;
}
.status-box
.read {
background-color: rgba(76, 175, 80, 0
.1);
color: #4caf50;
}
.status-box
.unread {
background-color: rgba(244, 67, 54, 0
.1);
color: #f44336;
}
/* 加载状态 */
.loading-text,
.no-data {
text-align: center;
padding: 30rpx;
font-size: 28rpx;
color: #999;
}
/* 分页样式 */
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12rpx 20rpx;
background-color: #fff;
border-radius: 16rpx;
height: 80rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0
.05);
margin-top: 20rpx;
flex-shrink: 0;
}
/* 每页选择器样式 */
.page-size-selector {
flex: 0 0 auto;
}
.selector-box {
display: flex;
align-items: center;
padding: 0 20rpx;
height: 56rpx;
background-color: #f5f7fa;
border-radius: 40rpx;
font-size: 24rpx;
}
.selector-text {
color: #333;
margin-right: 8rpx;
}
.selector-icon {
font-size: 20rpx;
color: #666;
}
/* 分页控制区域 */
.page-controls {
display: flex;
align-items: center;
margin: 0 15rpx;
flex: 1;
justify-content: center;
}
/* 页码按钮样式 */
.page-btn {
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
height: 60rpx;
padding: 0;
margin: 0 5rpx;
background-color: #f5f7fa;
border-radius: 50%;
font-size: 32rpx;
line-height: 1;
}
.prev-btn,
.next-btn {
background-color: #4caf50;
color: white;
}
.page-btn:disabled {
background-color: #f0f0f0;
color: #cccccc;
}
/* 页码信息样式 */
.page-info {
display: flex;
align-items: center;
margin: 0 15rpx;
}
.page-input {
width: 80rpx;
height: 50rpx;
border: 1rpx solid #ddd;
border-radius: 8rpx;
padding: 0 10rpx;
text-align: center;
font-size: 28rpx;
background-color: #fff;
}
.page-total {
font-size: 24rpx;
color: #666;
margin-left: 5rpx;
}
/* 跳转按钮 */
.go-btn {
padding: 0 20rpx;
height: 56rpx;
background-color: #2196f3;
color: white;
border-radius: 40rpx;
font-size: 24rpx;
line-height: 56rpx;
}
/* 响应式调整 */
@media (max-height: 700px) {
.banner-image {
height: 240rpx;
}
.title {
font-size: 32rpx;
margin: 15rpx 0;
}
.news-item {
padding: 20rpx;
}
.pagination {
height: 70rpx;
}
}
@media (max-width: 480px) {
.container {
padding: 20rpx;
}
.pagination {
padding: 10rpx;
}
.selector-text {
font-size: 22rpx;
}
.page-input {
width: 70rpx;
font-size: 24rpx;
}
.go-btn {
padding: 0 15rpx;
font-size: 22rpx;
}
.news-title {
font-size: 30rpx;
}
.news-summary {
font-size: 26rpx;
}
}
</style>
这个列表页调用接口获取到的数据内容如下:{
"total": 9,
"rows": [
{
"createBy": null,
"createTime": "2025-08-18 15:45:46",
"updateBy": null,
"updateTime": "2025-08-18 18:24:37",
"remark": null,
"articleId": 14,
"title": "22",
"publishDate": "2025-08-12",
"articleDescribe": "22",
"content": "222222",
"status": "0"
},
{
"createBy": null,
"createTime": "2025-08-18 18:24:55",
"updateBy": null,
"updateTime": null,
"remark": null,
"articleId": 15,
"title": "2233",
"publishDate": "2025-08-18",
"articleDescribe": "333",
"content": "3333",
"status": "0"
},
{
"createBy": null,
"createTime": "2025-08-18 18:25:13",
"updateBy": null,
"updateTime": null,
"remark": null,
"articleId": 16,
"title": "444",
"publishDate": "2025-08-18",
"articleDescribe": "444",
"content": "444",
"status": "0"
},
{
"createBy": null,
"createTime": "2025-08-18 18:25:44",
"updateBy": null,
"updateTime": null,
"remark": null,
"articleId": 17,
"title": "333",
"publishDate": "2025-08-18",
"articleDescribe": "333",
"content": "3333",
"status": "0"
},
{
"createBy": null,
"createTime": "2025-08-18 18:28:56",
"updateBy": null,
"updateTime": "2025-08-18 18:30:52",
"remark": null,
"articleId": 18,
"title": "55",
"publishDate": "2025-08-18",
"articleDescribe": "555",
"content": "555",
"status": "1"
},
{
"createBy": null,
"createTime": "2025-08-18 18:38:58",
"updateBy": null,
"updateTime": null,
"remark": null,
"articleId": 19,
"title": "66",
"publishDate": "2025-08-18",
"articleDescribe": "666",
"content": "666",
"status": "0"
},
{
"createBy": null,
"createTime": "2025-08-18 18:40:20",
"updateBy": null,
"updateTime": null,
"remark": null,
"articleId": 20,
"title": "77",
"publishDate": "2025-08-18",
"articleDescribe": "777",
"content": "777",
"status": "0"
},
{
"createBy": null,
"createTime": "2025-08-18 18:41:56",
"updateBy": null,
"updateTime": null,
"remark": null,
"articleId": 21,
"title": "888",
"publishDate": "2025-08-18",
"articleDescribe": "888",
"content": "888",
"status": "0"
},
{
"createBy": null,
"createTime": "2025-08-18 18:42:12",
"updateBy": null,
"updateTime": "2025-08-19 16:42:44",
"remark": null,
"articleId": 22,
"title": "99",
"publishDate": "2025-08-18",
"articleDescribe": "999",
"content": "999",
"status": "1"
}
],
"code": 200,
"msg": "查询成功"
}我想要点击列表跳转详情页的时候把该列表的articleId传到详情页，让详情页获取这个ID
扫一扫
5941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
