epmet-apartment-work-mp/pages/tabBar/msg/index.vue

<template>
  <view class="content">
    <!-- 下拉刷新容器 -->
    <scroll-view
      class="scroll-container"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="onLoadMore"
      :style="{ height: 'calc(100vh - 0rpx)' }"
    >
      <!-- 提醒列表 -->
      <view class="reminder-list">
        <!-- 空状态 -->
        <view v-if="reminderList.length === 0 && !loading" class="empty-state">
          <text class="empty-text">暂无消息提醒</text>
        </view>

        <!-- 提醒项目列表 -->
        <view
          v-for="(item, index) in reminderList"
          :key="index"
          class="reminder-item"
          @click="handleItemClick(item)"
        >
          <!-- 左侧图标 -->
          <view class="icon-container">
            <view class="bell-icon">
              <u-icon
                name="/static/img/icon01.png"
                size="20"
                color="#08B3B3"
              ></u-icon>
              <view v-if="item.redDot==1" class="unread-dot"></view>
            </view>
          </view>

          <!-- 右侧内容 -->
          <view class="content-container">
            <view class="header">
              <text class="title">{{ item.title }}</text>
              <text class="time">{{ item.createTime }}</text>
            </view>
            <view class="description">{{ item.content }}</view>
          </view>
        </view>
      </view>
      <!-- 加载更多提示 -->
      <view v-if="loading" class="loading-more">
        <text>加载中...</text>
      </view>

      <!-- 没有更多数据提示 -->
      <view v-if="noMore && reminderList.length > 0" class="no-more">
        <text>没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { messageList, getMessageReminder } from "@/pages/api";

export default {
  data() {
    return {
      tabValue: 1,
      refreshing: false,
      loading: false,
      noMore: false,
      pageNum: 1,
      pageSize: 10,
      reminderList: [],
    };
  },
  onLoad() {
    this.loadReminderList();
  },
  onShow() {
    // 页面显示时刷新数据并更新底部TabBar小红点
    this.refreshData();
    this.updateTabBarDot();
  },
  methods: {
    onChange(name) {
      this.tabValue = name;
      console.log(name);
    },

    // 刷新数据
    async refreshData() {
      this.pageNum = 1;
      this.noMore = false;
      await this.loadReminderList(true);
    },

    // 获取并控制底部TabBar小红点（消息Tab索引为0）
    async updateTabBarDot() {
      try {
        const res = await getMessageReminder();
        if (res && res.code === 200 && Number(res.data) > 0) {
          uni.showTabBarRedDot({ index: 0 });
        } else {
          uni.hideTabBarRedDot({ index: 0 });
        }
      } catch (e) {
        // 异常时不影响页面正常显示
        console.warn("获取消息提醒失败", e);
      }
    },

    // 加载提醒列表（按接口原样顺序，不排序）
    async loadReminderList(isRefresh = false) {
      if (this.loading) return;

      this.loading = true;

      try {
        // 调用API获取提醒列表
        const res = await messageList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        });

        if (res.code === 200) {
          const data = res.data.records || [];
          if (isRefresh) {
            this.reminderList = data;
            this.pageNum = 1;
          } else {
            this.reminderList = [...this.reminderList, ...data];
          }

          // 判断是否还有更多数据
          if (data.length < this.pageSize) {
            this.noMore = true;
          }
        }
      } catch (error) {
        console.error("加载提醒列表失败:", error);
      } finally {
        this.loading = false;
        this.refreshing = false;
        // 刷新底部TabBar红点显示
        this.updateTabBarDot();
      }
    },

    // 下拉刷新
    async onRefresh() {
      this.pageNum = 1;
      this.refreshing = true;
      this.noMore = false;
      await this.loadReminderList(true);
    },

    // 上拉加载更多
    async onLoadMore() {
      if (this.noMore || this.loading) return;

      this.pageNum++;
      await this.loadReminderList();
    },

    // 处理项目点击（此处仅保留行为占位，消息不可跳转时不做操作）
    async handleItemClick(item) {
      console.log("点击提醒项目:", item);
    },

    // 格式化时间（保留备用）
    formatTime(time) {
      const now = new Date();
      const targetTime = new Date(time);
      const diff = now - targetTime;
      const oneDay = 24 * 60 * 60 * 1000;

      if (diff < oneDay && targetTime.toDateString() === now.toDateString()) {
        return "今天";
      } else {
        return targetTime
          .toLocaleString("zh-CN", {
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
          })
          .replace(/\//g, "-");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}

.pageNum-header {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
  position: relative;
}

.pageNum-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.unread-badge {
  position: absolute;
  top: 10rpx;
  right: 30rpx;
  background-color: #f44336;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  min-width: 32rpx;
  text-align: center;
}

.scroll-container {
  width: 100%;
}

.reminder-list {
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 16rpx;
  margin: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.reminder-item {
  display: flex;
  align-items: flex-start;
  padding: 24rpx;
  background-color: transparent;
  border-bottom: 1rpx solid #f0f0f0;
}

.reminder-item:last-child {
  border-bottom: none;
}

.reminder-item-line {
  height: 1rpx;
  background-color: #f0f0f0;
  width: 80%;
}

.reminder-item:active {
  transform: scale(0.98);
  box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
}

.icon-container {
  margin-right: 20rpx;
  flex-shrink: 0;
}

.bell-icon {
  position: relative;
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bell-icon text {
  color: #fff;
  font-size: 24rpx;
}

.unread-dot {
  position: absolute;
  top: -4rpx;
  right: -4rpx;
  width: 16rpx;
  height: 16rpx;
  background-color: #f44336;
  border-radius: 50%;
  border: 2rpx solid #fff;
}

.content-container {
  flex: 1;
  min-width: 0;
}

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

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 16rpx;
}

.time {
  font-size: 24rpx;
  color: #bfbfbf;
  flex-shrink: 0;
}

.description {
  font-size: 28rpx;
  color: #999;
  line-height: 1.5;
}

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

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 30rpx;
  color: #999;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>