全源码提供-温暖专业的心理咨询预约小程序

全源码提供-温暖专业的心理咨询预约小程序

一个面向心理咨询行业的在线预约与管理平台，覆盖用户端 + 咨询师端 + 管理后台，基于 Vue 3 构建。

项目背景

心理健康问题正日益受到社会关注，焦虑、抑郁、情感困扰等心理问题影响着越来越多的人群。然而传统心理咨询行业仍存在诸多痛点：来访者找咨询师靠熟人推荐、预约靠电话反复沟通、咨询记录散落在纸质本子上、心理测评全靠线下完成。心理咨询预约小程序正是为了解决这些问题而设计的一站式平台，目标是打通"心理评估 → 找咨询师 → 在线预约 → 支付 → 咨询 → 心情日记 → 科普阅读"的完整业务闭环。

适用场景包括：心理咨询机构、心理医院/门诊、个人心理咨询工作室、企业 EAP 服务、公益心理援助热线等各类心理服务机构。

技术选型

功能全景

用户端（移动端）

用户端采用底部 Tab 导航，包含 5 个主入口和多个二级页面，覆盖从心理评估到预约咨询、科普阅读的完整链路。

1. 登录页

支持微信一键登录和手机号登录两种方式，底部提供咨询师端和管理员入口，一套代码服务三角色。特别增设"匿名模式"入口，保护用户隐私——心理问题的第一步，是让用户感到安全。

登录页采用绿色渐变背景，搭配 🧠 大脑图标，传递温暖治愈的视觉感受。

2. 首页

首页采用模块化布局，包含 5 个核心区域：

• Banner：品牌标语"倾听你的心声，守护你的心灵"
• 心理健康分类：10 个心理分类以 3×4 网格展示——情感问题、焦虑抑郁、亲子关系、婚姻家庭、人际关系、职场压力、青少年心理、睡眠障碍、自我成长、创伤疗愈
• 热门服务：免费初访、文字咨询、语音咨询、视频咨询、面对面咨询、心理测评等服务卡片
• 推荐咨询师：横向滚动咨询师卡片，展示头像、评分、经验、擅长领域标签
• 心理科普推荐：热门科普文章预览，支持在线阅读

3. 找咨询师

咨询师列表页支持多维度筛选：

• 心理分类：10 个领域标签一键筛选
• 价格区间：免费 / ¥0-200 / ¥200-500 / ¥500+
• 排序方式：综合 / 评分最高 / 经验最多 / 价格最低
• 关键词搜索：按咨询师姓名或擅长领域搜索

咨询师卡片展示头像、姓名、评分、从业年限、擅长领域标签和咨询价格，在线咨询师有绿色标识。

4. 咨询师详情

咨询师详情页是用户决策的核心页面，包含：

• 咨询师信息卡片：头像、姓名、职称、评分、累计咨询数、评价数
• 基本信息：从业年限、资质证书、教育背景、咨询流派（认知行为/精神分析/人本主义等）
• 擅长领域：标签化展示（如 #情感问题 #焦虑抑郁 #亲子关系）
• 个人简介：3-5 段自我介绍
• 资质证书：心理咨询师证、注册心理师等
• 案例展示：精选案例列表（已脱敏），展示案件类型、结果
• 用户评价：真实用户评价列表，支持匿名
• 服务项目：文字咨询 ¥99/次、语音咨询 ¥199/30min、视频咨询 ¥299/60min、面对面 ¥499/60min

底部操作栏提供收藏和立即预约两个按钮。

5. 预约咨询

预约流程采用三步式设计，清晰高效：

第一步：选择服务与咨询师

• 服务列表：免费咨询 / 文字咨询 / 语音咨询 / 视频咨询 / 面对面咨询 / 心理测评
• 咨询师匹配：系统智能推荐 + 手动选择，展示咨询师在线状态

第二步：填写心理评估

• 咨询方式：文字 / 语音 / 视频 / 面对面（标签切换）
• 联系电话
• 心理分类：10 个领域下拉选择
• 心理困扰描述：文本域填写问题详情
• 选择日期 + 时段：9:00-16:00 共 10 个时段可选

第三步：确认与支付

• 预约信息汇总卡片（咨询师、服务、时间、描述）
• 价格明细（咨询费 - 优惠券 = 实付金额）
• 确认支付按钮 → 微信支付

支付完成后展示预约成功页，包含预约信息和咨询须知。

6. 预约管理

预约列表支持按状态筛选（全部 / 待支付 / 待咨询 / 已完成 / 已取消），每张预约卡片展示订单号、咨询师姓名、服务项目、预约时间、价格和状态标签。

预约详情页包含：

• 状态进度条：待支付 → 已支付 → 已确认 → 咨询中 → 已完成
• 预约信息：咨询师、服务、咨询方式、时间
• 心理评估描述：用户提交的问题详情
• 咨询记录入口：查看咨询师填写的咨询摘要和建议
• 操作按钮：取消预约 / 去支付 / 评价

7. 心理评估管理

用户可以在线提交心理评估：

• 提交评估：填写评估标题、详细描述、评估类型（咨询/情感/职场/青少年/其他）、所属心理分类、紧急程度（普通/紧急/加急/非常紧急），支持上传补充材料
• 评估列表：按状态筛选（待审核/已分配/进行中/已完成）
• 评估详情：查看评估进展、负责咨询师信息、进度时间线、附件材料，支持补充材料和预约咨询

8. 咨询记录

咨询完成后，用户可以查看咨询师填写的咨询记录：

• 咨询摘要：咨询师对问题的总结
• 咨询师建议：具体的心理建议和行动方案
• 后续行动：编号列出的待办事项
• 附件材料：咨询师提供的补充文档

9. 心理科普文章

提供心理健康科普阅读：

• 情感心理、焦虑抑郁、亲子关系、职场压力、自我成长等分类
• 文章详情页支持预览内容、查看阅读量
• 付费文章支持购买后下载，免费文章直接阅读
• "我的文章"查看已购买/已下载的科普文章

10. 更多功能页

• 个人中心：展示待咨询/进行中/已完成统计，功能入口包含我的预约、我的评估、咨询记录、科普文章、优惠券、收藏、反馈、设置

• 收藏的咨询师：管理收藏的咨询师列表，支持取消收藏和直接预约

• 优惠券：可使用 / 已使用 / 已过期三栏

• 消息中心：预约确认、咨询提醒、评估分配等通知

• 设置：账号管理、通知设置、隐私与安全（强调端到端加密、AES-256 加密存储）、关于我们

咨询师端（移动端）

咨询师使用的移动工作台，底部 Tab 导航，包含 5 个主入口。

1. 咨询师工作台

展示核心运营数据：

• 个人信息卡片（头像、姓名、在线状态切换）
• 本月统计（预约量、收入、评分）
• 月历视图：标注有预约的日期
• 待处理预约列表：等待确认的预约
• 咨询中列表：正在进行中的咨询，含进度条

2. 预约管理

咨询师的预约列表，支持按状态筛选（全部/待确认/待咨询/已完成），每张卡片展示委托人、咨询方式、预约时间、所属心理分类和价格。支持"接受预约"和"完成咨询"操作。

预约详情页可查看心理评估描述和委托人信息，支持填写咨询记录。

3. 评估管理

咨询师的评估列表，按状态筛选（全部/待处理/进行中/已完成），评估卡片展示标题、委托人、所属分类、紧急程度标签。支持"接受评估"和"预约咨询"操作。

4. 排班管理

周历视图展示本周排班情况，每个日期显示可用时段和已预约时段。支持设置工作日和工作时间，灵活调整可预约时段。

5. 收入统计

收入概览展示本月收入、累计收入、可提现金额，下方按时间倒序列出收入明细（咨询收入 - 视频咨询/语音咨询/面谈咨询），支持按月切换查看。

管理后台（PC 端）

管理后台采用左侧边栏导航，包含 9 个功能模块。

1. 数据看板

展示核心运营指标：今日预约量、本月营业额、累计咨询量、待处理预约。下方提供预约趋势图、分类分布饼图和最近预约列表，右侧展示咨询师排行榜。

2. 咨询师管理

咨询师列表支持搜索、状态筛选，展示姓名、职称、擅长领域标签、从业年限、评分、咨询价格和状态。支持新增咨询师、编辑信息、审核资质证书等操作。

3. 服务管理

心理咨询项目管理，包含免费初访/文字咨询/语音咨询/视频咨询/面对面/心理测评/团体辅导/紧急援助共 8 类服务。支持新增服务、编辑价格/时长、上架/下架等操作。

4. 预约管理

全机构预约列表，支持按 6 种状态筛选（待支付/已支付/已确认/咨询中/已完成/已取消），可查看预约详情和处理退款申请。

5. 评估管理

全机构评估列表，支持按状态筛选，未分配评估可下拉选择咨询师进行分配。评估卡片展示标题、委托人、所属分类、紧急程度标签。

6. 财务报表

按日/月/年维度展示咨询收入、文章收入、退款等财务数据。包含收入趋势柱状图、服务类型占比和服务咨询师排名，支持自定义日期范围和 Excel 导出。

7. 评价管理

用户评价列表，支持按评分筛选（全部/5星/4星/3星及以下），可查看评价详情，支持隐藏违规评价。

8. 科普文章管理

心理健康科普文章 CRUD，支持按分类筛选（情感心理/焦虑抑郁/亲子关系/职场压力/自我成长），可新增文章、编辑内容、设置价格、查看阅读量。

9. 机构管理

心理咨询机构/中心信息设置，包括名称、Logo、联系电话、营业时间、服务须知和隐私政策。

项目结构

33-frontend-counseling/src/
├── main.js                            # Vue 3 入口（Pinia + Router）
├── App.vue                            # 根组件（手机端 phone-frame / 管理端 admin-frame）
├── router/index.js                    # 路由配置（三端共 50+ 条路由）
├── stores/
│   ├── app.js                         # 业务数据（分类/咨询师/评估/预约/文章等）
│   ├── user.js                        # 用户状态
│   └── form.js                        # 表单状态
├── api/
│   ├── request.js                     # Axios 封装（拦截器、token 刷新）
│   ├── auth.js                        # 认证 API
│   ├── form.js                        # 表单 API
│   ├── submission.js                  # 提交 API
│   └── template.js                    # 模板 API
├── assets/styles.css                  # 全局 CSS 变量与通用样式（绿色主题）
├── components/                        # 通用组件（11个）
├── pages/                             # 用户端页面（25个）
│   ├── LoginPage.vue                  # 登录页（含匿名模式）
│   ├── MainLayout.vue                 # 用户端 Tab 布局
│   ├── HomePage.vue                   # 首页（分类/服务/咨询师/文章）
│   ├── CounselorListPage.vue          # 咨询师列表（多维度筛选）
│   ├── CounselorDetailPage.vue        # 咨询师详情（简介/案例/评价/服务）
│   ├── ServiceListPage.vue            # 服务项目列表
│   ├── AppointmentConfirmPage.vue     # 预约确认（3步流程）
│   ├── PayResultPage.vue              # 支付结果
│   ├── AppointmentSuccessPage.vue     # 预约成功
│   ├── AppointmentsPage.vue           # 我的预约
│   ├── AppointmentDetailPage.vue      # 预约详情
│   ├── AssessmentListPage.vue         # 评估列表
│   ├── AssessmentAddPage.vue          # 提交评估
│   ├── AssessmentDetailPage.vue       # 评估详情
│   ├── ConsultationListPage.vue       # 咨询记录
│   ├── ConsultationDetailPage.vue     # 咨询详情
│   ├── ArticleListPage.vue            # 科普文章列表
│   ├── ArticleDetailPage.vue          # 科普文章详情
│   ├── MyArticlesPage.vue             # 我的文章
│   ├── MyPage.vue                     # 个人中心
│   ├── MessagesPage.vue               # 消息中心
│   ├── CouponsPage.vue                # 优惠券
│   ├── FavoritesPage.vue              # 收藏的咨询师
│   ├── FeedbackPage.vue               # 意见反馈
│   └── SettingsPage.vue               # 设置（含隐私安全）
├── pages-lawyer/                      # 咨询师端页面（8个）
│   ├── CounselorLayout.vue            # 咨询师端 Tab 布局
│   ├── CounselorHomePage.vue          # 咨询师工作台
│   ├── CounselorAppointmentsPage.vue  # 预约管理
│   ├── CounselorAppointmentDetailPage.vue # 预约详情
│   ├── CounselorCasesPage.vue         # 评估管理
│   ├── CounselorConsultationAddPage.vue # 填写咨询记录
│   ├── CounselorSchedulePage.vue      # 排班管理
│   └── CounselorIncomePage.vue        # 收入统计
├── pages-admin/                       # 管理后台页面（10个）
│   ├── AdminLayout.vue                # 管理后台侧边栏布局
│   ├── DashboardPage.vue              # 数据看板
│   ├── CounselorMgmtPage.vue          # 咨询师管理
│   ├── ServiceMgmtPage.vue            # 服务管理
│   ├── AppointmentMgmtPage.vue        # 预约管理
│   ├── AssessmentMgmtPage.vue         # 评估管理
│   ├── FinancePage.vue                # 财务报表
│   ├── ReviewMgmtPage.vue             # 评价管理
│   ├── ArticleMgmtPage.vue            # 科普文章管理
│   └── OrgMgmtPage.vue                # 机构管理
├── pages-sub/                         # 分包页面（表单/数据）
└── utils/                             # 工具函数

设计亮点

绿色治愈系视觉：区别于其他预约类项目的暖色调或冷色调，心理咨询小程序采用 #10B981 绿色为主色调，传递温暖、安全、治愈的品牌形象。全局 CSS 变量体系，一处修改全局生效。

匿名模式登录：特别增设匿名模式入口，用户无需绑定手机号即可使用基础功能——心理问题的第一步，是让用户感到安全和隐私得到保护。

三端分离架构：用户端 /app、咨询师端 /counselor-app、管理后台 /admin 三个独立路由入口，代码分包清晰，互不干扰。一套代码部署三端，最大化复用。

三步式预约流程：选服务/咨询师 → 填评估+选时间 → 确认支付。每个步骤有明确的视觉引导，降低用户操作门槛。

多维度咨询师筛选：10 个心理分类 + 4 种价格区间 + 4 种排序方式 + 关键词搜索，帮助用户快速找到合适的咨询师。

心理评估全生命周期管理：从用户提交评估 → 管理员分配咨询师 → 咨询师接单 → 咨询完成，状态全程可追溯。支持四级紧急程度标识（普通/紧急/加急/非常紧急）。

科普文章商城：心理健康科普文章在线阅读和购买，为用户提供自助式心理学习资源，增加机构营收渠道。

隐私保护优先：

• 登录页提供匿名模式入口
• 设置页明确展示隐私保护政策
• 咨询记录端到端加密（AES-256）
• 咨询记录加密存储，只有咨询师和来访者双方可查看
• 评价支持完全匿名

完整的交互反馈：每个按钮都有明确的点击响应——弹窗确认、Toast 提示、状态切换、页面跳转，用户体验闭环完整。

心理行业特色功能：

• 10 个心理分类：覆盖情感问题、焦虑抑郁、亲子关系等高频咨询场景
• 心理评估系统：四级紧急程度标识，帮助机构优先处理高危个案
• 咨询记录结构化：咨询师填写摘要、建议、后续行动三栏，形成完整的咨询档案
• 免费初访引流：15 分钟免费初访作为获客入口，引导付费深度咨询
• 咨询师排班日历：周历视图 + 时段管理，灵活设置可预约时间

与其他行业模板的关系

本项目基于成熟的"通用预约系统"模板改造而来，复用了以下核心能力：

全新开发模块：心理评估系统（提交/分配/跟进）、咨询记录加密存储（摘要/建议/后续行动 + AES-256 加密）、科普文章商城（阅读/购买/下载）、匿名模式登录、咨询师工作台（预约管理/收入统计）、咨询师排班日历——这 6 个模块是心理咨询行业独有功能，也是本项目的核心价值所在。

源代码获取

• 演示地址：http://counseling.hei-ai.com/
• 源码购买：https://srcs.hei-ai.com/509.html（搜索"心理咨询预约"）

交付内容：

• 完整前端源码（Vue 3 + Vite，开箱即跑 npm install && npm run dev）
• 产品需求文档（含完整数据模型和 API 设计）
• 部署说明文档
• 31 张界面截图

本项目为心理咨询行业数字化转型的一次实践探索，既是可直接上线的 SaaS 产品原型，也是学习 Vue 3 全栈开发的优质参考项目。我们特别关注隐私保护与匿名功能，因为心理服务的第一步永远是让用户感到安全。欢迎交流讨论。