|
|
@@ -0,0 +1,504 @@
|
|
|
+<!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}
|
|
|
+ // 初始化目录
|
|
|
+ $.postJSON(
|
|
|
+ http_ip_prot + 'lottery/authcode', JSON.stringify(post_data),
|
|
|
+ function (data) {
|
|
|
+ if (data['code'] == 0) {
|
|
|
+
|
|
|
+ } 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 捕捉全局异常弹出
|
|
|
+function handleError(msg,url,l)
|
|
|
+{
|
|
|
+ var txt="There was an error on this page.\n\n"
|
|
|
+ txt+="Error: " + msg + "\n"
|
|
|
+ txt+="URL: " + url + "\n"
|
|
|
+ txt+="Line: " + l + "\n\n"
|
|
|
+ txt+="Click OK to continue.\n\n"
|
|
|
+ alert(txt)
|
|
|
+ return true
|
|
|
+}
|
|
|
+window.onerror = handleError
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
chenjunkai
