im-uniapp/pages/workbench/notice/notice.vue

<template>
  <!-- 通知公告列表，展示noticeTitle， createBy, createTime -->
  <div class="notice-list-container">
    <!-- 判空提示 -->
    <div class="empty-tip" v-if="notices.length === 0">
      暂无通知公告
    </div>
    
    <!-- 公告列表 -->
    <div class="notice-list" v-else>
      <div class="notice-item" v-for="(notice, index) in notices" :key="index" @click="toDetail(notice)">
        <div class="notice-title">
					<text>{{ notice.title }}</text>
					<view class="dot" v-if="notice.state == 0">
						
					</view>
				</div>
        <div class="notice-meta">
          <span class="create-by">{{ notice.createBy || '未知发布人' }}</span>
          <span class="create-time">{{ notice.createTime || '未知时间' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listFeedback, toRead } from '@/api/oa/feedback.js'

export default {
  data() {
    return {
      notices: []
    }
  },
  mounted() {
    listFeedback({ pageSize: 999, pageNum: 1, type: 'notice' }).then(res => {
      // 确保res.rows存在，避免空数据报错
      this.notices = res?.rows || [];
    }).catch(err => {
      console.error('获取通知公告失败', err);
      this.notices = [];
    });
  },
	methods: {
		toDetail(notice) {
			uni.navigateTo({
				url: '/pages/workbench/article/article?type=notice&id=' + notice.feedbackId
			})
			if (notice.state == 0) {
				// 标记为已读
				toRead(notice);
				notice.state = 1;
			}
			
		}
	}
}
</script>

<style scoped lang="scss">
.notice-list-container {
  background-color: #f5f5f5; // 米色背景
  padding: 15px;
  min-height: 100vh; // 避免容器过矮

  .empty-tip {
    text-align: center;
    padding: 30px 0;
    color: #999;
    font-size: 14px;
  }

  .notice-list {
    .notice-item {
      background-color: #fff; // 白色公告背景
      padding: 12px 15px;
      margin-bottom: 10px;
      border-radius: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05); // 轻微阴影增强层次感

      .notice-title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
				display: flex;
				justify-content: space-between;
        margin-bottom: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; // 标题过长省略
      }
			
			.dot {
				display: block;
				width: 20rpx;
				height: 20rpx;
				background-color: red;
				border-radius: 50%;
			}

      .notice-meta {
        display: flex;
        justify-content: space-between; // 发布人和时间两端对齐
        font-size: 13px;
        color: #666;

        .create-by {
          &:after {
            content: '|'; // 分隔符
            margin: 0 8px;
            color: #ccc;
          }
        }
      }
    }
  }
}
</style>