MOSE-Official-Website-20250712/subPages/index/announcement.vue

<template>
  <view class="announcement-page">
    <!-- 公告列表 -->
    <view class="announcement-list">
      <view 
        class="announcement-item" 
        v-for="(item, index) in announcementList" 
        :key="index"
        @click="goToDetail(item)"
      >
        <view class="item-content">
          <view class="text-content">
            <view class="title">{{ item.title }}</view>
            <!-- <view class="description" v-html="item.details"></view> -->
            <rich-text class="description" :nodes="item.details"></rich-text>
            <view class="time">{{ item.createTime }}</view>
          </view>
          <!-- <view class="image-content" v-if="item.image">
            <image :src="item.image" class="announcement-image" mode="aspectFill"></image>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Announcement',
  data() {
    return {
      announcementList: [],
      pageNo: 1,
      pageSize: 10
    }
  },
  async onShow() {
    // 页面加载时的逻辑
    await this.queryAnnouncementList()
  },
  methods: {
    goToDetail(item) {
      uni.navigateTo({
        url: `/subPages/index/announcementDetail?id=${item.id}`
      })
    },
    async queryAnnouncementList() {
      const res = await this.$api.home.queryNoticeList({
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
      if (!res.result.records.length) {
        uni.showToast({
          title: '没有更多数据了',
          icon: 'none'
        })
        return
      }
      this.announcementList.push(...res.result.records)
      this.pageNo++
    }
  },
  onReachBottom() {
    // 上拉加载更多的逻辑
    this.queryAnnouncementList()
  },
  async onPullDownRefresh() {
    // 下拉刷新的逻辑
    this.pageNo = 1
    this.announcementList = []
    await this.queryAnnouncementList()
    uni.stopPullDownRefresh()
  }
}
</script>

<style lang="scss" scoped>
.announcement-page {
  background-color: $uni-bg-color-grey;
  min-height: 100vh;
  padding: 20rpx;
}

.announcement-list {
  .announcement-item {
    background-color: $uni-bg-color;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 30rpx;
    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
    
    .item-content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      
      .text-content {
        flex: 1;
        margin-right: 20rpx;
        
        .title {
          font-size: 32rpx;
          font-weight: bold;
          color: #000000;
          margin-bottom: 16rpx;
          line-height: 1.4;
        }
        
        .description {
          font-size: 28rpx;
          color: #0F2248;
          line-height: 1.5;
          margin-bottom: 20rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .time {
          font-size: 24rpx;
          color: $uni-text-color-grey;
        }
      }
      
      .image-content {
        flex-shrink: 0;
        
        .announcement-image {
          width: 220rpx;
          height: 200rpx;
          border-radius: 15rpx;
          background-color: $uni-bg-color-grey;
        }
      }
    }
  }
}
</style>