对接公告以及详情接口

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 = 
+export const getNoticeDetails = (noticeId) =>{
+	return get(`/api/resident/notice/${noticeId}`)
+}

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);
 			}

property-uniapp-project/pageSubPack/notice-list/noticeList.vue

@@ -1,429 +1,230 @@
 <template>
-	   <!-- 通知列表 -->
+  <view class="page">
-	    <scroll-view
+	  <view class="status_bar"></view>
-	      class="notice-list"
+    <!-- 固定导航栏 -->
-	      scroll-y
+    <uni-nav-bar
-	      :refresher-enabled="true"
+      left-icon="left"
-	      :refresher-triggered="refreshing"
+      title="通知公告"
-	      @refresherrefresh="onRefresh"
+      background-color="#F9F9F9"
-	      @scrolltolower="loadMore"
+      @clickLeft="narBack"
-	      :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
+    <scroll-view
-	        v-for="(notice, index) in noticeList"
+      scroll-y
-	        :key="notice.noticeId"
+      class="scroll-box"
-	        class="notice-item"
+      :refresher-enabled="true"
-	        @click="goToDetail(notice)"
+      :refresher-triggered="refreshing"
-	      >
+      @refresherrefresh="onRefresh"
-	        <!-- 通知标题 -->
+      @scrolltolower="loadMore"
-			<view class="notice-header">
+    >
-				<view class="notice-title">
+      <view class="list-wrap">
-				  {{notice.noticeTitle}}
+        <!-- 下拉刷新 -->
-				</view>
+        <view class="refresh" v-if="refreshing">
-				 <view class="unread-dot" v-if="notice.readStatus"></view>
+          <uni-icons type="spinner-cycle" class="spin"/> 刷新中...
-			</view>
+        </view>
 
-			<!-- 红点 -->
+        <!-- 列表 -->
-
+        <view
-
+          v-for="notice in noticeList"
-	        <!-- 发布者和时间 -->
+          :key="notice.noticeId"
-	        <view class="notice-meta">
+          class="item">
-	          <view class="notice-author">
+          <view class="title-box">
-	            <text class="author-name">{{notice.author}}</text>
+            <view class="title">{{ notice.noticeTitle }}</view>
-	            <text class="separator">·</text>
+            <view class="dot" v-if="notice.readStatus === '0'"></view>
-	            <text class="publish-time">{{notice.publishTime}}</text>
+          </view>
-	          </view>
+          <view class="info">{{ notice.author }} · {{ notice.publishTime }}</view>
-	        </view>
+          <view class="content">{{ notice.noticeContent }}</view>
-
+          <view class="detail" @click="goToDetail(notice)">
-	        <!-- 通知摘要 -->
+            <text style="color:#2F77FD">详情</text>
-	        <view class="notice-summary">
+            <uni-icons type="right" size="13" color="#007AFF"/>
-	          {{ notice.noticeContent }}
+          </view>
-	        </view>
+        </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 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 { ref } from 'vue'
-	import { onLoad } from '@dcloudio/uni-app'
+import { onLoad ,onShow,onUnload} from '@dcloudio/uni-app'
-	import { getNoticeList } from '../api/api.js'
+import { getNoticeList } from '../api/api.js'
 
-	const noticeList = ref([])
+const noticeList = ref([])
-	const refreshing = ref(false)
+const refreshing = ref(false)
-	const loadingMore = ref(false)
+const loadingMore = ref(false)
-	const noMoreData = ref(false)
+const noMoreData = ref(false)
-	const loading = ref(false)
+const loading = ref(false)
-	const pageNum = ref(1)
+const pageNum = ref(1)
-	const pageSize = 10
+const pageSize = 10
-	const statusBarHeight = ref(0)
+const isFirstShow = ref(true) // 详情返回列表刷新状态
-	const navBarHeight = 44
 
-	// --方法----
+const goToDetail = (notice) => {
-	const goToDetail = (notice) =>{
+  uni.navigateTo({
-		uni.navigateTo({
+    url: `/pageSubPack/notice-list/noticeListDetails?id=${notice.noticeId}`
-			url:'/pageSubPack/notice-list/noticeListDetails?id=' + (notice.id || '')
+  })
-		})
+}
-	}
 
-	// 获取列表接口
+const loadNotices = async (isRefresh = false) => {
-	const loadNotices = async (isRefresh = false) => {
+  if (loading.value) return
-		if (loading.value) return
+  loading.value = true
-		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) {
+const onRefresh = () => {
-			pageNum.value = 1
+  refreshing.value = true
-			noMoreData.value = false
+  loadNotices(true)
-		}
+}
 
-		try {
+const loadMore = () => {
-			const res = await getNoticeList({
+  if (noMoreData.value || loadingMore.value) return
-				pageNum: pageNum.value,
+  loadingMore.value = true
-				pageSize: pageSize
+  pageNum.value++
-			})
+  loadNotices()
-			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 narBack = () => {
-	const onRefresh = () => {
+  const page = uni.getStorageSync('sourcePage')
-		refreshing.value = true
+  if (page === 'index') uni.switchTab({ url: '/pages/index/index' })
-		loadNotices(true)
+  if (page === 'serviceIndex') uni.switchTab({ url: '/pages/serviceIndex/serviceIndex' })
-	}
+  uni.removeStorageSync('sourcePage')
-
+}
-	// 上拉加载更多
-	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)
-	})
 
+onLoad(() => {
+	isFirstShow.value = false
+	uni.$on('noticeRead',updateReadStatus)
+  loadNotices(true)
+})
+onUnload(()=>{
+	uni.$off('noticeRead',updateReadStatus)
+})
 </script>
 
 <style lang="scss">
-/* 通知列表容器 */
+page {
-.notice-list {
+  background: #f9f9f9;
-  padding: 20px;
-  box-sizing: border-box;
-  background-color: #f9f9f9;
 }
-  .status_bar {
+.page {
-	height: 32px;
+  position: fixed;
-	width: 100%;
+  top: 0;
- }
+  left: 0;
-/* 顶部标题 */
+  right: 0;
-.top-bar {
+  bottom: 0;
-  text-align: center;
-  margin-bottom: 20rpx;
-}
-
-/* 下拉刷新 */
-.refresh-container {
   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;
-  }
 }
-
+.title {
-/* 通知项样式 */
+  font-size: 32rpx;
-.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;
   font-weight: bold;
-  color: #333;
+  width: 500rpx;
-  line-height: 1.4;
-  margin-bottom: 12px;
-  // display: -webkit-box;
-  // -webkit-box-orient: vertical;
-  // -webkit-line-clamp: 2;
-  width: 290px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-    // 未读红点
+.dot {
-.unread-dot {
+  width: 12rpx;
-    width: 8px;
+  height: 12rpx;
-    height: 8px;
+  background: red;
-    border-radius: 50%;
+  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;
-    }
-  }
 }
-
+.info {
-/* 通知摘要 */
+  color: #999;
-.notice-summary {
+  font-size: 24rpx;
-  font-size: 14px;
+  margin: 10rpx 0;
+}
+.content {
   color: #666;
-  background-color: #f9f9f9;
+  font-size: 28rpx;
   line-height: 1.5;
-  margin-bottom: 16px;
+  margin: 20rpx 0;
-  display: -webkit-box;
+  background-color: #f9f9f9;
-  -webkit-box-orient: vertical;
+  padding: 24rpx;
-  -webkit-line-clamp: 3;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
-
+.detail {
-/* 操作区域 */
-.notice-actions {
   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;
-  }
 }
-
+.refresh, .load-more, .no-more {
-.no-more {
   text-align: center;
-  padding: 20px 0;
+  padding: 20rpx;
   color: #999;
-  font-size: 14px;
 }
-
+.empty {
-/* 空状态 */
+  text-align: center;
-.empty-state {
+  padding: 100rpx 0;
-  display: flex;
+  color: #999;
-  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;
-    }
-  }
 }
-
+.refresh-btn {
-
+  background: #007AFF;
-</style>
+  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>

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"
+			})
+		}
+	}
+	
 	
 	
 	

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 {

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;