123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595 |
- <!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>
- <script type="text/javascript" src="../js/status.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="height: 30px; line-height: 30px; background: #28BD19; display: none; text-align: center; color: white;"
- id="error">错误提示
- </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: 85px;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">
- dq();
- 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 reset_login() {
- $.cookie("access_token", "", {expires: -1});
- $.cookie("refresh_token", "", {expires: -1});
- window.location.reload()
- }
- 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']; // 当前收货地址
- if(user==''||!user){
- reset_login()
- }
- //$('#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 {
- reset_login()
- console.log(data['msg'])
- }
- }
- );
- } else {
- //没有token唤醒登录界面
- }
- }
- function DetailsTab() {
- if (draw_status == 0) {
- alert('你还未抽奖');
- return;
- }
- if (draw_status == 1) {
- alert('恭喜你中奖 获得一台c611');
- $('#drawTab').hide();
- $('#detailsTab').show();
- return
- }
- if (draw_status == 2) {
- alert('恭喜你中奖 获得一台c612');
- $('#drawTab').hide();
- $('#detailsTab').show();
- return;
- }
- if (draw_status == 3) {
- alert('很遗憾,你没有中奖');
- return;
- }
- }
- var phone_countdown = 60;
- function phone_settime() {
- if (phone_countdown == 0) {
- $("#get_code").html("获取验证码");
- phone_countdown = 60;
- return;
- } else {
- $("#get_code").html("重新发送(" + phone_countdown + ")");
- phone_countdown--;
- }
- setTimeout(function () {
- phone_settime()
- }, 1000)
- }
- //获取验证码方法
- function authCode() {
- let phone = $('#phone').val();
- if (phone == "") {
- alert("手机不可以为空!");
- $('#phone').focus();
- return;
- } else if (!/^1[0-9]{10}$/.test(phone)) {
- alert("手机不正确!");
- $('#phone').focus();
- return;
- }
- let post_data = {'phone': phone}
- // 初始化目录
- $.postJSON(
- http_ip_prot + 'lottery/authcode', JSON.stringify(post_data),
- function (data) {
- if (data['code'] == 0) {
- phone_settime();
- } else {
- alert(data['msg'])
- }
- }
- );
- }
- // 登录
- function doAuthLogin() {
- let phone = $('#phone').val();
- let authcode = $('#code').val();
- if (phone == "") {
- alert("手机不可以为空!");
- $('#phone').focus();
- return;
- } else if (!/^1[0-9]{10}$/.test(phone)) {
- alert("手机不正确!");
- $('#phone').focus();
- return;
- }
- if (authcode == "") {
- alert("验证码不可以为空!");
- $('#code').focus();
- return;
- }
- 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()
- $("#username").html(phone);
- $("#loginFormID").hide();
- $('#to_drawTab').show();
- } 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('很遗憾没有中奖');
- }
- draw_status = status
- doDrawRollAction(status);
- } else if (data['code'] == 309) {
- alert('请绑定手机再来抽奖吧!');
- } 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 () {
- if (phone_countdown == 60) {
- authCode();
- } else {
- confirm("不要频繁点击获取验证码!");
- }
- });
- //# 登录
- $('#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)
- if (draw_status == 1 || draw_status == 2) {
- $('#drawTab').hide();
- $('#detailsTab').show();
- }
- bRotate = !bRotate;
- }
- })
- };
- // 0 2 5 不中奖
- // 1 3 c612
- // 4 6 c611
- $('.pointer').click(function () {
- //var a = [0, 1, 2, 3, 4, 5, 6];
- doDraw()
- });
- if ($.cookie("rmbUser") == "true") {
- let index_num_cookie = $.cookie('index_num');
- console.log(index_num_cookie)
- if (index_num_cookie == 2) {
- $.cookie("index_num", 3, {expires: 7}); //7天
- let index_num_cookie = $.cookie('index_num');
- console.log(index_num_cookie)
- } else if (index_num_cookie == 1) {
- window.location.href = "../subject.html";
- } else if (index_num_cookie == 3) {
- // window.location.href="index.html";
- } else {
- window.location.href = "../index.html";
- }
- }
- 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>
- <script type="text/javascript">
- var ua = navigator.userAgent.toLowerCase();
- var isWeixin = ua.indexOf('micromessenger') != -1;
- var isAndroid = ua.indexOf('android') != -1;
- var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
- if (!isWeixin) {
- document.head.innerHTML = '<title>抱歉,出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="weua.css">';
- document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>';
- }
- </script>
- </body>
- </html>
|