ruoyi-miniapp/sub/owner/notic.vue

<template>
  <view class="container">
    <!-- Tab 切换 -->
    <view class="tab-container">
      <view
        v-for="tab in tabs"
        :key="tab.label"
        class="tab-item"
        :class="{ active: queryParams.templateId === tab.label }"
        @tap="switchTab(tab.label)"
      >
        <text>
          {{ $dict.echoDicValue(dictMap.notfy_message_type, tab.label) }}
        </text>
        <text v-if="tab.value > 0" class="badge">{{ tab.value }}</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.readStatus ? 'is-read' : '']"
        @tap="goDetail(item)"
      >
        <view :class="['notice-icon', !item.readStatus ? 'green' : '']">
          <image
            :src="
              !item.readStatus
                ? '/static/images/owner/message.png'
                : '/static/images/owner/message-grey.png'
            "
            mode="aspectFill"
          ></image>
        </view>
        <view class="notice-content">
          <view class="notice-title">
            {{ item.templateParams.title }}
          </view>
          <view class="notice-time" v-if="item.templateParams.startTime">
            {{
              `${$util.formatDate(
                item.templateParams.startTime,
                'YYYY年M月D日'
              )} - 
              ${$util.formatDate(
                item.templateParams.endTime,
                'YYYY年M月D日'
              )}`
            }}
          </view>
          <view class="notice-time" v-else>
            {{
              `到期时间 
						  ${$util.formatDate(item.templateParams.endTime, 'YYYY年M月D日')}`
            }}
          </view>
        </view>
        <view class="notice-arrow">
          <text class="iconfont icon-right"></text>
        </view>
      </view>
      <cs-emty v-if="list.length == 0" :marginTop="24"></cs-emty>
    </scroll-view>
  </view>
</template>

<script>
import { getDictBatchByType } from '@/api/system/dict.js'
import { NoticApi } from '@/api/common/notic.js'
export default {
  data() {
    return {
      tabs: [],
      queryParams: {
        templateId: 0,
        pageSize: 6,
        pageNo: 1
      },
      list: [],
      dictMap: {},
      isRefreshing: false,
      hasMore: true // 添加是否有更多数据的标志
    }
  },

  onLoad() {
    this.getDict()
    // this.getTabber()
  },
  onShow() {
    this.getTabber()
  },
  methods: {
    async getDict() {
      const dict = await getDictBatchByType({
        type: ['notfy_message_type'].join(',')
      })
      this.dictMap = {
        ...dict.data
      }
    },
    async getTabber() {
      const res = await NoticApi.getTabData()
      this.tabs = res.data
      this.queryParams.templateId = res.data[0].label
      this.getList()
    },
    switchTab(index) {
      if (this.queryParams.templateId === index) return
      this.queryParams.templateId = index
      this.queryParams.pageNo = 1
      this.list = []
      this.getList()
    },
    async getList() {
      const res = await NoticApi.getListData(this.queryParams)
      this.list = res.data.list
      if (this.list.length == res.data.total) {
        this.hasMore = false
      }
    },
    async loadMore() {
      if (!this.hasMore) return // 没有更多数据时不再加载
      this.queryParams.pageNo++
      await this.getList()
    },
    async onRefresh() {
      try {
        this.isRefreshing = true
        this.queryParams.pageNo = 1
        await this.getList()
      } finally {
        this.isRefreshing = false
      }
    },
    goDetail(item) {
      // 跳转到详情页
      uni.navigateTo({
        url: item.templateParams.url,
        success() {
          NoticApi.readNotic(item.id)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-container {
  display: flex;
  flex-flow: row now;
  max-width: 100%;
  overflow-x: scroll;
  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;
    padding: 16rpx 0;
    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 {
  box-sizing: border-box;
  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>