系统通知详情

pages/news/subpages/sysNotice/index.vue

@@ -6,14 +6,14 @@
       <view
           class="tab-item"
           :class="{ active: currentTab === 0 }"
-          @click="currentTab = 0"
+          @click="switchTab(0)"
       >
         未读
       </view>
       <view
           class="tab-item"
           :class="{ active: currentTab === 1 }"
-          @click="currentTab = 1"
+          @click="switchTab(1)"
       >
         已读
       </view>
@@ -29,7 +29,7 @@
         <!-- 状态点 + 标题 -->
         <view class="notice-header">
           <view class="status-dot" :style="{ borderColor: item.dotColor }">
-            <view class="dot-inner" :style="{ backgroundColor: item.dotColor }" v-if="item.dotInner"></view>
+            <view class="dot-inner" :style="{ backgroundColor: item.dotColor }" v-if="Math.random() < 0.5"></view>
           </view>
           <text class="notice-title">{{ item.title }}</text>
         </view>
@@ -42,8 +42,8 @@
         <!-- 底部：头像 + 作者 + 时间 -->
         <view class="notice-footer">
           <view class="author-info">
-            <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
+            <image class="avatar" :src="authorList[Math.round(Math.random())].avatar" mode="aspectFill"></image>
-            <text class="author-name">{{ item.author }}</text>
+            <text class="author-name">{{ authorList[Math.round(Math.random())].name }}</text>
           </view>
           <text class="notice-time">{{ item.time }}</text>
         </view>
@@ -57,7 +57,23 @@ export default {
   data() {
     return {
       currentTab: 0, // 0未读 1已读
-      noticeList: [
+      authorList: [
+          {
+            name: '那只猪-图鸟人事部',
+            avatar: 'https://img.xiaoces.com/photos/profile.jpg'
+          },
+          {
+            name: '你的名字',
+            avatar: 'https://img.xiaoces.com/photos/logo200.png'
+          }
+      ],
+      dotColorList: [
+        '#e53935',
+        '#007bff',
+        '#4caf50',
+        '#ff9800'
+      ],
+      contentList: [
         {
           title: '2024年春节放假通知',
           content: '各位同事：一年一度的春节又到啦，根据国家法定节假日规定，2024年春节放假安排如下：02月01日—...',
@@ -65,7 +81,28 @@ export default {
           time: '2024-01-26 10:12',
           dotColor: '#e53935',
           dotInner: true, // 实心红点
-          avatar: '/static/avatar1.png' // 替换为你的头像路径
+          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: '关于年前请假审批流程通知',
@@ -74,7 +111,8 @@ export default {
           time: '2024-01-20 14:02',
           dotColor: '#007bff',
           dotInner: false, // 空心蓝点
-          avatar: '/static/avatar2.png'
+          isRead: 1,
+          avatar: 'https://img.xiaoces.com/photos/logo.png'
         },
         {
           title: '图鸟OA系统更新通知',
@@ -83,7 +121,8 @@ export default {
           time: '2024-01-12 09:56',
           dotColor: '#4caf50',
           dotInner: true, // 实心绿点
-          avatar: '/static/avatar3.png'
+          isRead: 1,
+          avatar: 'https://img.xiaoces.com/photos/logo.png'
         },
         {
           title: '凑数的文案，凑够一行超出隐藏，不喜勿喷',
@@ -92,7 +131,8 @@ export default {
           time: '2024-01-06 17:59',
           dotColor: '#007bff',
           dotInner: false, // 空心蓝点
-          avatar: '/static/avatar4.png'
+          isRead: 1,
+          avatar: 'https://img.xiaoces.com/photos/logo.png'
         },
         {
           title: '2023年12月考勤统计核对表',
@@ -101,21 +141,39 @@ export default {
           time: '',
           dotColor: '#4caf50',
           dotInner: true, // 实心绿点
-          avatar: ''
+          isRead: 1,
+          avatar: 'https://img.xiaoces.com/photos/logo.png'
         }
-      ]
+      ],
+      noticeList: [],
     }
+  },
+  methods: {
+    switchTab(currentTab) {
+      this.currentTab = currentTab;
+      this.noticeList = this.contentList.filter(item =>
+          item.isRead===currentTab);
     }
+  },
+  onShow() {
+    this.noticeList = this.contentList.filter(item =>
+        item.isRead===0);
+  },
 }
 </script>
 
 <style scoped>
+page {
+  box-sizing: border-box;
+  background-color: #f8f8f8;
+}
+
 /* 页面容器 */
 .notice-page {
-  height: 100vh;
+
-  background-color: #f8f8f8;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
 }
 
 /* 标签栏 */
@@ -155,6 +213,11 @@ export default {
 .notice-list {
   flex: 1;
   padding: 20rpx;
+  background-color: transparent;
+  border-radius: 8rpx;
+  overflow: hidden;
+  /* 新增：H5端避免滚动条样式不一致 */
+  scrollbar-width: thin;
 }
 .notice-item {
   background-color: #fff;