h5活动九宫格转盘-vue

• 实现的效果
  
• 操作步骤

1. 首先安装插件

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

2. 在main.js中引入

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

3. 最后在组件内使用

<LuckyGrid
        ref="myLucky"
        width="22.68rem"
        height="22.68rem"
        rows="4"
        cols="4"
        :prizes="prizes"
        :blocks="blocks"
        :buttons="buttons"
        :defaultStyle="defaultStyle"
        :activeStyle="activeStyle"
        :defaultConfig="defaultConfig"
        @start="startCallback"
        @end="endCallback"
      />

data() {
    return {
      blocks: [
        {
          padding: '1.5rem',
          imgs: [
            {
              src: require(`@/assets/LuckyDraw/bg2.png`),
              width: '22.68rem',  //为了h5适配,1rem=16px
              height: '22.68rem',
            },
          ],
        },
      ],
      prizes: [],
      //中奖标记
      activeStyle: {
        background: 'transparent',
      },
      //默认样式
      defaultStyle: {
        borderRadius: '0.62rem', //圆角20px
      },
      //默认配置
      defaultConfig: {
        gutter: '0.18rem', //格子之间的缝隙2px
      },
    }
  },

methods:{
getPrizesList() {
      const prizes = []
      const data = [
        {
          x: 0,
          y: 0,
          value: '10000Coins',
          src: require(`@/assets/LuckyDraw/10000coins.png`),
        },
        {
          x: 1,
          y: 0,
          value: '+0%',
          src: require(`@/assets/LuckyDraw/+0%.png`),
        },
        {
          x: 2,
          y: 0,
          value: '+2000%',
          src: require(`@/assets/LuckyDraw/+2000%.png`),
        },
        {
          x: 3,
          y: 0,
          value: '+50%',
          src: require(`@/assets/LuckyDraw/+50%.png`),
        },
        {
          x: 3,
          y: 1,
          value: '+0%',
          src: require(`@/assets/LuckyDraw/+0%.png`),
        },
        {
          x: 3,
          y: 2,
          value: '+100%',
          src: require(`@/assets/LuckyDraw/+100%.png`),
        },
        {
          x: 3,
          y: 3,
          value: '+200%',
          src: require(`@/assets/LuckyDraw/+200%.png`),
        },
        {
          x: 2,
          y: 3,
          value: '+0%',
          src: require(`@/assets/LuckyDraw/+0%.png`),
        },
        {
          x: 1,
          y: 3,
          value: '+1000%',
          src: require(`@/assets/LuckyDraw/+2000%.png`),
        },
        {
          x: 0,
          y: 3,
          value: '+500%',
          src: require(`@/assets/LuckyDraw/+500%.png`),
        },
        {
          x: 0,
          y: 2,
          value: '+300%',
          src: require(`@/assets/LuckyDraw/+300%.png`),
        },
        {
          x: 0,
          y: 1,
          value: '+0%',
          src: require(`@/assets/LuckyDraw/+0%.png`),
        },
      ]
      data.forEach((item) => {
        prizes.push({
          x: item.x,
          y: item.y,

          imgs: [
            {
              src: require(`@/assets/LuckyDraw/noChange.png`),
              width: '79px',
              height: '79px',
              activeSrc: require(`@/assets/LuckyDraw/change.png`),
            },
            {
              src: item.src,
              width: '50px',
              height: '45px',
              top: '7px',
            },
          ],
          fonts: [
            {
              text: item.value,
              top: '51px',
              fontColor: '#fff',
              fontSize: '10px',
              fontStyle: 'Poppins-SemiBold, Poppins',
              fontWeight: '500',
            },
          ],
        })
      })
      this.prizes = prizes
    },
}

// 点击抽奖按钮会触发star回调
startCallback(e,button) {
      // 调用抽奖组件的play方法开始游戏
      console.log(e,button,7777);
      this.$refs.myLucky.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = 7
        // 调用stop停止旋转并传递中奖索引
        this.$refs.myLucky.stop(index)
      }, 1000)
    },

// 抽奖结束会触发end回调
 endCallback(prize) {
      console.log(prize)
      setTimeout(() => {
       ......
      }, 500)
    },

• 具体参考地址

1. https://100px.net/usage/vue.html
2. https://blog.csdn.net/crazy_jialin/article/details/115613060