292 lines
7.5 KiB
Vue
292 lines
7.5 KiB
Vue
<template>
|
||
<view class="message-page">
|
||
<!-- 消息列表 -->
|
||
<scroll-view
|
||
v-if="messageList.length > 0"
|
||
:scroll-y="true"
|
||
class="message-list"
|
||
:refresher-enabled="true"
|
||
refresher-background="#f5f5f5"
|
||
:refresher-triggered="refreshing"
|
||
:scroll-into-view="scrollId"
|
||
:scroll-with-animation="false"
|
||
@refresherrefresh="onRefresh"
|
||
>
|
||
<view
|
||
v-for="(item, index) in messageList"
|
||
:key="index"
|
||
:id="`item${item.id}`"
|
||
@click="gotoDevice(item)"
|
||
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 "+index+" " +item.id }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="empty__item tn-margin-top" v-else>
|
||
<tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png"
|
||
text="近7天暂无消息，可下拉查看历史消息" :imgWidth="200"
|
||
:imgHeight="200"></tn-empty>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Uuid from "@/tuniao-ui/libs/function/uuid";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
refreshing: false, // 下拉刷新状态
|
||
messageList: [
|
||
{
|
||
id: 'msg1',
|
||
time: '2026-03-26 22:19:00',
|
||
type: 'champion',
|
||
avatar: 'https://picsum.photos/id/237/60/60',
|
||
sender: '王冕',
|
||
showTips: '03月26日排行榜冠军，恭喜你！'
|
||
},
|
||
{
|
||
id: 'msg2',
|
||
time: '2026-03-25 22:19:00',
|
||
showTips: '03月25日排行榜冠军，恭喜你！'
|
||
},
|
||
{
|
||
id: 'msg3',
|
||
time: '2026-03-16 22:19:00',
|
||
showTips: '03月25日排行榜冠军，恭喜你！'
|
||
},
|
||
{
|
||
id: 'msg4',
|
||
time: '2026-03-26 05:36:00',
|
||
type: 'like',
|
||
avatar: 'https://picsum.photos/id/1005/60/60',
|
||
sender: 'JFather'
|
||
},
|
||
{
|
||
id: 'msg5',
|
||
time: '2026-03-24 22:19:00',
|
||
type: 'step',
|
||
rank: 160,
|
||
steps: 1838
|
||
},
|
||
{
|
||
id: 'msg6',
|
||
time: '2026-03-27 05:36:00',
|
||
type: 'champion',
|
||
avatar: 'https://picsum.photos/id/1012/60/60',
|
||
sender: 'T薛策恒',
|
||
date: '03月24'
|
||
},
|
||
{
|
||
id: 'msg7',
|
||
time: '2026-03-28 05:36:00',
|
||
type: 'like',
|
||
avatar: 'https://picsum.photos/id/1013/60/60',
|
||
sender: 'User7'
|
||
},
|
||
{
|
||
id: 'msg8',
|
||
time: '2026-03-29 05:36:00',
|
||
type: 'champion',
|
||
avatar: 'https://picsum.photos/id/1014/60/60',
|
||
sender: 'User8'
|
||
},
|
||
{
|
||
id: 'msg9',
|
||
time: '2026-03-30 05:36:00',
|
||
type: 'step',
|
||
rank: 200,
|
||
steps: 2000
|
||
},
|
||
{
|
||
id: 'msg10',
|
||
time: '2026-03-31 05:36:00',
|
||
type: 'like',
|
||
avatar: 'https://picsum.photos/id/1015/60/60',
|
||
sender: 'User10'
|
||
},
|
||
{
|
||
id: 'msg11',
|
||
time: '2026-04-01 05:36:00',
|
||
type: 'champion',
|
||
avatar: 'https://picsum.photos/id/1016/60/60',
|
||
sender: 'User11'
|
||
}
|
||
],
|
||
isHaveOldData: true,
|
||
scrollId: null
|
||
}
|
||
},
|
||
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));
|
||
},
|
||
// 下拉刷新（新增，最小改动）
|
||
onRefresh() {
|
||
this.refreshing = true;
|
||
if (!this.isHaveOldData) {
|
||
setTimeout(() => {
|
||
this.$modal.msg("没有更早数据！");
|
||
// 结束刷新状态
|
||
this.refreshing = false;
|
||
}, 800);
|
||
return;
|
||
}
|
||
// 模拟接口请求延迟
|
||
setTimeout(() => {
|
||
// 生成10条新数据
|
||
const newData = Array.from({ length: 10 }, (_, i) => ({
|
||
id: Uuid(16),
|
||
time: '2026-03-27 12:00:00',
|
||
type: 'champion',
|
||
avatar: 'https://picsum.photos/id/999/60/60',
|
||
sender: '新用户' + i,
|
||
date: '03月27'
|
||
}));
|
||
// 插入到列表最前面
|
||
this.messageList = [...newData, ...this.messageList];
|
||
|
||
// 在数据更新后设置 scrollId
|
||
this.$nextTick(() => {
|
||
this.scrollId = "item"+this.messageList[10].id;
|
||
});
|
||
|
||
// 结束刷新状态
|
||
this.refreshing = false;
|
||
}, 800);
|
||
},
|
||
gotoDevice(item) {
|
||
this.$modal.msg("暂未开放！");
|
||
return;
|
||
var agri = JSON.stringify(
|
||
{
|
||
imei:item.imei,
|
||
agriName:item.agriName,
|
||
agriId:item.id,
|
||
workMode: item.workMode
|
||
}
|
||
);
|
||
this.$tab.navigateTo('/pages/home/control/index?agriInfo='+encodeURIComponent(agri))
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
@import '@/tuniao-ui/index.scss';
|
||
@import '@/colorui/main.css';
|
||
@import '@/colorui/icon.css';
|
||
</style>
|
||
<style scoped>
|
||
/* 页面容器 */
|
||
.message-page {
|
||
height: 100vh;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
/* 消息列表 */
|
||
.message-list {
|
||
padding: 20rpx;
|
||
height: 100vh; /* 修复scroll-view高度问题 */
|
||
}
|
||
.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> |