lucky-canvas vue抽奖页面

公司要求写一个转盘抽奖的页面，在尝试自己js写和各种demo测试后决定采用lucky-canvas进行编写

基于 JS + Canvas 实现的【大转盘 & 九宫格 & 老虎机】抽奖，致力于为 WEB 前端提供一个功能强大且专业可靠的营销组件，只需要通过简单配置即可实现自由化定制，帮助你快速的完成产品需求

总体来说还算好用

一、安装

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

# 或者 yarn 安装
yarn add @lucky-canvas/vue@latest

main.js中全局引入

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

二、使用

demo  -----官网

<template>
  <LuckyWheel
    ref="myLucky"
    width="300px"
    height="300px"
    :prizes="prizes"
    :blocks="blocks"
    :buttons="buttons"
    @start="startCallback"
    @end="endCallback"
  />
</template>

<script>
export default {
  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: '35%',
        background: '#8a9bf3',
        pointer: true,
        fonts: [{ text: '开始', top: '-10px' }]
      }],
    }
  },
  methods: {
    // 点击抽奖按钮会触发star回调
    startCallback () {
      // 调用抽奖组件的play方法开始游戏
      this.$refs.myLucky.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = 0
        // 调用stop停止旋转并传递中奖索引
        this.$refs.myLucky.stop(index)
      }, 3000)
    },
    // 抽奖结束会触发end回调
    endCallback (prize) {
      console.log(prize)
    },
  }
}
</script>

三、自己的demo

采用了vant组件

自己使用过程中注意事项有以下几点

（1）指针的图片采用切图 但是原来的三个样式还是要留下 采用最后的imgs进行覆盖，慢慢调整图片大小，不然会出现无法出发按钮点击事件的情况出现（如果有好方法可以叫我一下毕竟我也是第一次使用）

（2）采用轮盘和指针的背景图片需要加入requier属性没不然不会识别出现报错的情况

（3）轮盘背景图需要中缝在正中间，不过应该可以使用默认设置的偏移属性更改旋转后的背景图位置

<template>
  <div class="box">
    <LuckyWheel
    class="wheel"
      ref="myLucky"
      width="20rem"
      height="20rem"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      @start="startCallback"
      @end="endCallback"
    />
    <van-dialog v-model="show">
      <p>恭喜您抽中奖品{{ prize }}，请填写邮寄地址，将于3个工作日内发出</p>
    </van-dialog>
    <!-- 抽奖次数限制 -->
    <van-notify v-model="show2" type="success">
      <span>只有一次抽奖机会哦</span>
    </van-notify>
  </div>
</template>
<script>
export default {
  // 组件名称
  name: "test1",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      show: false, //中奖弹框
      show2: false, //抽奖限制
      prize: undefined, //奖品
      LuckyClick: 2, //抽奖次数
      // 背景
      blocks: [
        {
          padding: "10px",
          imgs: [
            {
              src: require("../assets/bjt.png"),
              width: "100%",
              rotate: true,
            },
          ],
        },
      ],
      // 奖品
      prizes: [
        // { background: '#e9e8fe', fonts: [{ text: '0' }] },
        // { background: '#b8c5f2', fonts: [{ text: '1' }] },
        // { background: '#e9e8fe', fonts: [{ text: '2' }] },
        // { background: '#b8c5f2', fonts: [{ text: '3' }] },
        // { background: '#e9e8fe', fonts: [{ text: '4' }] },
        // { background: '#b8c5f2', fonts: [{ text: '5' }] },
        // { background: '#e9e8fe', fonts: [{ text: '6' }] },
        // { background: '#b8c5f2', fonts: [{ text: '7' }] },
        { name: "辣条一根" },
        { name: "五毛钱" },
        { name: "三块" },
        { name: "卫龙" },
        { name: "充电宝" },
        { name: "谢谢惠顾" },
        { name: "可乐" },
        { name: "雪碧" },
      ],
      // 抽奖按钮
      buttons: [
        { radius: "20%", background: "#617df2" },//按钮内圈
        { radius: "15%", background: "#afc8ff" },//按钮外圈
        // {
        //   radius: "10%",
        //   background: "#869cfa",
        //   pointer: true,
        //    fonts: [{ text: "开始", top: "-10px" }],
        // },  //字体

        // 按钮是需要进行设置的
        // imgs只是进行覆盖显示，关键还是后面的button
       {
        imgs:[{
          src: require("../assets/click.png"),
          top:"-4rem",
          width:'4rem',
          height:"6rem"
        }]
       }
      ],
      // 默认配置
      defaultConfig: {
        gutter: "0",
      },
    };
  },
  //生命周期钩子函数
  // 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  created() {},
  mounted() {},
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 调用后端接口获取该账号抽奖次数LuckyClick=1
    // 点击抽奖按钮会触发star回调
    startCallback() {
      // 如果没有输入手机号弹出手机号接口进行查询并且返回抽奖次数

      // 抽奖次数不足时候显示
      if (this.LuckyClick == 0) {
        console.log("抽奖次数没有了");
        this.show2 = true;
        setTimeout(() => {
          this.show2 = false;
        }, 2000);

        return;
      }
      // 调用抽奖组件的play方法开始游戏
      this.$refs.myLucky.play();
      this.LuckyClick--;
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        // 调用接口后端返回中奖索引
        const index = Math.floor(Math.random() * 8);
        // 调用stop停止旋转并传递中奖索引
        console.log(index);
        this.$refs.myLucky.stop(index);
      }, 3000);
    },
    // 抽奖结束会触发end回调
    endCallback(prize) {
      this.show = true;
      this.prize = prize.name;
      console.log("奖品", prize.name);
    },
  },
};
</script>
<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
.box{
  width: 100vw;
  height: 100vh;
  // position: relative;
  .wheel{
    margin:  auto ;
    margin-top: 20%;
  }
}
</style>

四、借鉴的网站

lucky-canvas（大转盘）使用文档_crazyJialin的博客-CSDN博客

这里写的更加详细，手把手教学