转盘抽奖活动

1、页面布局（转盘+按钮）

按钮放在转盘中间的位置

<view class="mian-middle-middle animated fadeInUp"><!-- 转盘 --><view class="rotaryTable" :style="{transform:'rotateZ('+deg+'deg)'}"><image class="rotaryTable-pic" src="转盘图片"></image></view><!-- 抽奖按钮 --><view class="button" @click="lottery"><image class="button-pic" src="按钮图片"></image></view>
</view>

<!-- 奖品弹窗-->
<uni-popup ref="popup" class="prize-pop" type="center"><view class="pop-prize-bg" @click="closePop()"><image class="img" :src="prize_image" mode="widthFix"></image><view class="message">{{prize_name}}</view></view>
</uni-popup>

2、转盘+按钮的样式

<style lang="scss" scoped>.mian-middle-middle {position: relative;margin-top: -100rpx;.rotaryTable {width: 673rpx;height: 673rpx;margin: 0 auto;margin-top: 34rpx;.rotaryTable-pic {width: 673rpx;height: 673rpx;}}.button {width: 198rpx;height: 237rpx;position: absolute;left: 50%;top: 0;margin-top: 184rpx;margin-left: -104rpx;.button-pic {width: 208rpx;height: 254rpx;}}}
</style>

3、抽奖逻辑

点击按钮触发lottery方法。lottery方法调用接口，返回抽中的奖品信息（图片、编码)。

奖品固定

如果奖品是固定的，就可以直接把所有的奖品存在前端数组中 levelsArr[]，接口只需要返回一个code，通过code来在数组中找到对应的奖品图片。保存在本地的图片可以用编码来命名，然后赋值

this.prize_image = '../static/turnPlate/prizes/'+res.code+'.png';

奖品不固定

不用关心奖品是什么，直接赋值

this.award = res.code;
this.prizeName = res.name;
this.prize_image = res.image;

但是不管是哪种，都要找到在数组 levelsArr 中的下标，通过下标index在数组 arr 中找到对应的旋转的度数。

注意：levelsArr 中的顺序是按照转盘上的顺序从垂直90°逆时针来的，及90°-135°是特等奖，135°-180°是五等奖，以此类推~

data(){return {endLoading: true,deg: 0, //控制转盘转动度数award: '', //中奖奖品codeawardIndex: 0,prize_name：'', //中奖奖品nameprize_image:'',// 奖品图片//360/8=45deg  每个奖项的间隔度数//45/2=22.5deg 起始位置arr: [22.5, 67.5, 112.5, 157.5, 202.5, 247.5, 292.5, 337.5], ///旋转角度levelsArr: [{level: "特等奖",name: "特等奖",code:"1"},{level: "五等奖",name: "现金红包",code:"6"},{level: "谢谢参与",name: "谢谢参与",code:"00"},{level: "四等奖",name: "礼盒",code:"5"},{level: "三等奖",name: "推车",code:"4"},{level: "二等奖",name: "玩具车",code:"3"},{level: "谢谢参与2",name: "谢谢参与2",code:"22"},{level: "一等奖",name: "料理机",code:"2"}]}
}

lottery(){if (!this.endLoading) {uni.showLoading({title: '请等待加载完毕再抽奖呦！'});setTimeout(function() {uni.hideLoading();}, 2000);return false;}// 调用接口，接口返回参数res//1this.award = res.code;this.prize_image = '../static/turnPlate/prizes/'+res.code+'.png';//2//this.award = res.code;//this.prizeName = res.name; //this.prize_image = res.image;for (let i = 0; i < this.levelsArr.length; i++) {if (this.award == this.levelsArr[i].code) {this.awardIndex = i;// 不能点按钮this.endLoading = false;this.play(i);}}	}
async play(d) {//设置抽奖结果，可用数据传入代替console.log(d)//转盘归零this.deg = 0;await this.sleep(300)var angle = this.arr[d]//转动动画  分三部分 前中后 前后速度慢 中间快for (var i = 0; i < 1080 + angle; i += 1) {if (i < 50) {this.deg += 1;await this.sleep(50 - i)} else if (i < 1030 + angle) {this.deg += 2;i += 1;await this.sleep(1)} else {this.deg += 1;await this.sleep(i - angle - 1030)}if (this.deg >= 360) {this.deg -= 360;}}//显示弹窗await this.sleep();this.endLoading = true;this.openPop();},/*制作sleep效果以满足转动特效*/
sleep(d) {return new Promise((resolve) => setTimeout(resolve, d))
},// 奖品弹窗
openPop() {this.$refs.popup.open()
},
closePop() {this.$refs.popup.close()
}