179 lines
4.3 KiB
Vue
179 lines
4.3 KiB
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="champion-card">
|
||
<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: 30rpx 20rpx;
|
||
}
|
||
|
||
/* 时间标签 */
|
||
.time-label {
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
margin: 50rpx 20rpx 20rpx;
|
||
}
|
||
|
||
.message-item:first-child .time-label {
|
||
margin-top: 0;
|
||
}
|
||
/* 通用卡片样式 */
|
||
.like-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;
|
||
}
|
||
|
||
</style> |