zhengwei
/
buying


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481
							<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../meta.jsp"%>
<title>大转盘</title>
<style>
/* 大转盘样式 */
.banner {
	display: block;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}
.banner .panel{
	display: block; 
	width:100%;
	position: absolute;
	z-index: -1;
}
.banner .turnplate {
	display: block;
	width: 100%;
	position: relative;
}

.banner .turnplate img.pointer {
	position: absolute;
	width: 31.5%;
	height: 42.5%;
	left: 34.6%;
	top: 26%;
}

.prize_chance_bg {
	position: relative;
	text-align: center;
}

.prize-chance {
	color: #fff;
	background: #bf3737;
}

.prize_chance_bg span {
	font-size: 16px;
	font-family: 'Microsoft YaHei';
	word-wrap: break-word;
	color: #fff;
	text-align: center;
	line-height: 18px;
	min-width: 134px;
	height: 18px;
	border-radius: 40px;
	padding: 1px 26px;
}

em {
	font-style: normal;
	font-weight: 400;
}

.prize-content {
    box-sizing: border-box;
    padding: 15px;
    height: auto;
    overflow: hidden;
    color: #fff;
    border-color: #fff;
}
.prize-content p{
	color: #fff;
}
.prize-content .prize-wrapper {
    margin-top: 20px;
}
.prize-title {
    position: relative;
    height: 18px;;
    font-size: 16px;
    text-align: center;
    line-height: 18px;
}
.prize-title .prize-divider {
    width: 38%;
    height: 1px;
    border-top: 1px #fff solid;
    display: inline-block;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
}
.prize-title .title-text {
    font-weight: bolder;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
.prize-content .prize-wrapper .tab-wrapper {
    margin-top: 15px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    border: 1px #fff solid;
    border-radius: 2px;
}

.prize-content .prize-wrapper .tab-wrapper .tab.selected {
    color: #eb4a4a;
    background: #ffffff;
}

.prize-content .prize-wrapper .tab-wrapper .tab {
    transition: background 1s;
    -webkit-transition: background 1s;
    border-radius: 1px;
    float: left;
    width: 50%;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    background: transparent;
}

.prize-content .prize-wrapper .prize-info {
    width: 100%;
    margin-top: 10px;
    font-size: 14px;
}
.prize-content .rule-wrapper {
    margin-top: 35px;
}
.prize-content .rule-wrapper .rule-title {
    margin-bottom: 12px;
}
.prize-content .rule-wrapper .rule-line {
    clear: both;
    margin-bottom: 10px;
    font-size: 12px;
}
.prize-content .rule-wrapper .rule-line>span {
    margin-bottom: 10px;
    margin-right: 9px;
    float: left;
}
.rule-prizes{
	overflow: hidden;
}
.rule-content {
    overflow: hidden;
}
.mui-popup-inner{
	background: #eb4a4a;
    color: #fff;
}
.mui-popup-button{
	background: #e23d3d;
    color: #fff;
}
</style>
<body style="background: #eb4a4a; overflow-x: hidden;">
	<!-- 代码 开始 -->
	<img src="${base}/static/mobile/image/act/1.png" id="shan-img" style="display: none;">
	<img src="${base}/static/mobile/image/act/2.png" id="sorry-img" style="display: none;">
	<img id="actImg" style="width: 100%">
	<div class="banner">
		<div class="turnplate">
			<img class="panel" src="${base}/static/mobile/image/act/panel3.png">
			<canvas id="wheelcanvas" width="422px" height="422px" style="width:100%"></canvas>
			<img class="pointer" src="${base}/static/mobile/image/act/btn_attend2.png">
		</div>
	</div>
	<div id="prize_chance_bg" class="prize_chance_bg">
		<span class="prize-chance">您还有 <em id="chance"
			class="color-yellow">0</em> 次机会
		</span>
	</div>
	<div class="prize-content">
		<div class="prize-wrapper">
			<div class="prize-title">
				<div class="prize-divider" style="left: 0"></div>
				<div class="title-text">奖品列表</div>
				<div class="prize-divider" style="right: 0"></div>
			</div>
			<div class="tab-wrapper">
				<div class="tab  selected">我的奖品</div>
				<div class="tab">最新中奖</div>
			</div>
			<div id="my-prizeList-info">
			</div>
			<div id="new-prizeList-info" style="display:none">
			</div>
            <a href="${base}/mobile/userCenter.jsp" class="mui-btn mui-btn-warning mui-btn-block mt10">查看我的奖品</a>
		</div>
		<div class="rule-wrapper">
			<div class="prize-title  rule-title">
				<div class="prize-divider" style="left: 0"></div>
				<div class="title-text">活动规则</div>
				<div class="prize-divider" style="right: 0"></div>
			</div>
			<div class="rule-line">
				<span>活动时间:</span>
				<p class="rule-date" id="rule-date">2018-05-15 至 2018-07-31</p>
			</div>
			<div class="rule-line rule-activity-prize">
				<span>活动奖品:</span>
				<p class="rule-prizes" id="rule-prizes"></p>
			</div>
			<div class="rule-line">
				<span class="">活动规则:</span>
				<div id="rule-content" class="clear-float rule-content">三水网大转盘活动</div>
			</div>
		</div>
	</div>
	<!-- 代码 结束 -->
</body>
<script src="${base}/static/mobile/js/act/turntable.js?v=${version}"></script>
<script type="text/javascript">
	var turnplate={
		prize:[],				//大转盘奖品名称
		colors:["#fff6c9", "#ffd919", "#fff6c9", "#ffd919","#fff6c9", "#ffd919"],				//大转盘奖品区块对应背景颜色
		outsideRadius:195,			//大转盘外圆的半径
		textRadius:155,				//大转盘奖品位置距离圆心的距离
		insideRadius:56,			//大转盘内圆的半径
		startAngle:0,				//开始角度
		bRotate:false				//false:停止;ture:旋转
	};
	var actId=mobile.getUrlVars("id");
	var act;
	$(document).ready(function(){
		if(!actId){
			layer.open({content:'参数错误',time:3});
			return;
		}
		getActInfo();
		$('.tab-wrapper').on('tap','.tab',function(){
			if($(this).hasClass("selected")){
				return;
			}
			$(this).addClass("selected");
			$(this).siblings().removeClass("selected");
			if($(this).index()==0){
				$("#my-prizeList-info").show();
				$("#new-prizeList-info").hide();
			}else{
				$("#my-prizeList-info").hide();
				$("#new-prizeList-info").show();
			}
		});
		//旋转转盘 item:奖品位置; txt：提示语;
		var rotateFn = function (item, txt){
			$('#wheelcanvas').stopRotate();
			$('#wheelcanvas').rotate({
				angle:0,
				animateTo:1800+360-(item-1) * 60,
				duration:8000,
				callback:function (){
					if(item!=6){
						var prize = getPrize(item);
						var remark;
						if(prize.prize_type=="10"){
							remark="奖品已经入账，请在平台“我的抢购”中查看";
						}else{
							remark="奖品已经入账，请在平台“我的卡券”中查看";
						}
						mui.alert("<br><div class='fs16 bold'>"+txt+"</div><div class='color-yellow'>"+remark+"</div>", "恭喜中奖");
					}else{
						layer.open({content:"未中奖 再接再厉",time:3});
					}
					turnplate.bRotate = !turnplate.bRotate;
					refresh();
				}
			});
		};
		//抽奖
		$('.pointer').click(function (){
			if(act.chance<1){
				mui.alert('您已经没有抽奖机会，每天分享还可以再获得一次抽奖机会', '提示信息');
				return;
			}
			if(turnplate.bRotate)return;
			turnplate.bRotate = !turnplate.bRotate;
			mobile.ajaxPost(base+'/actInfo/luck',{actId: actId},function(json){
				if(json.success){
					rotateFn(json.data, turnplate.prize[json.data-1]);
				}else{
					if(json.msg=="subscribe"){
						var html=[];
						html.push('<img src="'+imgUrl+act.subscribe_img+'" style="width:100%">');
						html.push('<div>请先关注我们，大奖等着你拿。</div>');
						mui.alert(html.join(""), "提示信息");
					}else{
						layer.open({content:json.msg,time:3});
					}
					turnplate.bRotate = !turnplate.bRotate;
				}
			});
		});
	});
	
	function getActInfo(){
		mobile.ajaxPost(base+'/actInfo/getById',{id: actId},function(json){
			if(json.success){
				act = json.data;
				$("#actImg").attr("src",imgUrl+act.act_img);
				share.title=act.share_title;
				share.link=location.href;
				share.imgUrl=imgUrl+act.share_img;
				share.desc=act.share_content;
				share.callback=function(type){
					if(type=="1"){
						mobile.ajaxPost(base+'/actInfo/share',{actId: actId},function(json){
							refresh();
						});
					}else{
						layer.open({content:"分享朋友圈才可以获得抽奖机会",time:3});
					}
				}
				$(document).attr("title",act.act_name);
				$("#chance").html(act.chance);
				$.each(act.prize,function(id,item){
					turnplate.prize.push(mobile.getDictVal("prize_no",item.prize_no)+item.prize_name);
					$("#rule-prizes").append(mobile.getDictVal("prize_no",item.prize_no)+"："+item.prize_name+""+
							"。奖品数量："+item.prize_num+"<br>");
				});
				turnplate.prize.push("谢谢参与");
				drawRouletteWheel();
				var my_prize=[];
				if(act.myPrize&&act.myPrize.length>0){
					$.each(act.myPrize,function(id,item){
						my_prize.push('<div class="prize-info items"><span class="item">您抽中了'+mobile.getDictVal("prize_no",item.prize_no)+''+
								''+item.prize_name+'</span><span>'+new Date(item.create_time.replace(/-/g, "/")).format("MM-dd hh:mm")+'</span></div>');
					});
				}else{
					my_prize.push('<div class="prize-info">暂无中奖纪录</div>');
				}
				$("#my-prizeList-info").html(my_prize.join(""));
				var new_prize=[];
				if(act.newPrize&&act.newPrize.length>0){
					$.each(act.newPrize,function(id,item){
						new_prize.push('<div class="prize-info items"><span class="item">'+item.nickname+'抽中了'+mobile.getDictVal("prize_no",item.prize_no)+''+
								''+item.prize_name+'</span><span>'+new Date(item.create_time.replace(/-/g, "/")).format("MM-dd hh:mm")+'</span></div>');
					});
				}else{
					new_prize.push('<div class="prize-info">暂无中奖纪录</div>');
				}
				$("#new-prizeList-info").html(new_prize.join(""));
				$("#rule-date").html(act.start_date+"至"+act.end_date);
				$("#rule-content").html(act.act_desc);
			}
		});
	}
	function refresh(){
		mobile.ajaxPost(base+'/actInfo/refresh',{actId: actId},function(json){
			if(json.success){
				act.chance = json.data.chance;
				$("#chance").html(json.data.chance);
				var my_prize=[];
				if(json.data.myPrize&&act.myPrize.length>0){
					$.each(json.data.myPrize,function(id,item){
						my_prize.push('<div class="prize-info items"><span class="item">您抽中了'+mobile.getDictVal("prize_no",item.prize_no)+''+
								''+item.prize_name+'</span><span>'+new Date(item.create_time.replace(/-/g, "/")).format("MM-dd hh:mm")+'</span></div>');
					});
				}else{
					my_prize.push('<div class="prize-info">暂无中奖纪录</div>');
				}
				$("#my-prizeList-info").html(my_prize.join(""));
				var new_prize=[];
				if(json.data.newPrize&&act.newPrize.length>0){
					$.each(json.data.newPrize,function(id,item){
						new_prize.push('<div class="prize-info items"><span class="item">'+item.nickname+'抽中了'+mobile.getDictVal("prize_no",item.prize_no)+''+
								''+item.prize_name+'</span><span>'+new Date(item.create_time.replace(/-/g, "/")).format("MM-dd hh:mm")+'</span></div>');
					});
				}else{
					new_prize.push('<div class="prize-info">暂无中奖纪录</div>');
				}
				$("#new-prizeList-info").html(new_prize.join(""));
			}
		});
	}
	
	function getPrize(prizeNo){
		var prize;
		$.each(act.prize,function(id,item){
			if(item.prize_no==prizeNo){
				prize = item;
			}
		});
		return prize;
	}

	function drawRouletteWheel() {    
	  var canvas = document.getElementById("wheelcanvas");
	  if (canvas.getContext) {
		  //根据奖品个数计算圆周角度
		  var arc = Math.PI / (turnplate.prize.length/2);
		  var ctx = canvas.getContext("2d");
		  //在给定矩形内清空一个矩形
		  ctx.clearRect(0,0,422,422);
		  //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
		  ctx.strokeStyle = "#ffd919";
		  //font 属性设置或返回画布上文本内容的当前字体属性
		  ctx.font = '18px Microsoft YaHei';      
		  for(var i = 0; i < turnplate.prize.length; i++) {       
			  var angle = turnplate.startAngle + (i+4) * arc;
			  ctx.fillStyle = turnplate.colors[i];
			  ctx.beginPath();
			  //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
			  ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);    
			  ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
			  ctx.stroke();  
			  ctx.fill();
			  //锁画布(为了保存之前的画布状态)
			  ctx.save();   
			  
			  //----绘制奖品开始----
			  ctx.fillStyle = "#702428";
			  var text = turnplate.prize[i];
			  var line_height = 26;
			  //translate方法重新映射画布上的 (0,0) 位置
			  ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
			  
			  //rotate方法旋转当前的绘图
			  ctx.rotate(angle + arc / 2 + Math.PI / 2);
			  
			  /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
			  if(text.indexOf("奖")>0){//流量包
				  var texts = text.split("奖");
				  for(var j = 0; j<texts.length; j++){
					  ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
					  if(j == 0){
						  ctx.fillText(texts[j]+"奖", -ctx.measureText(texts[j]+"奖").width / 2, j * line_height);
					  }else{
					      if (texts[j].length>6){
                              ctx.fillText(texts[j].substring(0,6), -ctx.measureText(texts[j].substring(0,6)).width / 2, j * line_height);
                              ctx.fillText(texts[j].substring(6), -ctx.measureText(texts[j].substring(6)).width / 2, (j+1) * line_height);
                          }else{
                              ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                          }
					  }
				  }
			  }else if(text.indexOf("奖") == -1 && text.length>6){//奖品名称长度超过一定范围 
				  text = text.substring(0,6)+"||"+text.substring(6);
				  var texts = text.split("||");
				  for(var j = 0; j<texts.length; j++){
					  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
				  }
			  }else{
				  //在画布上绘制填色的文本。文本的默认颜色是黑色
				  //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
				  ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
			  }
			  
			  //添加对应图标
			  if(text.indexOf("闪币")>0){
				  var img= document.getElementById("shan-img");
				  img.onload=function(){  
					  ctx.drawImage(img,-15,10);      
				  }; 
				  ctx.drawImage(img,-15,10);  
			  }else if(text.indexOf("谢谢参与")>=0){
				  var img= document.getElementById("sorry-img");
				  img.onload=function(){  
					  ctx.drawImage(img,-15,10);      
				  };  
				  ctx.drawImage(img,-15,10);  
			  }
			  //把当前画布返回（调整）到上一个save()状态之前 
			  ctx.restore();
			  //----绘制奖品结束----
		  }     
	  } 
	}
</script>
</html>