前端实现转盘抽奖 - 使用 lucky-canvas 插件

需求背景

要求实现转盘转动抽奖的功能：

1. 只有正确率大于等于 80% 才可以进行抽奖；
2. “谢谢参与”概率为 90%，“恭喜中奖”概率为 10%；

需求实现

实现过程图片示意

实现代码

安装插件

npm install @lucky-canvas/vue@latest

main.js 全局引入组件

import VueLuckyCanvas from '@lucky-canvas/vue'
Vue.use(VueLuckyCanvas)

实现代码

<template>
  <div class="exam-result">
    <div class="info">
      <div class="progress">
        <nut-circleprogress
            :progress="(correct / total).toFixed(1) * 100"
            :is-auto="true"
            color="#ff4d4f"
            path-color="#ffeded"
        >
          <div class="progressDiv">
            <div class="accuracy">正确率{{ (correct / total).toFixed(1) * 100 }}%</div>
          </div>
        </nut-circleprogress>
      </div>
    </div>
    <div class="content">
      <div class="result-table">
        <div style="padding: 10px 10px 10px 15px">试卷分析</div>
      </div>
      <div class="result-table">
        <div class="item">
          <div class="title">题目总量:</div>
          <div class="total">{{ total }}</div>
          <div class="unit">题</div>
        </div>
      </div>
      <div class="result-table">
        <div class="item">
          <div class="title">正确题数:</div>
          <div class="correct">{{ correct }}</div>
          <div class="unit">题</div>
        </div>
        <div class="item">
          <div class="title">错误题数:</div>
          <div class="error">{{ total - correct }}
          </div>
          <div class="unit">题</div>
        </div>
      </div>
    </div>
    <div v-if="examType === 'challenge' && (correct / total).toFixed(1) >= 0.8" class="lottery_draw_btn">恭喜您获得抽奖资格 <nut-button type="primary" size="mini" @click="toLotteryDraw">点击进行抽奖</nut-button></div>
    <nut-dialog teleport="#app" :title="isShowlotteryDraw ? '点击“开始”抽奖' : ''" content="" v-model:visible="dialogVisible" customClass="task" :noCancelBtn="true" :noOkBtn="true" :closeOnClickOverlay="false">
      <nut-icon name="close" @click="dialogVisible = false" />
      <LuckyWheel
        v-if="isShowlotteryDraw"
        class="myLucky"
        ref="myLuckyRef"
        width="320px"
        height="320px"
        :prizes="prizes"
        :blocks="blocks"
        :buttons="buttons"
        @start="startCallback"
        @end="endCallback"
      />
      <div v-else class="result" :style="{'--color': lotteryDrawIndex === 1 ? 'red' : '#000'}">{{ lotteryDrawIndex === 1 ? "恭喜中奖" : "谢谢参与" }}</div>
    </nut-dialog>
  </div>
  <fallback></fallback>
</template>

<script>
import {
  reactive, toRefs, ref, getCurrentInstance
} from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'result',
  setup() {
    // const myLuckyRef = ref(null) // 【ref问题】我的代码里这种办法取不到 ref，使用 getCurrentInstance 取 ref
    const instance = getCurrentInstance() // 【ref解决】使用 getCurrentInstance 取 ref
    const route = useRoute()
    const state = reactive({
      lotteryDrawIndex: 0, // 最终转盘定格的索引
      isShowlotteryDraw: true, // 是否抽奖完成
      // 转盘背景配置
      blocks: [{
        padding: '20px',
        imgs: [{
          // src: 'https://img.iwave.net.cn/jeep/51c95637a377c3a12d09abe8b0f975e6.png',
          src: require('@/assets/images/lottery_draw.png'),
          width: 320,
          height: 320,
          rotate: true
        }]
      }],
      // 每个扇形区域奖品配置
      prizes: [...Array(10).keys()].map((index) => ({
        fonts: [
          {
            text: index % 2 === 0 ? '谢谢参与' : '恭喜中奖',
            top: '15%',
            fontSize: '15px',
            fontColor: '#ed1c24',
          },
        ],
        background: index % 2 === 0 ? '#fff5cc' : '#e9d6e9',
      })),
      // 抽奖按钮配置
      buttons: [
        { radius: '50px', background: '#d034ac' },
        { radius: '45px', background: '#fe97b2' },
        {
          radius: '35px',
          background: '#f04a07',
          pointer: true,
          fonts: [{ text: '开始', top: '-10px', fontColor: '#fff' }]
        }
      ],
      // 抽奖弹框是否展示
      dialogVisible: false
    })
    // 获取正确题数、总题数
    const { correct, total, examType } = route.query

    const toLotteryDraw = () => {
      state.dialogVisible = true
    }

    // 点击抽奖按钮会触发star回调
    const startCallback = () => {
      console.log('"开始抽奖"----', '开始抽奖')
      // 调用抽奖组件的play方法开始游戏
      // console.log('myLucky.value----', myLuckyRef.value) // 【ref问题】
      // myLuckyRef.value?.play() // 【ref问题】

      if (instance) {
        instance.refs?.myLuckyRef?.play() // 【ref解决】
      }
      // this.$refs.myLucky.play()  // 【ref】vue2写法


      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设index（谢谢参与90%，恭喜中奖10%）
        const index = `${Math.random()}`.slice(2, 3) * 1
        state.lotteryDrawIndex = index === 1 ? 1 : 2
        // 调用stop停止旋转并传递中奖索引
        // this.$refs.myLuckyRef.stop(index)   // 【ref】vue2写法
        // myLuckyRef.value?.stop(index) // 【ref问题】
        if (instance) {
          instance.refs?.myLuckyRef?.stop(state.lotteryDrawIndex) // 【ref解决】
        }
      }, 3000)
    }
    // 抽奖结束会触发end回调
    const endCallback = (prize) => {
      console.log('"结束抽奖"----', '结束抽奖')
      console.log(prize)
      state.isShowlotteryDraw = false
    }

    return {
      ...toRefs(state),
      correct,
      total,
      examType,
      toLotteryDraw,
      startCallback,
      endCallback
    }
  }
}
</script>

<style scoped lang="less">
.exam-result {
  .info {
    margin: 0 0 5px;
    padding: 10px;
    background-color: white;

    .progress {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5px;
      position: relative;

      .nut-circleprogress {
        width: 145px !important;
        height: 145px !important;
        position: relative;

        .progressDiv {
          display: flex;
          flex-direction: column;
          align-items: center;

          .accuracy {
            color: #00000080;
            background-color: #ffeded;
            padding: 2px 8px;
            font-size: 13px;
            border-radius: 5px;
          }
        }

      }

      .circle {
        position: absolute;
        height: 145px;
        width: 145px;
        background-color: #ffeded;
        border-radius: 50%;
        top: 5px;
        left: 50%;
        transform: translate(-50%);

        .circle1 {
          position: absolute;
          height: 115px;
          width: 115px;
          background-color: #ffffff;
          border-radius: 50%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    .count {
      background-color: #fffbf3;
      margin-top: 10px;
      padding-top: 5px;
      color: #797e79;
      font-size: 14px;
      display: flex;
      justify-content: space-around;

      .centerDiv {
        display: flex;
        align-items: baseline;
        justify-content: center;

        .number {
          margin-right: 5px;
          font-size: 20px;
          color: #FAAD14;
        }

        .text {
          font-size: 12px;
        }
      }
    }
  }

  .content {
    margin-bottom: 10px;
    background: white;
    border-bottom: 1px solid #dcdcdc;

    .result-table {
      display: flex;
      font-size: 16px;
      font-weight: bolder;
      color: #000;

      .item {
        display: flex;
        align-items: baseline;
        border-top: 0.5px solid #dcdcdc;
        flex: 1;
        font-size: 16px;
        padding: 10px 10px 10px 15px;
        color: #7f7f7f;
        font-weight: normal;

        &:nth-child(2n+1) {
          border-right: 0.5px solid #dcdcdc;
        }

        .title {
          margin-right: 5px;
          font-size: 14px;
        }

        .unit {
          font-size: 12px;
          margin-left: 5px;
        }

        .time,
        .total {
          color: black;
          font-size: 16px;
        }

        .correct {
          color: #04be01;
          font-size: 18px;
        }

        .error {
          color: red;
          font-size: 18px;
        }
      }
    }
  }
  
  // 弹框样式
  ::v-deep .popup-center.round {
    width: 90%;
    .nut-dialog {
      width: 100%;
      padding: 20px 5px;
      .nut-dialog__content {
        max-height: unset;
        .nut-icon-close {
          position: absolute;
          top: 15px;
          right: 15px;
        }
        // 转盘结束展示结果
        .result {
          height: 80px;
          line-height: 80px;
          font-size: 20px;
          font-weight: bold;
          color: var(--color);
        }
        // 转盘
        .myLucky {
          display: inline-block;
        }
      }
    }
  }
  // 抽奖弹框按钮
  .lottery_draw_btn {
    height: 25PX;
    line-height: 25PX;
    padding: 0 10px;
    cursor: pointer;
    font-size: 16px;
    color: red;
  }
}
</style>

页面效果

lucky-canvas 插件官方文档

lucky-canvas 插件官网
lucky-canvas 插件官网文档

可参考文档