从 0 到 1 实现CloudBase云开发 + 低代码全栈开发活动管理小程序(08)

第 8 章:报名系统设计

"填表单是世界上最枯燥的事,但我们可以让它稍微好玩一点。"

报名系统是连接活动主办方和参与者的桥梁。本章我们将实现一个高度可配置的报名系统,支持动态表单和支付凭证审核。

8.1 自定义表单配置

不同的活动需要收集的信息不同。聚餐需要统计"是否吃辣",讲座需要统计"所在部门"。我们不能把表单字段写死在代码里。

数据结构设计

activities 表的 registrationConfig 字段中:

json 复制代码
{
  "fields": [
    { "id": "name", "type": "text", "label": "姓名", "required": true },
    { "id": "phone", "type": "number", "label": "手机号", "required": true },
    {
      "id": "diet",
      "type": "radio",
      "label": "饮食偏好",
      "options": ["正常", "微辣", "特辣"]
    }
  ]
}

前端渲染 (DynamicForm)

前端组件遍历 fields 数组,根据 type 动态渲染组件:

  • text -> <uni-easyinput>
  • radio -> <uni-data-checkbox>
  • image -> <uni-file-picker>

8.2 报名流程与状态机

报名不仅仅是填个表,它是一个完整的业务事务

状态流转图

graph LR Start((开始)) --> Pending[待审核] Pending -->|管理员通过| Approved[报名成功] Pending -->|管理员拒绝| Rejected[已拒绝] subgraph 支付流程 Pending -->|上传凭证| PaymentPending[支付确认中] PaymentPending -->|管理员确认收款| Approved PaymentPending -->|管理员驳回| Pending end

并发控制 (Race Condition)

当活动限制名额(如仅限 50 人)时,如何防止第 51 个人报名成功?

解决方案: "先查后写"的乐观检查策略。 虽然 MySQL 支持强事务,但为了简化云函数逻辑,我们目前暂未开启严格的数据库事务锁。而是采用了应用层的检查机制:

js 复制代码
count = await count(registrations where activityId=xxx)
if (count >= limit) return Error("名额已满")
await create(registration)`

注意: 这种方式在极高并发下(如 1秒内涌入 1000 人)可能会导致少量超卖。但对于社团活动这种量级,这已经足够安全且高效了。如果真遇到了"秒杀"场景,再考虑引入 Redis 锁或数据库事务也不迟。

8.3 支付凭证上传与审核

对于社团活动,接入微信支付门槛太高(需要企业资质)。最接地气的方式是:上传转账截图

流程实现

  1. 主办方: 在活动配置中上传自己的收款二维码(微信/支付宝)。
  2. 参与者 :
    • 保存二维码,去微信支付转账。
    • 截图保存。
    • 在报名表单中点击"上传支付凭证",选择截图。
    • 前端调用 uniCloud.uploadFile,获取图片 FileID
  3. 提交 : FileID 随表单数据一同提交到 createRegistration 云函数。

8.4 报名管理后台

管理员在手机端管理报名记录。

扫码核销

如何快速验证参与者身份?

  1. 生成码 : 用户端根据报名ID生成二维码 (qrcode).
  2. 扫码 : 管理员使用小程序自带的 scanCode 接口扫描。
  3. 核销 : 前端解析出报名ID,调用云函数 verifyRegistration,将状态改为"已签到"。

数据导出

社团联需要 Excel 表格备案? 云函数支持将数据导出为 CSV/Excel 文件,生成下载链接,管理员复制链接即可在电脑上下载。


本章小结 : 我们实现了一个灵活的报名系统,既满足了多样化的数据收集需求,又巧妙规避了微信支付的资质限制。下一章,我们将让活动"动"起来------实现投票互动系统

下一章(09-投票互动系统)

相关推荐
zoe驿鹿12 分钟前
【CI/CD】前端工程化与自动化:从“手工作坊”到“现代化工厂”的演进之路
前端·ci/cd·自动化
lupai15 分钟前
增值税发票 OCR 识别 API 新手接入指南
java·前端·ocr
reasonsummer21 分钟前
【办公类-120-01】20260812闵行区幼儿园概况表的数据统计(户籍、五类性质、优抚子女)
前端·python
宿67424 分钟前
vue3-指令和事件处理
开发语言·前端·javascript
风骏时光牛马34 分钟前
AI助手异常问题Debug排查
前端
梦想的旅途240 分钟前
企业微信API实战:Python自动化消息推送
java·前端·python·自动化·企业微信
恋猫de小郭40 分钟前
Flutter 3.47 发布,快来看看有什么更新吧
android·前端·flutter
程序员黑豆41 分钟前
Java 内存存储机制:基本数据类型 vs 引用数据类型
前端·ai编程·全栈
90后的晨仔1 小时前
uni-app 三方库与插件管理体系全解析:从原生开发者视角彻底讲透
前端
程序员爱钓鱼1 小时前
Rust 生命周期案例详解:从编译错误到真实业务场景
前端·后端·rust