本案例为在小程序中实现的转盘抽奖，其他手机端项目思路类似。
注意： 转盘上的东西是由后台web项目里的配置页进行配置的，可以配置每个位置的奖品，中奖概率等。此文章只讲了抽奖转盘的实现，配置可根据真实需求进行开发即可，这里不作叙述。真实上线的时候，只需要将其中的转盘奖品信息，中奖位置索引，中奖次数，活动说明，中奖记录改成后台接口调用即可，此处仅在代码里模拟数据。
效果图如下：
代码如下：
<template>
<view class="content">
<view class="lotteryPage">
<image src="../static/drawLottery/drawLotteryTitle.png" mode="aspectFit" class="titlePng"></image>
<view class="activeExplainDiv">
<view class="activeExplain">
活动说明
</view>
</view>
<view class="lotteryBody">
<view class="roteDiv" :style="{transform:rotate_deg,transition:rotate_transition}">
<image src="../static/drawLottery/zhuanPan.png" mode="aspectFit" class="zhuanPan"></image>
<view :class="'zhuanPanCon zhuanPanCon'+index" v-for="(item,index) in prizeArr">
<view class="prizeTextSty">{{item.text}}</view>
<image
:src="item.type === 0?'../static/drawLottery/thanksPng.png':item.type === 1?'../static/drawLottery/couponPng.png':'../static/drawLottery/integrationPng.png'"
mode="aspectFit" class="prizeImgSty"></image>
</view>
</view>
<image src="../static/drawLottery/zhuanBorder.png" mode="aspectFit" class="zhuanBorder"></image>
<image src="../static/drawLottery/clickBtn.png" mode="aspectFit" class="clickBtn" @click="drawLottery"></image>
</view>
<view class="bottomBlock">
<view class="bottomLine">
<view class="shengYuTimes">剩余{{LuckyClick}}次抽奖次数</view>
</view>
<view class="bottomLine">
<view class="recordSty">中奖记录</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
LuckyClick: 3,
angle: 60, //总共6个扇形区域，每个区域约60度
isAllowClick: true, //是否能够点击
rotate_deg: 0, //指针旋转的角度
rotate_transition: "transform 3s ease-in-out", //初始化选中的过度属性控制
prizeArr: [{
id: 1,
sort: 1,
text: '谢谢参与',
type: 0
},
{
id: 2,
sort: 2,
text: '600积分x6',
type: 2
},
{
id: 3,
sort: 3,
text: '500元券x3',
type: 1
},
{
id: 4,
sort: 4,
text: '谢谢参与',
type: 0
},
{
id: 5,
sort: 5,
text: '20000积分x10',
type: 2
},
{
id: 6,
sort: 6,
text: '3000元券x2',
type: 1
}
]
}
},
methods: {
drawLottery() {
if (this.LuckyClick == 0) {
uni.showToast({
title: '机会已经用完了',
duration: 2000,
icon: 'none'
});
return;
}
this.rotating();
},
rotating() {
if (!this.isAllowClick) return;
this.isAllowClick = false;
this.rotate_transition = "transform 3s ease-in-out";
this.LuckyClick--;
let rand_circle = 5; //默认多旋转5圈
let winningIndex = 4 //模拟中奖位置,此处到时调用后台接口取值
let deg = rand_circle * 360 + winningIndex * this.angle; //将要旋转的度数
this.rotate_deg = "rotate(" + deg + "deg)";
let that = this
setTimeout(() => {
uni.showModal({
title: '中奖结果',
content: '500优惠券x3',
showCancel: false,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
that.isAllowClick = true;
that.rotate_deg = "rotate(" + 0 + "deg)"; //定时器关闭的时候重置角度
that.rotate_transition = "";
}
}
});
}, 4000)
}
}
}
</script>
<style scoped>
.content {
padding: 0;
overflow: hidden;
background-image: url(base64); // 这里需要自行在网上将背景图转为base64,替换掉url里的base64,因为小程序不支持,其他情况下可直接使用.
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.lotteryPage {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.titlePng {
margin-top: 60px;
height: 66px;
}
.activeExplainDiv {
margin: 20px 0;
width: 100%;
display: flex;
justify-content: flex-end;
}
.activeExplain {
padding: 8px 0;
width: 80px;
text-align: center;
border-bottom-left-radius: 18px;
border-top-left-radius: 18px;
background-color: rgba(188, 56, 23, 0.29);
color: #faf0d8;
font-size: 12px;
}
.lotteryBody {
width: 320px;
height: 320px;
position: relative;
}
.roteDiv {
width: 100%;
height: 100%;
}
.zhuanPan {
width: 100%;
height: 100%;
}
.zhuanPanCon {
position: absolute;
}
.zhuanPanCon0 {
top: 14%;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.zhuanPanCon1 {
top: 28%;
right: 18%;
transform: rotate(60deg);
text-align: center;
}
.zhuanPanCon2 {
bottom: 28%;
right: 18%;
transform: rotate(120deg);
text-align: center;
}
.zhuanPanCon3 {
bottom: 14%;
right: 51%;
transform: rotate(180deg) translateX(-50%);
text-align: center;
}
.zhuanPanCon4 {
bottom: 28%;
left: 16%;
transform: rotate(240deg);
text-align: center;
}
.zhuanPanCon5 {
top: 30%;
left: 18%;
transform: rotate(300deg);
text-align: center;
}
.prizeTextSty {
color: #c73d18;
font-size: 12px;
}
.prizeImgSty {
width: 40px;
height: 40px;
}
.zhuanBorder {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.clickBtn {
width: 60px;
height: 80px;
position: absolute;
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottomBlock {
margin-top: 10px;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.bottomLine {
flex: 1;
display: flex;
align-items: center;
}
.shengYuTimes {
padding: 8px 40px;
background-color: #bc3817;
color: #faf0d8;
font-size: 12px;
border-radius: 16px;
}
.recordSty {
text-decoration: underline;
font-size: 14px;
color: #ca411f;
}
</style>
上面所用到的图片资源文件截图(并非真实图片文件大小，真实需要可自行让UI设计制作即可)：
