更新记录

1.0.0（2025-06-27） 下载此版本

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

平台兼容性

云端兼容性

uni-app(4.03)

uni-app x(4.03)

其他

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

🎉 抖音抽奖系统

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

✨ 核心功能

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

🚀 快速开始

环境要求

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

安装步骤

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

# 安装依赖
cd tiktok-lottery
npm install

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

项目结构

├── 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. 奖品管理

   graph LR
   A[添加奖品] --> B[设置权重]
   B --> C[配置背景/文字颜色]
   C --> D[实时概率计算]

3. 抽奖流程
   1. 在 奖品管理 添加奖品并设置权重
   2. 在 订单管理 导入参与用户
   3. 进入抽奖界面按 Enter 开始
   4. 系统自动计算中奖结果并展示

📸 界面预览

📜 数据库设计

   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
    }