更新记录

1.0.1（2026-06-29） 下载此版本

• 优化中奖弹窗 nny-result 入场动画（分层递进、光效、纸屑、扫光）
• 内置演示图标迁移至插件 static/icons，导入即可使用
• 新增 index.js 统一导出工具函数与演示数据
• 完善插件市场使用说明文档

平台兼容性

uni-app(4.18)

nny-lottery 抽奖组件

一套开箱即用的 uni-app 抽奖组件库，包含 转盘抽奖、九宫格抽奖、中奖结果弹窗 三个组件。轻奢紫韵 UI，一套代码适配微信小程序、H5、Android/iOS App。

功能特性

安装

方式一：插件市场导入（推荐）

1. 打开 DCloud 插件市场，搜索 nny-lottery
2. 点击「使用 HBuilderX 导入插件」或「下载插件 ZIP」
3. 导入后项目目录出现 uni_modules/nny-lottery 即安装成功

方式二：手动复制

将 uni_modules/nny-lottery 整个文件夹复制到目标项目的 uni_modules 目录下。

要求：uni-app Vue3 项目，HBuilderX 3.6+

快速开始

组件通过 easycom 自动注册，无需 import 组件，直接在页面中使用。

转盘抽奖

<template>
  <view>
    <nny-wheel
      ref="wheelRef"
      :prizes="prizes"
      :chances="chances"
      @end="onEnd"
      @no-chance="onNoChance"
    />
    <nny-result
      :visible="showResult"
      @update:visible="showResult = $event"
      :prize="resultPrize"
      :is-win="isWin"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chances: 3,
      showResult: false,
      resultPrize: null,
      isWin: true,
      prizes: [
        { name: '10元券', icon: 'https://example.com/coupon.png', weight: 20 },
        { name: '100积分', icon: 'https://example.com/coin.png', weight: 30 },
        { name: '谢谢参与', icon: 'https://example.com/smile.png', weight: 50 }
        // 建议 4~8 个奖品，体验最佳
      ]
    }
  },
  methods: {
    onEnd({ prize }) {
      this.resultPrize = prize
      this.isWin = prize.name !== '谢谢参与'
      this.showResult = true
      if (this.chances > 0) this.chances--
    },
    onNoChance() {
      uni.showToast({ title: '今日次数已用完', icon: 'none' })
    }
  }
}
</script>

九宫格抽奖

<template>
  <nny-grid
    :prizes="prizes"
    :chances="5"
    :rounds="4"
    :speed="70"
    @end="onEnd"
  />
</template>

<script>
export default {
  data() {
    return {
      // 九宫格固定 8 个奖品（中心为抽奖按钮）
      prizes: [
        { name: '一等奖', icon: '/static/prize1.png', weight: 1 },
        { name: '二等奖', icon: '/static/prize2.png', weight: 3 },
        { name: '三等奖', icon: '/static/prize3.png', weight: 5 },
        { name: '优惠券', icon: '/static/coupon.png', weight: 15 },
        { name: '积分', icon: '/static/coin.png', weight: 20 },
        { name: '饮品券', icon: '/static/drink.png', weight: 20 },
        { name: '周边', icon: '/static/gift.png', weight: 15 },
        { name: '谢谢参与', icon: '/static/thanks.png', weight: 26 }
      ]
    }
  },
  methods: {
    onEnd({ prize }) {
      console.log('抽中:', prize.name)
    }
  }
}
</script>

使用插件内置演示数据（可选）

插件提供了可直接使用的演示奖品数据与图标：

import { DEMO_WHEEL_PRIZES, DEMO_GRID_PRIZES } from '@/uni_modules/nny-lottery'

export default {
  data() {
    return {
      prizes: DEMO_WHEEL_PRIZES  // 或 DEMO_GRID_PRIZES
    }
  }
}

组件 API

nny-wheel 转盘

Props

Events

Methods（通过 ref 调用）

<nny-wheel ref="wheelRef" :prizes="prizes" />

this.$refs.wheelRef.play(2)   // 转到第 3 个奖品
this.$refs.wheelRef.reset()   // 重置

nny-grid 九宫格

Props

Events

同 nny-wheel（start / end / no-chance）。

Methods

nny-result 中奖弹窗

Props

Events

用法示例

<!-- Vue3 双向绑定写法 -->
<nny-result
  v-model:visible="showResult"
  :prize="resultPrize"
  :is-win="isWin"
  confirm-text="立即领取"
  :mask-closable="false"
  @confirm="handleClaim"
/>

<!-- 兼容写法 -->
<nny-result
  :visible="showResult"
  @update:visible="showResult = $event"
  :prize="resultPrize"
  :is-win="isWin"
/>

奖品数据结构

{
  name: '10元券',              // 【必填】奖品名称
  icon: 'https://.../a.png',   // 【推荐】图标地址（网络图或本地路径）
  weight: 20,                  // 【可选】权重，越大越容易中，默认 1
  desc: '满50元可用',           // 【可选】弹窗描述
  tag: '热门',                 // 【可选】角标文字
  color: '#7C3AED'             // 【可选】角标背景色
}

图标路径说明：

服务端控制中奖（推荐）

实际业务中，中奖结果应由服务端决定，前端只负责展示动画：

<template>
  <nny-wheel
    ref="wheelRef"
    :prizes="prizes"
    :disabled="drawing"
    @start="onStart"
    @end="onEnd"
  />
</template>

<script>
export default {
  data() {
    return {
      drawing: false,
      prizes: [/* ... */]
    }
  },
  methods: {
    async onStart() {
      this.drawing = true
      try {
        const res = await uni.request({ url: 'https://api.example.com/lottery/draw' })
        const index = res.data.prizeIndex
        this.$refs.wheelRef.play(index)
      } catch (e) {
        this.drawing = false
        uni.showToast({ title: '抽奖失败', icon: 'none' })
      }
    },
    onEnd({ prize }) {
      this.drawing = false
      // 展示结果弹窗...
    }
  }
}
</script>

注意：若使用 targetIndex 属性，需在用户点击之前设置好值；更推荐用 play(index) 在接口返回后触发。

工具函数

可从插件入口按需导入：

import {
  pickByWeight,      // 按权重随机选索引
  calcWheelAngle,    // 计算转盘目标角度
  buildGridSteps,    // 生成九宫格跑马灯路径
  WHEEL_GRADIENTS,   // 默认扇区配色
  DEMO_WHEEL_PRIZES, // 转盘演示数据
  DEMO_GRID_PRIZES,  // 九宫格演示数据
  THEME              // 主题色常量
} from '@/uni_modules/nny-lottery'

平台兼容

目录结构

uni_modules/nny-lottery/
├── components/
│   ├── nny-wheel/       # 转盘组件
│   ├── nny-grid/        # 九宫格组件
│   └── nny-result/      # 中奖弹窗
├── common/
│   └── lottery-utils.js # 工具函数与演示数据
├── static/
│   └── icons/           # 内置 SVG 图标
├── index.js             # 插件入口
├── package.json
├── readme.md
└── changelog.md

发布到插件市场（作者）

1. 用 HBuilderX 打开包含本插件的项目
2. 在项目管理器中找到 uni_modules/nny-lottery
3. 右键 → 发布到插件市场（或登录 ext.dcloud.net.cn 上传 ZIP）
4. 上传时只需包含 uni_modules/nny-lottery 目录内容
5. 填写插件介绍、截图（建议包含转盘、九宫格、中奖弹窗三张效果图）

演示项目

本仓库为完整演示工程，导入插件后可参考以下页面：

HBuilderX 运行到微信开发者工具 / 浏览器 / 真机即可预览。

常见问题

Q：组件不显示？
确认项目为 Vue3，且 uni_modules/nny-lottery 目录完整。easycom 默认自动扫描 uni_modules，一般无需额外配置。

Q：小程序图标不显示？
网络图需在小程序后台配置 downloadFile 合法域名；或改用 /uni_modules/nny-lottery/static/icons/ 下的本地 SVG。

Q：如何自定义扇区颜色？
给 nny-wheel 传入 colors 数组，每项为 CSS 渐变字符串，参考 WHEEL_GRADIENTS。

Q：九宫格奖品顺序？
8 个奖品按顺时针排列：上排左→右、右列上→下、下排右→左、左列下→上（中心为按钮）。

版权声明

插件内置 SVG 图标仅供演示，商用请替换为自有素材。

更新日志

见 changelog.md