转盘抽奖活动

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: '', //中奖奖品code
				awardIndex: 0,
                prize_name：'', //中奖奖品name
                prize_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

    //1
    this.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()
}

4、图片素材