From d1e1e0db740aaedade1270cc990308e2d78d0697 Mon Sep 17 00:00:00 2001
From: lld <15027638633@163.com>
Date: Fri, 3 Apr 2026 21:39:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B6=88=E6=81=AF=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/news/index.vue                       |   9 +-
 pages/news/subpages/deviceCenter/index.vue |   6 +-
 pages/news/subpages/eventCenter/index.vue  |  41 ++-
 pages/news/subpages/sysNotice/index.vue    | 361 ++++++++-------------
 utils/agri.js                              |   1 -
 5 files changed, 175 insertions(+), 243 deletions(-)

diff --git a/pages/news/index.vue b/pages/news/index.vue
index ac690fe..4f99157 100644
--- a/pages/news/index.vue
+++ b/pages/news/index.vue
@@ -72,11 +72,11 @@
           <view class="item-content">
             <view class="item-title">
               <text>{{ item.title }}</text>
-              <text class="item-time">
+              <view class="item-time">
                 <uni-dateformat v-if="item.createTime" :date="item.createTime" :format="formatTime(item.createTime)"
                                 :threshold="[60000, 3600000]"></uni-dateformat>
                 <text v-else>--</text>
-              </text>
+              </view>
             </view>
             <view class="item-desc">
               <view v-if="item.content">{{ item.content }}</view>
@@ -181,6 +181,10 @@ export default {
         cancelText: '取消',
         confirmText: '确定',
         success: (res) => {
+          var unReadNum = this.messageList.filter(item => item.readStatus === 0).length;
+          if (unReadNum === 0) {
+            return;
+          }
           updateRead({}).then(response => {
             if (response.code === 200) {
               this.getMsgOverview();
@@ -188,7 +192,6 @@ export default {
           })
         }
       })
-      console.log('清除未读：当前页面全部已读')
     },
     openSetting() {
       // 当前页面勿扰模式设置
diff --git a/pages/news/subpages/deviceCenter/index.vue b/pages/news/subpages/deviceCenter/index.vue
index 22dc264..fe04940 100644
--- a/pages/news/subpages/deviceCenter/index.vue
+++ b/pages/news/subpages/deviceCenter/index.vue
@@ -34,7 +34,7 @@
       <uni-load-more  iconType="auto"  v-if="messageList.length >=10"
                       :status="status" :content-text="contentText" />
     </scroll-view>
-    <view class="empty__item tn-margin-top empty__view" v-else>
+    <view class="empty__item empty__view" v-else>
       <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png"
                 text="近7天暂无消息" :imgWidth="200"
                 :imgHeight="200"></tn-empty>
@@ -222,10 +222,12 @@ export default {
 @import '@/colorui/icon.css';
 </style>
 <style scoped>
+page {
+  background-color: #f5f5f5;
+}
 /* 页面容器 */
 .message-page {
   height: 100vh;
-  background-color: #f5f5f5;
 }
 
 /* 消息列表 */
diff --git a/pages/news/subpages/eventCenter/index.vue b/pages/news/subpages/eventCenter/index.vue
index be3fdf2..4ee37d9 100644
--- a/pages/news/subpages/eventCenter/index.vue
+++ b/pages/news/subpages/eventCenter/index.vue
@@ -1,5 +1,11 @@
 <template>
   <view class="message-page">
+    <z-paging ref="eventPage" refresher-only
+              :show-empty="false" :show-footer="false" @onRefresh="getEventList">
+      <template #refresher="{refresherStatus}">
+        <!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
+        <custom-refresher :status="refresherStatus" />
+      </template>
     <!-- 消息列表 -->
     <scroll-view :scroll-y="true"
                  class="message-list"
@@ -30,31 +36,39 @@
         <!-- 底部信息栏 -->
         <view class="info-bar">
           <view class="sender-info">
-            <image class="sender-icon" :src="item.imageUrl || avatarUrl" mode="aspectFill"></image>
+            <image class="sender-icon" :src="item.imgUrl || avatarUrl" mode="aspectFill"></image>
             <text class="sender-name">{{ item.createBy || '小策官方团队'}}</text>
           </view>
           <text class="send-time">{{ formatTime(item.createTime) }}</text>
         </view>
       </view>
-      <uni-load-more v-if="messageList.length>4" iconType="auto" :status="status" :content-text="contentText" />
+      <!-- 底部提示 -->
+      <uni-divider-text margin="10rpx 0"
+                        width="50%"
+                        font-size="24rpx"
+                        v-if="messageList.length>0"
+                        lineText="只展示最近7天的消息"/>
+<!--      <uni-load-more v-if="messageList.length>4" iconType="auto" :status="status" :content-text="contentText" />-->
     </scroll-view>
     <view class="empty__item tn-margin-top empty__view" v-else>
       <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png"
                 text="近7天暂无消息" :imgWidth="200"
                 :imgHeight="200"></tn-empty>
     </view>
+    </z-paging>
   </view>
 </template>
 
 <script>
 import {formatTime} from "@/utils/agri";
 import {listMessage} from "@/api/warn/message";
+import UniDividerText from "@/components/uni-divider/uni-divider-text.vue";
 export default {
+  components: {UniDividerText},
   data() {
     return {
       avatarUrl: "https://img.xiaoces.com/photos/logo.png",
       messageList: [],
-      isHaveOldData: true,
       contentText: {
         contentdown: '查看更多',
         contentrefresh: '加载中.......',
@@ -84,22 +98,22 @@ export default {
     },
     getEventList() {
       this.status = 'loading'
-      if (!this.isHaveOldData) {
-        setTimeout(() => {
-          this.$modal.msg("没有更早数据！");
-          // 结束刷新状态
-          this.status = 'nomore'
-        }, 800);
-        return;
-      }
+      // if (!this.isHaveOldData) {
+      //   setTimeout(() => {
+      //     this.$modal.msg("没有更早数据！");
+      //     // 结束刷新状态
+      //     this.status = 'nomore'
+      //   }, 800);
+      //   return;
+      // }
       var query = {
         msgType: "event"
       }
       listMessage(query).then(response => {
         if (response.code === 200) {
           this.messageList = response.rows.sort((a, b) => new Date(a.createTime) - new Date(b.createTime));
-          if (response.rows.length === 0) {
-            this.isHaveOldData = false;
+          if (this.messageList.length === 0) {
+            this.$modal.showToast('没有更多数据~')
           }
         }
       }).finally(()=>{
@@ -110,6 +124,7 @@ export default {
         });
         // 结束刷新状态
         this.status = 'nomore'
+        this.$refs.eventPage.complete();
       })
     }
 
diff --git a/pages/news/subpages/sysNotice/index.vue b/pages/news/subpages/sysNotice/index.vue
index 36e488a..86bd86d 100644
--- a/pages/news/subpages/sysNotice/index.vue
+++ b/pages/news/subpages/sysNotice/index.vue
@@ -1,96 +1,116 @@
 <template>
   <view class="notice-page">
-
-    <!-- 未读/已读标签栏 -->
-    <view class="tab-bar">
-      <view
-          class="tab-item"
-          :class="{ active: currentTab === 0 }"
-          @click="switchTab(0)"
-      >
-        未读
-      </view>
-      <view
-          class="tab-item"
-          :class="{ active: currentTab === 1 }"
-          @click="switchTab(1)"
-      >
-        已读
-      </view>
-    </view>
-
-    <!-- 公告列表 -->
-    <scroll-view :scroll-y="true" class="notice-list" @scrolltolower="onLoadMore" v-if="noticeList.length>0">
-      <view
-          v-for="(item, index) in noticeList"
-          :key="index"
-          class="notice-item"
-          @click="handleClick(item)"
-      >
-        <!-- 状态点 + 标题 -->
-        <view class="notice-header">
-          <view class="status-dot" :style="{ borderColor: item.dotColor }">
-            <view class="dot-inner" :style="{ backgroundColor: item.dotColor }" v-if="Math.random() < 0.5"></view>
-          </view>
-          <text class="notice-title">{{ item.title }}</text>
+    <z-paging ref="noticePage" refresher-only
+              :show-empty="false" :show-footer="false" @onRefresh="getNoticeList">
+      <template #refresher="{refresherStatus}">
+        <!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
+        <custom-refresher :status="refresherStatus" />
+      </template>
+      <!-- 未读/已读标签栏 -->
+      <view class="tab-bar">
+        <view
+            class="tab-item"
+            :class="{ active: currentTab === 0 }"
+            @click="switchTab(0)"
+        >
+          未读
         </view>
-
-        <!-- 内容描述 -->
-        <view class="notice-content">
-          <text class="content-text">{{ item.content }}</text>
-        </view>
-
-        <!-- 底部：头像 + 作者 + 时间 -->
-        <view class="notice-footer">
-          <view class="author-info">
-            <image class="avatar" :src="authorList[Math.round(Math.random())].avatar" mode="aspectFill"></image>
-            <text class="author-name">{{ authorList[Math.round(Math.random())].name }}</text>
-          </view>
-          <text class="notice-time">{{ item.time }}</text>
+        <view
+            class="tab-item"
+            :class="{ active: currentTab === 1 }"
+            @click="switchTab(1)"
+        >
+          已读
         </view>
       </view>
-      <uni-load-more v-if="noticeList.length>8" iconType="auto" :status="status" :content-text="contentText" />
-    </scroll-view>
-    <view class="empty__item tn-margin-top empty__view" v-else>
-      <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png"
-                text="暂无公告" :imgWidth="200"
-                :imgHeight="200"></tn-empty>
-    </view>
 
-    <uni-popup  ref="showNotice" mode="center" >
-      <!-- 新增：修改运行时间的弹窗 -->
-      <view class="modal-container">
-        <view class="modal-title">{{ notice.title }}</view>
-        <view class="modal-content">&nbsp; &nbsp;&nbsp; &nbsp;{{ notice.content }}</view>
-        <view class="modal-remark">
-          <view class="remark">
-            发布人：{{ notice.author }}
+      <!-- 公告列表 -->
+      <scroll-view :scroll-y="true" class="notice-list" v-if="noticeList.length>0">
+        <view
+            v-for="(item, index) in noticeList"
+            :key="index"
+            class="notice-item"
+            @click="handleClick(item)"
+        >
+          <!-- 状态点 + 标题 -->
+          <view class="notice-header">
+            <view class="status-dot" :style="{ borderColor: item.dotColor }">
+              <view class="dot-inner" :style="{ backgroundColor: item.dotColor }" v-if="Math.random() < 0.5"></view>
+            </view>
+            <text class="notice-title">{{ item.title }}</text>
           </view>
-          <view class="remark">
-            发布时间：{{ notice.time }}
+
+          <!-- 内容描述 -->
+          <view class="notice-content">
+            <text class="content-text">{{ item.content }}</text>
+          </view>
+
+          <!-- 底部：头像 + 作者 + 时间 -->
+          <view class="notice-footer">
+            <view class="author-info">
+              <image class="avatar" :src=" item.imgUrl || authorList[Math.round(Math.random())].imgUrl" mode="aspectFill"></image>
+              <text class="author-name">{{ item.createBy || authorList[Math.round(Math.random())].createBy }}</text>
+            </view>
+            <text class="notice-time">{{ formatTime(item.createTime) }}</text>
           </view>
         </view>
-        <view class="modal-btn-wrap">
-          <button class="modal-btn confirm" @click="closeShowNotice">确定</button>
-        </view>
+  <!--      <uni-load-more v-if="noticeList.length>8" iconType="auto" :status="status" :content-text="contentText" />-->
+
+        <uni-divider-text margin="10rpx 0"
+                          width="50%"
+                          font-size="24rpx"
+                          v-if="noticeList.length>0"
+                          lineText="只展示最近7天的消息"/>
+      </scroll-view>
+
+
+
+      <view class="empty__item tn-margin-top empty__view" v-else>
+        <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png"
+                  text="近7天暂无公告" :imgWidth="200"
+                  :imgHeight="200"></tn-empty>
       </view>
-    </uni-popup>
+
+      <uni-popup  ref="showNotice" mode="center" >
+        <!-- 新增：修改运行时间的弹窗 -->
+        <view class="modal-container">
+          <view class="modal-title">{{ notice.title }}</view>
+          <view class="modal-content">&nbsp; &nbsp;&nbsp; &nbsp;{{ notice.content }}</view>
+          <view class="modal-remark">
+            <view class="remark">
+              发布人：{{ notice.createBy }}
+            </view>
+            <view class="remark">
+              发布时间：{{ notice.createTime }}
+            </view>
+          </view>
+          <view class="modal-btn-wrap">
+            <button class="modal-btn confirm" @click="closeShowNotice">确定</button>
+          </view>
+        </view>
+      </uni-popup>
+    </z-paging>
   </view>
 </template>
 
 <script>
+import {formatTime} from "@/utils/agri";
+import UniDividerText from "@/components/uni-divider/uni-divider-text.vue";
+import {listMessage, updateRead} from "@/api/warn/message";
+
 export default {
+  components: {UniDividerText},
   data() {
     return {
       currentTab: 0, // 0未读 1已读
       authorList: [
           {
-            name: '那只猪-图鸟人事部',
-            avatar: 'https://img.xiaoces.com/photos/profile.jpg'
+            createBy: '那只猪-图鸟人事部',
+            imgUrl: 'https://img.xiaoces.com/photos/profile.jpg'
           },
           {
-            name: '你的名字',
-            avatar: 'https://img.xiaoces.com/photos/logo200.png'
+            createBy: '你的名字',
+            imgUrl: 'https://img.xiaoces.com/photos/logo200.png'
           }
       ],
       dotColorList: [
@@ -103,140 +123,30 @@ export default {
         {
           title: '2024年春节放假通知',
           content: '各位同事：一年一度的春节又到啦，根据国家法定节假日规定，2024年春节放假安排如下：02月01日—...',
-          author: '那只猪-图鸟人事部',
-          time: '2024-01-26 10:12',
+          createBy: '那只猪-图鸟人事部',
+          createTime: '2024-01-26 10:12',
           dotColor: '#e53935',
           dotInner: true, // 实心红点
-          isRead: 0,
-          avatar: 'https://img.xiaoces.com/photos/logo.png' // 替换为你的头像路径
+          readStatus: 0,
+          imgUrl: 'https://img.xiaoces.com/photos/logo.png' // 替换为你的头像路径
         },
         {
           title: '2024年春节放假通知',
           content: '各位同事：一年一度的春节又到啦，根据国家法定节假日规定，2024年春节放假安排如下：02月01retrt345日—...',
-          author: '那只猪-图鸟人事部',
-          time: '2024-01-26 10:12',
+          createBy: '那只猪-图鸟人事部',
+          createTime: '2024-01-26 10:12',
           dotColor: '#e53935',
           dotInner: true, // 实心红点
-          isRead: 0,
-          avatar: 'https://img.xiaoces.com/photos/logo.png' // 替换为你的头像路径
-        },
-        {
-          title: '2024年春节放假通知',
-          content: '各位同事：一年一度的春节又到啦，根据国家法定节假日规定，2024年春45353535节放假安排如下：02月01日—...',
-          author: '那只猪-图鸟人事部',
-          time: '2024-01-26 10:12',
-          dotColor: '#e53935',
-          dotInner: true, // 实心红点
-          isRead: 0,
-          avatar: 'https://img.xiaoces.com/photos/logo.png' // 替换为你的头像路径
-        },
-        {
-          title: '2024年春节放假通知',
-          content: '各位同事：一年一度的春节又到啦，根据国家法定节假日规定，2024年春节放假安排如下：02月01日—...',
-          author: '那只猪-图鸟人事部',
-          time: '2024-01-26 10:12',
-          dotColor: '#e53935',
-          dotInner: true, // 实心红点
-          isRead: 0,
-          avatar: 'https://img.xiaoces.com/photos/logo.png' // 替换为你的头像路径
-        },
-        {
-          title: '2024年春节放假通知',
-          content: '各位同事：一年一度的春节又到啦，根据国家法定节假日规定，2024年春节放假安排如下：02月01retrt345日—...',
-          author: '那只猪-图鸟人事部',
-          time: '2024-01-26 10:12',
-          dotColor: '#e53935',
-          dotInner: true, // 实心红点
-          isRead: 0,
-          avatar: 'https://img.xiaoces.com/photos/logo.png' // 替换为你的头像路径
-        },
-        {
-          title: '2024年春节放假通知',
-          content: '各位同事：一年一度的春节又到啦，根据国家法定节假日规定，2024年春45353535节放假安排如下：02月01日—...',
-          author: '那只猪-图鸟人事部',
-          time: '2024-01-26 10:12',
-          dotColor: '#e53935',
-          dotInner: true, // 实心红点
-          isRead: 0,
-          avatar: 'https://img.xiaoces.com/photos/logo.png' // 替换为你的头像路径
-        },
-        {
-          title: '2024年春节放假通知',
-          content: '各位同事：一年一度的春节又到啦，根据国家法定节假日规定，2024年春节放假安排如下：02月01日—...',
-          author: '那只猪-图鸟人事部',
-          time: '2024-01-26 10:12',
-          dotColor: '#e53935',
-          dotInner: true, // 实心红点
-          isRead: 0,
-          avatar: 'https://img.xiaoces.com/photos/logo.png' // 替换为你的头像路径
-        },
-        {
-          title: '2024年春节放假通知',
-          content: '各位同事：一年一度的春节又到啦，根据国家法定节假日规定，2024年春节放假安排如下：02月01retrt345日—...',
-          author: '那只猪-图鸟人事部',
-          time: '2024-01-26 10:12',
-          dotColor: '#e53935',
-          dotInner: true, // 实心红点
-          isRead: 0,
-          avatar: 'https://img.xiaoces.com/photos/logo.png' // 替换为你的头像路径
-        },
-        {
-          title: '2024年春节放假通知',
-          content: '各位同事：一年一度的春节又到啦，根据国家法定节假日规定，2024年春45353535节放假安排如下：02月01日—...',
-          author: '那只猪-图鸟人事部',
-          time: '2024-01-26 10:12',
-          dotColor: '#e53935',
-          dotInner: true, // 实心红点
-          isRead: 0,
-          avatar: 'https://img.xiaoces.com/photos/logo.png' // 替换为你的头像路径
-        },
-        {
-          title: '关于年前请假审批流程通知',
-          content: '各位同事：这里是一大堆瞎逼逼的描述，为了凑字数，想不出来什么文案了',
-          author: '你的名字',
-          time: '2024-01-20 14:02',
-          dotColor: '#007bff',
-          dotInner: false, // 空心蓝点
-          isRead: 1,
-          avatar: 'https://img.xiaoces.com/photos/logo.png'
-        },
-        {
-          title: '图鸟OA系统更新通知',
-          content: '各位同事：这里是一大堆瞎逼逼的描述，为了凑字数，想不出来什么文案了',
-          author: '不许凶我吖',
-          time: '2024-01-12 09:56',
-          dotColor: '#4caf50',
-          dotInner: true, // 实心绿点
-          isRead: 1,
-          avatar: 'https://img.xiaoces.com/photos/logo.png'
-        },
-        {
-          title: '凑数的文案，凑够一行超出隐藏，不喜勿喷',
-          content: '各位同事：这里是一大堆瞎逼逼的描述，为了凑字数，想不出来什么文案了',
-          author: '图鸟西西',
-          time: '2024-01-06 17:59',
-          dotColor: '#007bff',
-          dotInner: false, // 空心蓝点
-          isRead: 1,
-          avatar: 'https://img.xiaoces.com/photos/logo.png'
-        },
-        {
-          title: '2023年12月考勤统计核对表',
-          content: '各位同事：这里是一大堆瞎逼逼的描述，为了凑字数，想不出来什么文案了',
-          author: '',
-          time: '',
-          dotColor: '#4caf50',
-          dotInner: true, // 实心绿点
-          isRead: 1,
-          avatar: 'https://img.xiaoces.com/photos/logo.png'
+          readStatus: 0,
+          imgUrl: 'https://img.xiaoces.com/photos/logo.png' // 替换为你的头像路径
         }
       ],
       noticeList: [],
       notice: {
         title:null,
         content:null,
-        author:null,
-        avatar:null
+        createBy:null,
+        createTime:null
       },
       status: 'more',
       contentText: {
@@ -247,55 +157,58 @@ export default {
       isHaveOldData: true
     }
   },
+  onLoad() {
+    // 系统通知按照最新时间升序排序
+    // 只允许查询七天以内消息默认展示今天
+    this.getNoticeList();
+  },
   methods: {
+    formatTime,
     switchTab(currentTab) {
       this.currentTab = currentTab;
       this.noticeList = this.contentList.filter(item =>
-          item.isRead===currentTab);
+          item.readStatus===currentTab);
     },
     handleClick(item) {
       this.notice = item;
+      if (item.readStatus===0) {
+        updateRead({msgType: "notice",id:item.id}).then(response => {
+          if (response.code === 200) {
+            console.info("更新已读成功")
+          }
+        })
+      }
       this.$refs.showNotice.open();
     },
     closeShowNotice() {
       this.$refs.showNotice.close();
     },
-    onLoadMore() {
+    getNoticeList() {
       this.status = 'loading'
-      if (!this.isHaveOldData) {
-        setTimeout(() => {
-          this.$modal.msg("没有更早数据！");
-          // 结束刷新状态
-          this.status = 'nomore'
-        }, 800);
-        return;
-      }
-      // 模拟接口请求延迟
-      setTimeout(() => {
-        // 生成10条新数据
-        const newData = [];
-        for (let i = 0; i < 10; i++) {
-          newData.push({
-            title: '2024年春节放假通知',
-            content: '各位同事：一年一度的春节又到啦，根据国家法定节假日规定，2024年春节放假安排如下：02月01日—...',
-            author: '那只猪-图鸟人事部',
-            time: '2024-01-26 10:12',
-            dotColor: '#e53935',
-            dotInner: true,
-          })
+      // if (!this.isHaveOldData) {
+      //   setTimeout(() => {
+      //     this.$modal.msg("没有更早数据！");
+      //     // 结束刷新状态
+      //     this.status = 'nomore'
+      //   }, 800);
+      //   return;
+      // }
+      listMessage({msgType: "notice"}).then(response => {
+        if (response.code === 200) {
+          this.contentList = response.rows;
+          if (this.contentList.length === 0) {
+            this.$modal.showToast('没有更多数据~')
+          }
         }
-        this.noticeList = [ ...this.noticeList,...newData];
-        this.status = 'more'
-      }, 800);
-
+      }).finally(()=>{
+        this.noticeList = this.contentList.filter(item =>
+            item.readStatus===0);
+        this.$refs.noticePage.complete();
+        // 结束刷新状态
+        this.status = 'nomore';
+      })
     },
   },
-  onShow() {
-    // 系统通知按照最新时间升序排序
-    // 只允许查询七天以内消息默认展示今天
-    this.noticeList = this.contentList.filter(item =>
-        item.isRead===0);
-  },
 }
 </script>
 
diff --git a/utils/agri.js b/utils/agri.js
index 15318ec..4a1daa7 100644
--- a/utils/agri.js
+++ b/utils/agri.js
@@ -345,7 +345,6 @@ export function isTodayDate(dateInput) {
 
 
 export function formatTime(timeStr) {
-  console.info('timeStr', timeStr)
   const now = new Date();
   const target = new Date(timeStr);
   const diff = now - target;