chongqing-app/src/pages/home/components/announcement.vue

<template>
  <div class="announcement-container">
    <head-title subTitle="了解更多安检知识" title="最新公告"></head-title>

    <!-- 列表为空时显示的状态 -->
    <div v-if="list.length === 0" class="empty-state">
      <view class="empty"></view>
      <text class="empty-text">暂无公告</text>
    </div>

    <!-- 有数据时显示列表 -->
    <div v-else>
      <div class="list">
        <div v-for="(item, index) in list.slice(0, 2)" :key="item.id"
          :class="[item.status, index === 0 ? 'first-item' : 'second-item']" class="list-item"
          @click="navigateToDetail(item)">
          <div class="list-item-title">
            <text class="text-grey1">{{ item.noticeTitle }}</text>
          </div>
          <div class="list-item-content">{{ stripHtmlTags(item.noticeContent) }}</div>
        </div>
      </div>

      <div class="more-list" @click="navigateToMore">查看全部</div>
    </div>
  </div>
</template>
<script>

import HeadTitle from "@/components/HeadTitle.vue";
import { getNoticeList } from "@/api/announcement/announcement.js";

export default {
  components: {
    HeadTitle
  },
  data() {
    return {
      list: []
    };
  },
  mounted() {
    // 组件首次加载时获取数据
    // this.getAnnouncementList();
  },
  methods: {
    // 提供给父组件调用的刷新方法
    refreshData() {
      this.getAnnouncementList();
    },
    
    navigateToDetail(item) {
      console.log(item);
      uni.navigateTo({
        url: '/pages/announcement/announcementDetail?id=' + item.noticeId
      });
    },
    // 去除HTML标签，只保留纯文本
    stripHtmlTags(html) {
      if (!html) return '';
      // 使用正则表达式去除HTML标签
      return html.replace(/<[^>]+>/g, '');
    },
    navigateToMore() {
      uni.navigateTo({
        url: '/pages/announcement/index'
      });
    },
    async getAnnouncementList() {
      try {
        const res = await getNoticeList({
          pageNum: 1,
          pageSize: 2,
          noticeType: 2,
          status: '0'
        });

        // 处理API返回的数据，转换为组件需要的格式
        if (res && res.rows) {
          this.list = res.rows
        }
      } catch (error) {
        console.error('获取公告列表失败:', error);
        // 出错时使用默认数据
        this.list = [];
      }
    },
    formatTime(timeString) {
      // 简单的时间格式化函数，根据实际API返回格式调整
      if (!timeString) return '';

      const now = new Date();
      const past = new Date(timeString);
      const diffMinutes = Math.floor((now - past) / (1000 * 60));

      if (diffMinutes < 60) {
        return `${diffMinutes}分钟之前`;
      } else if (diffMinutes < 60 * 24) {
        return `${Math.floor(diffMinutes / 60)}小时之前`;
      } else {
        return `${Math.floor(diffMinutes / (60 * 24))}天之前`;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.more-list {
  padding: 30rpx 30rpx 0 30rpx;
  font-weight: 400;
  font-size: 30rpx;
  color: #666666;

  text-align: center;
}

.announcement-container {
  border-radius: 16rpx;
  padding: 20rpx 20rpx;
  box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.08);
}

// 空状态样式
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
  background: #FFFFFF;
  //box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.08);
  margin-top: 28rpx;
  margin-bottom: 28rpx;
  border-radius: 16rpx;

  .empty {
    margin: 0 auto;
    width: 160px;
    height: 155px;
    background: url("../../../static/images/Empty.png") no-repeat;
    background-size: cover;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999999;
  }
}

// 列表样式
.list {
  .list-item {
    margin-top: 28rpx;
    padding: 20rpx 34rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
    background: #FFFFFF;
    line-height: 32rpx;
    //box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.08);
    border-radius: 0 24rpx 24rpx 0;
    // border-left: 20rpx solid #F0F8FF;
    // border-top: 2rpx solid #F0F8FF;
    // border-right: 2rpx solid #F0F8FF;
    // border-bottom: 2rpx solid #F0F8FF;

    // 第一个容器的边框颜色
    &.first-item {
      border-left: 10rpx solid #FD7474;
    }

    // 第二个容器的边框颜色
    &.second-item {
      border-left: 10rpx solid #2A70D2;
    }

    .list-item-title {
      margin-bottom: 20rpx;

      .text-grey2 {
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 28rpx;
      }
    }

    .list-item-content {
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      line-height: 28rpx;
    }

    &.error {
      border-left: 5rpx solid #FD7474;
    }

    &.active {
      border-left: 5rpx solid #2A70D1;
    }
  }
}
</style>