更新记录

1.0.0（2026-10-26） 下载此版本

本项目仅开源 uni-app 家长端用户端（基于 Vue3），可在电脑浏览器、手机浏览器、微信小程序、手机 App 等多端运行。用 HBuilderX 导入本目录即可本地体验，供学习研究。

平台兼容性

uni-app(3.8.7)

其他

AI 托管 · 家长端（用户端）

开源说明

本项目仅开源 uni-app 家长端用户端（基于 Vue3），可在电脑浏览器、手机浏览器、微信小程序、手机 App 等多端运行。用 HBuilderX 导入本目录即可本地体验，供学习研究。

这是什么软件

这是一个课后托管 / 托育机构的家长端应用，帮助家长随时了解孩子在托管中心的情况：

• 您是家长 → 绑定孩子、查看考勤与作业、在线缴费、与老师沟通、申请请假、查看错题本、办理接送等
• 托管机构 / 老师 → 在独立的「教师端」管理学生；本应用面向家长使用

底部有五个主入口：首页、作业、聊天、孩子、我的。

能在哪些地方使用

对接了哪些第三方

下面列出的是家长能直接感受到的外部服务，用大白话说明「干什么用」：

平台服务端（自建，非第三方 SaaS）

登录与账号安全

支付与资金

文件存储

地图与导航

客服与沟通

分享与设备能力

说明：本家长端未接入 AI 智能助手、实时音视频通话（仅文字/图片/语音/文件消息，非视频电话）、物流快递等能力；以当前代码为准。

家长能做什么（功能详解）

首页 · 一眼掌握今日动态

• 日期与问候：显示当天日期、星期，以及「早上好 / 下午好」等问候语和家长称呼。
• 绑定引导：若尚未绑定孩子，首页会提示「请先绑定孩子」，点击可进入绑定流程。
• 开通引导：若孩子已绑定但尚未选择托管套餐并完成缴费，会提示「请为孩子选择套餐」，点击可进入缴费中心。
• 轮播广告：首页顶部轮播图由后台配置，可点击跳转（如活动页、公告等）。
• 今日考勤卡片：
  • 显示孩子当前状态，例如：待签到、在校、已离校、请假中、缺勤、超时待接、未缴费、未入托等。
  • 已缴费且已入托的孩子，点击可进入「考勤查询」查看明细。
  • 未缴费或未入托时，卡片会提示并引导去缴费或查看孩子信息。
• 快捷入口：
  • 请假申请：填写请假类型、时间、理由并提交。
  • 缴费中心：查看待缴账单、续费套餐、历史支付记录。
• 错题本入口：快速进入孩子的错题列表。
• 今日午餐：展示机构配置的当日餐食信息（菜品名称、说明等）。
• 最新通知：展示最近一条系统消息或公告；点击可进入消息中心或公告详情；未读消息有角标提示。

作业 · 作业中心

• 切换孩子：若绑定了多个孩子，可切换当前查看对象，也可选择「全部孩子」一并浏览。
• 日期筛选：可按开始日期、结束日期筛选作业列表，也可清除筛选查看全部。
• 作业列表：每条作业显示科目、标题、截止日期、提交状态（待提交 / 已提交 / 已批改 / 已补交等）。
• 下拉刷新、上拉加载更多。
• 作业详情（点击进入）：
  • 查看作业要求、老师附件图片、老师录制的示范音频。
  • 未提交时：可填写说明，上传图片、视频或音频作为作业提交（最多 6 个附件）。
  • 已提交后：查看已提交内容、老师星级评分、文字点评。
  • 联系老师：一键跳转到与该孩子老师的聊天会话。

聊天 · 家校沟通

• 会话列表：展示与各位托管老师的聊天会话，显示最后一条消息预览、时间和未读角标。
• 下拉刷新、上拉加载更多。
• 私聊详情页：
  • 发送文字消息，支持表情面板。
  • 发送图片（从相册选或拍照）。
  • 发送语音（按住录音）。
  • 发送文件（如 PDF、文档等，视平台支持而定）。
  • 快捷常用语：如「辛苦老师了」「我马上跟进」「收到，谢谢老师」一键填入。
  • 消息通过 WebSocket 实时推送，同时有轮询兜底，尽量保证及时收到。
  • 点击可预览图片、播放语音、打开文件。

孩子 · 我的孩子

• 孩子列表：展示所有已绑定孩子，包括姓名、年级班级、今日出勤状态、待办作业份数。
• 绑定孩子（新用户或添加第二个孩子）：
  • 填写孩子姓名、学籍号（选填）、与孩子的关系。
  • 选择所在学校 → 年级 → 班级（数据来自机构后台配置）。
  • 上传孩子头像（存到阿里云 OSS）。
  • 提交后等待机构审核或自动关联（以后台规则为准）。
• 孩子档案（点击某个孩子进入）：
  • 基本信息：头像（可更换）、姓名、当前状态（在校 / 请假中等）、年级班级。
  • 今日出勤与待办作业：快捷数据概览。
  • 就读学校：学校名称、*（可一键拨打）、地址（可点击打开地图导航**）。
  • 成长档案：身高、体重、学籍号（长按可复制）。
  • 老师评语：托管老师对孩子的阶段性评价。
  • 托管合约：当前套餐名称、剩余天数、到期日期、应付价格、服务周期等；可查看套餐详情。
  • 底部操作：
  • 错题本：进入该孩子的错题列表。
  • 接送记录：查看历史接送申请与核验结果。
  • 发起接送：向机构发起「今天由我来接孩子」的申请，并生成接送二维码供老师扫码或家长确认接走。
  • 确认接走：若已有待完成的接送申请，家长可在现场点击确认孩子已被接走。

考勤查询

• 切换孩子：多个孩子时可切换查看。
• 月历视图：显示当月哪些天有出勤记录（圆点标记）；可切换月份。
• 今日明细：选中某一天后，展示时间轴，例如：
  • 签到入校时间与状态
  • 签退离校时间与操作老师
  • 备注信息
  • 若仍在校未签退，会显示「待签退」或「超时待接」等提示
• 本月累计出勤天数统计。

请假

• 请假申请：
  • 选择孩子。
  • 选择类型：事假、病假、其他。
  • 设置开始、结束时间。
  • 填写请假理由（必填）。
  • 上传证明材料图片（可选，最多 3 张，如病假条）。
  • 提交后等待老师/机构审批。
• 请假记录：查看历史请假列表，状态包括：待审批、已通过、已拒绝、已撤销。
• 请假详情：查看完整信息、审批意见、审批时间；符合条件的可撤销申请。

缴费中心

• 费用概览：待缴费用总额、本年累计已支付金额及笔数。
• 未缴账单：逐条展示账单名称、学员、账单日期、应付金额（含限时优惠价、已优惠金额展示）；点击「立即支付」进入账单详情。
• 开通套餐 / 自助续费：
  • 按孩子切换，查看可购买的托管套餐（名称、价格、有效天数、说明）。
  • 首次入托选「开通套餐」；已入托可选「自助续费」提前续费。
  • 点选后生成待缴账单，不会自动扣款，需家长确认支付。
• 历史记录：已支付账单列表，可点击查看详情（支付时间、支付渠道等）。

账单详情与支付

• 展示账单项目、服务对象、服务机构、账单编号、费用类型、服务周期、费用明细拆分。
• 未支付时可选择支付方式并确认支付：
  • 零钱（若后台开启）
  • 微信支付
  • 支付宝
• 支付前须勾选《支付协议》。
• 支付完成后会自动轮询确认结果；若从支付宝 H5 跳回，再次打开页面会继续查单。

错题本

• 切换孩子、搜索错题标题。
• 状态筛选：全部、待订正、已提交、已通过、再订正。
• 错题详情：
  • 查看科目、题型、知识点、错误原因、原题图片、正确答案与解析。
  • 待订正 / 需再订正时：拍照上传订正照片（最多 3 张）并提交。
  • 打印练习：生成可打印的 HTML 练习页，浏览器可下载或打开新窗口打印。
• 老师复核后会更新状态（已通过 / 再订正等），并可能留下评语。

接送离校

• 发起接送：在孩子档案页发起，填写接送人信息，系统生成接送申请。
• 接送二维码：向老师出示二维码，老师扫码核验后完成离校；二维码可刷新，请勿转发他人。
• 确认接走：家长在现场可自行确认孩子已被接走（与教师核验二选一或互补，以后台规则为准）。
• 接送记录：按日期筛选，查看每条记录的状态（待接送、已核验、已拒绝、已过期）、接送人、申请时间、完成时间、核验方等。

消息中心

• 展示平台推送的系统消息（如缴费提醒、请假审批、作业通知、考勤异常等）。
• 消息按孩子名称、标题、摘要、时间展示；未读消息高亮。
• 点击可跳转到对应业务页面（若消息配置了跳转链接）。
• 支持「全部已读」。
• 机构公告：可单独查看公告标题与正文详情。

我的 · 个人中心

未登录时

• 展示登录引导卡片，说明登录后可查看考勤、作业、账单、消息等。

已登录时

• 头像与昵称：显示家长头像、姓名、手机号；点击头像可进入个人信息编辑。
• 联系机构：一键拨打机构客服电话（号码来自后台配置）。

菜单功能

退出登录

• 退出后停留在当前页，本地登录信息清除，需重新登录才能操作敏感功能。

登录、注册与找回密码

付钱怎么付（汇总）

不同场景，可选支付方式略有不同：

按打开方式：

支付前会弹出确认；支付成功后账单状态会自动更新（第三方支付会短暂轮询确认结果）。

体验地址

线上 API 环境：https://tgjz.xianmaxiong.com

技术栈

本地运行

这份代码已对接线上体验环境，默认不用改配置，打开后直接运行即可（API 与 WebSocket 地址见 common/config.js）。

开始前请准备

1. 一台 Windows 或 Mac 电脑。
2. 下载安装 HBuilderX（官方开发工具）：
   打开 https://www.dcloud.io/hbuilderx.html，下载「正式版」并安装。
3. 建议安装 Chrome 浏览器，用于运行 H5 页面。

第一步：打开项目文件夹

1. 找到本仓库里的 hosting 文件夹（里面有 pages.json、App.vue、common 等）。
2. 记住文件夹路径，后面要在 HBuilderX 里选中这一层目录。

第二步：用 HBuilderX 导入

1. 打开 HBuilderX → 文件 → 打开目录。
2. 选中 hosting 文件夹，确定。
3. 左侧出现文件树即表示成功。

第三步：运行到浏览器

1. 菜单 运行 → 运行到浏览器 → Chrome。
2. 首次可能提示安装插件，按提示安装后重试。
3. 浏览器弹出页面，能看到首页和底部五个 Tab（首页、作业、聊天、孩子、我的），即运行成功。
4. 保持 HBuilderX 不要关闭，否则调试可能中断。

运行到微信小程序（可选）

1. 菜单 运行 → 运行到小程序模拟器 → 微信开发者工具。
2. 首次需安装微信开发者工具并登录。
3. 在微信开发者工具 详情 → 本地设置 中勾选「不校验合法域名……」，否则本地联调可能请求失败。
4. 小程序内可体验微信一键登录、微信支付流程（需后台商户号配置完整才真正扣款）。

常见情况

第一次验收建议

1. Chrome 打开后能看到首页和底部五个 Tab。
2. 点「我的」能看到登录入口。
3. 点「孩子」能看到绑定孩子入口。
4. 点「聊天」未登录会提示登录。

做到以上几点，说明家长端已在本地跑通。

许可证

见本目录下 LICENSE 文件。