微搭低代码MBA 培训管理系统实战 25——我的页面搭建与出勤率统计实现

目录前情回顾与本节目标第一步数据模型准备第二步搭建我的页面2.1 创建页面2.2 顶部信息卡片2.3 统计卡片2.4 菜单列表第三步出勤率计算逻辑4.1 出勤率计算公式4.2 创建统计数据加载方法4.3 签到状态说明4.4 数据绑定示例总结前情回顾与本节目标在上一节中我们完成了用户登录与账号绑定功能。本节我们将搭建我的页面展示学员的个人信息、学习统计数据并实现出勤率的自动计算。本节核心目标页面布局搭建使用低代码组件搭建个人中心页面数据展示展示学员信息、班级信息、学习统计出勤率计算根据签到记录自动计算出勤率第一步数据模型准备签到记录表MBA_Attendance用于记录学员的每次上课签到情况是计算出勤率的数据源字段名称字段标识字段类型说明签到ID_id文本主键系统自动生成关联学员rel_student_id多对一关联 StudentProfiles 表关联课时卡rel_card_id多对一关联课时卡表关联课表rel_schedule_id多对一关联课程表状态status枚举签到状态消耗课时hours_spent数字本次课程消耗的课时数签到时间sign_in_time日期时间实际签到时间备注remark文本备注信息第二步搭建我的页面2.1 创建页面点击创建页面选择空白页面输入标题切换到页面布局选择tab栏导航布局配置菜单切换回页面设计设计页面布局为tab栏导航布局在布局容器的内容插槽里添加普通容器设置高和背景色:root{height: 88vh;background-color:#f5f5f5;}2.2 顶部信息卡片添加容器组件设置组件的背景色、内边距样式:root{background: linear-gradient(135deg,#3b82f6 0%, #1d4ed8 100%);padding: 48px 20px 32px 20px;}继续添加普通容器里边添加图片组件和普通容器设置外层的普通容器的布局为横向排列垂直居中设置图片的宽和高圆角图片地址绑定为全局变量的头像字段布局模式设置为裁剪填满图片旁边的普通容器添加三个文本组件分别绑定为全局变量的姓名、班级名称、公司名称和职务然后设置文本的字号、加粗、颜色2.3 统计卡片添加容器组件设置样式/* 统计卡片容器 */:root{background-color:#ffffff;border-radius:16px;box-shadow:0 2px 8pxrgba(0,0,0,0.08);margin:-12px 16px 0 16px;padding:20px 0;position:relative;z-index:1;}里边添加三个普通容器设置布局为横向排列水平平分每一个普通容器里都添加两个文本组件2.4 菜单列表添加容器组件设置样式、:root{background-color:#ffffff;border-radius: 16px;box-shadow:02px 8px rgba(0,0,0,0.08);margin: 10px 16px016px;padding: 20px0;position: relative;z-index:1;flex-direction: row;display: flex;justify-content: space-around;}里边添加图标和文本组件来搭建联系客服样式搭建好之后克隆一份改为退出登录第三步出勤率计算逻辑4.1 出勤率计算公式出勤率 (正常签到次数 迟到次数) / 应出勤总次数 × 100%其中应出勤总次数学员已购买的课时数从课时卡获取正常签到status 1迟到status 2缺勤status 3不计入出勤请假status 4不计入出勤4.2 创建统计数据加载方法先创建一个变量用来保存统计出来的出勤情况创建自定义方法loadStatsDataasyncfunctionlogin(){try{$w.utils.showLoading({title:加载中...});// 1. 从云开发原生 auth 对象中获取当前已登录用户的 OpenIDconstopenid$w.auth.currentUser?.openId||123;if(!openid){$w.utils.hideLoading();return$w.utils.showToast({title:获取授权信息失败请重新登录,icon:error});}// 2. 根据 OpenID 查询学员档案表conststudentResawait$w.cloud.callDataSource({dataSourceName:MBA_StudentProfiles,methodName:wedaGetRecordsV2,params:{filter:{where:{openid:{$eq:openid}}},select:{$master:true,rel_class_id:true,// 关联查询班级信息,rel_customer_id:true}}});// 3. 判断是否找到学员档案if(!studentRes.records||studentRes.records.length0){// 未找到显示账号绑定弹窗$w.page.dataset.state.isBindModalVisibletrue;$w.utils.hideLoading();return;}// 4. 已绑定保存用户信息并跳转到我的页面conststudentstudentRes.records[0];// 查询班级花名册获取在读班级constrosterResawait$w.cloud.callDataSource({dataSourceName:MBA_ClassRosters,methodName:wedaGetRecordsV2,params:{filter:{where:{$and:[{rel_student_id:{$eq:student._id}},{status:{$eq:1}}// 1-在读]}},select:{$master:true,rel_class_id:true,// 关联查询班级信息rel_card_id:true}}});// 构造用户信息对象constuserInfo{...student,classInfo:rosterRes.records||[]// 班级花名册列表可能多个班级};// 保存到全局状态$w.app.dataset.state.currentUseruserInfo;$w.utils.hideLoading();}catch(e){console.error(登录检查失败,e);$w.utils.hideLoading();$w.utils.showToast({title:系统加载失败请刷新重试,icon:error});}}exportdefaultasyncfunctionloadStatsData({event,data}){awaitlogin();conststudentId$w.app.dataset.state.currentUser._id console.log(studentId,studentId)try{// 1. 查询学员的课时卡获取总课时和剩余课时constcardResawait$w.cloud.callDataSource({dataSourceName:MBA_LearningCards,methodName:wedaGetRecordsV2,params:{filter:{where:{rel_student_id:{$eq:studentId}}},select:{$master:true}}});console.log(cardRes)lettotalHours0;letremainingHours0;if(cardRes.recordscardRes.records.length0){cardRes.records.forEach(card{totalHourscard.total_hours||0;remainingHourscard.remain_hours||0;});}// 已上课 总课时 - 剩余课时constattendedHourstotalHours-remainingHours;console.log(attendedHours,attendedHours)// 2. 查询签到记录计算出勤率constcheckinResawait$w.cloud.callDataSource({dataSourceName:MBA_Attendance,methodName:wedaGetRecordsV2,params:{filter:{where:{rel_student_id:{$eq:studentId}}},select:{$master:true}}});console.log(checkinRes,checkinRes)letattendedCount0;// 正常签到letlateCount0;// 迟到if(checkinRes.recordscheckinRes.records.length0){checkinRes.records.forEach(record{if(record.status1){attendedCount;}elseif(record.status2){lateCount;}});}// 3. 计算出勤率// 应出勤次数 已上课次数每次上课对应一次签到constshouldAttendattendedHours;constactualAttendattendedCountlateCount;letattendanceRate0;if(shouldAttend0){attendanceRateMath.round((actualAttend/shouldAttend)*100);}// 4. 更新统计数据$w.page.dataset.state.status{attended:attendedHours,// 已上课remaining:remainingHours,// 剩余课时rate:attendanceRate// 出勤率};console.log($w.page.dataset.state.stats)}catch(e){console.error(加载统计数据失败,e);// 设置默认值$w.page.dataset.state.status{attended:0,remaining:0,rate:0};}}页面显示的时候调用我们的方法4.3 签到状态说明在签到记录表中status 字段的枚举值值含义计入出勤1正常签到✓2迟到✓3缺勤✗4请假✗4.4 数据绑定示例在统计卡片中绑定数据总结本节我们完成了我的页面的搭建和出勤率统计功能页面布局使用低代码组件搭建了个人中心页面包含顶部渐变背景的用户信息卡片统计数据展示卡片已上课、剩余课时、出勤率功能菜单列表底部操作按钮数据加载实现了页面加载时自动获取学员基本信息班级花名册信息学习统计数据出勤率计算从课时卡获取总课时和剩余课时从签到记录统计正常签到和迟到次数计算公式出勤率 (正常签到 迟到) / 应出勤次数 × 100%下一节我们将实现课程预约功能让学员可以在小程序中查看课程安排并进行预约。