微搭低代码MBA 培训管理系统实战 33——满意度评价功能

目录

• 前情回顾与本节目标
• 第一步：数据模型准备
• 第二步：小程序端评价提交
• • [2.1 创建页面](#2.1 创建页面)
  • [2.2 页面头部](#2.2 页面头部)
  • [2.3 评分区域](#2.3 评分区域)
• 第三步：管理端评价查看
• • [3.1 创建页面](#3.1 创建页面)
  • [3.2 页面布局](#3.2 页面布局)
• 最终效果
• 总结

前情回顾与本节目标

在上一节中，我们完成了资料管理功能。本节我们将实现满意度评价功能，包括小程序端提交评价和管理端查看评价。

本节核心目标：

• 小程序端评价提交：学生可以对课程和教师进行评分，提交文字反馈
• 管理端评价查看：管理员可以查看所有评价，了解课程满意度

---

第一步：数据模型准备

评价表（MBA_Surveys）

用于记录学生的评价：

字段名称	字段标识	字段类型	说明
评价ID	_id	文本	主键，系统自动生成
关联课程	rel_schedule_id	多对一	关联 Schedules 表
关联学员	rel_student_id	多对一	关联 StudentProfiles 表
课程评分	course_rating	数字	课程评分（1-5星）
教师评分	teacher_rating	数字	教师评分（1-5星）
文字反馈	feedback	文本	文字评价内容
提交时间	created	日期时间	提交时间

---

第二步：小程序端评价提交

2.1 创建页面

点击创建页面 图标，输入"课程评价"

复制页面的ID

修改首页模块跳转方法，贴入我们的页面ID

/**
 * 
 * 可通过 $page 获取或修改当前页面的 变量 状态 handler lifecycle 等信息
 * 可通过 app 获取或修改全局应用的 变量 状态 等信息
 * 具体可以console.info 在编辑器Console面板查看更多信息
 * 注意：该方法仅在所属的页面有效
 * 如果需要 async-await，请修改成 export default async function() {}
 * 帮助文档 https://cloud.tencent.com/document/product/1301/57912
 **/

/**
 * @param {Object} event - 事件对象
 * @param {string} event.type - 事件名
 * @param {any} event.detail - 事件携带自定义数据
 *
 * @param {Object} data
 * @param {any} data.target - 获取事件传参的数据
 **/
export default function({event, data}) {
const actionType = data.target;
  
  switch(actionType) {
    case 'checkin':
      $w.utils.navigateTo({ pageId: 'u_jin_ri_qie_dao' });
      break;
    case 'schedule':
      $w.utils.navigateTo({ pageId: 'u_wo_de_ke_biao' });
      break;
    case 'card':
      $w.utils.navigateTo({ pageId: 'u_xue_xi_ka' });
      break;
    case 'homework':
      $w.utils.navigateTo({ pageId: 'u_zuo_ye_ti_jiao' });
      break;
    case 'resources':
      $w.utils.navigateTo({ pageId: 'u_zi_liao_guan_li' });
      break;
    case 'survey':
      $w.utils.navigateTo({ pageId: 'u_ke_cheng_ping_jia' });
      break;
  }
}

给模块配置点击事件，传入入参

2.2 页面头部

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

: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;
}

里边添加文本组件，设置文本颜色、字号和加粗的效果

2.3 评分区域

添加表单容器，数据模型选择评价表

设置关联学员的选中值，绑定为当前用户的数据标识

添加评分组件，字段选择课程评分

继续添加评分组件，字段选择教师评分

设置表单容器的提交事件，增加返回上一页事件

---

第三步：管理端评价查看

3.1 创建页面

点击创建页面 图标，输入"评价管理"，布局选择教务布局

切换到布局管理，在教务布局下增加评价管理菜单

3.2 页面布局

切换回页面设计，在教务布局下添加布局组件

修改标题为评价管理

添加数据表格组件，数据模型选择评价表

配置筛选器，选择上课日期和学员姓名作为筛选条件

最终效果

学员在课后进行评价

教务可以查看学员的评价

总结

本节完成了满意度评价功能的实现：

1. 小程序端评价提交：课程评分、教师评分、文字反馈、提交成功页面
2. 管理端评价查看：评价列表、平均分统计