hexiugang
/
iamberry-common-parent


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
							<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="//css.iamberry.com/css/mui.min.css?v=2016101701" />
	<link rel="stylesheet" type="text/css" href="//css.iamberry.com/css/shop/style.css?v=2016101701" />
	<style>
		.clear{clear:both;}
		/* 大转盘样式 */
		.drawbanner{display:block;width:95%;margin:0 auto;}
		.drawbanner .turnplate{display:block;width:100%;position:relative;}
		.drawbanner .turnplate canvas.item{width:100%;-webkit-transform: translateZ(0);transform: translateZ(0);}
		.drawbanner .turnplate img.pointer{ position: absolute;width: 25%;height: 30%;left: 37.5%;top: 33%;}
		.mui-popup.mui-popup-in{height:370px;background: url(//s.iamberry.com/images/shop/alert-bg2.png) center top /100% no-repeat;}
		.mui-popup-inner{background-color: transparent;margin-top:100px;padding: 15px 15px 5px 15px;position: static;}
		.mui-popup-title{color: #e23600;font-size: 13px;}
		.mui-popup-title+.mui-popup-text{margin-top: 10px;}
		.mui-popup-text img{width: 70px;}
		.mui-popup-text{font-size: 14px;color: #e23600;}
		.mui-popup-text strong{color: #fc5b8b;}
		.mui-popup-text span{color: #fc5b8b;font-size: 35px;}
		.mui-popup-button{background-color: transparent;}
		.mui-popup-button:after,.mui-popup-inner:after{display: none;}
		.mui-popup-button:first-child{    border-radius: 25px;
			height: 38px;
			line-height: 40px;
			font-weight: 100;
			color: #e23600;
			width: 50%;
			margin:10px auto 0 auto;}
		.mui-popup-button:last-child{border-radius:1px !important;background:url(//s.iamberry.com/images/shop/btn-wheel-bg1.png) center center no-repeat ;background-size: 100%; height: 55px;line-height: 68px;font-weight: 100;color: #fff;width:40%;margin:0 auto;}
		.mui-popup-buttons{display: block;}
		.mui-popup.mui-popup-out{-webkit-transition-duration: 0ms;transition-duration: 0ms;}
		.mui-backdrop-action.mui-backdrop,.mui-popup-backdrop{
			background-color: rgba(0,0,0,.7);
		}
		#img-box{display:none;}
		.mui-popup.mui-popup-in {
			-webkit-transition-duration: 0ms;
			transition-duration: 0ms;
		}
		.mui-popup-buttons{height: 55px;}
		.mui-popup-text .x-close{width: 100px;
			height: 50px;
			bottom: 0;
			left: 83px;
			position: fixed;
			margin-top: 310px;}
	</style>
</head>

<body style="background: #000;">
<div class="loading-bg">
	<div class="mui-loading">
		<div class="mui-spinner">
		</div>
		&nbsp;&nbsp;加载中...
	</div>
</div>

<div class="mui-content" style="background: #000;">
	<div style="padding:0">
		<img width="100%" src="//s.iamberry.com/images/shop/wheel-body-bg.jpg" />
		<div style="position: absolute;top: 25%;left: 0;width: 100%;text-align: center;color: #f7630c;text-shadow: 1px 1px 1px #000;"><span id="gamecount">0</span>次免费抽 100%中奖</div>
		<div style="position: absolute;left: 0;top:28%;width: 100%;">
			<div class="drawbanner">
				<div class="turnplate" style="background-image:url(//s.iamberry.com/images/shop/turnplate-bg1.png);background-size:100% 100%;background-repeat: no-repeat;background-position: center;">
					<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
					<img class="pointer" src="//s.iamberry.com/images/shop/turnplate-pointer1.png"/>
				</div>
			</div>
			<div style="position: relative;line-height: 0;">
				<div style="position: absolute;left:0;top:0;width: 50%;text-align: center;-webkit-transform: translateY(-25%);" class="go_prize_log" value="1">
					<img width="60%" src="//s.iamberry.com/images/shop/btn-jilu1.png" />
				</div>
				<div style="position: absolute;right:0;top:0;width: 50%;text-align: center;-webkit-transform: translateY(-25%);">
					<a href="#guize-picture"><img width="60%" src="//s.iamberry.com/images/shop/btn-guize1.png" /></a>
				</div>
			</div>
		</div>
	</div>
	<div id="img-box">
		<img src="//s.iamberry.com/images/shop/alert-bg2.png" />
	</div>
</div>
<div id="guize-picture" class="mui-popover mui-popover-action mui-popover-bottom" style="top:0">
	<img style="margin-top:25%;margin-left: 5%;" width="90%" src="//s.iamberry.com/images/shop/guize-bg1.png" />
</div>
<script src="//s.iamberry.com/js/mui.min.js"></script>
<script src="//s.iamberry.com/js/jquery-2.1.1.min.js"></script>
<script src="//s.iamberry.com/js/shop/awardRotate.js"></script>
<script src="//s.iamberry.com/js/shop/main.js"></script>
<script src="//s.iamberry.com/js/shop/wechat-utils-1.0.js"></script>
<script type="text/javascript">
    var turnplate={
        restaraunts:[],				//大转盘奖品名称
        colors:[],					//大转盘奖品区块对应背景颜色
        outsideRadius:156,			//大转盘外圆的半径
        textRadius:130,				//大转盘奖品位置距离圆心的距离
        insideRadius:35,			//大转盘内圆的半径
        startAngle:0,				//开始角度
        bRotate:false				//false:停止;ture:旋转
    };

    var prizeList = null;
    var count=0,hide_dalog=true;
    $(document).ready(function(){
        window.repleFlag = false;
        window.wxFriend = {
            "appId": "",
            "imgUrl":'//s.iamberry.com/images/shop/8.png',
            "link":domanUrl+"/iamberry/wechat/activity/go_luck_draw",
            "desc":"万圣节8秒冲奶，一键搞定捣蛋宝宝，快来围观爱贝源智能冲奶机，有大奖品抽哦！",//描述
            "title":"3次免费抽，100%中奖，宝宝手推车抱回家，快来转转转！",			//标题
            "netError":"您的网络异常，请刷新重试!如多次刷新无效，请向我们反应 ~",
            "shareTimeSuccess":"分享成功",		//这里是分享朋友圈后调用的文字
            "shareTimeCancel":"已取消分享",	//这里是取消分享给朋友圈后调用的文字
            "shareAppSuccess":"分享成功",		    //这里是分享好友后调用的文字
            "shareAppCancel":"已取消分享"	//这里是取消分享给好友后调用的文字
        };
        getConfig();

        getwheelcount();//加载抽奖次数
        //动态添加大转盘的奖品与奖品区域背景颜色
        mui.ajax(base_path +'/game/get_prize_info',{
            data: {
                prizeGameId:2
            },
            dataType:'json',
            async:true,
            type:'post',
            timeout:15000,
            success:function(dt){
                if (dt.status) {
                    prizeList = dt.data;
                    //console.log(prizeList);

                    mui(prizeList).each(function(index){
                        turnplate.restaraunts[index] = this.prizeName;
                        if ((index + 1) % 2 == 0) {
                            turnplate.colors[index] = "#694cb3";
                        } else {
                            turnplate.colors[index] = "#a282f5";
                        }
                        //先把图片加载出来
                        $("#img-box").append('<img src="'+this.prizeImage+'" id="'+this.prizeId+'"/>');
                    });
                    //console.log(turnplate.restaraunts)
                    //防止图片没加载完设置1秒后再绘制canvas
                    setTimeout(function(){
                        drawRouletteWheel();
                        document.querySelector('.loading-bg').style.display = 'none';
                    },1000);
                } else {
                    alert("获取奖品信息失败！")
                }
            },
            error:function(xhr,type,errorThrown){
                console.log(xhr)
            }
        });

        //旋转转盘 item:奖品位置; txt：提示语;
        var rotateFn = function (item, txt, to){
            var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
            if(angles<270){
                angles = 270 - angles;
            }else{
                angles = 360 - angles + 270;
            }
            //console.log(angles)
            $('#wheelcanvas').stopRotate();
            $('#wheelcanvas').rotate({
                angle:0,
                animateTo:(to == null ? (angles+1800) : to),
                duration:3000,
                callback:function (){
                    turnplate.bRotate = !turnplate.bRotate;
                }
            });
        };

        // 奖品是否抽光
        var flag = true;

        $(".pointer").on("click",function(){
            wheel_ajax();
        });
        function wheel_ajax(){
            if (!flag) {
                // rotateFn(270, "");
                turnplate.bRotate = !turnplate.bRotate;//重置转盘
                //去产品列表
                var r=confirm("您没有抽奖次数了，是否马上前往购买商品？");
                if (r==true){
                    mui.openWindow({
                        url:'//h5.iamberry.com/iamberry/wechat/product/desc?productId=26' //chanpin_details.html
                    });
                }
                return;
            }
            if(turnplate.bRotate)return;
            rotateFn(0 , "", 90000000)
            turnplate.bRotate = !turnplate.bRotate;//重置转盘
            //获取随机数(奖品个数范围内)
            //替换为后台代码
            mui.ajax(base_path +'/game/luck_draw?gameId=2&orderId=',{
                data: {},
                dataType:'json',
                type:'get',
                timeout:15000,
                success:function(dt){
                    //console.log(dt.data);
                    var img,msg;

                    if (dt.status) {
                        var num;
                        mui.each(prizeList, function(index) {
                            if(this.prizeId==dt.data){
                                msg=this.prizeName;
                                img=this.prizeImage;
                                num=index;
                            }
                        });
                        //console.log("num:"+(num+1))
                        rotateFn(num+1, "SUCCESS");//重置转盘
                        count--;
                        $("#gamecount").text(count);//点一次抽奖次数-1
                        if(count>0){
                            setTimeout(function(){
                                mui.alert('<img src="'+img+'" /><span class="x-close"></span>','获得'+msg,'继续抽奖',function(){
                                    removeDalog();
                                    wheel_ajax();
                                });
                            },3000);
                        }else{
                            flag = false;
                            setTimeout(function(){
                                mui.alert('<img src="'+img+'" /><span class="x-close"></span>','获得'+msg,'马上下单',function(){
                                    mui.openWindow({
                                        url:'//h5.iamberry.com/iamberry/wechat/product/desc?productId=26' //chanpin_details.html
                                    });
                                });
                            },3000);
                        }
                    } else {
                        flag = false;
                    }
                },
                error:function(xhr,type,errorThrown){
                    console.log(xhr)
                }
            });
        }
        //剩余次数
        function getwheelcount(){
            mui.ajax(base_path + '/game/selectHallowmasGameCount?dates=' + new Date().getTime(),{
                data: {
                    gameId:2
                },
                dataType:'json',
                type:'post',
                timeout:15000,
                success:function(dt){
                    if (dt.status) {
                        count=dt.data;
                        $("#gamecount").text(dt.data);
                        if(dt.data<=0){
                            flag = false;
                        }
                    }
                },
                error:function(xhr,type,errorThrown){
                    console.log(xhr)
                }
            });
        }

    });


    //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
    window.onload=function(){
        //drawRouletteWheel();
    };

    function drawRouletteWheel() {
        var canvas = dc("wheelcanvas");
        if (canvas.getContext) {
            //根据奖品个数计算圆周角度
            var arc = Math.PI / (turnplate.restaraunts.length/2);
            var ctx = canvas.getContext("2d");
            //在给定矩形内清空一个矩形
            ctx.clearRect(0,0,422,422);
            //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
            ctx.strokeStyle = "rgba(0,0,0,0)";//边框颜色
            //font 属性设置或返回画布上文本内容的当前字体属性
            ctx.font = '15px Arial';
            for(var i = 0; i < turnplate.restaraunts.length; i++) {
                //添加对应图标
                if (prizeList != null) {
                    var angle = turnplate.startAngle + i * 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 = "#fff";
                    var text = turnplate.restaraunts[i];
                    var line_height = 17;
                    //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);

                    /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
                    //在画布上绘制填色的文本。文本的默认颜色是黑色
                    //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
                    ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
                    var img= dc(prizeList[i].prizeId);
                    ctx.drawImage(img,-25,10);

                    //把当前画布返回（调整）到上一个save()状态之前
                }
                //----绘制奖品结束----
                ctx.restore();
            }
        }
    }
    var mask = mui.createMask(function() {
    }); //callback为用户点击蒙版时自动执行的回调；
    mui('body').on('tap', '#guize-picture,#share-picture', function(e) {
        mui(this).popover('toggle');
    });
    mui('body').on('tap', '.x-close', function(e) {
        //console.log("关闭");
        hide_dalog=false;
        removeDalog();
    });
    function removeDalog(){
        var dalog=$('.mui-popup');
        dalog.remove();
        $(".mui-popup-backdrop").removeClass("mui-active");
    }
</script>
</body>

</html>