在 uni-app 中使用

方式 1：通过 import 引入

1. 安装插件

• 你可以选择通过 HBuilderX 导入插件： https://ext.dcloud.net.cn/plugin?id=3499 (opens new window)

• 也可以选择通过 npm / yarn 安装

# npm 安装：
npm install @lucky-canvas/uni@latest

# yarn 安装：
yarn add @lucky-canvas/uni@latest

2. 引入并使用

<template>
  <view>
    <!-- 大转盘抽奖 -->
    <LuckyWheel width="600rpx" height="600rpx" ...你的配置 />
    <!-- 九宫格抽奖 -->
    <LuckyGrid width="600rpx" height="600rpx" ...你的配置 />
    <!-- 老虎机抽奖 -->
    <SlotMachine width="600rpx" height="600rpx" ...你的配置 />
  </view>
</template>

<script>
  // npm 下载会默认到 node_modules 里面，直接引入包名即可
  import LuckyWheel from '@lucky-canvas/uni/lucky-wheel' // 大转盘
  import LuckyGrid from '@lucky-canvas/uni/lucky-grid' // 九宫格
  import SlotMachine from '@lucky-canvas/uni/slot-machine' // 老虎机

  // 如果你是通过 HBuilderX 导入插件，那你需要指定一下路径
  // import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel' // 大转盘
  // import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid' // 九宫格
  // import SlotMachine from '@/components/@lucky-canvas/uni/slot-machin' // 老虎机

  export default {
    // 注册组件
    components: { LuckyWheel, LuckyGrid, SlotMachine },
  }
</script>

3. 我这里提供了一个最基本的 demo 供你用于尝试, 更多抽奖类型或复杂的效果可以跳转示例页面查看

<template>
  <view>
    <LuckyWheel
      ref="myLucky"
      width="600rpx"
      height="600rpx"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      :defaultStyle="defaultStyle"
      @start="startCallBack"
      @end="endCallBack"
    />
  </view>
</template>

<script>
  import LuckyWheel from '@lucky-canvas/uni/lucky-wheel'
  export default {
    components: { LuckyWheel },
    data () {
      return {
        blocks: [{ padding: '13px', background: '#617df2' }],
        prizes: [
          { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
          { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
          { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
          { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
          { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
          { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
        ],
        buttons: [
          { radius: '50px', background: '#617df2' },
          { radius: '45px', background: '#afc8ff' },
          {
            radius: '40px', background: '#869cfa',
            pointer: true,
            fonts: [{ text: '开始\n抽奖', top: '-20px' }]
          },
        ],
      }
    },
    methods: {
      // 点击抽奖按钮触发回调
      startCallBack () {
        // 先开始旋转
        this.$refs.myLucky.play()
        // 使用定时器来模拟请求接口
        setTimeout(() => {
          // 假设后端返回的中奖索引是0
          const index = 0
          // 调用stop停止旋转并传递中奖索引
          this.$refs.myLucky.stop(index)
        }, 3000)
      },
      // 抽奖结束触发回调
      endCallBack (prize) {
        // 奖品详情
        console.log(prize)
      }
    }
  }
</script>