agri-app/pages/news/subpages/deviceCenter/index.vue

<template>
  <view class="message-page">
    <!-- 消息列表 -->
    <scroll-view scroll-y class="message-list">
      <view
          v-for="(item, index) in messageList"
          :key="index"
          class="message-item"
      >
        <!-- 时间标签 -->
        <view class="time-label">{{ formatTime(item.time) }}</view>

        <!-- 点赞消息卡片 -->
        <view class="like-card" v-if="item.type === 'like'">
          <view class="sender-info">
            <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
            <text class="sender-text">{{ item.sender }} 刚刚赞了你</text>
          </view>
          <text class="arrow">></text>
        </view>

        <!-- 步数数据卡片 -->
        <view class="step-card" v-else-if="item.type === 'step'">
          <view class="step-item">
            <text class="step-num">{{ item.rank }}</text>
            <text class="step-label">名次</text>
          </view>
          <view class="step-item">
            <text class="step-num">{{ item.steps }}</text>
            <text class="step-label">步数</text>
          </view>
        </view>

        <!-- 冠军通知卡片 -->
        <view class="champion-card" v-else-if="item.type === 'champion'">
          <view class="sender-info">
            <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
            <text class="sender-text">{{ item.sender }} 夺得{{ item.date }}日排行榜冠军</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messageList: [
        {
          time: '2026-03-26 22:19:00',
          type: 'champion',
          avatar: 'https://picsum.photos/id/237/60/60',
          sender: '王冕',
          date: '03月26'
        },
        {
          time: '2026-03-25 22:19:00',
          type: 'step',
          rank: 71,
          steps: 6084
        },
        {
          time: '2026-03-16 22:19:00',
          type: 'champion',
          avatar: 'https://picsum.photos/id/237/60/60',
          sender: '王冕',
          date: '03月25'
        },
        {
          time: '2026-03-26 05:36:00',
          type: 'like',
          avatar: 'https://picsum.photos/id/1005/60/60',
          sender: 'JFather'
        },
        {
          time: '2026-03-24 22:19:00',
          type: 'step',
          rank: 160,
          steps: 1838
        },
        {
          time: '2026-03-27 05:36:00',
          type: 'champion',
          avatar: 'https://picsum.photos/id/1012/60/60',
          sender: 'T薛策恒',
          date: '03月24'
        }
      ]
    }
  },
  methods: {
    // 核心时间格式化方法
    formatTime(timeStr) {
      const now = new Date();
      const target = new Date(timeStr);
      const nowTime = now.getTime();
      const targetTime = target.getTime();
      const diffTime = nowTime - targetTime;
      const oneDay = 24 * 60 * 60 * 1000;
      const sevenDays = 7 * oneDay;

      // 格式化时分秒
      const hh = String(target.getHours()).padStart(2, '0');
      const mm = String(target.getMinutes()).padStart(2, '0');
      const timeSuffix = `${hh}:${mm}`;

      // 今天
      if (now.toDateString() === target.toDateString()) {
        return `今天 ${timeSuffix}`;
      }
      // 昨天
      const yesterday = new Date(now);
      yesterday.setDate(now.getDate() - 1);
      if (yesterday.toDateString() === target.toDateString()) {
        return `昨天 ${timeSuffix}`;
      }
      // 7天内（含昨天）
      if (diffTime <= sevenDays) {
        const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
        const week = weekMap[target.getDay()];
        return `星期${week} ${timeSuffix}`;
      }
      // 7天以前
      const y = target.getFullYear();
      const m = String(target.getMonth() + 1).padStart(2, '0');
      const d = String(target.getDate()).padStart(2, '0');
      return `${y}-${m}-${d} ${timeSuffix}`;
    }
  }
}
</script>

<style scoped>
/* 页面容器 */
.message-page {
  height: 100vh;
  background-color: #f5f5f5;
}

/* 消息列表 */
.message-list {
  padding: 20rpx;
}
.message-item {
  margin-bottom: 30rpx;
}

/* 时间标签 */
.time-label {
  text-align: center;
  font-size: 26rpx;
  color: #999;
  margin-bottom: 20rpx;
}

/* 通用卡片样式 */
.like-card, .step-card, .champion-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 发送者信息（点赞/冠军） */
.sender-info {
  display: flex;
  align-items: center;
}
.avatar {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}
.sender-text {
  font-size: 30rpx;
  color: #333;
}
.arrow {
  font-size: 32rpx;
  color: #ccc;
}

/* 步数卡片 */
.step-card {
  display: flex;
  justify-content: space-between;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-num {
  font-size: 64rpx;
  color: #09bb07;
  font-weight: 500;
}
.step-label {
  font-size: 28rpx;
  color: #666;
  margin-top: 8rpx;
}
</style>