mashangyoujiu/Application/Vip/View/Activity/turntable_pay.html

<!DOCTYPE html>
<html>
<!--[1.2.93]-->
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vip/css/turntable/reset.css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vip/css/turntable/turntable.css" />
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css">
    <title>幸运大转盘</title>
    <style>
        .notpointer img{
            width: 100%;
            height: 100%;
        }
        img{ pointer-events: none; }
        .prize-box img {
            width: auto;
            max-width: 12vw;
            max-height: 10vw;
        }
    </style>
</head>
<body>
<div class="wrap" style="background-image: url('__PUBLIC__/vip/images/turntable/z_bj.png');">
    <div class="turn_a">
        <div class="turn_a1 notpointer"><img src="__PUBLIC__/vip/images/turntable/z_nq.png" /></div>
        <div class="turn_a2 notpointer"><img src="__PUBLIC__/vip/images/turntable/z_zzz.png" /></div>

        <volist name="turns" id="tu" key="key">
            <div class="turn_a0{$key}" prob="{$tu['prob']}" id="prize-{$tu['id']}" type="{$tu['type']}">
                <div>{$tu['prize_name']}</div>
                <if condition="$tu['type'] eq 1">
                    <img src="{$tu['prizeimg']}"/>
                    <else />
                    <img src="{$tu['prizeimg']}"/>
                </if>
            </div>
        </volist>

    </div>
    <div class="turn_b">
        <!--活动攻略-->
        <div class="turn_b03 notpointer"><img src="__PUBLIC__/vip/images/turntable/z_b3.png"/></div>
        <!--活动说明-->
        <div class="turn_b01 notpointer"><img src="__PUBLIC__/vip/images/turntable/z_b1.png"/></div>
        <!--查看奖品-->
        <div class="turn_b02 notpointer"><img src="__PUBLIC__/vip/images/turntable/z_b2.png"/></div>
    </div>
</div>

<div class="mask">
    <div class="marsk_box">
        <div>
            <div class="mask_inner">
                <div class="mask_close notpointer"><img src="__PUBLIC__/vip/images/turntable/z_clo.png"/></div>
                <div class="mask_inner01">恭喜你获得</div>
                <div class="mask_inner02">
                    <img class="img" src="" />
                </div>
                <div class="mask_inner03"></div>
                <div class="mask_inner04" style="display: none;">
                    <div class="mask_inner04_a">
                        <input class="code" type="text" placeholder="请输入核销码" />
                    </div>
                    <div class="mask_inner04_b">确认领取</div>
                </div>
                <div class="mask_inner05 go">现金已存入会员卡>></div>
            </div>
            <div class="mask_hdgl">
                <div class="mask_hdgl01">活动攻略</div>
                <div class="mask_hdgl00 notpointer"><img src="__PUBLIC__/vip/images/turntable/z_bb.png"/></div>
                <div class="mask_hdgl02">{$nr['strategy']}</div>
            </div>
            <!--活动说明-->
            <div class="mask_hdsm">
                <div class="mask_hdsm01">活动说明</div>
                <div class="mask_hdsm00 notpointer"><img src="__PUBLIC__/vip/images/turntable/z_bb.png"/></div>
                <div class="mask_hdsm02">
                    {$nr['explain']}
                    <p class="p_time">活动时间：{:date('Y-m-d H:i:s',$nr['start_time'])}至{:date('Y-m-d H:i:s',$nr['end_time'])}</p>
                </div>
            </div>
            <!--查看奖品-->
            <div class="mask_ckjp">
                <div class="mask_ckjp01">我的奖品</div>
                <div class="mask_ckjp00 notpointer"><img src="__PUBLIC__/vip/images/turntable/z_clo.png"/></div>
                <div class="mask_ckjp02">
                    <img class="img" src=""/>
                </div>
                <div class="mask_ckjp03">请先进行抽奖</div>
                <div class="mask_inner04" style="display: none;">
                    <div class="mask_inner04_a">
                        <input class="code" type="text" placeholder="请输入核销码" />
                    </div>
                    <div class="mask_inner04_b">确认领取</div>
                </div>
                <div class="mask_inner05 go" style="display: none;" ></div>
            </div>
        </div>

    </div>

</div>
<if condition="$isTest">
    <div class="text">{$tipstext}</div>
</if>
</body>
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/vip/js/fastclick.js"></script>
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery.rotate.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
<script type="text/javascript" src="__PUBLIC__/vip/js/window-reload.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });

    $('body').on('click','.go',function () {
        localStorage.viprefrash = 0;
        window.location.href='/index.php/Vip/Index/index/merchantid={$merchantid}';
    })
    // var orderid = "{$orderid}";
    // var first = "<php>echo session('firstUrlType');</php>";
    // var code = "<php>echo session('qrcode');</php>";
    // var pri = "{$primaryid}";
    // var close = "{$close}";

    var rotate = 0;//设置初始旋转角度
    var time = 0;
    var canClick = true;
    var strClass;
    layui.use(['layer'], function () {
        $(".turn_a2").rotate({
            bind: {
                click: function() {
                    //角度随机数
                    if(canClick){
                        canClick = false;//防止用户连续点击
                        var arr = [];
                        var _this = this;
                        for(var i=1;i<9;i++){
                            var str = '.turn_a0'+i;
                            var d = getRotateZ($(str));//获取当前奖品角度
                            var start = d>=0?d:d+360;
                            start = start-start%45+4;//该奖品角度起始位置
                            var end = start+45-8;//该奖品结束位置
                            var obj = {
                                id:$(str).attr('id').split('-')[1],
                                min:start,
                                max:end,
                                prize:($(str).children('div').text()).replace(' ',''),
                                v:$(str).attr('prob')
                            }
                            arr.push(obj);
                        }
                        $.post("/index.php/Vip/Activity/openTurntable",{
                            arr:arr,
                            id:"{$id}"
                        },function (data) {
                            console.log(data);
                            if(data.success){
                                $('.mask_inner04_b').attr('order',data.orderid);
                                strClass = "#prize-"+data.id;
                                var type = parseInt($(strClass).attr('type'));
                                switch(type){
                                    case 1:
                                        $('.mask_inner04').css('display','flex');
                                        $('.mask_inner05').hide();
                                        break;
                                    case 2:
                                        $('.mask_inner04').hide();
                                        $('.mask_inner05').show();
                                        $('.mask_inner05').html('积分已存入会员卡>>');
                                        break;
                                    case 3:
                                        $('.mask_inner04').hide();
                                        $('.mask_inner05').show();
                                        $('.mask_inner05').html('现金已存入会员卡>>');
                                        break;
                                    case 4:
                                        $('.mask_inner04').hide();
                                        $('.mask_inner05').show();
                                        $('.mask_inner05').html('优惠券已存入会员卡>>');
                                        break;
                                    case 5:
                                        $('.mask_inner04').hide();
                                        $('.mask_inner05').show();
                                        $('.mask_inner05').html('去会员卡发现更多>>');
                                        break;
                                }
                                // if(data.orderid==0){
                                //     $('.mask_inner05').removeClass('go');
                                //     $('.mask_inner05').html('支付后才能领取奖品哦');
                                //     top.layer.msg('支付后奖品才能领取哦',{time:1100});
                                // }

                                var deg = getRotateZ($(strClass));
                                var rd = parseInt(rand(3000,3600)/360)*360;//圈数随机

                                var start = deg>=0?deg:deg+360;
                                start = start-start%45+4;//该奖品角度起始位置
                                var end = start+45-8;//该奖品结束位置
                                var degrees = rand(start,end);

                                rd += degrees;
                                time = parseInt(rd*4);
                                $(_this).rotate({
                                    angle: rotate,  //恢复初始角度
                                    animateTo: rd,  //旋转角度
                                    duration: time,  //旋转时间
                                    easing: $.easing.easeOutExpo,  //旋转方式
                                })
                                setTimeout(function() {
                                    $(".mask").show();
                                    $(".mask_inner").show();
                                    $(".mask_inner03").text($(strClass).children('div').text());
                                    $(".mask_inner02 img").attr("src",$(strClass+" img").attr("src"));
                                    $('.mask_ckjp03').text($(strClass).children('div').text());
                                    $('.mask_ckjp02 img').attr('src',$(strClass+" img").attr("src"));

                                    rotate = degrees;
                                    canClick = true;
                                }, time+500);
                            }else {

                                top.layer.msg(data.msg,{time:1500});
                            }
                        })
                    }
                }
            }
        });
    })


    //领取实物
    $('.mask_inner04_b').click(function () {
        var code = $(this).prev().children().val();
        var orderid = $(this).attr('order');
        if(!code.length){
            top.layer.msg('请输入核销码');
            return;
        }
        $.post("/index.php/Vip/Activity/getPrize",{
                prizeid:strClass.split('-')[1],
                code:code
            },
            function (data) {
                if(data.success){
                    top.layer.msg(data.msg,{icon:6,time:1000},function () {
                        // $('.mask').hide();
                        $('.mask_inner04').hide();
                        $('.mask_inner05').show();
                        $('.mask_inner05').html('去会员卡发现更多>>');
                    })
                }else {
                    top.layer.msg(data.msg,{icon:2,time:1000},function () {
                        // $('.mask').hide();
                    })
                }
            })

    })

    //关闭
    $(".mask_close").click(function(){
        $(".mask").hide();
    })
    //活动攻略
    $(".turn_b03").click(function(){
        $(".mask").show();
        $('.mask_inner').hide();
        $(".mask_hdgl").show();
    })
    $(".mask_hdgl00").click(function(){
        $(".mask").hide();
        $('.mask_inner').hide();
        $(".mask_hdgl").hide();
    })
    //活动说明
    $(".turn_b01").click(function(){
        $(".mask").show();
        $('.mask_inner').hide();
        $(".mask_hdsm").show();
    })
    $(".mask_hdsm00").click(function(){
        $(".mask").hide();
        $('.mask_inner').hide();
        $(".mask_hdsm").hide();
    })
    //查看奖品
    $(".turn_b02").click(function(){
        $(".mask").show();
        $('.mask_inner').hide();
        $(".mask_ckjp").show();
    })
    $(".mask_ckjp00").click(function(){
        $(".mask").hide();
        $('.mask_inner').hide();
        $(".mask_ckjp").hide();
    })

    function getRotateZ(elm) {
        var str = elm.css('transform');
        var arr = str.split('(')[1].split(')')[0].split(',');
        var a = parseFloat(arr[0]);
        var b = parseFloat(arr[1]);
        var deg = Math.round(Math.atan2(b, a) * (180 / Math.PI));
        return deg;
    }
    function rand(min,max) {
        return Math.floor(Math.random()*(max-min+1)+min);
    }
</script>
</html>