uniapp--大转盘抽奖,以及中奖轮播使用vue-seamless-scroll

uniapp–大转盘抽奖

<template>
	<view class="content pr">
		 <view class="topBox">
			 <!-- 转盘抽奖 -->
			 <view class="pa info">
				 <view class="pointerImg" :animation="animationData">
					 <!-- 转盘图片 -->
				 	<image src="../../static/img/index/cc.png" mode=""></image>
				 </view>
				 <view class="addpointer flex-c" @tap="playReward" v-bind:class="btnDisabled">
					 <!-- 转盘指针图片 -->
					 <image src="../../static/img/index/7.png" mode=""></image>
				 </view>
			 </view>
		 </view>
		 <!-- 轮播 -->
		 <view class="listBox pr">
			  <view class="titleBtn pa flex-c">
			  	  <image src="../../static/img/index/4.png" mode=""></image>
			  </view>
			  <view class="luckNews-box">
				  <view class="luckNews-box-title flex-a-j">
					   <view class="item flex-c">姓 名</view>
					   <view class="item flex-c">手机号</view>
					   <view class="item flex-c">奖品</view>
				  </view>
				  <view class="winBox">
					  <vue-seamless-scroll :data="bulletin" class="seamless-warp">
						<ul class="item">
							<li v-for="item in bulletin">
								<span class="name" v-text="item.user.name"></span><span class="phone" v-text="item.user.phone"></span><span class="winText" v-text="item.score+'积分'"></span>
							</li>
						</ul>
					  </vue-seamless-scroll>
				  </view>
			  </view>
			  <view class="pa marks">快来开奖吧...</view>
		 </view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
			  bulletin:[],//中奖列表
			  awardsConfig : {
				chance: true,  
				awards: [    
				   { index: 1, name: '5积分',type:0,id:'2'},
				   { index: 0, name: '谢谢',type:1,id:'0'},
				   { index: 1, name: '30积分',type:0,id:'4'},
				   { index: 1, name: '15积分',type:0,id:'3'},
				   { index: 1, name: '100积分',type:0,id:'6'},
				   { index: 1, name: '谢谢',type:1,id:'0'},
				   { index: 1, name: '再来一次',type:2,id:'1'},
				   { index: 1, name: '50积分',type:0,id:'5'}, 
				]  
			  },  
			  awardsList: {},  
			  animationData: {},  
			  btnDisabled: '',  
			  chishu:3, //抽奖次数
			}
		},
		onReady() {
			this.drawAwardRoundel()
		},
		onLoad() {
            this.getAwardList()
		},	
		computed: {
			optionSingleHeightTime () {
				return {
						singleHeight: 26,
						waitTime: 250000
					}
			}
		},
		methods:{
			 //初始化抽奖圆盘  
			drawAwardRoundel: function () {               
			    this.btnDisabled = this.awardsConfig.chance ? '' : 'disabled';  
		    },
			//获取中奖列表
			getAwardList(){
				let that=this
				that.ajax({
					url:'/api/lottery/list',
					method:'get',
					data:{},
					loadStr:'',
					success:function(res){
						console.log(res)
						that.bulletin=res.data.data
					}
				})
			},
			//获取抽奖的id
			getRewordId(){
				let that=this
				that.ajax({
					url:'/api/lottery',
					method:'post',
					data:{},
					loadStr:'',
					success:function(res){
						console.log(res)
						var id=res.data.data
						var awardIndex = 0//随机数  2
						that.awardsConfig.awards.forEach((item,index) => {
							if(id==item.id){
								awardIndex=index
							}
						})	

	                    //中奖index
	                    var awardsNum = that.awardsConfig.awards;  //6
	                    // var awardIndex = Math.round(Math.random()*(awardsNum.length-1));//随机数  2
	                    
	                    console.log(awardIndex,'awardIndex---')
	                    
	                    var runNum =6;//旋转8周  
	                    var duration =6000;//时长  
	                    //减去的角度
	                    var deg=Math.ceil(Math.random()*(34 - 10) + 10); //44，数值为360除以个数	
	                    console.log(deg,'deg')
	                    // 旋转角度  
	                    that.runDeg = that.runDeg || 0;  
						that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum + awardIndex * (360 / awardsNum.length) + deg)  
	                    //创建动画 
	                    console.log(that.runDeg,'this.runDeg')
	                    var animationRun = uni.createAnimation({  
						 duration: duration,  
						 timingFunction: 'ease'   
	                    })  
	                    animationRun.rotate(that.runDeg).step();  
	                    that.animationData= animationRun.export();  
	                    that.btnDisabled= 'disabled';  
	                    // 中奖提示  
	                    var awardsConfig = that.awardsConfig;  
	                    var awardType = awardsConfig.awards[awardIndex].type;     
	                    
	                    console.log(awardIndex,'awardIndex')
	                    that.getAwardList()
	                    if (awardType == 0) {  
						   setTimeout(function () {  
							uni.showToast({
							   title:'恭喜获得'+awardsConfig.awards[awardIndex].name,  
							   icon:'none'  
							}) 
						   // that.chishu = that.chishu - 1;  	 
						   that.btnDisabled= '';                              
						   }.bind(that), duration);  
	                    }else if(awardType == 1) {
						   setTimeout(function () {
							uni.showToast({
							   title:awardsConfig.awards[awardIndex].name,  
							   icon:'none'  
							}) 
						   // that.chishu = that.chishu - 1;  	 
						   that.btnDisabled= '';                              
						   }.bind(that), duration);
	                    } else{
						  setTimeout(function () {
						  uni.showToast({
							   title:awardsConfig.awards[awardIndex].name,  
							   icon:'none'  
						  }) 
						  that.btnDisabled= '';                              
						  }.bind(that), duration); 
	                    }
					}
				}) 
			},
			//发起抽奖  
		    playReward: function () {
				   this.getRewordId()
		   }, 
			  
		}
	}
</script>

<style lang="scss">
	.content{
        width: 100%;
        min-height: 100vh;
		.topBox{
			width: 100%;
			height: 1163rpx;
			background: url('~@/static/img/index/1.png');
			background-size: 100% 100%;
		}
		.info{
			width: 472rpx;
			height: 573rpx;
		}
		.luckNews{
			&-title{
				padding:35rpx;
				image{
					width: 208rpx;
					height: 31rpx;
				}
			}
			&-box{
				position: absolute;
				top: 120upx;
				width: 713rpx;
				height: 535rpx;
				margin: auto;
				&-title{
					padding: 37rpx 27rpx 27rpx 52rpx;
					.item{
						width: 140rpx;
						height: 40rpx;
						background: #D20A17;
						border-radius: 20rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #F5E5B5;
					}
				}
			}
		}
		.listBox{
			width: 750upx;
			height: 767upx;
			background: url('~@/static/img/index/5.png');
			background-size: 100% 100%;
			.marks{
				font-size: 18rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #EF4854;
				line-height: 48rpx;
				bottom:35rpx;
				left: 320rpx;
			}
			.titleBtn{
				width: 335upx;
				height: 73upx;
				background: url('~@/static/img/index/2.png');
				background-size: 100% 100%;
				margin:25upx auto;
				left: 207upx;
				image{
					width: 248upx;
					height: 41upx;
				}
			}
			
		}
		.winBox{
			width: 100%;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #D20A17;
			height:430rpx ;
		   .seamless-warp {
				height:430rpx ;
				line-height:60rpx;
				overflow: hidden;
			}
			li{
				list-style: none;
				display: flex;
				padding: 5rpx 0 5rpx 40rpx;
				
			}
			li:nth-child(2n+2) {
				background: #FEE4BC;
			}
			.bg{
				background: #FEE4BC;
			}
			ul{
				padding-left:25rpx;
			}
			.name{
				width:200rpx;
				margin-right: 20rpx;
				display:block;
			}
			.phone{
				width: 300rpx;
				margin-right: 6rpx;
				display:block;
			}
			.winText{
				width: 140rpx;
				display:block;
			}
		}
		.pointerImg{
			width: 35rpx;
			height:194rpx;
			position: absolute;
			top:470rpx;
			left:356.7rpx;
			image{
				height: 114rpx;
				width: 100%;
			}
		}
		.addpointer{
			width:232rpx;
			height:53rpx;
			position: absolute;
			top:790rpx;
			left:265rpx;
			background: url('~@/static/img/index/6.png');
			background-size: 100% 100%;
			image{
				width: 146upx;
				height: 36upx;
			}
		}

	}
</style>

效果图