# 抖音抽奖

**Repository Path**: hu-yuanbiao/tiktok-lottery

## Basic Information

- **Project Name**: 抖音抽奖
- **Description**: 抖音抽奖系统。跨平台抽奖解决方案，支持PC端和移动端适配，包含完整的后台管理功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2025-05-30
- **Last Updated**: 2025-08-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎉 抖音抽奖系统

![项目状态](https://img.shields.io/badge/状态-活跃-brightgreen)
![技术栈](https://img.shields.io/badge/技术栈-uniCloud%20|%20Vue3%20|%20uni--app-blue)

> 跨平台抽奖解决方案，支持PC端和移动端适配，包含完整的后台管理功能

## ✨ 核心功能

- **多端适配**：自动识别设备类型，提供PC/移动双模式体验
- **奖品管理**：可视化权重设置与概率计算
- **动画配置**：自定义背景/骷髅/路飞/罗宾动画效果
- **订单管理**：支持CSV批量导入订单数据
- **抽奖说明**：可拖拽排序的左侧栏管理系统
- **指定抽奖**：支持预设中奖结果的调试模式

## 🚀 快速开始

### 环境要求

- Node.js v14+
- HBuilder X 3.6.0+
- uniCloud账号

### 安装步骤

```bash
# 克隆仓库
git clone https://gitee.com/your-username/tiktok-lottery.git

# 安装依赖
cd tiktok-lottery
npm install

# 关联uniCloud空间
在HBuilder X中右键uniCloud文件夹 -> 关联云服务空间
```

## 项目结构

```aiignore
├── cloudfunctions    # 云函数
├── common            # 公共资源
├── components        # 组件库
│   ├── BgCom.vue     # 背景组件
│   ├── CenterCom.vue # 抽奖核心组件
│   ├── LeftCom.vue   # 左侧说明组件
│   ├── RightCom.vue  # 右侧组件
│   └── verPc.vue     # PC验证组件
├── pages             # 页面目录
│   ├── h5            # 移动端页面
│   │   ├── configEdit.vue  # 全局配置
│   │   ├── leftEdit.vue    # 左侧栏管理
│   │   ├── listEdit.vue    # 奖品管理
│   │   └── orderEdit.vue   # 订单管理
│   └── pc            # PC端页面
├── static            # 静态资源
├── store             # 状态管理
└── uni_modules       # uni插件市场组件
```

## 🎮 使用指南

1. 基础配置
    - 背景图片：支持JPG/PNG格式
    - 动画设置：支持GIF格式的骷髅/路飞/罗宾动画
    - 抽奖模式：随机模式/指定结果调试模式
2. 奖品管理
   ```mermaid
   graph LR
   A[添加奖品] --> B[设置权重]
   B --> C[配置背景/文字颜色]
   C --> D[实时概率计算]
   ```
3. 抽奖流程
    1. 在 `奖品管理` 添加奖品并设置权重
    2. 在 `订单管理` 导入参与用户
    3. 进入抽奖界面按 `Enter` 开始
    4. 系统自动计算中奖结果并展示

## 📸 界面预览

| 功能页面   | 移动端 | PC端 |
|--------|-----|-----|
| 抽奖主界面  | ❌   | ✅   |
| 全局配置   | ✅   | ❌   |
| 奖品管理   | ✅   | ❌   |
| 订单导入   | ✅   | ❌   |
| 抽奖说明编辑 | ✅   | ❌   |

## 📜 数据库设计

   ```mermaid
   erDiagram
    CONFIG ||--o{ PRIZE_DESC: contains
    CONFIG {
        string _id
        string label
        string value
    }
    PRIZE {
        string _id
        string img
        string title
        string bgColor
        string color
        int weight
    }
   ```