抽奖系统

基于 Vue 3 + Vite + Element Plus 开发的现代化抽奖系统，支持名单管理、奖品配置、多轮抽奖等功能。

项目简介

这是一个功能完整的抽奖系统，适用于年会、活动抽奖等场景。系统采用前后端分离架构，数据存储在浏览器本地 IndexedDB 中，无需后端服务器即可运行。

主要特性

• 📋 名单管理：支持CSV批量导入/导出，支持自定义字段配置
• 🎁 奖品管理：灵活配置奖品和库存数量
• 🔄 多轮抽奖：支持多轮次抽奖，每轮可设置不同奖品和人数
• 📺 大屏展示：独立的展示端，支持滚动动画效果
• ⌨️ 快捷键操作：支持键盘快捷键控制抽奖流程
• 🎨 背景自定义：支持自定义大屏背景图片
• 💾 本地存储：使用 IndexedDB 本地存储，无需服务器

技术栈

• 框架：Vue 3.4.0
• 构建工具：Vite 5.0.0
• 路由：Vue Router 4.2.5
• 状态管理：Pinia 2.1.7
• UI组件库：Element Plus 2.5.0
• 数据存储：IndexedDB

项目结构

rollingDraw/
├── src/                      # 主应用源码
│   ├── views/               # 页面组件
│   │   ├── admin/          # 管理端页面
│   │   │   ├── Participants.vue  # 名单管理
│   │   │   ├── Prizes.vue        # 奖品管理
│   │   │   ├── Rounds.vue        # 轮次管理
│   │   │   └── Winners.vue       # 中奖记录
│   │   ├── Admin.vue       # 管理端入口
│   │   ├── Display.vue     # 展示端入口
│   │   └── AdminLayout.vue # 管理端布局
│   ├── router/             # 路由配置
│   ├── store/              # 状态管理
│   └── styles/             # 样式文件
├── admin/                  # 独立管理端应用
├── display/                # 独立展示端应用
├── utils/                  # 工具类
│   └── indexedDB.js        # IndexedDB封装
├── index.html              # 入口HTML
├── vite.config.js          # Vite配置
└── package.json            # 项目配置

快速开始

安装依赖

npm install

开发模式

npm run dev

访问 http://localhost:5173

构建生产版本

npm run build

预览生产版本

npm run preview

功能说明

管理端（/admin）

名单管理

• 单个添加：通过表单逐个添加参与者
• 批量导入：支持 CSV 文件批量导入
  • CSV 格式：第一行为字段名，后续行为数据
  • 示例：

    姓名,部门,工号
    张三,技术部,001
    李四,市场部,002
    

• 字段配置：自定义参与者字段（姓名、部门、工号等）
• 导出名单：将当前名单导出为 CSV 文件
• 清空名单：一键清空所有参与者

奖品管理

• 添加奖品（名称、库存数量）
• 查看奖品使用情况（已用/总库存）
• 删除奖品

轮次管理

• 创建抽奖轮次
• 为每个轮次配置奖品和抽取人数
• 查看轮次完成状态
• 删除轮次

中奖记录

• 查看所有中奖记录
• 导出中奖名单
• 清空中奖记录（重置抽奖）

背景设置

• 上传自定义背景图片（支持 JPG、PNG、GIF）
• 预览背景效果
• 清除背景图片

展示端（/display）

显示模式

• 滚动模式：抽奖时名单滚动显示
• 结果模式：展示中奖者名单，支持多列布局

快捷键

• ← →：切换抽奖轮次
• Space：开始/停止抽奖

数据存储

系统使用浏览器本地 IndexedDB 存储数据，数据库名称为 LotteryDB，包含以下数据：

• participants：参与者名单
• prizes：奖品列表
• rounds：抽奖轮次
• winners：中奖记录
• fields：字段配置
• backgroundImage：背景图片

注意：清除浏览器数据会导致所有抽奖数据丢失，请定期导出备份。

开发说明

路径别名

• @：指向 src/ 目录
• @utils：指向 utils/ 目录

样式变量

项目使用 CSS 变量定义主题颜色和样式，可在 src/styles/variables.css 中修改。

作者

上海潘哆呐科技有限公司

邮箱：work@pandorastudio.cn

许可证

私有项目