<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta content="telephone=no" name="format-detection">
    <meta name="wap-font-scale" content="no">
    <title>万圣节奇妙之旅</title>
    <script src="lib/fsize.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/layer.css">
    <link rel="stylesheet" href="css/daily.css">
    <link rel="stylesheet" href="css/liMarquee.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css?v=202007251058">
    <style>
        .layui-layer-shade {
            opacity: 0.7 !important;
        }

        .yourclass5 {
            border-radius: 0rem !important;
            background: rgba(0, 0, 0, 0) !important;
        }
        .yourclass6{
            border-radius: 0rem !important;
            background: rgba(0, 0, 0, 0) !important;
            left: 1.6rem !important;
        }
        .yourclass5 .layui-layer-content {
            border-radius: 0rem !important; 

        }
    </style>


</head>
<body style='background:rgba(0,0,0,0)'>
    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="red-box">
                <img data-type='1' class="lucky-btn" src="images/lucky-btn1.png" alt="">
                <div class="red-lunbo"><span class="lunbo-span">用户昵称预留眼疾手快,获得<sppan style="color: #FFF76A;">xxx</sppan>橙钻</span></div>
                <ul class="red-ul">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="pum-box">
                <div class="pum-content pumShow">
                    <div data-type='1'></div>
                    <div data-type='2'></div>
                    <div data-type='3'></div>
                    <div data-type='4'></div>
                    <div data-type='5'></div>
                    <div data-type='6'></div>
                </div>
                <div class="pum-nav">
                    <span class="pum-nav-span1">
                        <img class="pum-king" src="images/king.png" alt="">
                        <img class="pum-face" src="https://zhibocdn.lvdou66.com/comm/user/boy.png?x-oss-process=image/resize,w_90" alt="">
                        用户昵称预留
                    </span>
                    <span class="pum-nav-span2">
                        <p style="padding-top: 0.45rem;">万圣积分: <span>XXXX</span></p>
                        <p>击杀一次: <span>100积分</span></p>
                    </span>
                </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="card-box">
                <div data-type="0" class="card1"></div>
                <div class="card12">
                    <!-- <div class="card-content-box">
                        <img src="https://zhibocdn.lvdou66.com/comm/gift/60aa37d36ba24394b7b5ce8beba3ebea.png" alt="">
                        <p>奖品名称预留</p>
                    </div> -->
                </div>
                <div data-type="1" class="card2"></div>
                <div class="card22">
                    <!-- <div class="card-content-box">
                        <img src="https://zhibocdn.lvdou66.com/comm/gift/60aa37d36ba24394b7b5ce8beba3ebea.png" alt="">
                        <p>奖品名称预留</p>
                    </div> -->
                </div>
                <p>每日免费参与: <span class="card-num">1次</span></p>
            </div>
          </div>
        </div>

        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
      <div class="layer-money">
        <p>恭喜获得<span class="lucky-money">XXX</span>橙钻</p>
        <p>请通过账户余额查看</p>
        <p>橙钻*<span class="lucky-money">XXX</span></p>
    </div>
    <div class="layer-no">
        <div class="layer-no-btn1"></div>
        <div class="layer-no-btn2"></div>
    </div>
    <div style="display: none;" class="shadow-box">
        <!-- <img class="light lightShow" src="images/light.png" alt="">
        <img class="pum-img" src="images/pum1.png" alt=""> -->
    </div>
    <div class="layer-pum">
        <img class="pum-close" src="images/pum-close.png" alt="">
        <p>礼物名称预留</p>
        <div class="layer-pum-img">
            <img src="https://zhibocdn.lvdou66.com/comm/gift/60aa37d36ba24394b7b5ce8beba3ebea.png" alt="">
        </div>
        <div class="layer-pum-btn"></div>
    </div>
    <div class="layer-out">
        <img class="pum-close" src="images/pum-close.png" alt="">
        <div class="layer-out-btn"></div>
    </div>
</body>
<script src="lib/jquery-3.1.1.min.js"></script>
<script src="lib/liMarquee.js"></script>
<script src="layer-v3.1.0/layer/layer.js"></script>
<script src="lib/swiper.min.js"></script>
<script src="lib/default.js?v='20200512'"></script>
<script>
$(function(){
    var pumNum;
    var pumOk=true;
    diamondTask()
    lunbo()
    var swiper = new Swiper('.swiper-container', {
      autoHeight: true, //enable auto height
      spaceBetween: 20,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    $(".sg").on("click",function(){
        $(".mc-btn").addClass("user-btn")
        $(".mc-box").hide()
        $(".user-box").fadeIn(350)
        diamondTask()
        lunbo()
    })
    $(".layer-no-btn1").on("click",function(){
        layer.closeAll()
    })
    $(".layer-no-btn2").on("click",function(){
        goReg()
    })
    function list(){
        $.ajax({
            url:$ip+'activity/halloween/getMicRank',
            success:function(data){
                console.log('主播榜单',data);
                var html=[];
                for(var i=0;i<10;i++){
                    if(data.result[i]==undefined)break;
                    var list=data.result[i]
                    html+='<li>';
                    if(list.mic.islive>0)html+='<img class="live" src="images/live.png">'    
                    if(i<3)html+='<span class="list-span1"><img src="images/m'+(i+1)+'.png" alt=""></span>';
                    else html+='<span class="list-span1"><span>'+(i+1)+'</span></span>';
                    html+='<span class="list-span2">';
                    if(i<3)html+='<img class="mc-king" src="images/king.png" alt="">';
                    html+='<a href="yazhai://_' + list.mic.uid + '_zone"><img class="mc-face" src="https://zhibocdn.lvdou66.com/comm'+list.mic.icon+'?x-oss-process=image/resize,w_110" alt=""></a>';
                    if(list.guard.uid!=undefined)html+='<a href="yazhai://_' + list.guard.uid + '_zone"><img class="user-face" src="https://zhibocdn.lvdou66.com/comm'+list.guard.icon+'?x-oss-process=image/resize,w_110" alt=""></a> '+list.mic.nick+'';
                    else html+='<img class="user-face" src="images/face.png" alt=""> '+list.mic.nick+'';
                    html+='</span>';
                    html+='<span class="list-span3">'+list.mic.score+'</span>';
                    html+='</li>';
                }
                $(".list-ul").html(html);
                if(data.result.length>10){
                    var page=10
                    $(".more-box").show().unbind("click").on("click",function(){
                        var html=[];
                        for(var i=page;i<page+10;i++){
                            if(data.result[i]==undefined)break;
                            var list=data.result[i]
                            html+='<li>';
                            if(list.mic.islive>0)html+='<img class="live" src="images/live.png">'    
                            html+='<span class="list-span1"><span>'+(i+1)+'</span></span>';
                            html+='<span class="list-span2">';
                            html+='<a href="yazhai://_' + list.mic.uid + '_zone"><img class="mc-face" src="https://zhibocdn.lvdou66.com/comm'+list.mic.icon+'?x-oss-process=image/resize,w_110" alt=""></a>';
                            if(list.guard.uid!=undefined)html+='<a href="yazhai://_' + list.guard.uid + '_zone"><img class="user-face" src="https://zhibocdn.lvdou66.com/comm'+list.guard.icon+'?x-oss-process=image/resize,w_110" alt=""></a> '+list.mic.nick+'';
                            else html+='<img class="user-face" src="images/face.png" alt=""> '+list.mic.nick+'';
                            html+='</span>';
                            html+='<span class="list-span3">'+list.mic.score+'</span>';
                            html+='</li>';
                        }
                        $(".list-ul").append(html);
                        page+=10
                        if(page>=data.result.length)$(".more-box").hide();
                    })
                }
            }
        })
    }
    function mcTask(){
        $.ajax({
            url:$ip+'activity/halloween/getMicTaskInfo',
            data:{
                roomid:sessionStorage.roomId
            },
            success:function(data){
                console.log('主播收集任务',data)
                var html=[];
                html+='<li>百变南瓜*'+data.result[0].num+'</li>';
                html+='<li>万圣女巫*'+data.result[1].num+'</li>';
                html+='<li>万圣古堡*'+data.result[2].num+'</li>';
                $(".gift-ul").html(html);
            }
        })
    }
    function diamondTask() {
        $.ajax({
            url: $ip + 'activity/halloween/getUserView',
       
            success: function (data) {
                console.log("用户信息",data)
                $(".red-ul li").removeClass("num-img-go")
                var NumArr = String(data.result.diamondValue).split("");
                // height: 36.8rem;
                    if (data.result.diamondValue != 0) {
                        for (var i = 0; i < NumArr.length; i++) {
                            $(".red-ul li").eq(3 - i).css("transform", 'translateY(' + (-18.4 - 1.84 * NumArr[(NumArr.length - (i + 1))]) + 'rem)');
                        }
                    } else {
                        for (var i = 0; i < 4; i++) {
                            $(".red-ul li").eq(3 - i).css("transform", 'translateY(' + (-18.4 - 1.84 * 6) + 'rem)');
                        }
                    }
                if(data.result.hasDiamond){
                    $(".lucky-btn").attr("src",'images/lucky-btn3.png')
                    $(".lucky-btn").attr("data-type",'2')
                    $(".lucky-btn").unbind("click")
                }else{
                    $(".lucky-btn").attr("src","images/lucky-btn1.png")
                    $(".lucky-btn").attr("data-type","1")
                    $(".lucky-btn").unbind("click").on("click",function(){
                        $.ajax({
                            url:$ip+'activity/halloween/userDiamondLottery',
                            type:"post",
                            success:function(data){
                                console.log('用户橙钻抽奖',data)
                                if(data.code==-82){
                                    layer.msg("活动已结束")
                                    return
                                }
                                if(data.code==1){
                                    for (var i = 0; i < 4; i++) {
                                            $(".red-ul li").eq(3 - i).css("transform", 'translateY(-0rem)');
                                        }
                                        layer.msg("抽奖中,请稍后")
                                        $(".lucky-btn").attr("src", "images/lucky-btn2.png").unbind("click");
                                        var myNum = String(data.result).split("");
                                        $(".lucky-money").text(data.result)
                                        console.log(myNum)
                                        setTimeout(function () {
                                            $(".red-ul li").addClass("num-img-go")
                                            if (myNum.length == 1) {
                                                $(".red-ul li").eq(3).css("transform", 'translateY(' + (-18.4 - 1.84 * myNum[0]) + 'rem)');
                                                $(".result-p1").text("恭喜获得" + data.result + "橙钻")
                                                setTimeout(function () {
                                                    layer.open({
                                                        type: 1,
                                                        title: false,
                                                        shadeClose: true,
                                                        skin: "yourclass6",
                                                        area: ["8.21rem", "5.76rem"],
                                                        content: $(".layer-money"),
                                                        end: function () {
                                                            $(".layui-layer-shade").hide()
                                                            diamondTask()
                                                        }
                                                    })
                                                }, 2500)
                                            }
                                            else if (myNum.length == 2) {
                                                $(".red-ul li").eq(3).css("transform", 'translateY(' + (-18.4 - 1.84 * myNum[1]) + 'rem)');
                                                setTimeout(function () {
                                                    $(".red-ul li").eq(2).css("transform", 'translateY(' + (-18.4 - 1.84 * myNum[0]) + 'rem)');
                                                }, 2000)
                                                $(".result-p1").text("恭喜获得" + data.result + "橙钻")
                                                setTimeout(function () {
                                                    layer.open({
                                                        type: 1,
                                                        title: false,
                                                        shadeClose: true,
                                                        skin: "yourclass6",
                                                        area: ["8.21rem", "5.76rem"],
                                                        content: $(".layer-money"),
                                                        end: function () {
                                                            $(".layui-layer-shade").hide()
                                                            diamondTask()
                                                        }
                                                    })
                                                }, 4500)

                                            }
                                            else if (myNum.length == 3) {
                                                $(".red-ul li").eq(3).css("transform", 'translateY(' + (-18.4 - 1.84 * myNum[2]) + 'rem)');
                                                setTimeout(function () {
                                                    $(".red-ul li").eq(2).css("transform", 'translateY(' + (-18.4 - 1.84 * myNum[1]) + 'rem)');
                                                }, 2000)
                                                setTimeout(function () {
                                                    $(".red-ul li").eq(1).css("transform", 'translateY(' + (-18.4 - 1.84 * myNum[0]) + 'rem)');
                                                }, 4000)
                                                $(".result-p1").text("恭喜获得" + data.result + "橙钻")
                                                setTimeout(function () {
                                                    layer.open({
                                                        type: 1,
                                                        title: false,
                                                        shadeClose: true,
                                                        skin: "yourclass6",
                                                        area: ["8.21rem", "5.76rem"],
                                                        content: $(".layer-money"),
                                                        end: function () {
                                                            $(".layui-layer-shade").hide()
                                                            diamondTask()
                                                        }
                                                    })
                                                }, 6500)
                                            }
                                            else if (myNum.length == 4) {
                                                $(".red-ul li").eq(3).css("transform", 'translateY(' + (-18.4 - 1.84 * myNum[3]) + 'rem)');
                                                setTimeout(function () {
                                                    $(".red-ul li").eq(2).css("transform", 'translateY(' + (-18.4 - 1.84 * myNum[2]) + 'rem)');
                                                }, 2000)
                                                setTimeout(function () {
                                                    $(".red-ul li").eq(1).css("transform", 'translateY(' + (-18.4 - 1.84 * myNum[1]) + 'rem)');
                                                }, 4000)
                                                setTimeout(function () {
                                                    $(".red-ul li").eq(0).css("transform", 'translateY(' + (-18.4 - 1.84 * myNum[0]) + 'rem)');
                                                }, 6000)
                                                $(".result-p1").text("恭喜获得" + data.result + "橙钻")
                                                setTimeout(function () {
                                                    layer.open({
                                                        type: 1,
                                                        title: false,
                                                        shadeClose: true,
                                                        skin: "yourclass6",
                                                        area: ["8.21rem", "5.76rem"],
                                                        content: $(".layer-money"),
                                                        end: function () {
                                                            $(".layui-layer-shade").hide()
                                                            diamondTask()
                                                        }
                                                    })
                                                }, 8500)
                                            }

                                        }, 500)

                                }else if(data.code==-60003){
                                    layer.open({
                                        type: 1,
                                        title: false,
                                        shadeClose: true,
                                        skin: "yourclass5",
                                        area: ["6.25rem", "6.22rem"],
                                        content: $(".layer-no"),
                                        end: function () {
                                            $(".layui-layer-shade").hide()
                                        }
                                    })
                                }else{
                                    layer.msg(data.msg);
                                }
                            }
                        })
                    })
               
                }
                var html=[];
                html+='<span class="pum-nav-span1">';
                html+='<img class="pum-king" src="images/king.png" alt="">';
                html+='<img class="pum-face" src="https://zhibocdn.lvdou66.com/comm'+data.result.avatar+'?x-oss-process=image/resize,w_90" alt="">'+data.result.nickName+'';
                html+='</span>';
                html+='<span class="pum-nav-span2">';
                html+='<p style="padding-top: 0.45rem;">万圣积分: <span>'+data.result.score+'</span></p>';
                html+='<p>击杀一次: <span>100积分</span></p>';
                html+='</span>';
                $(".pum-nav").html(html);
                if(data.result.hasOpenCard==false){
                    $(".card-num").text("1次")
                    $(".card1,.card2").unbind("click").on("click",function(){
                        $(".card1,.card2").unbind("click")
                        var indexNum=$(this).attr("data-type")
                        console.log(indexNum)
                        $.ajax({
                            url:$ip+'activity/halloween/userOpenCard',
                            type:"post",
                            data:{
                                index:indexNum
                            },
                            success:function(data){
                                console.log('开启卡片',data)   
                                if(data.code==-82){
                                    layer.msg("活动已结束")
                                    return;
                                }
                                if(data.code!=1){
                                    layer.msg(data.msg);
                                    return;
                                }     
                                if(data.result.win){
                                    $(".card12,.card22").removeClass("card12-out card22-out")
                                    var html=[];
                                    html+='<div class="card-content-box">';
                                    html+='<img src="https://zhibocdn.lvdou66.com/comm'+data.result.icon+'" alt="">';
                                    html+='<p>'+data.result.giftName+'</p>';
                                    html+='</div>';
                                    $(".card"+(Number(indexNum)+1)+"2").html(html)
                                }else{
                                    $(".card12,.card22").html('');
                                    $(".card"+(Number(indexNum)+1)+"2").addClass('card'+(Number(indexNum)+1)+'2-out')
                                }
                                $(".card"+(Number(indexNum)+1)+"").css("transform",'rotateY(180deg)')
                                $(".card"+(Number(indexNum)+1)+"2").css("transform",'rotateY(0deg)')
                                $(".card"+(Number(indexNum)+1)+"").fadeOut(300)
                                setTimeout(function(){
                                    diamondTask()
                                },1000)
                                
                            }
                        })
                    })
                }else{
                    $(".card1,.card2").unbind("click")
                    $(".card-num").text("0次")
                    if(data.result.lastCardGift.win){
                        var html=[];
                        html+='<div class="card-content-box">';
                        html+='<img src="https://zhibocdn.lvdou66.com/comm'+data.result.lastCardGift.icon+'" alt="">';
                        html+='<p>'+data.result.lastCardGift.giftName+'</p>';
                        html+='</div>';
                        $(".card"+(data.result.cardIndex+1)+"2").html(html).css("transform","rotateY(0deg)")
                        $(".card"+(data.result.cardIndex+1)+"").hide()
                    }else{
                        $(".card"+(data.result.cardIndex+1)+"2").addClass('card'+(data.result.cardIndex+1)+'2-out').css("transform","rotateY(0deg)")
                        $(".card"+(data.result.cardIndex+1)+"").hide()
                    }
                    
                }
            }
        })
    }

   
    $(".pum-content div").on("click",function(){
        pumNum=$(this).attr("data-type");
        pumpkin(pumNum)
    })
    $(".layer-pum-btn,.layer-out-btn").on("click",function(){
        layer.closeAll()
        pumpkin(pumNum)
    })
    $(".pum-close").on("click",function(){
        layer.closeAll();
    })
    function pumpkin(e){
        if(pumOk==false) return
        pumOk=false;
        $.ajax({
            url:$ip+'activity/halloween/userOpenPumpkin',
            type:"post",
            success:function(data){
                console.log('开启南瓜头抽奖',data)
                if(data.code==-82){
                    layer.msg("活动已结束")
                    return;
                }
                if(data.code==1){
                    var html=[];
                    html+='<img class="light lightShow" src="images/light.png" alt="">';
                    html+='<img class="pum-img" src="images/pum'+e+'.png" alt="">';
                    $(".shadow-box").html(html).fadeIn(350);
                    setTimeout(function(){
                        $(".shadow-box").fadeOut(350)
                        if(data.result.win){
                            $(".layer-pum-img img").attr("src","https://zhibocdn.lvdou66.com/comm"+data.result.icon+"")
                            $(".layer-pum p").text(data.result.giftName)
                            layer.open({
                                type: 1,
                                 title: false,
                                 shadeClose: true,
                                 skin: "yourclass5",
                                 area: ["6rem", "6.98rem"],
                                 content: $(".layer-pum"),
                                 end: function () {
                                     $(".layui-layer-shade").hide()
                                 }
                            })
                        }else{
                            layer.open({
                                type: 1,
                                 title: false,
                                 shadeClose: true,
                                 skin: "yourclass5",
                                 area: ["6rem", "6.98rem"],
                                 content: $(".layer-out"),
                                 end: function () {
                                     $(".layui-layer-shade").hide()
                                 }
                            })
                            
                        }
                        diamondTask() 
                    },2000)
                }else{
                    layer.msg(data.msg);
                }
                pumOk=true
            }
        })

    }
    function lunbo(){
        $.ajax({
            url:$ip+'activity/halloween/getDiamondLotteryBanner',
            success:function(data){
                console.log("轮播数据",data);
                var html=[];
                for(var i=0;i<data.result.length;i++){
                    html+='<span class="lunbo-span">'+data.result[i]+'</span>'
                }
                $(".red-lunbo").html(html)
                $('.red-lunbo').show().liMarquee({
                    scrollamount: 80,
                    hoverstop: false
                });
            }
        })
    }
})
</script>
</html>