文档地址： https://100px.net/docs/wheel/blocks.html

实现效果如下：

使用：
1.安装插件：npm install --save vue-luck-draw。

2.引入插件：在 main.js 文件中全局加载插件；或者在组件中按需引入插件。

// 完整加载
import LuckDraw from 'vue-luck-draw'
Vue.use(LuckDraw)

// 按需引入
import { LuckyWheel, LuckyGrid } from 'vue-luck-draw'
Vue.components('LuckyWheel', LuckyWheel)
Vue.components('LuckyGrid', LuckyGrid)

3.使用插件：将转盘抽奖封装成一个子组件，在父组件页面中引用该子组件，并监听抽奖成功函数。
子组件代码如下：

<template>
  <div class="luck-box">
    <LuckyWheel
      ref="LuckyWheel"
      width="320px"
      height="320px"
      :prizes="prizes"
      :default-style="defaultStyle"
      :blocks="blocks"
      :buttons="buttons"
      @start="startCallBack"
      @end="endCallBack"
      style="margin:0 auto; transform: scale(1.04)"
    />
    <div class="time">(剩余{{times}}次)</div>
  </div>
</template>

<script>
import { LuckyWheel, LuckyGrid } from "vue-luck-draw";
import { luckyDraw } from "../../api";
export default {
  name: "Index",
  components: {
    LuckyWheel,
    LuckyGrid,
  },
  data() {
    return {
      defaultStyle: {
        fontSize: "14px",
      },
      blocks: [
        {
          padding: "20px",
          imgs: [
            {
              src: require("../../images/turn-table-outer.png"), // 转盘底图
              width: "98%",
              rotate: true,
            },
          ],
        },
      ],
      buttons: [
        {
          radius: "45px",
          fonts: [
            {
              text: "点击\n抽奖",
              top: "-22px",
              fontColor: "#fff",
              fontSize: "14px",
              lineHeight: "18px",
            },
          ],
          imgs: [
            {
              src: require("../../images/turn-table-inner.png"),  // 转盘圆心指针图片
              width: "100%",
              top: "-100%",
            },
          ],
        },
      ],
      currentIndex: null,
      toastMsg: null,
    };
  },
  props: {
    times: {
      type: [Number, String],
      default: 0,
    },
    prizes: {
      type: Array,  // 转盘奖品数组
    },
    drawList: {
      type: Array, // 获取中奖索引数组
    },
    activityId: {
      type: [Number, String],
    },
    shareUserId: {
      type: [Number, String],
    },
  },
  mounted() {},
  methods: {
    startCallBack() {
      let token = localStorage.getItem("token");
      if (!token) {
        this.$router.push({
          name: "login",
        });
        return;
      }
      this.$refs.LuckyWheel.play();
      this.luckyDraw();
      setTimeout(() => {
        this.$refs.LuckyWheel.stop(this.currentIndex); // currentIndex 索引代表抽中奖品数组中第几个奖品
      }, 3000);
    },
    endCallBack(prize) {
      if (!this.currentIndex && this.currentIndex != 0) {
        this.$toast(this.toastMsg || "服务器开小差了~");
        return;
      }
      this.$emit("getPrize", prize);  // 父组件中监听 getPrize 函数，获取抽中奖品
      console.log(prize, "抽中奖品");
    },
    async luckyDraw() {
      this.toastMsg = null;
      this.currentIndex = null;
      const data = {
        activityId: this.activityId,
      };
      console.log(data, "抽奖传参");
      try {
        const resp = await luckyDraw(data);
        if (resp.code == 0) {
          this.toastMsg = resp.data.msg;
          console.log(resp.data.id, "resp.data.id", this.drawList);
          if (resp.data.id) {
            this.drawList.forEach((item, index) => {
              if (item.id == resp.data.id) {
                this.currentIndex = index;
                console.log(this.currentIndex, "抽中第几个了");
              }
            });
          }
        } else {
          this.$toast(resp.msg || "服务器开小差了~");
        }
      } catch (e) {
        this.$toast(e.msg || "服务器开小差了~");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.luck-box {
  position: relative;
  .time {
    position: absolute;
    top: 55%;
    left: 50%;
    margin-left: -70px;
    color: #fff;
    font-size: 16px;
    // transform: scale(0.72); // 浏览器预览字体大小跟部署后实际字体大小有出入
    width: 140px!important;
    text-align: center;
  }
}</style>

父组件中获取奖品数组，代码如下：

async getInfo() {
      const data = {
        activityId: this.activityId,
      };
      console.log(data, "getInfo 传参");
      const resp = await getDetailInfo(data);
      if (resp && resp.code == 0) {
        const prizes = [];
        this.drawList = resp.data.drawList;
        this.drawList.forEach((item) => {
          prizes.push({
            title: item.drawName,
            imgs: [
              {
                src: item.drawPictureUrl,
                width: "34px",
                top: "55%",
              },
            ],
            fonts: [
              {
                text: item.drawName,
                top: "30%",
                fontColor: "#642D33",
                fontSize: "12px",
                fontWeight: "bold",
              },
            ],
          });
        });
        this.prizes = prizes;
        console.log(this.prizes, this.drawList);
      }
 },