# 集福卡活动系统功能详细介绍

## 系统架构

- **部署**：前后端分离架构

### 核心模块

1. **H5用户端**：用户参与集福卡活动的界面

2. **管理后台**：活动配置、数据统计、用户管理等

3. **后端API**：提供数据接口和业务逻辑处理

## 核心功能

### 1. H5用户端功能

#### 1.1 首页核心功能

- **抽卡功能**：用户点击抽卡按钮获取福卡

- **剩余次数显示**：显示用户剩余的抽卡次数

- **开奖信息**：显示开奖时间和参与人数

- **背景图**：支持自定义背景图，随页面滚动

#### 1.2 我的福卡展示

- **福卡网格**：以网格形式展示所有福卡

- **收集状态**：显示福卡的收集状态（已收集/未收集）

- **抽卡记录**：查看历史抽卡记录

- **福卡样式**：支持自定义福卡背景图

#### 1.3 任务系统

- **每日答题**：通过答题获取抽卡机会

- **每日分享**：通过分享活动获取抽卡机会

- **任务状态**：显示任务剩余次数

#### 1.4 奖励系统

- **集齐奖励**：集齐所有福卡后可领取奖励

- **地址填写**：中奖后填写收货地址

- **奖励等级**：支持多个奖励等级

### 2. 管理后台功能

#### 2.1 活动配置

- **基本设置**：初始抽卡次数、活动时间等

- **任务设置**：每日任务限制次数

- **开奖设置**：开奖时间配置

#### 2.2 奖品管理

- **奖品列表**：查看所有奖品

- **添加奖品**：新增奖品

- **编辑奖品**：修改奖品信息

- **删除奖品**：移除奖品

- **奖品等级**：设置奖品等级和概率

#### 2.3 答题题库

- **题目列表**：查看所有题目

- **添加题目**：新增答题题目

- **编辑题目**：修改题目内容

- **删除题目**：移除题目

- **选项管理**：设置题目选项和正确答案

#### 2.4 用户管理

- **用户列表**：查看参与活动的用户

- **用户详情**：查看用户的福卡收集情况

- **搜索功能**：按昵称搜索用户

#### 2.5 数据统计

- **参与人数**：统计活动参与人数

- **集齐人数**：统计集齐福卡的人数

- **中奖人数**：统计中奖人数

- **总抽卡次数**：统计所有用户的抽卡总次数

- **数据图表**：以图表形式展示数据趋势

#### 2.6 系统设置

- **公众号设置**：配置公众号参数

- **背景图设置**：上传和管理前端背景图、福卡背景图

- **文件上传**：支持图片文件直接上传

#### 2.7 日志管理

- **操作日志**：记录系统操作日志

- **日志搜索**：按关键词搜索日志

### 3. 后端API功能

#### 3.1 用户相关

- **用户信息**：获取用户信息

- **用户福卡**：获取用户的福卡列表

- **用户任务**：获取用户的任务状态

#### 3.2 福卡相关

- **抽卡**：执行抽卡操作

- **福卡列表**：获取所有福卡

- **抽卡记录**：获取用户的抽卡记录

#### 3.3 任务相关

- **答题任务**：获取答题题目

- **提交答案**：提交答题结果

- **分享任务**：完成分享任务

#### 3.4 奖励相关

- **领取奖励**：领取集齐福卡的奖励

- **提交地址**：提交收货地址

- **奖品列表**：获取所有奖品

#### 3.5 管理相关

- **统计数据**：获取活动统计数据

- **配置管理**：管理活动配置

- **文件上传**：处理文件上传

## 技术实现

### 1. 前端技术

- **Axios**：网络请求

### 2. 后端技术

- **Body-parser**：请求体解析

### 3. 特色技术

- **响应式设计**：适配不同屏幕尺寸

- **动画效果**：抽卡时的翻转动画

- **渐变背景**：按钮和图标的渐变效果

- **数据可视化**：管理后台的数据图表

- **文件上传**：支持图片直接上传

## 数据流

### 1. 抽卡流程

1. 用户点击抽卡按钮

2. 前端发送抽卡请求到后端API

3. 后端随机生成福卡

4. 更新用户的福卡状态和剩余次数

5. 前端更新界面显示抽卡结果

6. 检查是否集齐所有福卡

### 2. 任务流程

1. 用户点击任务按钮

2. 前端加载任务内容（如答题题目）

3. 用户完成任务

4. 前端提交任务结果

5. 后端验证并更新用户的任务状态和抽卡次数

6. 前端更新界面显示

### 3. 奖励流程

1. 用户集齐所有福卡

2. 前端显示领取奖励按钮

3. 用户点击领取奖励

4. 后端随机生成奖励等级

5. 前端显示中奖结果

6. 用户填写收货地址

7. 后端保存地址信息

## 使用方式

### 1. 用户参与方式

1. **访问H5页面**：通过链接或扫码进入活动页面

2. **参与抽卡**：使用初始抽卡次数进行抽卡

3. **完成任务**：通过答题和分享获取更多抽卡次数

4. **收集福卡**：尽可能收集所有类型的福卡

5. **领取奖励**：集齐福卡后领取奖励

### 2. 管理员操作方式

1. **登录管理后台**：使用管理员账号登录

2. **配置活动**：设置活动参数和奖品

3. **管理题库**：添加和管理答题题目

4. **监控数据**：查看活动数据和用户参与情况

5. **系统设置**：配置公众号参数和背景图片

## 特色功能

### 1. 自定义主题

- **背景图定制**：支持上传自定义背景图

- **福卡样式**：支持自定义福卡背景

- **整体风格**：统一的视觉设计风格

### 2. 完善的任务系统

- **多种任务类型**：答题和分享任务

- **任务限制**：每日任务次数限制

- **奖励机制**：完成任务获得抽卡机会

### 3. 数据统计分析

- **实时数据**：实时统计活动数据

- **多维度分析**：参与人数、集齐人数、中奖人数等

- **数据可视化**：图表展示数据趋势

### 4. 安全可靠

- **防作弊**：任务验证机制

- **数据安全**：后端数据验证和存储

- **用户体验**：流畅的交互体验

## 系统优势

1. **完整的活动流程**：从用户参与到奖品发放的完整流程

2. **灵活的配置**：支持多种活动参数配置

3. **丰富的功能**：包含抽卡、任务、奖励等多种功能

4. **良好的用户体验**：流畅的动画效果和响应式设计

5. **完善的管理后台**：方便管理员监控和管理活动

## 总结

集福卡活动系统是一个功能完整、交互友好的微信H5活动系统，通过福卡收集、任务完成等方式提高用户参与度，同时为管理员提供了强大的后台管理功能。系统采用前后端分离架构，技术栈现代化，具有良好的可扩展性和维护性。

该系统不仅满足了基本的集福卡活动需求，还通过丰富的功能和良好的用户体验，为用户带来了愉悦的参与体验，为活动主办方提供了便捷的管理工具。

定制看需求，一般几小时内完成，也不贵。