更新记录

1.0.0（2026-07-13）

1.0.0

• 新增大转盘抽奖组件 uni-luck-wheel
• 新增九宫格抽奖组件 uni-luck-grid
• 新增营销抽奖活动页组件 uni-lottery-campaign
• 支持活动信息、剩余次数、奖品池、中奖记录、活动规则和中奖弹窗
• 支持服务端指定中奖结果后播放抽奖动画
• 新增 mock adapter，方便纯前端快速预览
• 新增 uniCloud adapter，方便接入云函数
• 新增 uniCloud 阿里云云函数骨架和数据库 schema

平台兼容性

uni-app(3.8.0)

uni-luck-draw 前端抽奖组件

uni-luck-draw 是一个可发布到 uni-app 插件市场的营销抽奖活动解决方案，包含大转盘、九宫格、活动页、中奖弹窗、中奖记录、规则展示和 uniCloud 云端骨架。基础抽奖组件只负责动画，活动编排组件负责把抽奖次数、记录、结果弹窗和数据适配器串起来，适合活动营销、积分抽奖、会员福利、签到抽奖等场景。

特性

• 支持 Vue2 / Vue3 的 uni-app 项目。
• 支持 H5、App Vue、主流小程序端。
• 支持服务端指定中奖结果，也支持前端按权重随机。
• 抽奖动画、颜色、按钮文案、奖品图文均可配置。
• 组件内部状态闭环，业务侧通过事件和方法接入，低耦合、易维护。
• 内置 uni-lottery-campaign 完整活动模板，可直接作为营销活动页二开。
• 提供 lottery-campaign easycom 别名组件，适配插件市场组件目录校验。
• 提供 mock adapter、uniCloud adapter 和云函数/数据库 schema 骨架。

安装

在插件市场导入后，或手动将本目录放入项目：

uni_modules/uni-luck-draw

uni-app 会自动扫描 uni_modules 下的组件，无需额外注册。

完整活动模板

<template>
  <uni-lottery-campaign
    :activity="activity"
    :records="records"
    @finish="handleFinish"
    @view-records="handleViewRecords"
  />
</template>

<script>
export default {
  data() {
    return {
      activity: {
        title: '618 会员福利抽奖',
        subtitle: '抽会员权益、优惠券和积分礼包。',
        drawType: 'wheel',
        remainingTimes: 3,
        totalParticipants: 2688
      },
      records: []
    }
  },
  methods: {
    handleFinish(result) {
      console.log('中奖结果', result.prize)
    },
    handleViewRecords(records) {
      console.log('全部记录', records)
    }
  }
}
</script>

接入 uniCloud

import { createUniCloudLotteryAdapter } from '@/uni_modules/uni-luck-draw/js_sdk/uni-luck-draw/cloud-adapter.js'

export default {
  data() {
    return {
      adapter: createUniCloudLotteryAdapter({
        activityId: 'demo-summer-lottery'
      })
    }
  }
}

<uni-lottery-campaign :adapter="adapter" />

云函数和数据库 schema 位于：

uni_modules/uni-luck-draw/uniCloud-aliyun

包含：

• uni-luck-draw-activity：读取活动配置
• uni-luck-draw-records：读取用户中奖记录
• uni-luck-draw-draw：执行抽奖、扣减次数、写入记录
• uni-luck-draw-activities.schema.json
• uni-luck-draw-records.schema.json
• uni-luck-draw-user-quotas.schema.json

大转盘组件

<template>
  <uni-luck-wheel
    ref="wheel"
    :prizes="prizes"
    :auto-start="false"
    @start="drawByServer"
    @finish="handleFinish"
    @error="handleError"
  />
</template>

<script>
export default {
  data() {
    return {
      prizes: [
        { id: 'vip', name: '会员月卡', weight: 1 },
        { id: 'coupon', name: '优惠券', weight: 10 },
        { id: 'point', name: '100积分', weight: 20 },
        { id: 'thanks', name: '谢谢参与', weight: 50 }
      ]
    }
  },
  methods: {
    async drawByServer() {
      const result = await this.requestDraw()
      const index = this.prizes.findIndex(item => item.id === result.prizeId)
      this.$refs.wheel.start(index)
    },
    requestDraw() {
      return Promise.resolve({ prizeId: 'coupon' })
    },
    handleFinish(prize) {
      uni.showToast({ title: `抽中：${prize.name}`, icon: 'none' })
    },
    handleError(error) {
      console.warn(error)
    }
  }
}
</script>

大转盘 Props

大转盘 Methods

九宫格组件

<template>
  <uni-luck-grid
    ref="grid"
    :prizes="prizes"
    :target-id="targetId"
    @finish="handleFinish"
  />
</template>

<script>
export default {
  data() {
    return {
      targetId: 'point',
      prizes: [
        { id: 'vip', name: '会员月卡' },
        { id: 'coupon', name: '优惠券' },
        { id: 'point', name: '100积分' },
        { id: 'gift', name: '实物礼品' },
        { id: 'coin', name: '金币' },
        { id: 'card', name: '权益卡' },
        { id: 'thanks', name: '谢谢参与' },
        { id: 'again', name: '再来一次' }
      ]
    }
  },
  methods: {
    handleFinish(prize) {
      uni.showModal({ title: '抽奖结果', content: prize.name, showCancel: false })
    }
  }
}
</script>

九宫格 Props

九宫格 Methods

Events

两个组件保持一致的事件设计：

奖品数据结构

{
  id: 'coupon',
  name: '优惠券',
  image: '/static/coupon.png',
  weight: 10,
  disabled: false
}

weight 仅在未指定 targetIndex 和 targetId 时生效。正式活动建议由服务端完成抽奖并返回中奖奖品，前端只负责展示动画。

设计建议

• 真实营销活动请使用 :auto-start="false"，点击后先请求服务端抽奖接口，再调用 start(index)。
• 前端权重随机只适合演示或非严肃业务。
• 奖品数量过多时建议使用九宫格，奖品名称保持 4 到 6 个中文字符可获得更稳定的展示效果。