微信小程序——转盘抽奖

效果图：
转盘和里面的奖品名称都是背景图，如果需要自己配置奖品需要改html代码

index.html

<view class="containers">
	<view class="main">
  <!-- 转盘 -->
		<view class="canvas-container">
			<view  animation="{{animationData}}" class="canvas-content" >       
				<view class="canvas-list">
				</view>
			</view>    
      <!-- 按钮 -->
			<view bindtap="playReward" class="canvas-btn {{btnDisabled}}">
              <image src="https://img.ichelaba.com/wxapp/carmall/cmLucky/cm_start.png"></image>
            </view>	
      <!-- 指针 -->
			<view class="canvas-poiner">
              <image src="https://img.ichelaba.com/wxapp/carmall/cmLucky/cm_Pointer.png"></image>
            </view>		
		</view>
	</view>
</view>

index.js

var app = getApp();
Page({
	data: {
		awardsList: {},
		animationData: {},
		btnDisabled: '',
		myprize: '暂无',

		awards: [{
				index: 99,
				name: '谢谢参与'
			},
			{
				index: 2,
				name: '1：18原厂合金车模'
			},
			{
				index: 1,
				name: '500元购车基金'
			},
			{
				index: 4,
				name: '戴森吹风机'
			},
			{
				index: 3,
				name: '喜马拉雅会员季卡'
			},
			{
				index: 1,
				name: '500元购车基金'
			}
		], //奖品配置
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {


	},
	onReady: function (e) {

	},
	//发起抽奖
	playReward: function () {
		var that = this;
		var awardIndex;
		this.setData({
			btnDisabled: 'disabled'
		})
		wx.request({
			url: '后台抽奖接口',
			header: {
				"Content-Type": "application/x-www-form-urlencoded"
			},
			method: "POST",
			data: newobj,
			success: function (res) {
				if (res.data.result) {
					var awards = that.data.awards
					// console.log(awards)
					for (var keynum in awards) {
						if (res.data.data.lottery_id == awards[keynum].index) {
							awardIndex = keynum
						}
					}
					// console.log(awardIndex)
					//中奖index
					var runNum = 8; //旋转8周
					var duration = 4000; //时长

					// 旋转角度
					that.runDeg = that.runDeg || 0;
					// that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - awardIndex * (360 / 6));
					if (awardIndex == 1) { //购车7重礼&1：18原厂合金车模
						that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - 1 * (360 / 6))
					} else if (awardIndex == 2) { //购车7重礼
						that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - 2 * (360 / 6))
					} else if (awardIndex == 3) { //谢谢参与
						that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - 3 * (360 / 6))
					} else if (awardIndex == 4) { //购车7重礼&喜马拉雅会员季卡
						that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - 4 * (360 / 6))
					} else if (awardIndex == 5) { // 购车7重礼&500元购车基金
						that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - 5 * (360 / 6))
					} else {
						that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - 0 * (360 / 6))
					}
					//创建动画
					var animationRun = wx.createAnimation({
						duration: duration,
						timingFunction: 'ease'
					})
					animationRun.rotate(that.runDeg).step();
					that.setData({
						animationData: animationRun.export() 
					});
					// 中奖提示
					setTimeout(function () {
						if (that.data.awards[awardIndex].name == '谢谢参与') {
							wx.showModal({
								title: '很遗憾，您没有中奖',
								content: that.data.awards[awardIndex].name,
								showCancel: false
							});
						} else {
							wx.showModal({
								title: '恭喜',
								content: '获得' + (that.data.awards[awardIndex].name),
								showCancel: false
							});
						}
						that.setData({
							btnDisabled: ''
						});
					}.bind(that), duration);
				} else {
					wx.showModal({
						title: '提示',
						content: res.data.message,
						showCancel: false
					})
					that.setData({
						btnDisabled: ''
					});
				}
			}
		})
	},
})

index.css

/* pages/home/luckydraw/index.wxss */
.containers{
  width: 100%;
  height: 2089rpx;
  background: url('') no-repeat;
  background-size:100% 100%;
  overflow: hidden;
}
/* 转盘 */
.canvas-container {
  margin: 0 auto;
  position: relative;
  width: 450rpx;
  height: 450rpx;
}
.canvas-content {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 450rpx;
  height: 450rpx;
  background: url('') no-repeat;
  background-size:100% 100%;
}
.canvas-element {
  position: relative;
  z-index: 1;
  width: inherit;
  height: inherit;
  border-radius: 50%;
}
.canvas-list {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  z-index: 9999;
}
.canvas-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #e4370e;
  font-weight: bold;
}
.canvas-item-text {
  position: relative;
  display: block;
  padding-top: 50rpx;
  margin: 0 auto;
  text-align: center;
  -webkit-transform-origin: 50% 300rpx;
  transform-origin: 50% 300rpx;
  font-size: 26rpx;
}
.canvas-item-text image{
  width: 92rpx;
  margin-top: 10rpx;
}

/**
* 抽奖按钮
*/
.canvas-btn {
  position: absolute;
  left: 0rpx;
  top: 0rpx;
  right: 0;
  bottom: 0;
  margin:auto;
  z-index: 1;
  width: 96rpx;
  height: 96rpx;
}
.canvas-btn  image{
  width: 100%;
  height: 100%;
}
.canvas-poiner{
  position: absolute;
  left: 0rpx;
  top: -20rpx;
  right: 0;
  margin:auto;
  z-index: 1;
  width: 43rpx;
  height: 75rpx;
}
.canvas-poiner image{
  width: 100%;
  height: 100%;
}
.canvas-btn.disabled {
  pointer-events: none;
  background: transparent;
  color: #ccc;
}
.canvas-btn.disabled::after {
  border-bottom-color: #b07a7b;
}