对接公告以及详情接口

This commit is contained in:
zhouyanli
2026-04-23 11:30:54 +08:00
parent 057758772e
commit 347917e40a
6 changed files with 235 additions and 401 deletions

View File

@@ -1,429 +1,230 @@
<template>
<!-- 通知列表 -->
<scroll-view
class="notice-list"
scroll-y
:refresher-enabled="true"
:refresher-triggered="refreshing"
@refresherrefresh="onRefresh"
@scrolltolower="loadMore"
:style="{ height: `calc(100vh - ${statusBarHeight + navBarHeight}px)` }"
>
<view class="status_bar"></view>
<!-- 顶部标题栏 -->
<view class="top-bar">
<uni-nav-bar left-icon="left" title="通知公告" backgroundColor ="none" :border="false" @clickLeft="narBack" />
</view>
<!-- 下拉刷新 -->
<view class="refresh-container" v-if="refreshing">
<uni-icons type="spinner-cycle" size="20" color="#999" class="loading"></uni-icons>
<text class="refresh-text">刷新中...</text>
</view>
<view class="page">
<view class="status_bar"></view>
<!-- 固定导航栏 -->
<uni-nav-bar
left-icon="left"
title="通知公告"
background-color="#F9F9F9"
@clickLeft="narBack"
/>
<!-- 通知列表项 -->
<view
v-for="(notice, index) in noticeList"
:key="notice.noticeId"
class="notice-item"
@click="goToDetail(notice)"
>
<!-- 通知标题 -->
<view class="notice-header">
<view class="notice-title">
{{notice.noticeTitle}}
</view>
<view class="unread-dot" v-if="notice.readStatus"></view>
</view>
<!-- 滚动区域能正常滚动的核心 -->
<scroll-view
scroll-y
class="scroll-box"
:refresher-enabled="true"
:refresher-triggered="refreshing"
@refresherrefresh="onRefresh"
@scrolltolower="loadMore"
>
<view class="list-wrap">
<!-- 下拉刷新 -->
<view class="refresh" v-if="refreshing">
<uni-icons type="spinner-cycle" class="spin"/> 刷新中...
</view>
<!-- 红点 -->
<!-- 发布者和时间 -->
<view class="notice-meta">
<view class="notice-author">
<text class="author-name">{{notice.author}}</text>
<text class="separator">·</text>
<text class="publish-time">{{notice.publishTime}}</text>
</view>
</view>
<!-- 通知摘要 -->
<view class="notice-summary">
{{ notice.noticeContent }}
</view>
<!-- 详情 -->
<view class="notice-actions" @click.stop="goToDetail(notice)">
<!-- <view class="read-status" :class="{ unread: !notice.hasRead }">
{{ notice.hasRead ? '已读' : '未读' }}
</view> -->
<view class="" >
<text style="color: #2F77FD;font-size:14px">详情 </text>
</view>
<!-- <button class="detail-btn" @click.stop="goToDetail(notice)"> -->
<!-- <text>详情 </text> -->
<uni-icons type="right" size="13" color="#007AFF"></uni-icons>
<!-- </button> -->
</view>
</view>
<!-- 加载更多 -->
<view v-if="loadingMore" class="load-more">
<uni-icons type="spinner-cycle" size="18" color="#999" class="loading"></uni-icons>
<text>加载中...</text>
</view>
<!-- 没有更多数据 -->
<view v-if="noMoreData && noticeList.length > 0" class="no-more">
没有更多通知了
</view>
<!-- 空状态 -->
<view v-if="noticeList.length === 0 && !loading" class="empty-state">
<!-- <image src="/static/empty-notice.png" mode="aspectFit" class="empty-image"></image> -->
<text class="empty-text">暂无通知</text>
<button class="btn-refresh" @click="loadNotices">刷新试试</button>
</view>
</scroll-view>
<!-- 列表 -->
<view
v-for="notice in noticeList"
:key="notice.noticeId"
class="item">
<view class="title-box">
<view class="title">{{ notice.noticeTitle }}</view>
<view class="dot" v-if="notice.readStatus === '0'"></view>
</view>
<view class="info">{{ notice.author }} · {{ notice.publishTime }}</view>
<view class="content">{{ notice.noticeContent }}</view>
<view class="detail" @click="goToDetail(notice)">
<text style="color:#2F77FD">详情</text>
<uni-icons type="right" size="13" color="#007AFF"/>
</view>
</view>
<!-- 加载中 / 无更多 / 空布局 -->
<view class="load-more" v-if="loadingMore">加载中...</view>
<view class="no-more" v-if="noMoreData && noticeList.length">没有更多通知了</view>
<view class="empty" v-if="noticeList.length === 0 && !loading">
暂无通知
<!-- <button class="refresh-btn" @click="loadNotices">刷新试试</button> -->
</view>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { getNoticeList } from '../api/api.js'
import { ref } from 'vue'
import { onLoad ,onShow,onUnload} from '@dcloudio/uni-app'
import { getNoticeList } from '../api/api.js'
const noticeList = ref([])
const refreshing = ref(false)
const loadingMore = ref(false)
const noMoreData = ref(false)
const loading = ref(false)
const pageNum = ref(1)
const pageSize = 10
const statusBarHeight = ref(0)
const navBarHeight = 44
const noticeList = ref([])
const refreshing = ref(false)
const loadingMore = ref(false)
const noMoreData = ref(false)
const loading = ref(false)
const pageNum = ref(1)
const pageSize = 10
const isFirstShow = ref(true) // 详情返回列表刷新状态
// --方法----
const goToDetail = (notice) =>{
uni.navigateTo({
url:'/pageSubPack/notice-list/noticeListDetails?id=' + (notice.id || '')
})
}
const goToDetail = (notice) => {
uni.navigateTo({
url: `/pageSubPack/notice-list/noticeListDetails?id=${notice.noticeId}`
})
}
// 获取列表接口
const loadNotices = async (isRefresh = false) => {
if (loading.value) return
loading.value = true
const loadNotices = async (isRefresh = false) => {
if (loading.value) return
loading.value = true
if (isRefresh) {
pageNum.value = 1
noMoreData.value = false
}
try {
const res = await getNoticeList({ pageNum: pageNum.value, pageSize })
if (res.code === 200) {
const list = res.data.rows || []
noticeList.value = isRefresh ? list : [...noticeList.value, ...list]
if (list.length < pageSize) noMoreData.value = true
}
} catch (e) {}
finally {
loading.value = false
refreshing.value = false
loadingMore.value = false
}
}
// 更新单条已读状态
const updateReadStatus = ({ noticeId, readStatus }) => {
const item = noticeList.value.find(n => String(n.noticeId) === noticeId)
if (item) {
item.readStatus = readStatus
}
}
onShow(() =>{
if(isFirstShow.value) return
loadNotices(true)
})
if (isRefresh) {
pageNum.value = 1
noMoreData.value = false
}
const onRefresh = () => {
refreshing.value = true
loadNotices(true)
}
try {
const res = await getNoticeList({
pageNum: pageNum.value,
pageSize: pageSize
})
if (res.code === 200) {
const list = res.data.rows
if (isRefresh) {
noticeList.value = list
} else {
noticeList.value = [...noticeList.value, ...list]
}
if (list.length < pageSize) {
noMoreData.value = true
}
} else {
uni.showToast({ title: res.msg || '加载失败', icon: 'none' })
}
} catch (err) {
uni.showToast({ title: '网络异常', icon: 'none' })
} finally {
loading.value = false
refreshing.value = false
loadingMore.value = false
}
}
const loadMore = () => {
if (noMoreData.value || loadingMore.value) return
loadingMore.value = true
pageNum.value++
loadNotices()
}
// 下拉刷新
const onRefresh = () => {
refreshing.value = true
loadNotices(true)
}
// 上拉加载更多
const loadMore = () => {
if (noMoreData.value || loadingMore.value || loading.value) return
loadingMore.value = true
pageNum.value++
loadNotices()
}
// 返回
const narBack = () =>{
if(uni.getStorageSync('sourcePage') === "index"){
uni.switchTab({
url:"/pages/index/index"
})
}else if(uni.getStorageSync('sourcePage') === "serviceIndex"){
uni.switchTab({
url:"/pages/serviceIndex/serviceIndex"
})
}
uni.removeStorageSync('sourcePage')
}
onLoad(() => {
const sysInfo = uni.getSystemInfoSync()
statusBarHeight.value = sysInfo.statusBarHeight || 0
loadNotices(true)
})
const narBack = () => {
const page = uni.getStorageSync('sourcePage')
if (page === 'index') uni.switchTab({ url: '/pages/index/index' })
if (page === 'serviceIndex') uni.switchTab({ url: '/pages/serviceIndex/serviceIndex' })
uni.removeStorageSync('sourcePage')
}
onLoad(() => {
isFirstShow.value = false
uni.$on('noticeRead',updateReadStatus)
loadNotices(true)
})
onUnload(()=>{
uni.$off('noticeRead',updateReadStatus)
})
</script>
<style lang="scss">
/* 通知列表容器 */
.notice-list {
padding: 20px;
box-sizing: border-box;
background-color: #f9f9f9;
page {
background: #f9f9f9;
}
.status_bar {
height: 32px;
width: 100%;
}
/* 顶部标题 */
.top-bar {
text-align: center;
margin-bottom: 20rpx;
}
/* 下拉刷新 */
.refresh-container {
.page {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
}
.status_bar {
height: 46px;
width: 100%;
}
.scroll-box {
flex: 1;
height: 0; /* 让滚动区域生效 */
}
.list-wrap {
padding: 40rpx;
}
.item {
background: #fff;
border-radius: 12rpx;
padding: 30rpx;
margin-bottom: 20rpx;
}
.title-box {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
padding: 20px 0;
color: #999;
font-size: 14px;
.loading {
animation: rotate 1s linear infinite;
margin-bottom: 8px;
}
.refresh-text {
font-size: 12px;
}
}
/* 通知项样式 */
.notice-item {
background-color: #fff;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
position: relative;
&:active {
background-color: #f9f9f9;
}
/* 重要通知标记 */
&.important::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background-color: #ff6b6b;
border-radius: 2px 0 0 2px;
}
}
.notice-header{
display: flex;
justify-content: space-between;
align-items: center;
}
/* 通知标题 */
.notice-title {
font-size: 16px;
.title {
font-size: 32rpx;
font-weight: bold;
color: #333;
line-height: 1.4;
margin-bottom: 12px;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 2;
width: 290px;
width: 500rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// 未读红点
.unread-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ff3b30;
}
/* 元信息 */
.notice-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
color: #666;
font-size: 12px;
.notice-author {
display: flex;
align-items: center;
.author-name {
color: #666;
}
.separator {
margin: 0 6px;
color: #ccc;
}
.publish-time {
color: #999;
}
}
.notice-time {
display: flex;
align-items: center;
.date-text {
margin-left: 4px;
color: #999;
}
}
.dot {
width: 12rpx;
height: 12rpx;
background: red;
border-radius: 50%;
}
/* 通知摘要 */
.notice-summary {
font-size: 14px;
.info {
color: #999;
font-size: 24rpx;
margin: 10rpx 0;
}
.content {
color: #666;
background-color: #f9f9f9;
font-size: 28rpx;
line-height: 1.5;
margin-bottom: 16px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
margin: 20rpx 0;
background-color: #f9f9f9;
padding: 24rpx;
}
/* 操作区域 */
.notice-actions {
.detail {
display: flex;
align-items: center;
justify-content: space-between;
.read-status {
font-size: 12px;
padding: 2px 8px;
border-radius: 10px;
background-color: #f0f0f0;
color: #999;
&.unread {
background-color: #e6f7ff;
color: #1890ff;
}
}
.detail-btn {
display: flex;
align-items: flex-end;
background: transparent;
border: none;
color: #007AFF;
font-size: 14px;
padding: 0;
margin-right: 10rpx;
&::after {
border: none;
}
text {
margin-right: 4px;
}
}
}
/* 分割线 */
// .divider {
// height: 1px;
// background-color: #f0f0f0;
// margin-top: 16px;
// }
/* 加载更多 */
.load-more {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
color: #999;
font-size: 14px;
.loading {
animation: rotate 1s linear infinite;
margin-right: 8px;
}
}
.no-more {
.refresh, .load-more, .no-more {
text-align: center;
padding: 20px 0;
padding: 20rpx;
color: #999;
font-size: 14px;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
.empty-image {
width: 200px;
height: 150px;
margin-bottom: 20px;
}
.empty-text {
font-size: 16px;
color: #999;
margin-bottom: 20px;
}
.btn-refresh {
background-color: #007AFF;
color: #fff;
padding: 8px 20px;
border-radius: 20px;
font-size: 14px;
&::after {
border: none;
}
}
.empty {
text-align: center;
padding: 100rpx 0;
color: #999;
}
</style>
.refresh-btn {
background: #007AFF;
color: #fff;
border-radius: 50rpx;
padding: 10rpx 30rpx;
margin-top: 20rpx;
}
.spin {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>

View File

@@ -5,25 +5,22 @@
<!-- 文章标题 -->
<view class="article-header">
<view class="article-title">
以实干担当不断开创中国特色大国外交新局面
{{noticeDetail.noticeTitle}}
</view>
</view>
<!-- 作者和日期 -->
<view class="notice-meta">
<view class="notice-author">
<text class="author-name">张三</text>
<text class="author-name">{{noticeDetail.author}}</text>
<text class="separator">·</text>
<text class="publish-time">2026.3.6</text>
<text class="publish-time">{{noticeDetail.publishTime}}</text>
</view>
</view>
<!-- 文章内容 -->
<view class="article-content">
<view class="paragraph">
学习贯彻习近平新时代中国特色社会主义思想主题教育开展以来外交外事战线认真学习贯彻习近平总书记重要讲话精神和党中央部署要求
全面准确把握目标要求紧密联系实际精心组织周密部署紧密结合外交中心工作开展主题教育
坚持学思用贯通知信行统一把习近平新时代中国特色社会主义思想转化为坚定理想锤炼党性和指导实践
推动工作的强大力量以实干担当不断开创中国特色大国外交新局面
{{noticeDetail.noticeContent}}
</view>
<view class="articleimg">
<image src="http://47.104.199.163:9090/images/home/notice-1.png" mode="" style="width: 100%;height: 100%;border-radius: 20rpx;"></image>
@@ -76,13 +73,44 @@
<script setup>
import { ref, onMounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import {getNoticeDetails} from '../api/api.js'
const isLoading = ref(false)
const noticeDetail = ref({})
const currentNoticeId = ref('') // 接收公告跳转的id
// =====方法====
onLoad((options) =>{
console.log('options',options.id)
currentNoticeId.value = options?.id
// console.log('currentNoticeId',currentNoticeId.value)
if(currentNoticeId.value){
getDetailsData(currentNoticeId.value)
}
// console.log('currentNoticeId',currentNoticeId.value)
})
// 获取详情数据
const getDetailsData = async (noticeId) =>{
try{
const res = await getNoticeDetails(noticeId)
if(res.code === 200){
noticeDetail.value = res.data || {}
uni.$emit('noticeRead',{
noticeId:noticeId,
readStatus:noticeDetail.value.readStatus
})
}
}catch(err){
uni.showToast({
title:"加载失败",
icon:"none"
})
}
}

View File

@@ -161,7 +161,7 @@ const getCommunityList = async (pageNum = 1, keyword = '') => {
})
}
} catch (err) {
console.error('获取小区列表失败:', err)
// console.error('获取小区列表失败:', err)
displayedCommunities.value = []
hasMoreData.value = false
uni.showToast({
@@ -175,6 +175,7 @@ const getCommunityList = async (pageNum = 1, keyword = '') => {
// 页面加载时初始化
onLoad((options) => {
// 接收首页传来得选择的小区的id
currentVillageIdFromHome.value = options?.villageId || ''
getCommunityList(1)
})
@@ -374,7 +375,7 @@ onMounted(() => {
.community-item:active,
.community-item.active-item {
background-color: #e6f2ff;
/* background-color: #e6f2ff; */
}
.community-item-left {