182 lines
4.2 KiB
Vue
182 lines
4.2 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'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getSortDate();
|
|
},
|
|
methods: {
|
|
formatTime(timeStr) {
|
|
const now = new Date();
|
|
const target = new Date(timeStr);
|
|
const diff = now - target;
|
|
const day = 86400000;
|
|
const week = 7 * day;
|
|
|
|
// 时间
|
|
const h = String(target.getHours()).padStart(2, '0');
|
|
const m = String(target.getMinutes()).padStart(2, '0');
|
|
const time = `${h}:${m}`;
|
|
|
|
// 今天
|
|
if (now.toDateString() === target.toDateString())
|
|
return `今天 ${time}`;
|
|
|
|
// 昨天
|
|
const yest = new Date(now);
|
|
yest.setDate(now.getDate() - 1);
|
|
if (yest.toDateString() === target.toDateString())
|
|
return `昨天 ${time}`;
|
|
|
|
// 7天内
|
|
if (diff <= week) {
|
|
const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
|
|
return `星期${weekMap[target.getDay()]} ${time}`;
|
|
}
|
|
|
|
// 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} ${time}`;
|
|
},
|
|
getSortDate() {
|
|
return this.messageList.sort((a, b) => new Date(a.time) - new Date(b.time));
|
|
}
|
|
}
|
|
}
|
|
</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> |