微搭低代码MBA 培训管理系统实战 36——消息通知功能

目录

• 前情回顾与本节目标
• 第一步：数据模型准备
• 第二步：创建页面
• 第三步：页面布局
• • [3.1 页面头部](#3.1 页面头部)
  • [3.2 头部数据绑定](#3.2 头部数据绑定)
• 第四步：消息列表区域
• 第五步：标记已读功能
• 最终效果
• 总结

前情回顾与本节目标

在上一节中，我们完成了小程序端的课程预约功能。本节我们将实现消息通知功能，学员可以查看各类消息通知，包括课程提醒、公告、生日祝福等。

本节核心目标：

• 消息列表展示：显示消息列表，包含不同类型和状态
• 未读统计：显示未读消息数量
• 标记已读：点击消息后标记为已读

---

第一步：数据模型准备

消息通知表（MBA_Messages）

字段名称	字段标识	字段类型	说明
消息ID	_id	文本	主键，系统自动生成
关联学员	rel_student_id	多对一	关联 StudentProfiles 表
消息类型	type	枚举	1-课程提醒、2-补课提醒、3-生日祝福、4-班级公告、5-系统通知
消息标题	title	文本	消息标题
消息内容	content	文本	消息内容
是否已读	is_read	布尔值	是否已读
发送时间	send_time	日期时间	发送时间

---

第二步：创建页面

点击创建页面 图标，输入"消息通知"，选择tab栏导航布局

切换到布局设计，添加菜单

---

第三步：页面布局

3.1 页面头部

添加容器组件，设置宽、高和背景色：

:root {
  width: 100%;
  min-height: 100vh;
  background-color: #F6F7F9;
}

继续添加普通容器，设置背景色、内边距和圆角：

:root {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  padding: 48px 20px 24px 20px;
  border-radius: 0 0 24px 24px;
}

里边添加两个文本组件，设置普通容器的布局为横向排列，两端对齐

设置文本的字体颜色

3.2 头部数据绑定

创建内置数据表查询，数据模型选择消息通知表，方法选择查询多条

配置查询条件，关联学员等于全局变量的数据标识

$w.app.dataset.state.currentUser._id

是否已读设置为false

给文本组件绑定文本内容，绑定未读数量

$w.queryMessage.data.total+'条未读'

---

第四步：消息列表区域

添加数据列表组件 ，数据模型选择MBA_Messages 。

设置普通容器的背景色和外阴影

给图标组件绑定条件展示，未读的时候显示

!$w.item_listView1.is_read

第五步：标记已读功能

创建自定义方法 markAsRead：

export default async function markAsRead({ event, data }) {
  try {
    const message = data.target;
    
    // 如果已经是已读，不处理
    if (message.is_read) {
      return;
    }
    
    $w.utils.showLoading({ title: '处理中...' });
    
    // 更新消息为已读
    await $w.cloud.callDataSource({
      dataSourceName: 'MBA_Messages',
      methodName: 'wedaUpdateV2',
      params: {
        data: {
          is_read: true,
        },
        filter: {
          where: {
            _id: { $eq: message._id }
          }
        }
      }
    });
    
    $w.utils.hideLoading();
    
    // 刷新列表
    $w.listView1.refresh({})
    $w.queryMessage.trigger()
    
  } catch (e) {
    console.error('标记已读失败', e);
    $w.utils.hideLoading();
  }
}

给容器设置点击事件，调用方法，传入所在行数据

最终效果

切换到消息页面，列出所有消息

总结

本节完成了消息通知功能的实现：

1. 消息列表展示：显示消息列表，包含类型图标、标题、内容、时间
2. 未读标识：未读消息左侧蓝色边框，标题加粗，显示红点
3. 标记已读：点击消息后标记为已读，更新状态