lucky-canvas抽奖插件-大转盘-九宫格-老虎机

  地址 https://100px.net/usage/uni-app.html

  在vue中使用

npm 安装：npm install @lucky-canvas/vue@latest

 在mian.js中引入：

// 完整加载
import VueLuckyCanvas from '@lucky-canvas/vue'
Vue.use(VueLuckyCanvas)

下面是一个基本的 demo 更多抽奖类型或复杂的效果可以跳转示例页面查看

<template>
  <div>
    <LuckyWheel
    ref="myLucky"
    width="300px"
    height="300px"
    :prizes="prizes"
    :blocks="blocks"
    :buttons="buttons"
    @start="startCallback"
    @end="endCallback"
  />
  </div>
  
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      //背景区域
      blocks: [{ padding: "13px", background: "#617df2" }],
      //prizes奖品列表   top文字的位置  count奖品数量
      prizes: [
        { fonts: [{ text: "手机", 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" },
        { fonts: [{ text: "6", top: "10%" }], background: "#e9e8fe" },
        { fonts: [{ text: "7", 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: {
    // 点击抽奖按钮会触发star回调,star回调开始抽奖前
    startCallback() {
      // 调用抽奖组件的play方法开始游戏
      this.$refs.myLucky.play();
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 返回的是奖品列表，index从0开始
        const index = Math.floor(Math.random() * 9); //Math.floor(Math.random() * 9)返回一个0-8之间的随机整数
        console.log(index, "随机数");
        // 调用stop停止旋转并传递中奖索引
        this.$refs.myLucky.stop(index);
      }, 3000);
    },
    // 抽奖结束会触发end回调，end回调结束抽奖后
    endCallback(prize) {
      console.log(prize);
    }
  }
};
</script>