消息日志
parent
af05f4f5e4
commit
a06466d834
|
|
@ -10,27 +10,28 @@
|
|||
:refresher-triggered="refreshing"
|
||||
:scroll-into-view="scrollId"
|
||||
:scroll-with-animation="false"
|
||||
@refresherrefresh="onRefresh"
|
||||
@refresherrefresh="getList"
|
||||
@scrolltolower="onLoadMore"
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in messageList"
|
||||
:key="index"
|
||||
:id="`item${item.id}`"
|
||||
@click="gotoDevice(item)"
|
||||
class="message-item"
|
||||
>
|
||||
<!-- 时间标签：如果是第一条或者与上一条时间不同才显示 -->
|
||||
<view class="time-label" v-if="index === 0 || !isSameMinute(item.createTime, messageList[index - 1].createTime)">
|
||||
{{ formatTime(item.createTime) }}
|
||||
<view class="time-label">
|
||||
{{ item.createTime }}
|
||||
</view>
|
||||
|
||||
<view class="champion-card">
|
||||
<view class="sender-info">
|
||||
<view class="sender-info" @click="gotoDevice(item)">
|
||||
<image class="avatar" :src="avatar" mode="aspectFill"></image>
|
||||
<text class="sender-text">{{ item.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more iconType="auto" :status="status" :content-text="contentText" />
|
||||
</scroll-view>
|
||||
<view class="empty__item tn-margin-top empty__view" v-else>
|
||||
<tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png"
|
||||
|
|
@ -42,8 +43,7 @@
|
|||
|
||||
<script>
|
||||
import Uuid from "@/tuniao-ui/libs/function/uuid";
|
||||
import {getMessages, listMessage} from "@/api/warn/message";
|
||||
import {formatDate} from "@/uni_modules/uni-dateformat/components/uni-dateformat/date-format";
|
||||
import {listMessage} from "@/api/warn/message";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -52,12 +52,22 @@ export default {
|
|||
avatar: 'https://img.xiaoces.com/photos/logo200.png',
|
||||
messageList: [],
|
||||
isHaveOldData: true,
|
||||
scrollId: null
|
||||
scrollId: null,
|
||||
msgList:[],
|
||||
pageNum: 0,
|
||||
status: 'more',
|
||||
contentText: {
|
||||
contentdown: '查看更多',
|
||||
contentrefresh: '加载中.....',
|
||||
contentnomore: '没有更多数据了'
|
||||
},
|
||||
sortNewId: null,
|
||||
sortOldId: null,
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
onLoad() {
|
||||
// 只允许查询七天以内消息默认展示今天
|
||||
this.getSortDate();
|
||||
// this.getSortDate();
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -106,11 +116,10 @@ export default {
|
|||
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));
|
||||
getSortDate(messageList) {
|
||||
return messageList.sort((a, b) => new Date(a.createTime) - new Date(b.createTime));
|
||||
},
|
||||
// 下拉刷新（新增，最小改动）
|
||||
onRefresh() {
|
||||
getList() {
|
||||
this.refreshing = true;
|
||||
if (!this.isHaveOldData) {
|
||||
setTimeout(() => {
|
||||
|
|
@ -120,42 +129,67 @@ export default {
|
|||
}, 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];
|
||||
|
||||
var query = {
|
||||
msgType: "status",
|
||||
pageSize: 10,
|
||||
sortOldId: this.sortOldId
|
||||
}
|
||||
listMessage(query).then(response => {
|
||||
if (response.code === 200) {
|
||||
if (response.rows.length > 0) {
|
||||
var newData = this.getSortDate(response.rows);
|
||||
this.sortOldId = response.rows[0].id
|
||||
this.messageList = [...newData, ...this.msgList];
|
||||
this.msgList = [...newData, ...this.msgList]
|
||||
console.info("时间最早的数据id",this.sortOldId)
|
||||
return;
|
||||
}
|
||||
this.isHaveOldData = false;
|
||||
}
|
||||
}).finally(()=>{
|
||||
// 在数据更新后设置 scrollId
|
||||
this.$nextTick(() => {
|
||||
// 更新数据的长度
|
||||
this.scrollId = "item"+this.messageList[10].id;
|
||||
this.scrollId = "item"+this.messageList[9].id;
|
||||
});
|
||||
|
||||
// 结束刷新状态
|
||||
this.refreshing = false;
|
||||
}, 800);
|
||||
},
|
||||
getList() {
|
||||
var query = {
|
||||
msgType: "status",
|
||||
pageNum: 1,
|
||||
pageSize: 5
|
||||
}
|
||||
listMessage(query).then(response => {
|
||||
if (response.code === 200 && response.rows.length > 0) {
|
||||
this.messageList = response.rows
|
||||
}
|
||||
})
|
||||
},
|
||||
onLoadMore() {
|
||||
if (!this.sortNewId) {
|
||||
this.sortNewId = this.msgList[this.msgList.length - 1].id;
|
||||
}
|
||||
this.status = 'loading'
|
||||
var query = {
|
||||
msgType: "status",
|
||||
sortNewId: this.sortNewId
|
||||
}
|
||||
listMessage(query).then(response => {
|
||||
if (response.code === 200) {
|
||||
if (response.rows.length > 0) {
|
||||
var newData = this.getSortDate(response.rows);
|
||||
this.messageList = [...this.msgList, ...newData]
|
||||
this.msgList = [...this.msgList, ...newData]
|
||||
this.sortNewId = response.rows[response.rows.length-1].id
|
||||
return;
|
||||
}
|
||||
this.$modal.msg("已是最新数据了！");
|
||||
// 结束刷新状态
|
||||
this.status = 'nomore'
|
||||
}
|
||||
}).finally(()=>{
|
||||
// 在数据更新后设置 scrollId
|
||||
this.$nextTick(() => {
|
||||
// 更新数据的长度
|
||||
this.scrollId = "item"+this.messageList[this.messageList.length-1].id;
|
||||
});
|
||||
// 结束刷新状态
|
||||
this.status = 'more'
|
||||
})
|
||||
},
|
||||
|
||||
gotoDevice(item) {
|
||||
|
||||
this.$tab.navigateTo(item.linkUrl)
|
||||
|
|
|
|||
Loading…
Reference in New Issue