基于微信小程序的衡楠环保公司系统的设计与实现：技术栈、背景意义与核心代码

1. 项目背景与意义

随着环保行业监管要求日益严格，衡楠环保公司原有的线下业务办理与人工调度模式逐渐暴露出效率低、信息不透明、客户沟通成本高等问题。客户需要上门咨询、电话预约或现场提交材料，业务人员则依赖纸质工单和口头交接，导致服务响应慢、流程难以追踪。

微信小程序具有无需下载安装、即用即走、用户基数大、开发成本相对较低等优势，非常适合作为环保公司对外服务的轻量级入口。通过小程序，客户可以随时在线提交环保咨询、预约上门检测、查看服务进度，公司内部也能实现工单派发、进度跟踪和数据统计的数字化管理。

本系统的设计与实现具有以下意义：

• 提升服务效率：将预约、报修、咨询等流程线上化，减少人工沟通环节，缩短响应时间。
• 增强信息透明度：客户可实时查看工单状态和服务记录，公司管理层可掌握整体业务运行情况。
• 降低运营成本：减少纸质单据和重复录入，通过数据统计辅助决策，优化人员与车辆调度。
• 提升企业形象：借助微信生态触达更多潜在客户，展示公司专业服务能力。

2. 系统需求分析

2.1 用户角色

系统主要面向三类用户角色：

• 普通客户：通过小程序浏览环保服务介绍、在线提交咨询与预约、查看服务进度与历史记录。
• 业务人员：接收并处理客户预约与工单，填写服务结果，更新工单状态。
• 系统管理员：管理员工账号、服务项目、公告信息，查看业务统计报表。

2.2 功能需求

• 用户认证：基于微信授权登录，绑定手机号，区分客户与内部员工角色。
• 服务展示：展示公司环保服务项目、资质介绍、案例与公告。
• 在线预约：客户选择服务类型、预约时间与地址，提交预约申请。
• 工单管理：业务人员接单、派单、处理、回访，全流程状态跟踪。
• 消息通知：预约成功、工单状态变更时通过微信订阅消息通知客户。
• 数据统计：管理员查看预约量、工单完成率、服务类型分布等统计图表。

3. 系统技术栈

本系统采用前后端分离架构，前端为微信小程序原生框架，后端提供 RESTful API 服务，数据库选用 MySQL，整体部署于云服务器。

小程序端通过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. 系统测试与总结

系统开发完成后，针对用户登录、在线预约、工单流转、消息通知等核心功能进行了功能测试与兼容性测试。测试结果表明，各功能模块运行稳定，接口响应正常，能够满足衡楠环保公司日常业务管理需求。

本系统通过微信小程序实现了环保服务的线上化、流程化和数字化管理，有效提升了公司运营效率与客户满意度。后续可在数据统计分析、智能派单、多端协同等方面进一步优化，持续提升系统的实用性与智能化水平。