zhuishuyun
/
zhuishuyun_quickapp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta
            name="viewport"
            content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>抽大奖</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue",
            "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
            Arial, sans-serif;
            padding: 0;
            margin: 0;
            background-color: #ba3d26;
            font-size: 100px;
        }

        .main_box {
            position: relative;
        }

        .bg {
            width: 100%;
        }

        .index .slider #slider {
            width: 100%;
            height: 0.3rem;
            position: absolute;
            top: 16%;
            left: 0;
            right: 0;
            overflow: hidden;
            font-size: 0.14rem;
            text-align: center;
            line-height: 0.3rem;
            color: #590700;
        }

        .index .slider #slider .slider-img {
            background: #ffffff;
            width: 3rem;
            height: 100%;
            position: absolute;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            left: 50%;
            top: 0;
            z-index: -1;
            border-radius: 15px;
            opacity: 0.72;
        }

        .index .slider #slider .slider-img.active {
            z-index: auto;
        }

        .index .slider #slider .slider-nav-list {
            position: absolute;
            bottom: 5%;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .index .slider #slider .slider-nav-list .nav-item {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fff;
            display: inline-block;
            margin: 0 8px;
            cursor: pointer;
            -webkit-transition: all 0.5s linear;
            transition: all 0.5s linear;
        }

        .index .slider #slider .slider-nav-list .nav-item.active {
            margin-bottom: -1px;
            width: 10px;
            height: 10px;
            background: #ff9800;
        }

        .index .time {
            position: absolute;
            top: 22%;
            width: 50%;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            font-size: 0.12rem;
            font-weight: bold;
        }

        .index .time div {
            color: #ffffff;
            padding: 0.05rem 0;
        }

        .index .time span {
            background-color: #ffffff;
            color: #c13b22;
            padding: 0.05rem;
            border-radius: 0.05rem;
        }

        .index .zp_out {
            position: absolute;
            top: 28%;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            width: 63.5%;
        }

        .index .zp_out .zp {
            width: 100%;
            -webkit-transition: -webkit-transform 5s ease;
            transition: -webkit-transform 5s ease;
            transition: transform 5s ease;
            transition: transform 5s ease, -webkit-transform 5s ease;
        }

        .index .zz {
            position: absolute;
            top: 35%;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            font-size: 0.16rem;
        }

        .index .zz img {
            width: 1rem;
        }

        .index .zz span {
            position: absolute;
            top: 38%;
            left: 55%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            width: 0.4rem;
            color: white;
        }
        .index .zz .quantity {
            position: absolute;
            top: 38%;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            width: 45%;
            color: white;
            text-align: center;
        }
        .index .button {
            font-size: 0.25rem;
            color: #9b1800;
            position: absolute;
            top: 61%;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
        }
        #lottery_button{
            display: inline-block;
            width: 100%;
            text-align: center;
        }

        .index .button img {
            width: 3rem;
            height: 0.5rem;
        }

        .index .button div {
            position: absolute;
            text-align: center;
            font-weight: bold;
            line-height: 0.5rem;
            width: 3rem;
            top: 0;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
        }

        .index .remaining {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            position: absolute;
            top: 69%;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            font-size: 0.15rem;
            color: #ffd264;
            white-space: nowrap;
        }

        .index .remaining .rmb {
            background-color: #ffd264;
            padding: 0.03rem 0.05rem;
            border-radius: 100px;
            color: #ba3d26;
            margin-right: 0.1rem;
            font-weight: bold;
        }

        .index .remaining .remaining-rmb {
            line-height: 0.25rem;
        }

        .index .rule {
            position: absolute;
            top: 75%;
            width: 100%;
        }

        .index .rule .rule_title {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding: 0 0.77rem;
            font-size: 0.15rem;
            color: #fabbaf;
        }

        .index .rule .rule_title div {
            padding: 0 0.1rem;
        }

        .index .rule .rule_title .rule_title_active {
            padding-bottom: 0.1rem;
            border-bottom: 0.02rem solid #fabbaf;
        }

        .index .rule .rule_content {
            padding: 0 0.325rem;
            font-size: 0.12rem;
            color: #fabbaf;
            overflow-y: scroll;
            height: 1.25rem;
        }

        .dialog {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9999;
        }

        .dialog .content {
            position: fixed;
            width: 90%;
            height: 3.5rem;
            top: 45%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background: top/cover url(https://cdn-novel.iycdm.com/h5/activity-2019-05-30/get.png) no-repeat;
            font-size: 0;
            border-radius: 6px;
        }

        .dialog .content .winning-content {
            top: 2rem;
            font-size: 0.24rem;
            font-weight: bold;
            position: absolute;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            white-space: nowrap;
            color: white;
        }

        .dialog .content .winning-content span {
            color: #ffdc80;
        }

        .dialog .content .dialog_button {
            width: 3rem;
            height: 0.5rem;
            position: relative;
            top: 2.6rem;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
        }

        .dialog .content .dialog_close {
            position: relative;
            top: 3.3rem;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            width: 0.3rem;
        }

        .wei-dialog {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9999;
        }

        .wei-dialog .content {
            position: fixed;
            width: 90%;
            height: 2.4rem;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background: top/cover url(https://cdn-novel.iycdm.com/h5/activity-2019-05-30/failure.png) no-repeat;
            font-size: 0;
            border-radius: 6px;
        }

        .wei-dialog .content .wei-dialog_button {
            width: 3rem;
            height: 0.5rem;
            position: relative;
            top: 1.55rem;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
        }

        .wei-dialog .content .wei-dialog_close {
            position: relative;
            top: 2.5rem;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            width: 0.3rem;
        }


        .hide{
            display: none;
        }
    </style>
</head>

<body>
<main class="main_box">
    <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/bg1.jpg" class="bg" />
    <div class="index">
        <div class="slider">
            <div id="slider">
                <div class="slider-img active">香草姑娘  6月13日   11:14 获得 1000书币</div>
                <div class="slider-img">雨过天琴   6月13日   11: 01获得 年费vip会员</div>
                {{--<div class="slider-img">培训师钮维娜 5月22日 10:05 获得 500元京东卡</div>
                <div class="slider-img">香草姑娘 5月22日 6:11 获得1000书币</div>
                <div class="slider-img">liwenwen 5月22日 14:48 获得1000书币</div>--}}
                <!-- <ul class="slider-nav-list">
                  <li class="nav-item active"></li>
                  <li class="nav-item"></li>
                  <li class="nav-item"></li>
                </ul> -->
            </div>
        </div>
        <div class="time">
            <span>活动倒计时</span>
            <span id="hour">00</span>
            <div>:</div>
            <span id="minute">00</span>
            <div>:</div>
            <span id="second">00</span>
        </div>
        <div class="zp_out">
            <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/plate.png" class="zp" />
        </div>
        <div class="zz">
            <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/point.png" />
            <div class="quantity">
                <div>剩余</div>
                <div id="left_count">{{$count}}次</div>
            </div>
        </div>
        <div class="button">
            <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/button.png" />
            @if($count >0)
                <div id="lottery_button">立即抽奖</div>
            @else
                <div id="lottery_button">充值后才可抽奖</div>
            @endif

        </div>
        <div class="remaining">
            <div class="rmb">￥</div>
            <div class="remaining-rmb">奖金池剩余：{{$total}}书币</div>
        </div>
        <div class="rule">
            <div class="rule_title">
                <div class="rule_title_bt rule_title_active" data-toggle="role">活动规则</div>
                <div class="rule_title_bt" data-toggle="record">中奖记录</div>
            </div>
            <div class="rule_content" >
                <p>1、书币奖品实时到账；</p>
                <p>
                    2、抽到实物奖品用户需先填手机号和身份证信息，客服
                    确认信息后将会在7个工作日寄出；
                </p>
                <p>
                    3、抽奖机会必须在活动充值页面成功充值后获得，其余
                    充值页面充值不会获得抽奖机会；
                </p>
            </div>
        </div>
    </div>
    <div class="dialog" style="display:none">
        <div class="content">
            <div class="winning-content">恭喜您抽中<span id="price">0书币</span></div>
            <div class="dialog_button"></div>
            <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/close.png" class="dialog_close" />
        </div>
    </div>
    <div class="wei-dialog" style="display:none">
        <div class="content">
            <div class="wei-dialog_button"></div>
            <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/close.png" class="wei-dialog_close" />
        </div>
    </div>
</main>
<div class="hide" id="record">
    @foreach($list as $item)
        <p>{{$item->created_at}}------------------ {{$item->price}}书币</p>
    @endforeach
</div>
<div class="hide" id="role">
    <p>1、书币奖品实时到账；</p>
    <p>
        2、抽到实物奖品用户需先填手机号和身份证信息，客服
        确认信息后将会在7个工作日寄出；
    </p>
    <p>
        3、抽奖机会必须在活动充值页面成功充值后获得，其余
        充值页面充值不会获得抽奖机会；
    </p>
</div>
</body>
<script>
    //轮播
    function carousel() {
        var interval = 3000; //间隔多久轮换一次
        var duration = 3000; //轮换动画的持续时间
        var cur = 0; //当前图片的下标
        var next = 1; //下一个图片的下标

        //   var li_list = $(".nav-item");
        var img_list = $(".slider-img");
        setInterval(function() {
            sliderImg();
        }, interval);

        function sliderImg() {
            //轮换导航
            // li_list
            //   .eq(next)
            //   .addClass("active")
            //   .siblings()
            //   .removeClass("active");
            //轮换图片
            img_list.eq(cur).animate(
                    {
                        left: "-150%"
                    },
                    duration,
                    function() {
                        $(this).removeClass("active");
                    }
            );

            img_list
                    .eq(next)
                    .addClass("active")
                    .css("left", "150%")
                    .animate({ left: "50%" }, duration);

            cur = next;
            next++;
            if (next >= img_list.length) {
                next = 0;
            }
        }
    }
    carousel();

    var time_diff = {{$time_diff}}
    time_diff = parseInt(time_diff);
    var oHour = document.querySelector('#hour');
    var oMinute = document.querySelector('#minute');
    var oSecond = document.querySelector('#second');
    function times() {
        time_diff--;
        day = Math.floor(time_diff/86400);
        hour = Math.floor((time_diff-day*86400)/3600)+day*24;
        minute = Math.floor((time_diff - hour * 3600) / 60);
        second = time_diff - hour * 3600 - minute * 60;
        oHour.innerHTML = hour<10?hour:hour;
        oMinute.innerHTML = minute<10?minute:minute;
        oSecond.innerHTML = second<10?second:second;
    }

    times();

    var timeInterval = setInterval(function () {
        if(time_diff<=0){
            clearInterval(timeInterval);
        }else{
            times()
        }
    },1000)

    //活动规则点击
    $(function() {
        $(".rule_title_bt").click(function(event) {
            $(this)
                    .addClass("rule_title_bt")
                    .addClass("rule_title_active");
            $(this)
                    .siblings()
                    .removeClass("rule_title_active");
            if($(this).data('toggle') == 'role'){
                $('.rule_content').html( $('#role').html() );
            }else{
                $('.rule_content').html( $('#record').html() );
            }
        });
    });

    var lasttime; //第一次点击时间
    var rotatesize = 0; //旋转角度
    var count = {{$count}}
        count = parseInt(count);
    //活动规则点击
    var canClick = true;
    $(function() {
        $(".button").click(function(event) {
            if(count <=0){
                location.href='/activity/huaweiActivity';
                return ;
            }
            if(time_diff<=0){
                console.log('time_diff<=0---');
                return ;
            }
            if(!canClick) return ;
            canClick = false;
            $.ajax({
                'url':'/api/activity/huaweiLottery',
                'type':'post',
                 'success':function(res){
                     if (lasttime && Date.parse(new Date()) - lasttime <= 5000) {
                         //旋转时间5S在样式中修改后再修改间隔时间
                         console.log("还在旋转");
                         return;
                     } else {
                         lasttime = Date.parse(new Date());
                         //点击时间赋值
                         var m = res.data.rotate;
                         var price = res.data.price;
                         price = parseInt(price);
                         //获取旋转角度  逆时针旋转
                         $(".zp").css({ transform: "rotate(" + m + "deg)" });
                         //旋转
                         setTimeout(() => {
                             if(price >0){
                               $('#price').html(price+'书币');
                                document.querySelector(".dialog").style.display = "";
                             }else{
                                document.querySelector(".wei-dialog").style.display = "";
                            }
                            //旋转完毕后弹窗
                            console.log('over');
                            count--;
                            $('#left_count').html(count+'次');
                            if(count<=0){
                                $('#lottery_button').html('充值后才可抽奖');
                            }
                         canClick = true;
                     }, 5000);
                     }
                 }
            })

        });
    });
    //获取旋转角度(随机数)
    function getnub(x, y) {
        /*//角度需大于x小于y
        var m = Math.ceil(Math.random() * 10000);
        var n = rotatesize + m;
        var angle = n % 360;
        if (m < 5000 || (angle < x + 10 || angle > y - 10)) {
            return this.getnub(x, y);
        } else {
            rotatesize = n;
            return n;
        }*/
    }

    function resetPoint() {
        $(".zp").css({transition:"none", transform: "rotate(0deg)" });
        setTimeout(()=>{
            $(".zp").css({transition:"transform 5s ease, -webkit-transform 5s ease"});
        },200);
    }
    //奖励弹窗点击关闭
    $(function() {
        $(".dialog_button").click(function(event) {
            document.querySelector(".dialog").style.display = "none";
            //transition: transform 5s ease, -webkit-transform 5s ease;
            $('#price').html('0书币');
            resetPoint()
        });
    });

    $(function() {
        $(".dialog_close").click(function(event) {
            document.querySelector(".dialog").style.display = "none";
            $('#price').html('0书币');
            resetPoint()

        });
    });

    $(function() {
        $(".wei-dialog_button").click(function(event) {
            document.querySelector(".wei-dialog").style.display = "none";
            resetPoint()
        });
    });
    $(function() {
        $(".wei-dialog_close").click(function(event) {
            document.querySelector(".wei-dialog").style.display = "none";
            resetPoint()
        });
    });

</script>
</html>