taro-luck-draw 抽奖插件

一个基于 Taro 的 ( 大转盘 / 九宫格 ) 抽奖插件

官方文档 & Demo演示

中文：https://100px.net/usage/taro.html

English：If anyone can help translate the document, please contact me ldq404@qq.com

• 在 js / jq 中使用 lucky-canvas

• 在 vue 中使用 vue-luck-draw

• 在 react 中使用 react-luck-draw

• 在 uni-app 中使用 uni-luck-draw

• 在 taro 中使用 taro-luck-draw

• 在 微信小程序 中使用 mini-luck-draw

在 Taro 中使用

安装

# npm 安装：
npm install taro-luck-draw

# yarn 安装：
yarn add taro-luck-draw

使用

• 点击查看 taro-vue2.x 示例 Demo

• 点击查看 taro-vue3.x 示例 Demo

• taro-vue

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

<script>
import { LuckyWheel, LuckyGrid } from 'taro-luck-draw/vue'
export default {
  components: { LuckyWheel, LuckyGrid },
}
</script>

• 点击查看 taro-react 示例 Demo

• taro-react

import React from 'react'
import { View } from '@tarojs/components'
import { LuckyWheel, LuckyGrid } from 'taro-luck-draw/react'

export default class Index extends React.Component {
  render () {
    return <View>

      {/* 大转盘抽奖 */}
      <LuckyWheel width="300px" height="300px" ...你的配置 />
      
      {/* 大转盘抽奖 */}
      <LuckyGrid width="300px" height="300px" ...你的配置 />

    </View>
  }
}

vue2.x 示例 Demo

<template>
  <view>
    <LuckyWheel
      ref="$lucky"
      width="600rpx"
      height="600rpx"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      :defaultStyle="defaultStyle"
      @start="startCallback"
      @end="endCallback"
    ></LuckyWheel>
  </view>
</template>

<script>
import { LuckyWheel } from 'taro-luck-draw/vue'
export default {
  components: { LuckyWheel },
  data () {
    return {
      blocks: [
        { padding: '13px', background: '#d64737' }
      ],
      prizes: [
        { title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },
        { title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },
        { title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
        { title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
        { title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
        { title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
      ],
      buttons: [
        { radius: '50px', background: '#d64737' },
        { radius: '45px', background: '#fff' },
        { radius: '41px', background: '#f6c66f', pointer: true },
        {
          radius: '35px', background: '#ffdea0',
          fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
        }
      ],
      defaultStyle: {
        fontColor: '#d64737',
        fontSize: '14px'
      },
    }
  },
  methods: {
    // 点击抽奖按钮会触发star回调
    startCallback () {
      // 调用抽奖组件的play方法开始游戏
      this.$refs.$lucky.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设拿到后端返回的中奖索引
        const index = Math.random() * 6 >> 0
        // 调用stop停止旋转并传递中奖索引
        this.$refs.$lucky.stop(index)
      }, 3000)
    },
    // 抽奖结束会触发end回调
    endCallback (prize) {
      console.log(`恭喜你获得${prize.title}`)
    },
  }
}
</script>

vue3.x 示例 Demo

<template>
  <view>
    <LuckyWheel
      ref="$lucky"
      width="600rpx"
      height="600rpx"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      :defaultStyle="defaultStyle"
      @start="startCallback"
      @end="endCallback"
    ></LuckyWheel>
  </view>
</template>

<script>
import { ref, reactive, toRefs } from 'vue'
import { LuckyWheel } from 'taro-luck-draw/vue'
export default {
  components: { LuckyWheel },
  setup () {
    const $lucky = ref(null)
    const state = reactive({
      blocks: [
        { padding: '13px', background: '#d64737' }
      ],
      prizes: [
        { title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },
        { title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },
        { title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
        { title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
        { title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
        { title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
      ],
      buttons: [
        { radius: '50px', background: '#d64737' },
        { radius: '45px', background: '#fff' },
        { radius: '41px', background: '#f6c66f', pointer: true },
        {
          radius: '35px', background: '#ffdea0',
          fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
        }
      ],
      defaultStyle: {
        fontColor: '#d64737',
        fontSize: '14px'
      },
    })
    // 点击抽奖按钮会触发star回调
    function startCallback () {
      // 调用抽奖组件的play方法开始游戏
      $lucky.value.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设拿到后端返回的中奖索引
        const index = Math.random() * 6 >> 0
        // 调用stop停止旋转并传递中奖索引
        $lucky.value.stop(index)
      }, 3000)
    }
    // 抽奖结束会触发end回调
    function endCallback (prize) {
      console.log(`恭喜你获得${prize.title}`)
    }
    return {
      ...toRefs(state),
      startCallback,
      endCallback,
      $lucky
    }
  }
}
</script>

react 示例 Demo

import React from 'react'
import { LuckyWheel } from 'taro-luck-draw/react'

export default class Index extends React.Component {
  constructor () {
    super()
    this.myLucky = React.createRef()
    this.state = {
      blocks: [
        { padding: '13px', background: '#d64737' }
      ],
      prizes: [
        { title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },
        { title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },
        { title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
        { title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
        { title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
        { title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
      ],
      buttons: [
        { radius: '50px', background: '#d64737' },
        { radius: '45px', background: '#fff' },
        { radius: '41px', background: '#f6c66f', pointer: true },
        {
          radius: '35px', background: '#ffdea0',
          fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
        }
      ],
      defaultStyle: {
        fontColor: '#d64737',
        fontSize: '14px'
      },
    }
  }
  render () {
    return <LuckyWheel
      ref={this.myLucky}
      width="300px"
      height="300px"
      blocks={this.state.blocks}
      prizes={this.state.prizes}
      buttons={this.state.buttons}
      defaultStyle={this.state.defaultStyle}
      onStart={() => { // 点击抽奖按钮会触发star回调
        // 调用抽奖组件的play方法开始游戏
        this.myLucky.current.play()
        // 模拟调用接口异步抽奖
        setTimeout(() => {
          // 假设拿到后端返回的中奖索引
          const index = Math.random() * 6 >> 0
          // 调用stop停止旋转并传递中奖索引
          this.myLucky.current.stop(index)
        }, 2500)
      }}
      onEnd={prize => { // 抽奖结束会触发end回调
        console.log(prize)
      }}
    ></LuckyWheel>
  }
}

如果您觉得这个项目还不错, 可以在 Github 上面帮我点个star ☜(ﾟヮﾟ☜)

推荐的开源项目

• 🎁 h5-Dooring 一款功能强大，高可扩展的H5可视化编辑器