修改消息中心ui

pages/news/subpages/deviceCenter/index.vue

@@ -50,7 +50,7 @@ export default {
   data() {
     return {
       refreshing: false, // 下拉刷新状态
-      avatar: 'https://img.xiaoces.com/photos/logo200.png',
+      avatar: 'https://img.xiaoces.com/photos/logo.png',
       messageList: [],
       isHaveOldData: true,
       scrollId: null,

pages/news/subpages/eventCenter/index.vue

@@ -3,36 +3,37 @@
     <!-- 消息列表 -->
     <scroll-view :scroll-y="true"
                  class="message-list"
-                 @scrolltolower="onLoadMore"
+                 :scroll-top="scrollTop"
                  v-if="messageList.length>0">
       <view
           v-for="(item, index) in messageList"
           :key="index"
+          :id="`item${item.id}`"
           @click="gotoDetail(item)"
           class="message-item"
       >
         <!-- 图片区域（带未读角标 + 渐变遮罩） -->
         <view class="img-box">
-          <image class="bg-img" :src="item.image" mode="aspectFill"></image>
+          <image class="bg-img" :src="item.imageUrl" mode="aspectFill"></image>
           <!-- 新增：底部渐变遮罩层 -->
           <view class="gradient-mask"></view>
-          <view class="unread-tag" v-if="item.unread">未读</view>
+          <view class="unread-tag" v-if="item.readStatus===0">未读</view>
           <text class="img-title">{{ item.title }}</text>
         </view>
 
         <!-- 额外描述文本（仅第三条有） -->
-        <view class="desc-text" v-if="item.desc">
+        <view class="desc-text" v-if="item.content">
-          <text>{{ item.desc }}</text>
+          <text>{{ item.content }}</text>
-          <text class="link-btn" @click="handleLink">立即认证✅</text>
+<!--          <text class="link-btn" @click="handleLink">立即认证✅</text>-->
         </view>
 
         <!-- 底部信息栏 -->
         <view class="info-bar">
           <view class="sender-info">
-            <image class="sender-icon" src="https://picsum.photos/32/32" mode="aspectFill"></image>
+            <image class="sender-icon" :src="item.imageUrl || avatarUrl" mode="aspectFill"></image>
-            <text class="sender-name">{{ item.sender }}</text>
+            <text class="sender-name">{{ item.createBy || '小策官方团队'}}</text>
           </view>
-          <text class="send-time">{{ item.time }}</text>
+          <text class="send-time">{{ formatTime(item.createTime) }}</text>
         </view>
       </view>
       <uni-load-more v-if="messageList.length>4" iconType="auto" :status="status" :content-text="contentText" />
@@ -46,61 +47,29 @@
 </template>
 
 <script>
-
+import {formatTime} from "@/utils/agri";
+import {listMessage} from "@/api/warn/message";
 export default {
   data() {
     return {
-      messageList: [
+      avatarUrl: "https://img.xiaoces.com/photos/logo.png",
-        {
+      messageList: [],
-          id: 1,
-          image: "https://picsum.photos/id/1031/800/400", // 城市建筑图
-          title: "下班时间到了，勿浪费公司水电，请滚",
-          sender: "图鸟官方团队",
-          time: "2024-02-28 18:00",
-          unread: true,
-          desc: ""
-        },
-        {
-          id: 2,
-          image: "https://picsum.photos/id/1059/800/400", // 新年装饰图
-          title: "新年新气象，除夕快乐",
-          sender: "图鸟官方团队",
-          time: "2024-02-09 16:28",
-          unread: false,
-          desc: ""
-        },
-        {
-          id:3,
-          image: "https://picsum.photos/id/180/800/400", // 紫色沙漏图
-          title: "企业认证，到期后企业使用将受限",
-          sender: "图鸟官方团队",
-          time: "2024-01-22 16:28",
-          unread: false,
-          desc: "请于2024年06月08日前认证，否则认证标识将变为未认证状态，部分功能也将受限，点击"
-        },
-        {
-          id:4,
-          image: "https://picsum.photos/id/180/800/400", // 紫色沙漏图
-          title: "企业认证，到期后企业使用将受限",
-          sender: "图鸟官方团队",
-          time: "2024-01-22 16:28",
-          unread: false,
-          desc: "请于2024年06月08日前认证，否则认证标识将变为未认证状态，部分功能也将受限，点击"
-        }
-      ],
       isHaveOldData: true,
       contentText: {
         contentdown: '查看更多',
         contentrefresh: '加载中.......',
         contentnomore: '没有更多数据了'
       },
-      status: 'more'
+      status: 'more',
+      scrollTop: null
     }
   },
   onShow() {
     // 只允许查询七天以内消息默认展示今天
+    this.getEventList();
   },
   methods: {
+    formatTime,
     handleLink() {
       // 点击"立即认证"的跳转逻辑
       uni.showToast({ title: "跳转到认证页" })
@@ -112,7 +81,7 @@ export default {
         url: "/pages/news/subpages/eventDetail/index?title=" + item.title
       })
     },
-    onLoadMore() {
+    getEventList() {
       this.status = 'loading'
       if (!this.isHaveOldData) {
         setTimeout(() => {
@@ -122,89 +91,38 @@ export default {
         }, 800);
         return;
       }
-      // 模拟接口请求延迟
+      var query = {
-      setTimeout(() => {
+        msgType: "event"
-        // 生成10条新数据
+      }
-        const newData = [
+      listMessage(query).then(response => {
-          {
+        if (response.code === 200) {
-            id: 3,
+          this.messageList = response.rows.sort((a, b) => new Date(a.createTime) - new Date(b.createTime));
-            image: "https://picsum.photos/id/180/800/400",
+          if (response.rows.length === 0) {
-            title: "企业认证，到期后企业使用将受限",
+            this.isHaveOldData = false;
-            sender: "图鸟官方团队",
-            time: "2024-01-22 16:28",
-            unread: false,
-            desc: "请于2024年06月08日前认证，否则认证标识将变为未认证状态，部分功能也将受限，点击"
-          },
-          {
-            id: 4,
-            image: "https://picsum.photos/id/119/800/400",
-            title: "系统版本更新通知",
-            sender: "平台运营中心",
-            time: "2024-02-15 09:12",
-            unread: true,
-            desc: "新版本已发布，优化了页面加载速度并修复已知问题，建议立即更新体验。"
-          },
-          {
-            id: 5,
-            image: "https://picsum.photos/id/110/800/400",
-            title: "账号安全提醒：异地登录检测",
-            sender: "安全中心",
-            time: "2024-02-18 21:45",
-            unread: true,
-            desc: "检测到您的账号在陌生设备登录，如非本人操作请及时修改密码并锁定账号。"
-          },
-          {
-            id: 6,
-            image: "https://picsum.photos/id/116/800/400",
-            title: "企业套餐续费提醒",
-            sender: "客户服务部",
-            time: "2024-03-01 14:30",
-            unread: false,
-            desc: "您的企业套餐即将到期，为不影响正常使用，请尽快完成续费操作。"
-          },
-          {
-            id: 7,
-            image: "https://picsum.photos/id/111/800/400",
-            title: "新功能上线邀请体验",
-            sender: "产品团队",
-            time: "2024-03-10 11:20",
-            unread: false,
-            desc: "数据可视化与批量导出功能正式上线，诚邀您体验并提出宝贵意见。"
-          },
-          {
-            id: 8,
-            image: "https://picsum.photos/id/114/800/400",
-            title: "违规内容处理通知",
-            sender: "内容审核组",
-            time: "2024-03-20 16:05",
-            unread: true,
-            desc: "您发布的部分内容不符合平台规范，已做隐藏处理，请及时修改后重新提交。"
-          },
-          {
-            id: 9,
-            image: "https://picsum.photos/id/112/800/400",
-            title: "月度使用报告已生成",
-            sender: "数据中心",
-            time: "2024-04-01 10:00",
-            unread: false,
-            desc: "您上月的平台使用数据报告已生成，包含使用时长、功能频次等详细信息。"
           }
-        ]
+        }
-        // 插入到列表最前面
+      }).finally(()=>{
-        this.messageList = [ ...this.messageList,...newData];
+        // 在数据更新后设置 scrollTop
-        this.status = 'more'
+        this.$nextTick(() => {
-      }, 800);
+          // 更新数据的长度
+          this.scrollTop = 9999;
+        });
+        // 结束刷新状态
+        this.status = 'nomore'
+      })
+    }
 
-    },
   }
 }
 </script>
 
 <style scoped>
+page {
+  background-color: #f8f8f8;
+}
 /* 页面容器 */
 .message-page {
   height: 100vh;
-  background-color: #f8f8f8;
 }
 
 /* 消息列表 */