1. 项目背景与意义随着环保行业监管要求日益严格衡楠环保公司原有的线下业务办理与人工调度模式逐渐暴露出效率低、信息不透明、客户沟通成本高等问题。客户需要上门咨询、电话预约或现场提交材料业务人员则依赖纸质工单和口头交接导致服务响应慢、流程难以追踪。微信小程序具有无需下载安装、即用即走、用户基数大、开发成本相对较低等优势非常适合作为环保公司对外服务的轻量级入口。通过小程序客户可以随时在线提交环保咨询、预约上门检测、查看服务进度公司内部也能实现工单派发、进度跟踪和数据统计的数字化管理。本系统的设计与实现具有以下意义提升服务效率将预约、报修、咨询等流程线上化减少人工沟通环节缩短响应时间。增强信息透明度客户可实时查看工单状态和服务记录公司管理层可掌握整体业务运行情况。降低运营成本减少纸质单据和重复录入通过数据统计辅助决策优化人员与车辆调度。提升企业形象借助微信生态触达更多潜在客户展示公司专业服务能力。2. 系统需求分析2.1 用户角色系统主要面向三类用户角色普通客户通过小程序浏览环保服务介绍、在线提交咨询与预约、查看服务进度与历史记录。业务人员接收并处理客户预约与工单填写服务结果更新工单状态。系统管理员管理员工账号、服务项目、公告信息查看业务统计报表。2.2 功能需求用户认证基于微信授权登录绑定手机号区分客户与内部员工角色。服务展示展示公司环保服务项目、资质介绍、案例与公告。在线预约客户选择服务类型、预约时间与地址提交预约申请。工单管理业务人员接单、派单、处理、回访全流程状态跟踪。消息通知预约成功、工单状态变更时通过微信订阅消息通知客户。数据统计管理员查看预约量、工单完成率、服务类型分布等统计图表。3. 系统技术栈本系统采用前后端分离架构前端为微信小程序原生框架后端提供 RESTful API 服务数据库选用 MySQL整体部署于云服务器。层次技术选型说明客户端微信小程序WXML / WXSS / JavaScript原生小程序框架组件化开发适配微信生态后端框架Spring Boot 2.x轻量级 Java 后端框架快速构建 RESTful API持久层MyBatis-Plus简化数据库操作提供通用 CRUD 与分页能力数据库MySQL 8.0存储用户、预约、工单、服务项目等业务数据缓存Redis缓存登录态与热点数据提升接口响应速度接口文档Swagger / Knife4j自动生成接口文档便于前后端联调部署Nginx 云服务器Linux反向代理与静态资源托管后端打包为 Jar 运行小程序端通过wx.request调用后端接口使用微信官方提供的wx.login获取临时凭证再由后端调用code2Session接口换取用户 openid实现用户身份识别。4. 系统总体设计4.1 系统架构系统整体分为小程序客户端、后端服务层和数据存储层三部分。客户端负责界面展示与用户交互后端负责业务逻辑处理与数据校验数据库负责持久化存储。后端采用分层架构包括 Controller、Service、Mapper 三层职责清晰、便于维护。4.2 数据库设计核心数据表包括用户表、服务项目表、预约表、工单表和公告表。以下为主要表结构说明用户表user存储 openid、昵称、手机号、角色类型、创建时间。服务项目表service_item存储服务名称、简介、价格、图标、状态。预约表appointment存储客户 id、服务项目 id、预约时间、地址、备注、状态。工单表work_order存储预约 id、处理人 id、工单状态、处理结果、完成时间。公告表notice存储标题、内容、发布时间、状态。5. 核心功能实现5.1 微信登录与用户认证小程序端调用wx.login获取临时 code发送至后端后端调用微信接口换取 openid并查询或创建用户记录返回自定义登录态 token。后续请求携带 token后端通过拦截器校验用户身份。RestController RequestMapping(/api/user) public class UserController { Autowired private UserService userService; PostMapping(/login) public Result login(RequestBody LoginRequest request) { String openid userService.getOpenid(request.getCode()); User user userService.findOrCreate(openid); String token userService.generateToken(user.getId()); return Result.success(token); } }5.2 在线预约功能客户在小程序端选择服务项目、填写预约时间和地址后提交预约。后端校验参数合法性创建预约记录并生成待处理工单同时通过微信订阅消息通知客户预约成功。Service public class AppointmentServiceImpl implements AppointmentService { Override Transactional public Long createAppointment(AppointmentDTO dto, Long userId) { Appointment appointment new Appointment(); appointment.setUserId(userId); appointment.setServiceItemId(dto.getServiceItemId()); appointment.setAppointmentTime(dto.getAppointmentTime()); appointment.setAddress(dto.getAddress()); appointment.setRemark(dto.getRemark()); appointment.setStatus(0); // 待确认 appointmentMapper.insert(appointment); // 生成初始工单 WorkOrder workOrder new WorkOrder(); workOrder.setAppointmentId(appointment.getId()); workOrder.setStatus(0); workOrderMapper.insert(workOrder); return appointment.getId(); } }5.3 工单状态流转业务人员在小程序端或管理后台查看待处理工单接单后更新工单状态为处理中完成服务后填写处理结果并提交系统自动更新预约状态并通知客户。Service public class WorkOrderServiceImpl implements WorkOrderService { Override public void updateStatus(Long orderId, Integer status, String result, Long operatorId) { WorkOrder order workOrderMapper.selectById(orderId); if (order null) { throw new BusinessException(工单不存在); } order.setStatus(status); order.setResult(result); order.setOperatorId(operatorId); if (status 2) { // 已完成 order.setFinishTime(LocalDateTime.now()); } workOrderMapper.updateById(order); } }5.4 小程序端预约页面小程序端预约页面通过表单收集客户信息调用后端接口提交预约。以下为预约提交的核心代码片段submitAppointment() { const { serviceItemId, appointmentTime, address, remark } this.data; wx.request({ url: https://api.example.com/api/appointment/create, method: POST, header: { Authorization: wx.getStorageSync(token) }, data: { serviceItemId, appointmentTime, address, remark }, success: (res) { if (res.data.code 200) { wx.showToast({ title: 预约成功, icon: success }); wx.navigateBack(); } else { wx.showToast({ title: res.data.msg, icon: none }); } } }); }6. 系统测试与总结系统开发完成后针对用户登录、在线预约、工单流转、消息通知等核心功能进行了功能测试与兼容性测试。测试结果表明各功能模块运行稳定接口响应正常能够满足衡楠环保公司日常业务管理需求。本系统通过微信小程序实现了环保服务的线上化、流程化和数字化管理有效提升了公司运营效率与客户满意度。后续可在数据统计分析、智能派单、多端协同等方面进一步优化持续提升系统的实用性与智能化水平。
1. 项目背景与意义随着环保行业监管要求日益严格衡楠环保公司原有的线下业务办理与人工调度模式逐渐暴露出效率低、信息不透明、客户沟通成本高等问题。客户需要上门咨询、电话预约或现场提交材料业务人员则依赖纸质工单和口头交接导致服务响应慢、流程难以追踪。微信小程序具有无需下载安装、即用即走、用户基数大、开发成本相对较低等优势非常适合作为环保公司对外服务的轻量级入口。通过小程序客户可以随时在线提交环保咨询、预约上门检测、查看服务进度公司内部也能实现工单派发、进度跟踪和数据统计的数字化管理。本系统的设计与实现具有以下意义提升服务效率将预约、报修、咨询等流程线上化减少人工沟通环节缩短响应时间。增强信息透明度客户可实时查看工单状态和服务记录公司管理层可掌握整体业务运行情况。降低运营成本减少纸质单据和重复录入通过数据统计辅助决策优化人员与车辆调度。提升企业形象借助微信生态触达更多潜在客户展示公司专业服务能力。2. 系统需求分析2.1 用户角色系统主要面向三类用户角色普通客户通过小程序浏览环保服务介绍、在线提交咨询与预约、查看服务进度与历史记录。业务人员接收并处理客户预约与工单填写服务结果更新工单状态。系统管理员管理员工账号、服务项目、公告信息查看业务统计报表。2.2 功能需求用户认证基于微信授权登录绑定手机号区分客户与内部员工角色。服务展示展示公司环保服务项目、资质介绍、案例与公告。在线预约客户选择服务类型、预约时间与地址提交预约申请。工单管理业务人员接单、派单、处理、回访全流程状态跟踪。消息通知预约成功、工单状态变更时通过微信订阅消息通知客户。数据统计管理员查看预约量、工单完成率、服务类型分布等统计图表。3. 系统技术栈本系统采用前后端分离架构前端为微信小程序原生框架后端提供 RESTful API 服务数据库选用 MySQL整体部署于云服务器。层次技术选型说明客户端微信小程序WXML / WXSS / JavaScript原生小程序框架组件化开发适配微信生态后端框架Spring Boot 2.x轻量级 Java 后端框架快速构建 RESTful API持久层MyBatis-Plus简化数据库操作提供通用 CRUD 与分页能力数据库MySQL 8.0存储用户、预约、工单、服务项目等业务数据缓存Redis缓存登录态与热点数据提升接口响应速度接口文档Swagger / Knife4j自动生成接口文档便于前后端联调部署Nginx 云服务器Linux反向代理与静态资源托管后端打包为 Jar 运行小程序端通过wx.request调用后端接口使用微信官方提供的wx.login获取临时凭证再由后端调用code2Session接口换取用户 openid实现用户身份识别。4. 系统总体设计4.1 系统架构系统整体分为小程序客户端、后端服务层和数据存储层三部分。客户端负责界面展示与用户交互后端负责业务逻辑处理与数据校验数据库负责持久化存储。后端采用分层架构包括 Controller、Service、Mapper 三层职责清晰、便于维护。4.2 数据库设计核心数据表包括用户表、服务项目表、预约表、工单表和公告表。以下为主要表结构说明用户表user存储 openid、昵称、手机号、角色类型、创建时间。服务项目表service_item存储服务名称、简介、价格、图标、状态。预约表appointment存储客户 id、服务项目 id、预约时间、地址、备注、状态。工单表work_order存储预约 id、处理人 id、工单状态、处理结果、完成时间。公告表notice存储标题、内容、发布时间、状态。5. 核心功能实现5.1 微信登录与用户认证小程序端调用wx.login获取临时 code发送至后端后端调用微信接口换取 openid并查询或创建用户记录返回自定义登录态 token。后续请求携带 token后端通过拦截器校验用户身份。RestController RequestMapping(/api/user) public class UserController { Autowired private UserService userService; PostMapping(/login) public Result login(RequestBody LoginRequest request) { String openid userService.getOpenid(request.getCode()); User user userService.findOrCreate(openid); String token userService.generateToken(user.getId()); return Result.success(token); } }5.2 在线预约功能客户在小程序端选择服务项目、填写预约时间和地址后提交预约。后端校验参数合法性创建预约记录并生成待处理工单同时通过微信订阅消息通知客户预约成功。Service public class AppointmentServiceImpl implements AppointmentService { Override Transactional public Long createAppointment(AppointmentDTO dto, Long userId) { Appointment appointment new Appointment(); appointment.setUserId(userId); appointment.setServiceItemId(dto.getServiceItemId()); appointment.setAppointmentTime(dto.getAppointmentTime()); appointment.setAddress(dto.getAddress()); appointment.setRemark(dto.getRemark()); appointment.setStatus(0); // 待确认 appointmentMapper.insert(appointment); // 生成初始工单 WorkOrder workOrder new WorkOrder(); workOrder.setAppointmentId(appointment.getId()); workOrder.setStatus(0); workOrderMapper.insert(workOrder); return appointment.getId(); } }5.3 工单状态流转业务人员在小程序端或管理后台查看待处理工单接单后更新工单状态为处理中完成服务后填写处理结果并提交系统自动更新预约状态并通知客户。Service public class WorkOrderServiceImpl implements WorkOrderService { Override public void updateStatus(Long orderId, Integer status, String result, Long operatorId) { WorkOrder order workOrderMapper.selectById(orderId); if (order null) { throw new BusinessException(工单不存在); } order.setStatus(status); order.setResult(result); order.setOperatorId(operatorId); if (status 2) { // 已完成 order.setFinishTime(LocalDateTime.now()); } workOrderMapper.updateById(order); } }5.4 小程序端预约页面小程序端预约页面通过表单收集客户信息调用后端接口提交预约。以下为预约提交的核心代码片段submitAppointment() { const { serviceItemId, appointmentTime, address, remark } this.data; wx.request({ url: https://api.example.com/api/appointment/create, method: POST, header: { Authorization: wx.getStorageSync(token) }, data: { serviceItemId, appointmentTime, address, remark }, success: (res) { if (res.data.code 200) { wx.showToast({ title: 预约成功, icon: success }); wx.navigateBack(); } else { wx.showToast({ title: res.data.msg, icon: none }); } } }); }6. 系统测试与总结系统开发完成后针对用户登录、在线预约、工单流转、消息通知等核心功能进行了功能测试与兼容性测试。测试结果表明各功能模块运行稳定接口响应正常能够满足衡楠环保公司日常业务管理需求。本系统通过微信小程序实现了环保服务的线上化、流程化和数字化管理有效提升了公司运营效率与客户满意度。后续可在数据统计分析、智能派单、多端协同等方面进一步优化持续提升系统的实用性与智能化水平。
