vue移动端h5项⽬使⽤vue-luck-draw插件实现⼤转盘抽奖实现效果如下：
使⽤：
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'
Vueponents('LuckyWheel', LuckyWheel)
Vueponents('LuckyGrid', LuckyGrid)
3.使⽤插件：将转盘抽奖封装成⼀个⼦组件，在⽗组件页⾯中引⽤该⼦组件，并监听抽奖成功函数。
⼦组件代码如下：
<template>
<div class="luck-box">
<LuckyWheel
ref="LuckyWheel"
width="320px"
height="320px"
:prizes="prizes"
:default-
:blocks="blocks"
:buttons="buttons"
@start="startCallBack"
@end="endCallBack"
/
>
<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 = Item("token");
if (!token) {
if (!token) {
this.$router.push({
name: "login",
});
return;
}
this.$refs.LuckyWheel.play();
this.luckyDraw();
setTimeout(() => {
this.$refs.LuckyWheel.stop(this.currentIndex); // currentIndex 索引代表抽中奖品数组中第⼏个奖品      }, 3000);
fontweight几百正常
},
endCallBack(prize) {
if (!this.currentIndex && this.currentIndex != 0) {
this.$astMsg || "服务器开⼩差了~");
return;
}
this.$emit("getPrize", prize);  // ⽗组件中监听 getPrize 函数，获取抽中奖品
console.log(prize, "抽中奖品");
},
async luckyDraw() {
this.currentIndex = null;
const data = {
activityId: this.activityId,
};
console.log(data, "抽奖传参");
try {
const resp = await luckyDraw(data);
if (de == 0) {
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 && de == 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);      }
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。