更新记录

1.0.0（2025-10-10） 下载此版本

无

平台兼容性

幸运大转盘 - 使用说明

项目介绍

基于 Uniapp 框架开发的抽奖转盘H5应用，界面美观大气，支持多端运行。

功能特性

• 8格转盘抽奖，黄红相间配色
• 平滑旋转动画，4秒缓动效果
• 中奖弹窗提示
• 实时中奖记录滚动播报
• 抽奖次数限制（默认3次）
• 完整的抽奖规则说明

快速开始

环境要求

• HBuilderX 3.0+
• Node.js 12+

运行项目

1. 使用 HBuilderX 打开项目
2. 选择运行 -> 运行到浏览器 -> Chrome
3. 或运行到微信开发者工具

目录结构

luck-wheel/
├── pages/
│   └── index/
│       └── index.vue    # 转盘主页面
├── static/              # 静态资源
├── App.vue              # 应用配置
├── main.js              # 入口文件
├── pages.json           # 页面配置
└── manifest.json        # 应用配置

自定义配置

修改奖品

在 pages/index/index.vue 中修改 prizeList 数组：

prizeList: [
  { name: 'iPhone 15', desc: 'Pro Max' },
  { name: '10元', desc: '现金红包' },
  // ... 添加更多奖品
]

修改抽奖次数

修改 remainCount 初始值：

remainCount: 3  // 修改为你想要的次数

修改转盘颜色

在样式中修改扇形背景色：

backgroundColor: index % 2 === 0 ? '#FFD93D' : '#FF6B6B'

技术栈

• Uniapp
• Vue.js
• CSS3 动画

注意事项

• 抽奖结果为随机生成
• 生产环境需对接后端接口实现真实抽奖逻辑
• 建议添加用户登录验证