一、立项背景和目标
为各类竞赛、艺术征集活动提供线上报名解决方案,解决传统线下报名流程繁琐、数据统计困难、票务管理混乱等痛点。目标是打造一个灵活可配置、支持多赛事并行运营的报名平台。
二、核心功能模块
1. 参赛者系统:用户注册登录、动态表单填写(支持文本/手机/邮箱/日期/图片/视频等多种字段类型)、作品文件上传(含大文件分片上传)、在线支付、电子票券生成与查询、报名记录管理
2. 评委系统:独立的评审入口、作品浏览与评分、评审规则管理
3. 多主题支持:根据不同赛事动态加载UI主题,实现一套系统服务多个活动
三、业务流程
用户访问 → 选择赛事 → 身份验证 → 阅读规则 → 填写报名表 → 上传作品/证件 → 在线缴费 → 获取电子票券 → 查询报名状态
附浏览地址:https://match-signup.app.nordri.co/
一、整体架构和技术栈
前后端分离架构,前端基于Vue 2.x + Vue Router的SPA应用,UI使用iView(PC端)+ Vant/Vux(移动端)实现响应式布局,Axios处理API请求,JWT实现身份认证。
二、我负责的模块和成果
1. 业务页面开发:完成参赛者端18个页面、评委端12个页面的开发,包括首页、登录、报名表单、文件上传、票券管理、报名记录查询等
2. 表单组件开发:开发20+种表单字段组件(文本、手机、邮箱、日期选择、图片上传、视频上传、复选框、协议确认等),实现字段校验和错误提示
3. 文件上传功能:实现图片压缩上传、EXIF方向处理、大文件分片上传、上传进度展示
4. 多主题页面适配:根据不同赛事需求开发多套主题页面(default、shanghai2021等)
三、遇到的难点与解决方案
1. 动态表单复杂交互:支持多人信息动态添加删除(如室内乐合作伙伴),通过组件化设计和事件总线实现数据联动
2. 移动端兼容性:处理iOS/Android各机型差异,解决软键盘弹出布局错乱、图片上传方向旋转等问题
3. 表单数据管理:大量字段状态同步困难,封装Form数据模型统一管理表单状态和校验逻辑