更新记录

1.0.0（2026-09-09） 下载此版本

1. 首次发布：幸运转盘抽奖组件（底座 + 灯圈闪烁 + 可旋转转盘，由 wheel-board / wheel-panel 两个组件组成）
2. wheel-board 组合底座图、双帧灯圈闪烁与 wheel-panel，暴露 draw / spin-end 事件
3. wheel-panel 负责奖品自适应扇形布局、扇区分隔线与旋转动画
4. 精准停位：ref 调用 spinTo(prize) 支持奖品对象或奖品 ID，转动 6 整圈后停到对应扇区并触发 spin-end
5. stopSpin() 支持抽奖接口异常时复位旋转锁定状态
6. prizeList / remainCount 可配：自动处理"暂无奖品 / 抽奖次数已用完"提示，旋转期间防重复点击
7. 底座 / 灯圈 / 按钮图片内置插件 static 目录
8. 视觉换肤：bg-img / ring-img-a / ring-img-b / draw-btn-img 四个 props 自定义底座、两帧灯圈与抽奖按钮图，不传使用插件内置默认图（也可直接替换 static 同名文件）
9. 抽奖按钮文案可配：draw-text（默认"抽奖"）经 wheel-board 透传给内部 wheel-panel
10. 提示文案可配：empty-text（默认"暂无奖品"）、no-chance-text（默认"抽奖次数已用完"）经 wheel-board 透传，便于接入方做国际化或自定义提示
11. 文字与图片样式可配：prize-text-size / prize-text-color（奖品名）、prize-img-size（奖品图宽高）、draw-text-size / draw-text-color（按钮文字），均经 wheel-board 透传，不传保持插件默认

平台兼容性

uni-app(5.24)

其他

Wheel Board 幸运转盘

一款基于 uni-app（Vue3）的幸运转盘抽奖组件。整体由 wheel-board（底座 + 灯圈闪烁 + 转盘容器） 与内部 wheel-panel（可旋转奖品转盘 + 抽奖按钮） 组成，内置转动动画与"停到指定奖品"的精准停位逻辑，开箱即用。

🚀 功能特性

• ✅ 组合式转盘：wheel-board 封装底座图、灯圈闪烁与转盘，wheel-panel 负责扇形布局与旋转逻辑，二者可拆开独立使用
• ✅ 精准停位：通过 ref 调用 spinTo(prize) 传入奖品对象或奖品 ID，转盘自动旋转并停在对应奖品扇区
• ✅ 灯圈闪烁：两帧灯圈图交替闪烁（静止不随转盘旋转），营造"开奖氛围"
• ✅ 抽奖状态控制：自动处理"无奖品 / 次数用尽"提示，旋转期间点击抽奖按钮不重复触发；接口异常可调 stopSpin() 复位
• ✅ 奖品自适应排布：奖品数量 4 / 8 / 以上自动调节锚点半径与缩放，扇区文字图片沿半径方向展示
• ✅ 事件完整：点击抽奖派发 draw，转动结束派发 spin-end（回传中奖奖品）
• ✅ 视觉换肤可配：底座背景图与两帧灯圈图通过 bg-img / ring-img-a / ring-img-b 传自定义图片即可换肤，不传使用插件内置默认图
• ✅ 静态资源内置：底座 / 灯圈 / 抽奖按钮图片均随插件 static 目录发布，可直接在 DCloud 市场发布使用
• ✅ 多端适配：纯 view/text/image + CSS 动画实现，适配 H5 / App-vue / 小程序

📦 安装引入

1. 将 uni_modules/wheel-board 整个目录复制到项目的 uni_modules 目录下；
2. 开启 easycom 时可直接使用 <wheel-board> 标签，无需手动引入；
3. 若未开启 easycom，可在页面中手动引入：

<script setup>
import WheelBoard from "@/uni_modules/wheel-board/components/wheel-board/wheel-board.vue";
</script>

内部组件 wheel-panel 随插件一并提供：开启 easycom 时亦可用 <wheel-panel> 直接引入；wheel-board 内部通过相对路径引用，不依赖 easycom。

🚀 快速开始

<template>
  <view>
    <!-- 基础用法：传入奖品列表与剩余次数 -->
    <wheel-board
      ref="wheelRef"
      :prize-list="prizeList"
      :remain-count="remainCount"
      @draw="handleDraw"
      @spin-end="handleSpinEnd"
    />
  </view>
</template>

<script setup>
import { ref } from "vue";

const wheelRef = ref(null);
const prizeList = ref([
  { id: 1, prizeName: "华为mate30", prizeImg: "https://.../a.png" },
  { id: 2, prizeName: "谢谢参与", prizeImg: "https://.../b.png" },
]);
const remainCount = ref(3);

// 点击抽奖按钮：通常在此请求后端接口，拿到中奖结果后调用 spinTo
const handleDraw = async () => {
  const res = await drawApi();
  // 传奖品对象（含 prizeName）或仅奖品 id 均可
  wheelRef.value?.spinTo(res);
};

// 转动结束：回传中奖奖品，可在此弹出结果弹窗
const handleSpinEnd = (prize) => {
  console.log("中奖奖品：", prize);
};
</script>

🔧 Props 属性配置

视觉资源（可选换肤）

文字与奖品图样式（可选）

<!-- 样式定制示例：按钮/奖品文字与奖品图尺寸均可自定义（不传则保持插件默认） -->
<wheel-board
  draw-text="GO"
  draw-text-size="36rpx"
  draw-text-color="#FFD700"
  prize-text-size="24rpx"
  prize-text-color="#333333"
  prize-img-size="120rpx"
  :prize-list="prizeList"
  :remain-count="remainCount"
/>

<!-- 换肤示例：底座/灯圈/按钮图均可自定义（不传则保持插件默认） -->
<wheel-board
  bg-img="https://xxx.com/your-base.png"
  ring-img-a="/static/your-ring-a.png"
  ring-img-b="/static/your-ring-b.png"
  draw-btn-img="https://xxx.com/your-btn.png"
  :prize-list="prizeList"
  :remain-count="remainCount"
/>

自定义图片建议与原默认图保持相同的比例与圆心位置：底座需满足"白圆圆心在 (50%, 44.8%) 附近"，灯圈需覆盖底座蓝色环带，否则需同步微调 .wheel-stage-core 的 top / scale。

prizeList 项结构参考：

📡 Events 事件

🧰 实例方法

给 <wheel-board> 加 ref 后可调用（内部透传到 wheel-panel）：

若直接使用 wheel-panel，以上方法同样由其暴露。

🎨 样式自定义

组件内部类可在外部覆盖（scoped 样式需 :deep() 穿透）：

wheel-board（.wheel-stage 内）

wheel-panel（.wheel-wrap 内）

⚠️ 使用注意事项

1. 停位依赖 id：spinTo 通过 id 在 prizeList 中查找对应扇区，请确保奖品数据已提前渲染；未命中时默认停在首个扇区
2. 剩余次数：remainCount 由父组件维护，可在 draw 回调里调接口、在 spin-end 回调里刷新次数
3. 转动时长：内置转动 6 整圈 + 停位，约 4.2s，spin-end 在动画结束后触发
4. 图片替换：底座与两帧灯圈通过 bg-img / ring-img-a / ring-img-b、抽奖按钮通过 draw-btn-img props 传自定义图片换肤；不传时使用插件 static 目录内置图（也可直接替换 static/lp-bg.png 等同名文件）。替换后若对位不准，微调 .wheel-stage-core 中的 top / scale
5. 避免与组件标签同名：页面（<script setup>）内不要定义与标签同名的局部变量或函数（如 wheelBoard），否则 Vue 编译时局部变量优先于 easycom 组件，<wheel-board> 会被解析成该局部变量而非组件，请使用不与标签冲突的命名
6. 仅转盘骨架：本插件不含弹层/结果弹窗等业务 UI，中奖展示由父页面自行实现（可参考 spin-end 回传的奖品）

📞 更新日志

v1.0.0（2026-09-09）

• 🎉 首个版本发布：以 uni_modules 插件（easycom 自动引入）形态封装幸运转盘
• wheel-board 组合底座图 + 双帧灯圈闪烁 + wheel-panel 转盘，暴露 draw / spin-end 事件与 spinTo / stopSpin 实例方法
• wheel-panel 支持奖品自适应扇形布局、扇区分隔线、旋转动画与精准停位
• 底座 / 灯圈 / 按钮图片内置插件 static 目录，发布即用
• 提供 prizeList（含 prizeName / prizeImg）与 remainCount 配置，点击抽奖自动处理空奖品与次数用尽提示
• 支持换肤：bg-img / ring-img-a / ring-img-b 自定义底座与两帧灯圈图，不传使用插件内置默认图
• 抽奖按钮文案可配：draw-text 自定义按钮文字，默认"抽奖"

祝您使用愉快！ 🎉