ruoyi-miniapp/sub/owner/notic.vue

<template>
  <view class="container">
    <!-- Tab 切换 -->
    <view class="tab-container">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @tap="switchTab(index)"
      >
        <text>{{ tab.name }}</text>
        <text v-if="tab.count > 0" class="badge">{{ tab.count }}</text>
      </view>
    </view>

    <!-- 列表内容 -->
    <scroll-view
      class="scroll-container"
      scroll-y
      @scrolltolower="loadMore"
      @refresherrefresh="onRefresh"
      refresher-enabled
      :refresher-triggered="isRefreshing"
    >
      <view
        v-for="(item, index) in list"
        :key="index"
        :class="['notice-item', !item.type ? 'is-read' : '']"
        @tap="goDetail(item)"
      >
        <view :class="['notice-icon', !item.type ? 'green' : '']">
          <image
            :src="
              !item.type
                ? '/static/images/owner/message.png'
                : '/static/images/owner/message-grey.png'
            "
            mode="aspectFill"
          ></image>
        </view>
        <view class="notice-content">
          <view class="notice-title">{{ item.title }}</view>
          <view class="notice-time">{{ item.time }}</view>
        </view>
        <view class="notice-arrow">
          <text class="iconfont icon-right"></text>
        </view>
      </view>
      <cs-emty v-if="list.length == 0"></cs-emty>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '任务通知', count: 4 },
        { name: '整改到期', count: 0 },
        { name: '资质逾期', count: 0 }
      ],
      currentTab: 0,
      list: [],
      mock: [
        {
          id: 1,
          title: '全区餐饮环保检查全区餐饮环保检查全区餐饮环保检查...',
          time: '2025年3月18日 - 2025年3月18日',
          icon: '/static/images/notice-icon.png',
          type: 0
        },
        {
          id: 2,
          title: '餐饮店卫生检查通知',
          time: '2025年3月15日 - 2025年3月20日',
          icon: '/static/images/notice-icon.png',
          type: 0
        },
        {
          id: 3,
          title: '消防安全整改通知',
          time: '2025年3月10日 - 2025年3月25日',
          icon: '/static/images/notice-icon.png',
          type: 1
        },
        {
          id: 4,
          title: '营业执照即将到期提醒',
          time: '2025年4月1日到期',
          icon: '/static/images/notice-icon.png',
          type: 1
        }
      ],
      page: 1,
      isRefreshing: false,
      hasMore: true // 添加是否有更多数据的标志
    }
  },

  onLoad() {
    this.getList()
  },

  methods: {
    switchTab(index) {
      if (this.currentTab === index) return
      this.currentTab = index
      this.page = 1
      this.list = []
      this.getList()
    },
    async getList() {
      if (this.currentTab == 0) {
        this.list = [...this.mock, ...this.mock]
      }
    },
    async loadMore() {
      if (!this.hasMore) return // 没有更多数据时不再加载
      this.page++
      await this.getList()
    },
    async onRefresh() {
      try {
        this.isRefreshing = true
        this.page = 1
        await this.getList()
      } finally {
        this.isRefreshing = false
      }
    },
    goDetail(item) {
      //   // 跳转到详情页
      //   uni.navigateTo({
      //     url: `/pages/notice-detail/notice-detail?id=${item.id}`,
      //   });
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.tab-container {
  display: flex;
  background: #fff;
  padding: 24rpx 32rpx;
  gap: 24rpx;
  border-bottom: 2rpx solid var(--LightMode-Grey-Grey-100, #f9f9f9);
  .tab-item {
    flex: 1;
    text-align: center;
    position: relative;
    height: 64rpx;
    line-height: 64rpx;
    font-size: 28rpx;
    color: #4b5675;
    background: #f9f9f9;
    border-radius: 240rpx;

    &.active {
      color: #07c160;
      background: rgba(7, 193, 96, 0.1);
      font-weight: bold;
    }

    .badge {
      margin-left: 8rpx;
      color: #07c160;
    }
  }
}

.scroll-container {
  flex: 1;
  box-sizing: border-box;
  max-height: calc(100vh - 124rpx);
  padding: 0 24rpx;
}

.notice-item {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
  border-radius: 16rpx;
  border: 2rpx solid #f9f9f9;
  background: #fff;
  color: #4b5675;
  margin-top: 24rpx;
  &:last-child {
    margin-bottom: 48rpx;
  }
  .notice-icon {
    padding: 16rpx;
    border-radius: 50%;
    background-color: #f9f9f9;
    box-sizing: border-box;
    margin-right: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 40rpx;
      height: 40rpx;
      flex-shrink: 0;
      z-index: 1;
    }
  }
  .green {
    background-color: #eafff1;
  }
  .notice-content {
    flex: 1;

    .notice-title {
      margin-bottom: 10rpx;
      font-weight: bold;
      max-width: 486rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .notice-time {
    }
  }

  .notice-arrow {
    color: #c4cada;
    font-size: 24rpx;
  }
}
.is-read {
  color: #071437;
}
</style>