线上小程序预约产品系统

我要开发同款
minapp12463781062026年08月28日
2阅读

技术信息

语言技术
JavaVueTypeScriptNode.js
系统类型
小程序轻应用
行业分类
电商

作品详情

行业场景

本项目面向美业造型、美甲美容、健身私教、按摩理疗、宠物洗护等**线下服务型门店**的数字化预约场景。传统门店普遍依赖电话预约或到店排队,存在排班冲突难以规避、客户信息无法沉淀、高峰期服务效率低下、复购率难以提升等痛点。随着微信小程序生态成熟,"即开即用、无需下载" 的轻量预约模式已成为线下服务业的标配。本系统以小程序为载体,将服务展示、在线预约、支付结算、订单管理全流程线上化,帮助门店降低运营成本、提升客户体验,并为后续的会员营销与数据运营打下基础。

功能介绍

系统围绕 "浏览 — 预约 — 支付 — 履约" 核心链路设计,主要功能模块如下:

**1. 微信一键登录**:基于 `wx.login` 获取 code,后端调用微信 `jscode2session` 接口换取 openid,自动注册并签发 JWT,用户无需手动注册即可使用。

**2. 首页展示**:包含轮播图运营位、服务分类导航、热门服务推荐,支持按分类筛选与关键词搜索,帮助用户快速定位目标服务。

**3. 服务项目管理**:每个服务包含名称、封面、详情介绍、售价、划线原价、服务时长、累计销量等字段,服务时长用于预约时段的切分与排班计算。

**4. 在线预约下单**:用户选择服务后,可选择预约日期与时间段,填写联系人姓名、手机号及备注信息,提交后生成预约订单。

**5. 订单状态机**:订单支持完整状态流转 —— 待确认 → 已确认 → 服务中 → 已完成,同时支持用户取消、管理员取消、系统自动过期等分支状态,确保预约履约全程可追溯。

**6. 微信支付**:对接微信支付统一下单接口,支持预约后在线支付,支付流水与预约订单解耦存储,支持退款与对账。

**7. 个人中心**:展示用户基本信息、我的预约列表(按状态筛选)、预约详情查看与取消操作。

项目实现

技术架构:项目采用前后端分离架构。前端基于 uni-app + Vue3 + TypeScript + Pinia开发,一套代码可编译为微信小程序与 H5 双端;后端基于 NestJS + TypeORM + MySQL构建,提供 RESTful 风格 API。

数据库设计:核心业务表共 6 张 ——`users`(用户表,含 openid 与角色字段)、`categories`(服务分类表)、`services`(服务项目表,含价格、时长、销量)、`appointments`(预约订单表,含完整状态机与订单编号唯一索引)、`payments`(支付流水表,记录微信支付全流程)、`banners`(首页轮播图表)。表间采用逻辑外键关联,便于后续分库分表扩展,并针对高频查询场景建立组合索引。

工程化实践:后端使用 NestJS 模块化架构,按业务域划分 auth、users、categories、services、appointments、payments、banners、upload 等模块;全局启用 DTO 参数校验管道(`ValidationPipe`)、统一响应拦截器(成功返回 `{code:0, message, data}`)与全局异常过滤器;JWT 全局守卫默认拦截所有接口,登录接口与浏览型数据通过 `@Public()` 装饰器豁免。前端封装统一请求层,自动携带 token、拦截 401 跳转登录、统一错误 toast 提示。

部署方案:后端通过 PM2 守护进程部署于云服务器,Nginx 反向代理并配置 HTTPS(微信小程序强制要求),静态资源(用户上传图片)由 Nginx 直接托管;数据库采用 MySQL 5.7+,字符集 utf8mb4,配套定时备份脚本。小程序端通过微信开发者工具上传代码,经平台审核后发布上线。

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论