对接首页消息通知、巡检点 切换小区获取最新数据

wuye-manager-uniapp/pageSubPack/notice-list/notice-list.vue

@@ -1,48 +1,120 @@
 <template>
   <view class="news-detail-page">
-    <!-- 单条资讯卡片 -->
-    <view class="news-card">
-      <!-- 标题 + 右上角未读红点 -->
+    <!-- 循环渲染通知列表 -->
+    <view class="news-card" v-for="item in noticeList" :key="item.id">
       <view class="news-header">
-        <text class="news-title">以实干担当不断开创中国特色大国外交实干担当不断开创中国特色大国外交</text>
-        <view class="unread-dot"></view>
+        <text class="news-title">{{ item.item || '暂无标题' }}</text>
+        <view class="unread-dot" v-if="item.isCheck ===  '0' "></view>
       </view>
 
-      <!-- 发布人 + 时间 -->
       <view class="news-meta">
-        <text class="author">张三</text>
-        <text class="publish-time">2026-07-01</text>
+        <text class="author">{{ item.residentName || '管理员' }}</text>
+        <text class="publish-time">{{ item.createTime }}</text>
       </view>
 
-      <!-- 内容区域：浅背景卡片 -->
       <view class="news-content">
-        <text class="content-text">
-          学习贯彻习近平新时代中国特色社会主义思想主题教育开展以来，外交外事战线认真学习贯彻习近平总书记重要讲话精神和党中央部署要求，全面准确把...
-        </text>
+        <text class="content-text">{{ item.notice || item.problem }}</text>
       </view>
 
-      <!-- 详情按钮 -->
-      <view class="detail-btn" @click="goToDetail">
+      <view class="detail-btn" @click="goToDetail(item)">
         <text class="detail-text">详情</text>
         <uni-icons type="right" size="14" color="#4D5DFA"></uni-icons>
       </view>
     </view>
+
+    <!-- 加载提示 + 没有更多数据 -->
+    <view class="load-more" v-if="noticeList.length > 0">
+      <text v-if="loading">加载中...</text>
+      <text v-else-if="noMore">没有更多数据了</text>
+    </view>
+
+    <!-- 空数据 -->
+    <view class="empty" v-if="noticeList.length === 0 && !loading">
+      暂无通知消息
+    </view>
   </view>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
+import { getNoticeList } from '../../api/api.js'
 
-// 跳转到详情页方法
-const goToDetail = () => {
-  uni.navigateTo({
-    url: '/pageSubPack/notice-list/noticeListDetails'
+// 列表数据
+const noticeList = ref([])
+
+// 分页相关
+const pageNum = ref(1)        // 当前页
+const pageSize = ref(5)      // 每页条数
+const total = ref(0)          // 总条数
+const loading = ref(false)    // 加载状态
+const noMore = ref(false)     // 是否没有更多
+
+// 获取列表数据
+const getNoticeData = (isRefresh = false) => {
+  // 防止重复请求
+  if (loading.value || noMore.value) return
+
+  loading.value = true
+  getNoticeList({
+    pageSize: pageSize.value,
+    pageNum: pageNum.value
+  }).then(res => {
+    if (res.code === 200) {
+      total.value = res.total || 0
+      const data = res.rows || []
+
+      // 第一页：覆盖，分页：追加
+      if (pageNum.value === 1) {
+        noticeList.value = data
+      } else {
+        noticeList.value = [...noticeList.value, ...data]
+      }
+
+      // 判断是否还有更多
+      noMore.value = noticeList.value.length >= total.value
+    }
+  }).catch(() => {
+    uni.showToast({ title: '加载失败', icon: 'none' })
+  }).finally(() => {
+    loading.value = false
+    if (isRefresh) {
+      uni.stopPullDownRefresh()
+    }
   })
 }
+
+// 上拉加载更多
+onReachBottom(() => {
+  if (noMore.value || loading.value) return
+  pageNum.value++
+  getNoticeData()
+})
+
+// 下拉刷新
+onPullDownRefresh(() => {
+  pageNum.value = 1
+  noMore.value = false
+  getNoticeData(true)
+})
+
+// 跳详情（即时标记已读）
+const goToDetail = (item) => {
+  item.isCheck = '1'
+  uni.navigateTo({
+    url: `/pageSubPack/ticket/repairMain?id=${item.id}`
+  })
+}
+
+// 页面显示时刷新（从详情页返回也会触发）
+onShow(() => {
+  pageNum.value = 1
+  noMore.value = false
+  getNoticeData()
+})
 </script>
 
 <style lang="scss" scoped>
-// 页面基础样式
 .news-detail-page {
   padding: 20rpx;
   background-color: #f9f9f9;
@@ -50,15 +122,13 @@ const goToDetail = () => {
   box-sizing: border-box;
 }
 
-// 资讯卡片：白色背景 + 圆角
 .news-card {
-  background-color: #ffffff;
+  background-color: #fff;
   border-radius: 12rpx;
   padding: 30rpx;
-  box-sizing: border-box;
+  margin-bottom: 20rpx;
 }
 
-// 标题行：标题 + 红点
 .news-header {
   display: flex;
   justify-content: space-between;
@@ -66,20 +136,16 @@ const goToDetail = () => {
   margin-bottom: 20rpx;
 }
 
-// 资讯标题
 .news-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333333;
-  line-height: 1.4;
+  color: #333;
   flex: 1;
-  margin-right: 10rpx;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-// 右上角未读红点
 .unread-dot {
   width: 16rpx;
   height: 16rpx;
@@ -88,46 +154,53 @@ const goToDetail = () => {
   margin-top: 6rpx;
 }
 
-// 发布人+时间行
 .news-meta {
   margin-bottom: 20rpx;
+  .author {
+    font-size: 26rpx;
+    color: #666;
+    margin-right: 20rpx;
+  }
+  .publish-time {
+    font-size: 26rpx;
+    color: #999;
+  }
 }
 
-.author {
-  font-size: 26rpx;
-  color: #666666;
-  margin-right: 20rpx;
-}
-
-.publish-time {
-  font-size: 26rpx;
-  color: #999999;
-}
-
-// 内容区域：浅背景卡片
 .news-content {
   background-color: #f5f5f5;
   border-radius: 8rpx;
   padding: 20rpx;
   margin-bottom: 20rpx;
+  .content-text {
+    font-size: 28rpx;
+    color: #333;
+    line-height: 1.5;
+  }
 }
 
-.content-text {
-  font-size: 28rpx;
-  color: #333333;
-  line-height: 1.5;
-}
-
-// 详情按钮：蓝色文字 + 右箭头
 .detail-btn {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  .detail-text {
+    font-size: 28rpx;
+    color: #4D5DFA;
+    margin-right: 8rpx;
+  }
 }
 
-.detail-text {
+.load-more {
+  text-align: center;
+  padding: 30rpx;
+  color: #999;
+  font-size: 26rpx;
+}
+
+.empty {
+  text-align: center;
+  padding: 100rpx 0;
+  color: #999;
   font-size: 28rpx;
-  color: #4D5DFA;
-  margin-right: 8rpx;
 }
 </style>