locky
/
ASJLanguageSys


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- viewport的<meta>标签，这个标签可以修改在大部分的移动设备上面的显示，为了确保适当的绘制和触屏缩放。-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大转盘抽奖</title>
    <link rel="stylesheet" href="css/demo.css" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/awardRotate.js"></script>
    <script type="text/javascript" src="js/scroll.js"></script>
    <script type="text/javascript" src="./js/jqhttpsdk.js"></script>
    <script type="text/javascript" src="./js/jquery_cookie_min.js"></script>
    <style type="text/css">
        .quan {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 0px;
            z-index: 99;
            display: none;
        }

        .quan1 {
            width: 300px;
            height: 200px;
            background: #fff;
            margin: 0 auto;
            margin-top: 300px;
            border-radius: 10px;
            border: 4px solid #666;
        }

        .qian2 {
            float: left;
            height: 50px;
            width: 196px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            margin-top: 50px;
            background: #fff;
            border: 2px solid #fff100;
            margin-left: 50px;
        }

        .queding {
            float: left;
            width: 70px;
            height: 24px;
            background: #fff;
            border: 2px solid #ccc;
            border-radius: 5px;
            margin-top: 50px;
            margin-left: 115px;
            text-align: center;
            line-height: 24px;
            cursor: pointer;
        }

        .dis {
            color: #000;
            font-size: 100px;
            font-weight: bold;
            position: absolute;
            left: 50%;
            margin-left: -90px;
            top: 100px;
            line-height: 30px;
        }

        .xianjin {
            width: 280px;
            height: 50px;
            background: #fff;
            position: absolute;
            border-radius: 10px;
            top: 248px;
            left: 200px;
            line-height: 50px;
            text-align: center;
        }

        .jjc {
            width: 500px;
            height: 500px;
            background: url(images/paoma1.gif);
            background-size: 100% 100%;
            position: absolute;
            top: -250px;
            left: 500%;
            font-size: 35px;
            line-height: 700px;
            text-align: center;
            color: #fff;
        }
    </style>
</head>
<body>

<div style="display:none; text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
<!--进来抽奖的界面-->
<div style="display: none;" id="drawTab">
    <div class="turntable-bg">
        <div class="pointer"><img src="images/pointer.png" alt="pointer" style="width:100%;height:100%;"></div>
        <div class="rotate"><img id="rotate" src="images/turntable.png" alt="turntable" style="width:100%;height:100%;">
        </div>
    </div>
    
    <div style="display: none;" id="to_drawTab">
		<div style='padding-top: 30px;text-align: center;color: white;'>用户名:<span id="username"></span>
		<a onclick='DetailsTab()'>中奖记录</a>
		</div>	
	</div>
    
    <div id="loginFormID" style="display: block;text-align: center;     color: #90807b;">
        <div style="margin-top: 40px;"><input type="text" id="phone" maxlength="11" placeholder="输入手机号码"
                                              value="" style="height: 30px; width: 250px;"><span
                id="get_code" style="position: absolute;right: 75px;line-height: 30px;">获取验证码</span></div>
        <div style="margin-top: 10px;"><input type="text" id="code" maxlength="6" placeholder="验证码"
                                              style="height: 30px; width: 250px;"></div>
        <div style="margin-top: 10px; margin-bottom: 15px;" id="go_ok">
            <div id="loginId"
                 style="margin: 0 auto; color:white; line-height: 30px; background: #f39c4c; height: 30px; width: 120px; border-radius: 5px;">
                获取抽奖机会
            </div>
        </div>
        <div style=" font-size: 15px; color: white;">
            <p style="margin-bottom: 5px;">—————— 活动细则 ———————</p>
            <div id="" style="text-align: left; margin-left: 30px;">
                <p style="margin-bottom: 5px;">每个手机用户可有抽奖机会一次</p>
                <p>中奖用户需填写联系信息（姓名、电话、收货地址），以方便邮寄给您。</p>
            </div>
        </div>
    </div>
</div>
<!--中奖的界面-->
<div style="display: none;" id="detailsTab">
    <div style="color: white; font-size: 30px; margin-top: 30px; text-align: center; margin-bottom: 50px;">恭喜您！ 您中奖了
    </div>
    <div style="text-align: center;">
        <div style="margin-top: 10px;">
            <input type="text" id="rec_name" placeholder="输入收货人姓名" style="height: 30px; width: 250px;">
        </div>
        <div style="margin-top: 10px;">
            <input type="text" id="rec_phone" placeholder="输入收货人手机" style="height: 30px; width: 250px;">
        </div>
        <div style="margin-top: 10px;">
            <input type="text" id="rec_addr" placeholder="输入收货人地址" style="height: 30px; width: 250px;">
        </div>
        <div style="margin-top: 20px; margin-bottom: 50px;" id="go_site">
            <div style="margin: 0 auto; color:white; line-height: 30px; background: #f39c4c; height: 30px; width: 70px; border-radius: 5px;">
                提交
            </div>
        </div>
        <div style=" font-size: 15px; color: white;">
            <p style="margin-bottom: 5px;">—————— 活动细则 ———————</p>
            <div id="" style="text-align: left; margin-left: 30px;">
                <p style="margin-bottom: 5px;">每个手机用户可有抽奖机会一次</p>
                <p>中奖用户需填写联系信息（姓名、电话、收货地址），以方便邮寄给您。</p>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.list_lh li:even').addClass('lieven');
    });

</script>
<script type="text/javascript">
	
	setTimeout('$("#drawTab").fadeIn(1500);', 10);
    let draw_status = 0; //中奖状态

    function setCookie(key, val, seconds) {
        var date = new Date();
        date.setTime(date.getTime() + seconds * 1000);//只能这么写，10表示10秒钟
        console.log(key)
        console.log(val)
        $.cookie(key, val, {expires: date});
    }

    function InitIndex() {
        let cookie = $.cookie('access_token');
        if (cookie) {
            let post_data = {'token': cookie}
            // 初始化目录

            $.postJSON(
                http_ip_prot + 'lottery/index', JSON.stringify(post_data),
                function (data) {
                    if (data['code'] == 0) {
                        console.log('初始化成功')
                        console.log(data['res'])
                        draw_status = data['res']['status']; //中奖状态
                        let phone_list = data['res']['phone_list']; //已经中奖的手机号码
                        let user = data['res']['user']; // 当前用户名
                        let addr = data['res']['addr']; // 当前收货地址
                        //$('#loginFormID').hide()
                        $("#username").html(user);
                        $("#loginFormID").hide();
                        $('#to_drawTab').show();
                        
                        DetailsTab();
                        let addrJson = JSON.parse(addr)
                        console.log(addrJson)
                        if (addrJson) {
                            $("#rec_name").val(addrJson['rec_name'])
                            $("#rec_phone").val(addrJson['rec_phone'])
                            $("#rec_addr").val(addrJson['rec_addr'])
                        }
                    } else {
                        alert(data['msg'])
                    }
                }
            );
        } else {
            //没有token唤醒登录界面
        }
    }

    function DetailsTab() {
        if (draw_status == 1 || draw_status == 2) {
        	alert('恭喜你');
            $('#drawTab').hide();
            $('#detailsTab').show();
        } else {
            alert('很遗憾，你没有中奖');
        }
    }

    //获取验证码方法
    function authCode() {
        let phone = $('#phone').val();
        if (phone == "") {
            alert("手机不可以为空！")
        } else if (!/^1[0-9]{10}$/.test(phone)) {
            alert("手机不正确！")
        } else {
            //调用获取验证码
        }
        let post_data = {'phone': phone}
        // 初始化目录
        console.log(http_ip_prot)
        $.postJSON(
            http_ip_prot + 'lottery/authcode', JSON.stringify(post_data),
            function (data) {
                if (data['code'] == 0) {
                    alert(data['msg'])
                } else {
                    alert(data['msg'])
                }
            }
        );
    }

    // 登录
    function doAuthLogin() {
        let phone = $('#phone').val()
        let authcode = $('#code').val()
        let post_data = {
            'phone': phone,
            'authcode': authcode
        }
        $.postJSON(
            http_ip_prot + 'lottery/login', JSON.stringify(post_data),
            function (data) {
                if (data['code'] == 0) {
                    //登录成功
                    setCookie('access_token', data['res']['access_token'], data['res']['access_expire'])
                    setCookie('refresh_token', data['res']['refresh_token'], data['res']['refresh_expire'])
                    InitIndex()
                } else {
                    alert(data['msg'])
                }
            }
        );
    }

    //抽奖
    function doDraw() {
        let token = $.cookie('access_token')
        let post_data = {
            'token': token
        }
        $.postJSON(
            http_ip_prot + 'lottery/draw', JSON.stringify(post_data),
            function (data) {
                if (data['code'] == 0) {
                    //抽奖请求成功
                    //中奖状态 1:c611,2:c612 ,3:不中奖
                    let status = data['res']['status']
                    if (status == 1) {
                        console.log('中奖c611')
                    } else if (status == 2) {
                        console.log('中奖c612')
                    } else if (status == 3) {
                        console.log('很遗憾没有中奖')
                    }
                    doDrawRollAction(status)
                } else {
                    alert(data['msg'])
                }
            },
            false,//异步
        );
    }

    //设置收货地址
    function setAddr() {
        let token = $.cookie('access_token')
        let rec_name = $('#rec_name').val()
        let rec_phone = $('#rec_phone').val()
        let rec_addr = $('#rec_addr').val()
        if (rec_addr && rec_phone && rec_addr) {
            let addr = JSON.stringify({
                'rec_name': rec_name,
                'rec_phone': rec_phone,
                'rec_addr': rec_addr,
            });
            let post_data = {
                'token': token,
                'addr': addr
            };
            $.postJSON(
                http_ip_prot + 'lottery/setAddr', JSON.stringify(post_data),
                function (data) {
                    if (data['code'] == 0) {
                        //设置请求成功
                        alert(data['msg'])
                    } else {
                        alert(data['msg'])
                    }
                }
            );
        }
    }

    //获取验证码
    $('#get_code').click(function () {
        authCode()
    });
    //# 登录
    $('#loginId').click(function () {
        doAuthLogin()
    });
    //# 登录
    $('#go_site').click(function () {
        setAddr()
    });

    InitIndex()

    var bRotate = false;

    var rotateFn = function (awards, angles, txt) {
        bRotate = !bRotate;
        $('#rotate').stopRotate();
        $('#rotate').rotate({
            angle: 0,
            animateTo: angles + 1800,
            duration: 8000,
            callback: function () {
                //alert("￥" + txt);
                alert(txt)
                bRotate = !bRotate;
            }
        })
    };
    // 0 2 5 不中奖
    // 1 3 c612
    // 4 6 c611
    $('.pointer').click(function () {
        //var a = [0, 1, 2, 3, 4, 5, 6];
        doDraw()
    });

    function doDrawRollAction(status) {
        //抽奖值
        //var item = 0
        let rotate_data = {
            '1': [4, 6],
            '2': [1, 3],
            '3': [0, 2, 5],
        };

        let rotate = rotate_data[status]
        let item = rotate[Math.floor((Math.random() * rotate.length))];

        var a = [
            '很遗憾没中奖',
            '恭喜中奖c612',
            '很遗憾没中奖',
            '恭喜中奖c612',
            '恭喜中奖c611',
            '很遗憾没中奖',
            '恭喜中奖c611',
        ]
        //if (bRotate) return;
        switch (item) {
            case 0:
                //var angle = [26, 88, 137, 185, 235, 287, 337];
                rotateFn(0, 332, a[0]);
                var ss = Number($("#xianjin").val());
                var cc = ss + a[0];
                $("#xianjin").val(cc);
                setTimeout(function () {
                    $(".xianjin").html(cc);
                }, 8000);
                $(".qian2").html(cc);

                break;
            case 1:
                //var angle = [88, 137, 185, 235, 287];

                rotateFn(1, 24, a[1]);
                var ss = Number($("#xianjin").val());
                var cc = ss + a[1];
                $("#xianjin").val(cc);
                setTimeout(function () {
                    $(".xianjin").html(cc);
                }, 8000);
                $(".qian2").html(cc);
                break;
            case 2:
                //var angle = [137, 185, 235, 287];
                rotateFn(2, 77, a[2]);
                var ss = Number($("#xianjin").val());
                var cc = ss + a[2];
                $("#xianjin").val(cc);
                setTimeout(function () {
                    $(".xianjin").html(cc);
                }, 8000);

                $(".qian2").html(cc);
                break;
            case 3:
                //var angle = [137, 185, 235, 287];
                rotateFn(3, 129, a[3]);
                var ss = Number($("#xianjin").val());
                var cc = ss + a[3];
                $("#xianjin").val(cc);
                setTimeout(function () {
                    $(".xianjin").html(cc);
                }, 8000);
                $(".qian2").html(cc);
                break;
            case 4:
                //var angle = [185, 235, 287];
                rotateFn(4, 180, a[4]);
                var ss = Number($("#xianjin").val());
                var cc = ss + a[4];
                $("#xianjin").val(cc);
                setTimeout(function () {
                    $(".xianjin").html(cc);
                }, 8000);
                $(".qian2").html(cc);
                break;
            case 5:

                //var angle = [185, 235, 287];
                rotateFn(5, 231, a[5]);
                var ss = Number($("#xianjin").val());
                var cc = ss + a[5];
                $("#xianjin").val(cc);
                setTimeout(function () {
                    $(".xianjin").html(cc);
                }, 8000);
                $(".qian2").html(cc);
                break;
            case 6:
                //var angle = [235, 287];
                rotateFn(6, 280, a[6]);
                var ss = Number($("#xianjin").val());
                var cc = ss + a[6];
                $("#xianjin").val(cc);
                setTimeout(function () {
                    $(".xianjin").html(cc);
                }, 8000);
                $(".qian2").html(cc);
                break;
        }
    }
    // 捕捉全局异常弹出

</script>
</body>
</html>