vue 移动端h5项目使用 vue-luck-draw 插件实现大转盘抽奖

文档地址： 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)
1
2
3
4
5
6
7
8

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

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

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);
      }
 },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35