From 347917e40a9b7e33537609c7ef1503b31c72030d Mon Sep 17 00:00:00 2001
From: zhouyanli <593579392@qq.com>
Date: Thu, 23 Apr 2026 11:30:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=85=AC=E5=91=8A=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8A=E8=AF=A6=E6=83=85=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pageSubPack/api/api.js                    |   4 +-
 .../pageSubPack/api/request.js                |   1 +
 .../pageSubPack/notice-list/noticeList.vue    | 581 ++++++------------
 .../notice-list/noticeListDetails.vue         |  44 +-
 .../pageSubPack/notice-list/selectHome.vue    |   5 +-
 property-uniapp-project/pages/index/index.vue |   1 +
 6 files changed, 235 insertions(+), 401 deletions(-)

diff --git a/property-uniapp-project/pageSubPack/api/api.js b/property-uniapp-project/pageSubPack/api/api.js
index 896602a..71fd9ed 100644
--- a/property-uniapp-project/pageSubPack/api/api.js
+++ b/property-uniapp-project/pageSubPack/api/api.js
@@ -45,4 +45,6 @@ export const getNoticeList = (data) =>{
 	return get('/api/resident/notice/list',data)
 }
 // 获取公告详情
-// export const getNoticeDetails = 
\ No newline at end of file
+export const getNoticeDetails = (noticeId) =>{
+	return get(`/api/resident/notice/${noticeId}`)
+}
\ No newline at end of file
diff --git a/property-uniapp-project/pageSubPack/api/request.js b/property-uniapp-project/pageSubPack/api/request.js
index 7dfb08f..37d6624 100644
--- a/property-uniapp-project/pageSubPack/api/request.js
+++ b/property-uniapp-project/pageSubPack/api/request.js
@@ -68,6 +68,7 @@ export default function request(url, data = {}, method = "GET") {
 			},
 			fail: (err) => {
 				uni.hideLoading(); // 关闭加载提示
+				const errMsg = err.msg || '网络请求失败';
 				uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
 				reject(err);
 			}
diff --git a/property-uniapp-project/pageSubPack/notice-list/noticeList.vue b/property-uniapp-project/pageSubPack/notice-list/noticeList.vue
index 83824db..f06d9f4 100644
--- a/property-uniapp-project/pageSubPack/notice-list/noticeList.vue
+++ b/property-uniapp-project/pageSubPack/notice-list/noticeList.vue
@@ -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>
\ No newline at end of file
diff --git a/property-uniapp-project/pageSubPack/notice-list/noticeListDetails.vue b/property-uniapp-project/pageSubPack/notice-list/noticeListDetails.vue
index 7d51c22..41ff285 100644
--- a/property-uniapp-project/pageSubPack/notice-list/noticeListDetails.vue
+++ b/property-uniapp-project/pageSubPack/notice-list/noticeListDetails.vue
@@ -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"
+			})
+		}
+	}
+	
 	
 	
 	
diff --git a/property-uniapp-project/pageSubPack/notice-list/selectHome.vue b/property-uniapp-project/pageSubPack/notice-list/selectHome.vue
index a590838..e47c017 100644
--- a/property-uniapp-project/pageSubPack/notice-list/selectHome.vue
+++ b/property-uniapp-project/pageSubPack/notice-list/selectHome.vue
@@ -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 {
diff --git a/property-uniapp-project/pages/index/index.vue b/property-uniapp-project/pages/index/index.vue
index 9705c0a..fadbe87 100644
--- a/property-uniapp-project/pages/index/index.vue
+++ b/property-uniapp-project/pages/index/index.vue
@@ -443,6 +443,7 @@ const moreClick = () =>{
 		// 修改通知栏样式
 		::v-deep .uni-noticebar__content-wrapper--scrollable{
 			left: 20px;
+			margin-right: 20px;
 		}
 		.noticeClass.uni-noticebar{
 			padding: 10px 15px 10px 45px;