项目介绍
本项目是将原有H5预约系统迁移至微信小程序的实现。基于 Taro4 + Vue3 + NutUI 开发，保留了原有的功能和UI风格。
功能模块
-
预约流程
- 日期与时间段选择 (
pages/booking/index) - 预约信息确认与提交 (
pages/submit/index) - 预约记录查看 (
pages/bookingList/index) - 预约详情 (
pages/bookingDetail/index)
- 日期与时间段选择 (
-
参观者管理
- 参观者列表 (
pages/visitorList/index) - 添加/编辑参观者 (
pages/addVisitor/index) - 支持身份证号校验与脱敏显示
- 参观者列表 (
-
个人中心
- 预约码展示 (
pages/bookingCode/index) - 我的页面 (
pages/me/index) - 邀请码/证件号查询 (
pages/search/index)
- 预约码展示 (
-
公共功能
- 全局路由封装 (
hooks/useGo) - API 请求封装 (
utils/request,api/index) - 登录授权流程 (
pages/auth/index)
- 全局路由封装 (
技术栈
- 框架: Taro 4.x
- UI库: NutUI 4.x (Vue3)
- 语言: JavaScript (Vue3 Setup 语法糖)
- 样式: Less + TailwindCSS (部分)
- 状态管理: Pinia
- 路由: Taro Router + 自定义 Hooks
项目结构
-
src/api: 接口定义 -
src/assets: 图片等静态资源 -
src/components: 公共组件 (qrCode, qrCodeSearch, reserveCard等) -
src/pages: 页面文件 -
src/hooks: 组合式函数 (useGo等) -
src/utils: 工具函数 (request, tools等)
项目运行
-
安装依赖
pnpm install -
运行开发环境
pnpm dev:weapp -
打包构建
pnpm build:weapp
优化建议 (TODO)
- 小程序授权流程有问题 - 已处理
- 完善支付流程（目前为模拟/H5跳转）- 后端配合
- 优化图片资源加载（考虑使用 CDN 或分包）- 有离线模式看情况处理
- 弱网环境下的优化, 如: 用户端可以获取当前用户的预约码, 管理端可以根据预约码核销预约码
- 增强网络请求的错误处理与重试机制
- 补充单元测试