zhaozong1/pages/prize/index.vue

<template>
    <view class="conbox">
        <view class="container">
            <!-- 背景 -->
            <image src="https://admin.njqicheng.cn/static/images/prizeBg.png" class="cont" mode=""></image>
			<view>
				<image src="https://admin.njqicheng.cn/static/images/prizeTitle.png" class="caidai" mode="widthFix"></image>
				  <view class="main">
					 
				     <view class="canvas-container">
							<image src="/static/images/shadow.png" mode="heightFix" class="shadow"></image>
				          <view :animation="animationData" class="canvas-content" id="zhuanpano" style="">
							  <!-- <image src="/static/images/prizeCir.png" class="pan" mode="widthFix"></image> -->
				           <!--   <view class="canvas-line">
				                  <view class="canvas-litem" v-for="(item,index) in list" :key="index"
				                        :style="{transform:'rotate('+(index * width + width / 2)+'deg)'}"></view>
				              </view> -->
				
				              <view class="canvas-list">
				                  <view class="canvas-item" :style="{transform: 'rotate('+(index * width)+'deg)', zIndex:index, }" v-for="(iteml,index) in list" :key="index">
				                      <view class="canvas-item-text" :style="'transform:rotate('+(index )+')'">
				                          <text class="b" style="font-size: 28rpx;color: #C30B29;">{{iteml.type==2?'谢谢惠顾':iteml.type==3?'再抽一次':iteml.type==1?iteml.value+'钻石':''}}</text>
				                          <!-- <text class="iconfont " :class="iteml.icon"></text> -->
				                      </view>
				                  </view>
				              </view>
				          </view>
				
				          <view @click="playReward" class="canvas-btn" v-bind:class="btnDisabled">
							  <image src="https://admin.njqicheng.cn/static/images/start.png" mode="widthFix"></image>
							  <text>开始<br/>抽奖</text>
							  
						  </view>
				      </view>
				  </view>
				  <u-notice-bar :text="noticeList" direction="column" bgColor="#FF6600" color="#fff" fontSize="15"></u-notice-bar>
				  <view class="textInfo">
					 
					  <u-parse :content="ruleText"></u-parse>
				  	<!-- 活动最终解释权归平台所有，活动最终解释权归平台所有，活动最终解释权归平台所有活动最终解释权归平台所有，活动最终解释权归平台所有 -->
				  </view>
				  <!-- 规则 -->
				<!--  <view class="guize" style="margin-top: 100upx;">
				      <view class="title">
				          规则说明
				      </view>
				      <view class="g_item">
				          1.用户每天登录即送1次抽奖机会，分享好友则多赠1次机会
				      </view>
				      <view class="g_item">
				          2.用户点击大转盘抽奖按钮，有积分和现金两种方式可参与抽奖，没抽一次消耗1次抽奖机会
				      </view>
				      <view class="g_item">
				          3.用户获得的奖品，可在我的道具里查看
				      </view>
				  </view> -->
			</view>
           
        </view>
		<u-popup :show="show" :round="15" mode="center" @close="close">
			<view class="descContent">
				
				<view class="closeTag">
					<view class="title">
						{{title}}
					</view>
					<view class="subTitle">
						{{subTitle}}
					</view>
					<view class="status">
						<!-- <image :src="image" mode="widthFix"></image> -->
						<image src="https://admin.njqicheng.cn/static/images/2.png" v-if="type==1" mode="widthFix"></image>
						<image src="https://admin.njqicheng.cn/static/images/3.png" v-if="type==2" mode="widthFix"></image>
						<image src="https://admin.njqicheng.cn/static/images/1.png" v-if="type==3" mode="widthFix"></image>
						
					</view>
					<view class="btnGroup">
						<view class="cancelBtn" @click="close">
							取消
						</view>
						<view class="confirmBtn" v-if="type!=2" @click="prizeAgain">
							继续抽
						</view>
					</view>
				</view>
				<view class="closeText" @click="close">×</view>
			</view>
		</u-popup>
    </view>
</template>

<script>

	import { getPrizeData,setPrizeApi } from '@/api/user.js';
  export default {
    data() {
      return {
		show:false,
        list: [
         
        ],
        width: 0,
        animationData: {},
        btnDisabled: '',
		title:'',
		subTitle:'',
		type:1,
		noticeList:[
			'中奖公告183****8566中了20钻石',
			'中奖公告152****2322中了20钻石',
			'中奖公告181****5656中了20钻石',
			'中奖公告152****8181中了20钻石',
			'中奖公告136****2314中了20钻石',
			'中奖公告196****5467中了20钻石',
			'中奖公告132****7714中了20钻石',
			'中奖公告132****7716中了20钻石',
			'中奖公告185****4587中了20钻石',
			'中奖公告182****6548中了20钻石',
			'中奖公告183****5670中了20钻石',
			'中奖公告161****0034中了20钻石',
		],
		ruleText:''
      }
    },
    onLoad: function() {
		this.getPrizeDataHandle()
      
    },
    methods: {
	  close() {
		this.show = false
		
	  },
	  getPrizeDataHandle(){
		  getPrizeData().then(res=>{
			  this.list = res.data.list;
			  // 获取奖品列表
			  this.width = 360 / this.list.length;
			  this.ruleText = res.data.rule.the_lottery_rule2
		  })
	  },
      animation(index, duration)
      {
        //中奖index
        var list = this.list;
        // var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数
        var runNum = 4; //旋转8周

        // 旋转角度
        this.runDeg = this.runDeg || 0;
        this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - index * (360 / list.length)) +1
        //创建动画
        var animationRun = uni.createAnimation({
          duration: duration,
          timingFunction: 'ease'
        })
        animationRun.rotate(this.runDeg).step();
        this.animationData = animationRun.export();
        this.btnDisabled = 'disabled';

      },
	  prizeAgain(){
		  this.show=false;
		  setTimeout(()=>{
			  this.playReward()
		  },500)
		  
		  
	  },
      //发起抽奖
      playReward(){
		 
		  setPrizeApi().then(res=>{
			  let index, duration = 3000
			  this.list.forEach((item,i)=>{
				  
				  if(item.id==res.data.item.id){
					  console.log("yy",i)
					  index=i
				  }
			  })
			  this.animation(index, duration)
			  setTimeout(() => {
				  this.type=res.data.item.type
				  //  1钻石 2谢谢惠顾  3 再抽一次
				  if(res.data.item.type==1){
					  this.title="恭喜你，抽中";
					  this.subTitle = res.data.item.value+"钻石"
					  this.image = "https://admin.njqicheng.cn/static/images/2.png"
				  }else if(res.data.item.type==2){
					  this.title="很遗憾，没有抽中";
					  this.subTitle = "谢谢惠顾"
					  this.image = "https://admin.njqicheng.cn/static/images/3.png"
				  }else if(res.data.item.type==3){
					  this.title="恭喜你，抽中";
					  this.subTitle = "再抽一次"
					  this.image = "https://admin.njqicheng.cn/static/images/1.png"
				  }
				  this.show = true;
				  this.btnDisabled = '';
				  // document.getElementById('zhuanpano').style=''
			  }, duration + 1000)
			  
		  			  
		  }).catch(err=>{
			  
			  uni.showToast({
			  	title: err,
			  	icon: 'none'
			  })
		  })
      },

    }

  }
</script>
<style scoped lang="scss">
    .conbox {
        width: 750upx;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
		position: relative;
    }

    .container,
    image.cont {
        width: 750upx;
        min-height: 100vh;
        height: auto;
        position: relative;
    }

    image.cont {
        height: 100%;
        position: absolute;
        z-index: 0;
    }

    image.caidai {
        position: absolute;
        top: 40rpx;
        left: 10%;
        // width: 750upx;
        // height: 1024upx;
		width:80%;
		height:auto;
		
    }
	.main{
		
		position: relative;
		padding-top: 35%;
		.pan{
			position: absolute;
			width:100%;
			height:auto;
		}
	}
	
	/* 转盘 */
	.canvas-container {
	    margin: 0 auto;
	    position: relative;
	    width: 600upx;
	    height: 600upx;
	    background-size: cover;
	    border-radius: 50%;
		.shadow{
			position: absolute;
			height: 56rpx;
			width: auto;
			bottom: -26rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
		}
	}
	
	
	.canvas-content {
	    position: absolute;
	    left: 0;
	    top: 0;
	    z-index: 1;
	    display: block;
	    width: 600rpx;
	    height: 600rpx !important;
	    border-radius: inherit;
		background-size: contain;
		background-image: url(data:image/png;base64,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
	    /* background-clip: padding-box; */
	    /* background-color: #ffcb3f; */
	}
	
	.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;
	    /* text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6); */
	}
	
	.canvas-item-text {
	  
		position: relative;
		padding-top: 100rpx;
		margin: 0 auto;
		text-align: center;
		-webkit-transform-origin: 50% 156px;
		transform-origin: 50% 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FB778B;
		
	}
	
	
	
	
	
	
	
	// .icon-awrad {
 //        font-size: 50upx !important;
 //    }

    /* 分隔线 */
    .canvas-line {
        position: absolute;
        left: 0;
        top: 0;
        width: inherit;
        height: inherit;
        z-index: 99;
    }

    .canvas-litem {
        position: absolute;
        left: 300upx;
        top: 0;
        width: 3upx;
        height: 300upx;
        background-color: rgba(228, 55, 14, 0.4);
        overflow: hidden;
        -webkit-transform-origin: 50% 300upx;
        transform-origin: 50% 300upx;
    }

    /**
* 抽奖按钮
*/
    .canvas-btn {
       
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 400;
		width: 225rpx;
		height: 253rpx;
		border-radius: 50%;
		transform: translate(-50%,-50%);
		image{
			width:100%;
			height:auto;
		}
		text{
			text-align: center;
			position: absolute;
			left: 50%;
			top: 55%;
			transform: translate(-50%,-50%);
			display: block;
			
			line-height: 60rpx;
			font-size: 40rpx;
			    color: #FFFFFF;
		}
    }

    // .canvas-btn::after {
    //     position: absolute;
    //     display: block;
    //     content: ' ';
    //     left: 12upx;
    //     top: -44upx;
    //     width: 0;
    //     height: 0;
    //     overflow: hidden;
    //     border-width: 30upx;
    //     border-style: solid;
    //     border-color: transparent;
    //     border-bottom-color: #e44025;
    // }
    // .canvas-btn.disabled {
    //     pointer-events: none;
    //     background: #b07a7b;
    //     color: #ccc;
    // }

    // .canvas-btn.disabled::after {
    //     border-bottom-color: #b07a7b;
    // }
	// 弹窗
	::v-deep .u-popup__content{
		background-color: transparent !important;
		width:60%;
		overflow: hidden;
		text-align: center;
		.closeTag{
			background: linear-gradient(52deg, #FEEADF, #FEFBEA, #FFFCEE, #FFEBED);
			padding:59rpx 38rpx 47rpx 38rpx;
			border-radius: 15px;
			.title{
			
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 36rpx;
				color: #B7523E;
			}
			.subTitle{
				
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 60rpx;
				color: #B7523E;
				margin-top:34rpx;
			}
			.status{
				margin-top:51rpx;
				image{
					width:179rpx;
					height:auto;
				}
			}
			.btnGroup{
				margin-top:60rpx;
				display: flex;
				.cancelBtn{
					flex:1;
					background: rgba(255,255,255,0);
					border-radius: 40px;
					border: 1px solid #CCCCCC;
					padding:25rpx 0rpx;
					text-align: center;
					
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 30rpx;
					color: #666666;
				}
				.confirmBtn{
					flex:1;
					background: linear-gradient(52deg, #FF3640, #FE7553);
					border-radius: 40px;
					padding:25rpx 0rpx;
					text-align: center;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-left: 23rpx;
				}
			}
		}
		.closeText{
			width: 57rpx;
			height: 57rpx;
			border-radius: 50%;
			border: 1px solid #FFFFFF;
			font-size: 21px;
			text-align: center;
			line-height: 50rpx;
			margin: 36rpx auto;
			color: #fff;
		}
	}


// 规则
.textInfo{
	
	font-family: Alibaba PuHuiTi;
	font-weight: 400;
	font-size: 26rpx;
	color: #FFF8F8;
	width:80%;
	margin:60rpx auto;
	position: relative;
		line-height: 50rpx;
	    z-index: 9;
	
}

    .guize {
        width: 502upx;
        min-height: 300upx;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 3;
        background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
        border: 18upx solid #E4431A;
        border-radius: 16px;
        margin: 0 auto;
        margin-top: -104upx;
        padding: 48upx;
        /* box-sizing: border-box; */
        color: #fff;
    }

    .guize .title {
        text-align: center;
        margin-bottom: 28upx;
    }

    .guize .g_item {
        font-family: PingFang-SC-Medium;
        font-size: 24upx;
        color: #FFFFFF;
        letter-spacing: 0.5px;
        text-align: justify;
        line-height: 20px;
    }

    .myrewards .title {
        font-family: PingFang-SC-Bold;
        font-size: 16px;
        color: #E4431A;
        letter-spacing: 0.57px;
        display: flex;
        padding-top: 36upx;
        justify-content: center;
    }
::v-deep .u-notice-bar{
	position: relative;
	z-index: 2;
	margin: 0 24rpx;
	padding: 30rpx !important;
	margin-top: 78rpx;
}

</style>