更新记录

1.0.0（2025-08-12） 下载此版本

目前有基础功能，其他每日更新

平台兼容性

uni-app(4.76)

uni-app x(4.76)

转盘抽奖组件 (WheelFortune)

一个高度可配置的转盘抽奖组件，支持自定义背景图片、指针图片、奖品配置、概率设置等。

🚀 特性

• ✅ 完全可配置：背景图片、指针图片、奖品数量、文案等均可自定义
• ✅ 动态扇形：自动根据奖品数量计算扇形角度和文字位置
• ✅ 扇形颜色：支持默认间隔色和自定义扇形颜色配置
• ✅ 概率验证：自动验证概率总和是否为1，确保抽奖公平性
• ✅ 事件回调：提供中奖、历史记录更新等事件
• ✅ 灵活控制：支持抽奖次数限制、重复抽奖控制等
• ✅ 响应式设计：支持自定义转盘大小和动画时长
• ✅ 中奖弹窗：美观的中奖提示弹窗
• ✅ 历史记录：自动记录抽奖历史
• ✅ 动画控制：可自定义转盘旋转动画

📖 使用方法

基础用法

<template>
  <wheel-fortune 
    :wheel-config="wheelConfig"
    @onWin="handleWin"
    @onHistoryUpdate="handleHistoryUpdate"
  />
</template>

<script>
export default {
  data() {
    return {
      wheelConfig: {
        backgroundImage: '/static/wheelFortune/zhuanPan.png',
        pointerImage: '/static/wheelFortune/pointer.png',
        prizes: [
          { name: '一等奖', desc: 'iPhone 15', probability: 0.05, image: '/static/wheelFortune/prize1.png', color: '#cdd7ff' },
          { name: '二等奖', desc: 'AirPods', probability: 0.15, image: '/static/wheelFortune/prize2.png', color: '#abbaf4' },
          { name: '三等奖', desc: '100元红包', probability: 0.30, image: '/static/wheelFortune/prize3.png', color: '#cdd7ff' },
          { name: '谢谢参与', desc: '下次再来', probability: 0.50, image: '/static/wheelFortune/prize4.png', color: '#abbaf4' }
        ],
        // 扇形颜色配置
        sectorColors: ['#cdd7ff', '#abbaf4'], // 默认间隔色
        useCustomColors: false // 是否使用自定义颜色
      }
    }
  },
  methods: {
    handleWin(data) {
      console.log('中奖了！', data.prize.name)
    },
    handleHistoryUpdate(history) {
      console.log('抽奖历史更新', history)
    }
  }
}
</script>

高级配置

<template>
  <wheel-fortune 
    :wheel-config="wheelConfig"
    :wheel-size="700"
    :spin-duration="4"
    :spin-rounds="6"
    :allow-repeat="true"
    :max-lottery-count="3"
    :show-prize-list="false"
    @onWin="handleWin"
    ref="wheelRef"
  />
</template>

<script>
export default {
  data() {
    return {
      wheelConfig: {
        backgroundImage: '/static/custom/wheel-bg.png',
        pointerImage: '/static/custom/pointer.png',
        prizes: [
          { name: '超级大奖', desc: '特斯拉Model 3', probability: 0.01, image: '/static/wheelFortune/car.png', color: '#ff6b6b' },
          { name: '一等奖', desc: 'MacBook Pro', probability: 0.04, image: '/static/wheelFortune/laptop.png', color: '#4ecdc4' },
          { name: '二等奖', desc: 'iPhone 15 Pro', probability: 0.10, image: '/static/wheelFortune/phone.png', color: '#45b7d1' },
          { name: '三等奖', desc: 'AirPods Pro', probability: 0.20, image: '/static/wheelFortune/headphones.png', color: '#96ceb4' },
          { name: '四等奖', desc: '100元红包', probability: 0.30, image: '/static/wheelFortune/red-packet.png', color: '#feca57' },
          { name: '谢谢参与', desc: '下次再来', probability: 0.35, image: '/static/wheelFortune/smile.png', color: '#ff9ff3' }
        ],
        // 扇形颜色配置
        sectorColors: ['#cdd7ff', '#abbaf4'], // 默认间隔色
        useCustomColors: true // 使用自定义颜色
      }
    }
  },
  methods: {
    handleWin(data) {
      console.log('中奖了！', data)
    },
    // 手动重置转盘
    resetWheel() {
      this.$refs.wheelRef.reset()
    },
    // 设置抽奖次数
    setLotteryCount(count) {
      this.$refs.wheelRef.setLotteryCount(count)
    }
  }
}
</script>

🔧 完整配置选项

Props 属性配置

wheelConfig 转盘配置

{
  backgroundImage: String,    // 转盘背景图片路径
  pointerImage: String,       // 指针图片路径
  prizes: Array,              // 奖品数组
  sectorColors: Array,        // 默认扇形间隔色数组
  useCustomColors: Boolean    // 是否使用自定义颜色
}

配置示例：

wheelConfig: {
  backgroundImage: '/static/wheelFortune/zhuanPan.png',  // 转盘背景图
  pointerImage: '/static/wheelFortune/pointer.png',      // 指针图片
  prizes: [
    { 
      name: '一等奖',           // 奖品名称
      desc: 'iPhone 15',      // 奖品描述
      probability: 0.05,      // 中奖概率（0-1）
      image: '/static/wheelFortune/prize1.png',  // 奖品图片路径
      color: '#cdd7ff'        // 扇形颜色（可选）
    }
  ],
  sectorColors: ['#cdd7ff', '#abbaf4'], // 默认间隔色
  useCustomColors: false                 // 是否使用自定义颜色
}
      // 扇形颜色配置
      sectorColors: ['#cdd7ff', '#abbaf4'], // 默认间隔色
      useCustomColors: false                 // 是否使用自定义颜色
}

prizes 奖品配置详解

图片配置说明：

• 支持 PNG、JPG、JPEG 等常见图片格式
• 建议图片尺寸：奖品列表 60x60rpx，中奖弹窗 120x120rpx
• 图片路径建议使用绝对路径，如 /static/wheelFortune/prize1.png
• 如果未配置图片，将显示默认图片 /static/wheelFortune/default-prize.png
• 图片会自动适应容器大小，保持宽高比

扇形颜色配置说明：

• sectorColors: 默认间隔色数组，如 ['#cdd7ff', '#abbaf4']
• useCustomColors: 是否使用奖品自定义颜色，默认 false
• 当 useCustomColors: false 时，使用默认间隔色循环
• 当 useCustomColors: true 时，使用每个奖品的 color 属性
• 支持任何有效的CSS颜色值：十六进制、RGB、RGBA、颜色名称等
• 默认间隔色为蓝色系：#cdd7ff（浅蓝）和 #abbaf4（中蓝）

📡 事件系统

可用事件

事件参数详解：

onWin 事件参数

{
  prize: Object,        // 中奖奖品对象
  index: Number,        // 奖品在数组中的索引
  lotteryCount: Number  // 当前抽奖次数
}

onHistoryUpdate 事件参数

[
  {
    time: String,       // 抽奖时间
    prize: Object       // 奖品对象
  }
]

🎯 方法 API

组件方法

方法详解：

reset() 重置方法

• 重置转盘旋转角度为0
• 清除抽奖状态
• 重置抽奖次数
• 清空中奖弹窗
• 恢复抽奖按钮状态

setLotteryCount(count) 设置抽奖次数

• count: 要设置的抽奖次数
• 自动更新抽奖按钮状态
• 根据配置决定是否允许继续抽奖

🎨 样式自定义

CSS 变量

组件使用CSS变量，可通过覆盖以下变量来自定义样式：

.wheel-container {
  --wheel-primary-color: #FF6B35;           /* 主色调 */
  --wheel-secondary-color: #F7931E;         /* 次要色调 */
  --wheel-text-color: #4f72ff;              /* 文字颜色 */
  --wheel-bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 背景渐变 */
}

样式类名

自定义样式示例

/* 自定义转盘背景 */
.wheel-container {
  background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
}

/* 自定义抽奖按钮 */
.lottery-btn {
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 50rpx;
  box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.4);
}

/* 自定义中奖弹窗 */
.custom-modal .modal-content {
  border-radius: 30rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

⚠️ 注意事项

重要提醒

1. 概率总和必须为1：组件会自动验证，如果概率总和不为1会发出警告
2. 图片路径：确保图片路径正确，建议使用绝对路径 /static/...
3. 奖品数量：建议奖品数量在3-12个之间，过多会影响显示效果
4. 概率精度：建议概率保留2-3位小数，避免精度问题
5. 组件引用：使用 ref="wheelRef" 来获取组件实例
6. 事件监听：确保正确绑定事件处理器

常见问题

Q: 转盘不显示怎么办？ A: 检查图片路径是否正确，确保图片文件存在

Q: 抽奖按钮无法点击？ A: 检查 canLottery 状态，可能已达到抽奖次数限制

Q: 概率设置不生效？ A: 确保概率总和为1，检查概率值是否在0-1之间

Q: 组件方法调用失败？ A: 确保正确设置 ref="wheelRef"，并在 $nextTick 后调用

🔄 更新日志

v1.1.0

• ✅ 新增扇形颜色配置功能
• ✅ 支持默认间隔色 #cdd7ff 和 #abbaf4
• ✅ 支持每个奖品自定义扇形颜色
• ✅ 支持完全可配置的转盘抽奖
• ✅ 动态扇形计算和文字定位
• ✅ 概率验证系统
• ✅ 完整的事件回调系统
• ✅ 响应式设计和自定义大小
• ✅ 中奖弹窗和历史记录
• ✅ 抽奖次数控制和重复抽奖设置
• ✅ 丰富的样式自定义选项
• ✅ 完整的API文档和使用示例

📞 技术支持

如有问题或建议，请通过以下方式联系：

• 提交 Issue
• 发送邮件
• 技术交流群

祝您使用愉快！ 🎉