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

<template>
  <view class="news-detail-page">
    <!-- 循环渲染通知列表 -->
    <view class="news-card" v-for="item in noticeList" :key="item.id">
      <view class="news-header">
        <text class="news-title">{{ item.item || '暂无标题' }}</text>
        <view class="unread-dot" v-if="item.isCheckStr === '未读'"></view>
      </view>

      <view class="news-meta">
        <text class="author">{{ item.residentName || '管理员' }}</text>
        <text class="publish-time">{{ item.createTime }}</text>
      </view>

      <view class="news-content">
        <text class="content-text">{{ item.problem || item.notice}}</text>
      </view>

      <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'
import { usePermStore } from '@/stores/usePermStore.js'

const permStore = usePermStore()
// 列表数据
const noticeList = ref([])

// 分页相关
const pageNum = ref(1) // 当前页
const pageSize = ref(10) // 每页条数
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 => {
  const hasMine = permStore.hasPermi('butler:workOrder:mine')
  const hasHall = permStore.hasPermi('butler:workOrder:hall')
  if (hasMine || hasHall) {
    item.isCheck = '1'
    uni.navigateTo({
      url: `/pageSubPack/ticket/repairMain?id=${item.id}`
    })
  } else {
    uni.showToast({ title: '暂无操作权限', icon: 'none' })
  }
}

// 页面显示时刷新（从详情页返回也会触发）
onShow(() => {
  pageNum.value = 1
  noMore.value = false
  getNoticeData()
  permStore.initPerm()
})
</script>

<style lang="scss" scoped>
.news-detail-page {
  padding: 20rpx;
  background-color: #f9f9f9;
  min-height: 100vh;
  box-sizing: border-box;
}

.news-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.news-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unread-dot {
  width: 16rpx;
  height: 16rpx;
  background-color: #e34d59;
  border-radius: 50%;
  margin-top: 6rpx;
}

.news-meta {
  margin-bottom: 20rpx;
  .author {
    font-size: 26rpx;
    color: #666;
    margin-right: 20rpx;
  }
  .publish-time {
    font-size: 26rpx;
    color: #999;
  }
}

.news-content {
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  word-break: break-all;
  /* 按高度截断，避免 line-clamp 导致文字重叠 */
  max-height: 160rpx;
  overflow: hidden;
  .content-text {
    font-size: 28rpx;
    color: #333;
    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;
  }
}

.load-more {
  text-align: center;
  padding: 30rpx;
  color: #999;
  font-size: 26rpx;
}

.empty {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>