全源码提供-专业高效的法律咨询预约小程序

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

项目背景

随着全民法律意识的不断提升，越来越多的人在遇到问题时选择咨询专业律师。然而传统的法律咨询行业仍存在诸多痛点：用户找律师靠熟人推荐、预约靠电话沟通、案件进展全靠微信聊天、文书模板需要花高价请律师代写。法律咨询预约小程序正是为了解决这些问题而设计的一站式平台，目标是打通”找律师 → 在线预约 → 支付 → 咨询 → 案件管理 → 文书下载”的完整业务闭环。

适用场景包括：律师事务所、法律咨询平台、公益法律援助中心、企业法务服务等各类法律服务机构。

技术选型

功能全景

用户端（移动端）

用户端采用底部 Tab 导航，包含 5 个主入口和多个二级页面，覆盖从查找律师到预约咨询、案件管理、文书下载的全链路。

1. 登录页

支持微信一键登录和手机号登录两种方式，底部提供律师端和管理员入口，一套代码服务三角色。

登录页采用蓝色渐变背景，搭配 ⚖️ 天平图标，体现法律行业的专业感和公正形象。

2. 首页

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

• Banner：律所宣传图 + 品牌标语”专业法律咨询，守护您的权益”
• 咨询领域：12 个法律分类以 3×4 网格展示——婚姻家庭、劳动纠纷、房产纠纷、合同纠纷、刑事辩护、交通事故、公司法务、知识产权、债权债务、继承遗嘱、行政诉讼、其他
• 热门服务：免费电话咨询、视频咨询、线下面谈、代写法律文书等服务卡片，每个卡片展示价格和服务时长
• 推荐律师：横向滚动律师卡片，展示头像、评分、办案数、擅长领域标签
• 法律文书模板：热门文书模板预览，支持直接购买下载

3. 找律师

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

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

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

4. 律师详情

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

• 律师信息卡片：头像、姓名、职称、评分、累计办案数、评价数
• 基本信息：从业年限、执业证号、教育背景
• 擅长领域：标签化展示（如 #婚姻家庭 #财产分割 #子女抚养）
• 个人简介：3-5 段自我介绍
• 资质证书：执业律师证、专利代理师等
• 案例展示：精选案例列表，展示案件类型、结果
• 用户评价：真实用户评价列表，支持匿名
• 服务项目：电话咨询 ¥199/30min、视频咨询 ¥299/60min、线下面谈 ¥499/60min

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

5. 预约咨询

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

第一步：选择服务与律师

• 服务列表：免费咨询 / 电话咨询 / 视频咨询 / 线下面谈
• 律师匹配：系统智能推荐 + 手动选择，展示律师在线状态

第二步：填写案件信息

• 咨询方式：电话 / 视频 / 线下（标签切换）
• 联系电话
• 案件分类：12 个法律领域下拉选择
• 案件描述：文本域填写问题详情
• 选择日期 + 时段：9:00-16:00 共 9 个时段可选

第三步：确认与支付

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

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

6. 预约管理

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

预约详情页包含：

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

7. 案件管理

用户可以在线提交法律案件：

• 提交案件：填写案件标题、详细描述、案件类型（咨询/民事/刑事/行政/仲裁）、所属领域、涉案金额、紧急程度（普通/紧急/加急/非常紧急），支持上传证据材料
• 案件列表：按状态筛选（待审核/已分配/进行中/已完成）
• 案件详情：查看案件进展、负责律师信息、进度时间线、附件材料，支持补充材料和预约咨询

8. 咨询记录

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

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

9. 法律文书模板

提供 5 大类常用法律文书模板：

模板详情页支持预览内容、查看下载量，付费后可直接下载。用户也可在”我的文书”中查看已购买的文书。

10. 更多功能页

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

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

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

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

• 设置：账号管理、通知设置、隐私政策、关于我们

律师端（移动端）

律师使用的移动工作台，底部 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、联系电话、营业时间、服务须知和隐私政策。

项目结构

32-frontend-legal/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 # 首页（领域/服务/律师/文书）

│ ├── LawyerListPage.vue # 律师列表（多维度筛选）

│ ├── LawyerDetailPage.vue # 律师详情（简介/案例/评价/服务）

│ ├── ServiceListPage.vue # 服务项目列表

│ ├── AppointmentConfirmPage.vue # 预约确认（3步流程）

│ ├── PayResultPage.vue # 支付结果

│ ├── AppointmentSuccessPage.vue # 预约成功

│ ├── AppointmentsPage.vue # 我的预约

│ ├── AppointmentDetailPage.vue # 预约详情

│ ├── CaseListPage.vue # 案件列表

│ ├── CaseAddPage.vue # 提交案件

│ ├── CaseDetailPage.vue # 案件详情

│ ├── ConsultationListPage.vue # 咨询记录

│ ├── ConsultationDetailPage.vue # 咨询详情

│ ├── DocumentListPage.vue # 文书模板列表

│ ├── DocumentDetailPage.vue # 文书模板详情

│ ├── MyDocumentsPage.vue # 我的文书

│ ├── MyPage.vue # 个人中心

│ ├── MessagesPage.vue # 消息中心

│ ├── CouponsPage.vue # 优惠券

│ ├── FavoritesPage.vue # 收藏的律师

│ ├── FeedbackPage.vue # 意见反馈

│ └── SettingsPage.vue # 设置

├── pages-lawyer/ # 律师端页面（8个）

│ ├── LawyerLayout.vue # 律师端 Tab 布局

│ ├── LawyerHomePage.vue # 律师工作台

│ ├── LawyerAppointmentsPage.vue # 预约管理

│ ├── LawyerAppointmentDetailPage.vue # 预约详情

│ ├── LawyerCasesPage.vue # 案件管理

│ ├── LawyerConsultationAddPage.vue # 填写咨询记录

│ ├── LawyerSchedulePage.vue # 排班管理

│ └── LawyerIncomePage.vue # 收入统计

├── pages-admin/ # 管理后台页面（10个）

│ ├── AdminLayout.vue # 管理后台侧边栏布局

│ ├── DashboardPage.vue # 数据看板

│ ├── LawyerMgmtPage.vue # 律师管理

│ ├── ServiceMgmtPage.vue # 服务管理

│ ├── AppointmentMgmtPage.vue # 预约管理

│ ├── CaseMgmtPage.vue # 案件管理

│ ├── FinancePage.vue # 财务报表

│ ├── ReviewMgmtPage.vue # 评价管理

│ ├── DocumentMgmtPage.vue # 文书管理

│ └── OrgMgmtPage.vue # 律所管理

├── pages-sub/ # 分包页面（表单/数据）

└── utils/ # 工具函数

设计亮点

专业蓝色系视觉：区别于其他预约类项目的暖色调，法律咨询小程序采用 #2563EB 蓝色为主色调，传递专业、可信赖的品牌形象。全局 CSS 变量体系，一处修改全局生效。
三端分离架构：用户端 /app、律师端 /lawyer-app、管理后台 /admin 三个独立路由入口，代码分包清晰，互不干扰。一套代码部署三端，最大化复用。
三步式预约流程：选服务/律师 → 填案件+选时间 → 确认支付。每个步骤有明确的视觉引导，降低用户操作门槛。
多维度律师筛选：12 个法律领域分类 + 4 种价格区间 + 4 种排序方式 + 关键词搜索，帮助用户快速找到合适的律师。
案件全生命周期管理：从用户提交案件 → 管理员分配律师 → 律师接单 → 咨询完成，状态全程可追溯。
法律文书模板商城：5 大类常用法律文书模板在线预览和购买，为用户提供自助式法律服务，增加律所营收渠道。
完整的交互反馈：每个按钮都有明确的点击响应——弹窗确认、Toast 提示、状态切换、页面跳转，用户体验闭环完整。
法律行业特色功能：

• 12 个法律领域分类：覆盖婚姻家庭、劳动纠纷、房产纠纷等高频咨询场景
• 案件紧急程度标识：普通/紧急/加急/非常紧急四级，帮助律所优先处理
• 咨询记录结构化：律师填写摘要、建议、后续行动三栏，形成完整的咨询档案
• 免费咨询引流：15 分钟免费电话咨询作为获客入口，引导付费深度咨询
• 律师排班日历：周历视图 + 时段管理，灵活设置可预约时间

与其他行业模板的关系

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

全新开发模块：案件管理（提交/分配/跟进）、咨询记录（摘要/建议/后续行动）、文书模板系统（模板+变量填充+生成文档）、免费咨询引流（快速匹配在线律师）、律师工作台（预约管理/收入统计）、律师排班日历——这 6 个模块是法律咨询行业独有功能，也是本项目的核心价值所在。

源代码获取

• 演示地址：http://legal.hei-ai.com/
• 源码购买：https://srcs.hei-ai.com/（搜索”法律咨询预约”）

交付内容：

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

*本项目为法律咨询行业数字化转型的一次实践探索，既是可直接上线的 SaaS 产品原型，也是学习 Vue 3 全栈开发的优质参考项目。欢迎交流讨论。*