消息日志

pages/news/subpages/deviceCenter/index.vue

@@ -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)">
+        <view class="time-label">
-          {{ formatTime(item.createTime) }}
+          {{ 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 {listMessage} from "@/api/warn/message";
-import {formatDate} from "@/uni_modules/uni-dateformat/components/uni-dateformat/date-format";
 
 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() {
+    getSortDate(messageList) {
-      return this.messageList.sort((a, b) => new Date(a.time) - new Date(b.time));
+      return messageList.sort((a, b) => new Date(a.createTime) - new Date(b.createTime));
     },
-    // 下拉刷新（新增，最小改动）
+    getList() {
-    onRefresh() {
       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)