index.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <!-- viewport的<meta>标签,这个标签可以修改在大部分的移动设备上面的显示,为了确保适当的绘制和触屏缩放。-->
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>安士佳庆国庆,送大礼问答抽奖</title>
  8. <link rel="stylesheet" href="css/demo.css" type="text/css"/>
  9. <link rel="stylesheet" type="text/css" href="css/style.css">
  10. <script type="text/javascript" src="js/jquery.min.js"></script>
  11. <script type="text/javascript" src="js/awardRotate.js"></script>
  12. <script type="text/javascript" src="js/scroll.js"></script>
  13. <script type="text/javascript" src="./js/jqhttpsdk.js"></script>
  14. <script type="text/javascript" src="./js/jquery_cookie_min.js"></script>
  15. <script type="text/javascript" src="../js/status.js"></script>
  16. <style type="text/css">
  17. .quan {
  18. width: 100%;
  19. height: 100%;
  20. background: rgba(0, 0, 0, 0.5);
  21. position: absolute;
  22. top: 0px;
  23. z-index: 99;
  24. display: none;
  25. }
  26. .quan1 {
  27. width: 300px;
  28. height: 200px;
  29. background: #fff;
  30. margin: 0 auto;
  31. margin-top: 300px;
  32. border-radius: 10px;
  33. border: 4px solid #666;
  34. }
  35. .qian2 {
  36. float: left;
  37. height: 50px;
  38. width: 196px;
  39. line-height: 50px;
  40. text-align: center;
  41. font-size: 18px;
  42. margin-top: 50px;
  43. background: #fff;
  44. border: 2px solid #fff100;
  45. margin-left: 50px;
  46. }
  47. .queding {
  48. float: left;
  49. width: 70px;
  50. height: 24px;
  51. background: #fff;
  52. border: 2px solid #ccc;
  53. border-radius: 5px;
  54. margin-top: 50px;
  55. margin-left: 115px;
  56. text-align: center;
  57. line-height: 24px;
  58. cursor: pointer;
  59. }
  60. .dis {
  61. color: #000;
  62. font-size: 100px;
  63. font-weight: bold;
  64. position: absolute;
  65. left: 50%;
  66. margin-left: -90px;
  67. top: 100px;
  68. line-height: 30px;
  69. }
  70. .xianjin {
  71. width: 280px;
  72. height: 50px;
  73. background: #fff;
  74. position: absolute;
  75. border-radius: 10px;
  76. top: 248px;
  77. left: 200px;
  78. line-height: 50px;
  79. text-align: center;
  80. }
  81. .jjc {
  82. width: 500px;
  83. height: 500px;
  84. background: url(images/paoma1.gif);
  85. background-size: 100% 100%;
  86. position: absolute;
  87. top: -250px;
  88. left: 500%;
  89. font-size: 35px;
  90. line-height: 700px;
  91. text-align: center;
  92. color: #fff;
  93. }
  94. </style>
  95. </head>
  96. <body>
  97. <div style="display:none; text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  98. <p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
  99. </div>
  100. <div style="height: 30px; line-height: 30px; background: #28BD19; display: none; text-align: center; color: white;"
  101. id="error">错误提示
  102. </div>
  103. <!--进来抽奖的界面-->
  104. <div style="display: none;" id="drawTab">
  105. <div class="turntable-bg">
  106. <div class="pointer"><img src="images/pointer.png" alt="pointer" style="width:100%;height:100%;"></div>
  107. <div class="rotate"><img id="rotate" src="images/turntable.png" alt="turntable" style="width:100%;height:100%;">
  108. </div>
  109. </div>
  110. <div style="display: none;" id="to_drawTab">
  111. <div style='padding-top: 30px;text-align: center;color: white;'>用户名:<span id="username"></span>
  112. <a onclick='DetailsTab()'>中奖记录</a>
  113. </div>
  114. </div>
  115. <div id="loginFormID" style="display: block;text-align: center; color: #90807b;">
  116. <div style="margin-top: 40px;"><input type="text" id="phone" maxlength="11" placeholder="输入手机号码"
  117. value="" style="height: 30px; width: 250px;"><span
  118. id="get_code" style="position: absolute;right: 85px;line-height: 30px;">获取验证码</span></div>
  119. <div style="margin-top: 10px;"><input type="text" id="code" maxlength="6" placeholder="验证码"
  120. style="height: 30px; width: 250px;"></div>
  121. <div style="margin-top: 10px; margin-bottom: 15px;" id="go_ok">
  122. <div id="loginId"
  123. style="margin: 0 auto; color:white; line-height: 30px; background: #f39c4c; height: 30px; width: 120px; border-radius: 5px;">
  124. 绑定抽奖
  125. </div>
  126. </div>
  127. <div style=" font-size: 15px; color: white;">
  128. <p style="margin-bottom: 5px;">—————— 活动细则 ———————</p>
  129. <div id="" style="text-align: left; margin-left: 30px;">
  130. <p style="margin-bottom: 5px;">每个手机用户可有抽奖机会一次</p>
  131. <p>中奖用户需填写联系信息(姓名、电话、收货地址),以方便邮寄给您。</p>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. <!--中奖的界面-->
  137. <div style="display: none;" id="detailsTab">
  138. <div style="color: white; font-size: 30px; margin-top: 30px; text-align: center; margin-bottom: 50px;">恭喜您! 您中奖了
  139. </div>
  140. <div style="text-align: center;">
  141. <div style="margin-top: 10px;">
  142. <input type="text" id="rec_name" placeholder="输入收货人姓名" style="height: 30px; width: 250px;">
  143. </div>
  144. <div style="margin-top: 10px;">
  145. <input type="text" id="rec_phone" placeholder="输入收货人手机" style="height: 30px; width: 250px;">
  146. </div>
  147. <div style="margin-top: 10px;">
  148. <input type="text" id="rec_addr" placeholder="输入收货人地址" style="height: 30px; width: 250px;">
  149. </div>
  150. <div style="margin-top: 20px; margin-bottom: 50px;" id="go_site">
  151. <div style="margin: 0 auto; color:white; line-height: 30px; background: #f39c4c; height: 30px; width: 70px; border-radius: 5px;">
  152. 提交
  153. </div>
  154. </div>
  155. <div style=" font-size: 15px; color: white;">
  156. <p style="margin-bottom: 5px;">—————— 活动细则 ———————</p>
  157. <div id="" style="text-align: left; margin-left: 30px;">
  158. <p style="margin-bottom: 5px;">每个手机用户可有抽奖机会一次</p>
  159. <p>中奖用户需填写联系信息(姓名、电话、收货地址),以方便邮寄给您。</p>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. <script type="text/javascript">
  165. $(document).ready(function () {
  166. $('.list_lh li:even').addClass('lieven');
  167. });
  168. </script>
  169. <script type="text/javascript">
  170. dq();
  171. setTimeout('$("#drawTab").fadeIn(1500);', 10);
  172. let draw_status = 0; //中奖状态
  173. function setCookie(key, val, seconds) {
  174. var date = new Date();
  175. date.setTime(date.getTime() + seconds * 1000);//只能这么写,10表示10秒钟
  176. console.log(key);
  177. console.log(val);
  178. $.cookie(key, val, {expires: date});
  179. }
  180. function reset_login() {
  181. $.cookie("access_token", "", {expires: -1});
  182. $.cookie("refresh_token", "", {expires: -1});
  183. window.location.reload()
  184. }
  185. function InitIndex() {
  186. let cookie = $.cookie('access_token');
  187. if (cookie) {
  188. let post_data = {'token': cookie}
  189. // 初始化目录
  190. $.postJSON(
  191. http_ip_prot + 'lottery/index', JSON.stringify(post_data),
  192. function (data) {
  193. if (data['code'] == 0) {
  194. console.log('初始化成功')
  195. console.log(data['res'])
  196. draw_status = data['res']['status']; //中奖状态
  197. let phone_list = data['res']['phone_list']; //已经中奖的手机号码
  198. let user = data['res']['user']; // 当前用户名
  199. let addr = data['res']['addr']; // 当前收货地址
  200. if(user==''||!user){
  201. reset_login()
  202. }
  203. //$('#loginFormID').hide()
  204. $("#username").html(user);
  205. $("#loginFormID").hide();
  206. $('#to_drawTab').show();
  207. DetailsTab();
  208. let addrJson = JSON.parse(addr)
  209. console.log(addrJson)
  210. if (addrJson) {
  211. $("#rec_name").val(addrJson['rec_name'])
  212. $("#rec_phone").val(addrJson['rec_phone'])
  213. $("#rec_addr").val(addrJson['rec_addr'])
  214. }
  215. } else {
  216. reset_login()
  217. console.log(data['msg'])
  218. }
  219. }
  220. );
  221. } else {
  222. //没有token唤醒登录界面
  223. }
  224. }
  225. function DetailsTab() {
  226. if (draw_status == 0) {
  227. alert('你还未抽奖');
  228. return;
  229. }
  230. if (draw_status == 1) {
  231. alert('恭喜你中奖 获得一台c611');
  232. $('#drawTab').hide();
  233. $('#detailsTab').show();
  234. return
  235. }
  236. if (draw_status == 2) {
  237. alert('恭喜你中奖 获得一台c612');
  238. $('#drawTab').hide();
  239. $('#detailsTab').show();
  240. return;
  241. }
  242. if (draw_status == 3) {
  243. alert('很遗憾,你没有中奖');
  244. return;
  245. }
  246. }
  247. var phone_countdown = 60;
  248. function phone_settime() {
  249. if (phone_countdown == 0) {
  250. $("#get_code").html("获取验证码");
  251. phone_countdown = 60;
  252. return;
  253. } else {
  254. $("#get_code").html("重新发送(" + phone_countdown + ")");
  255. phone_countdown--;
  256. }
  257. setTimeout(function () {
  258. phone_settime()
  259. }, 1000)
  260. }
  261. //获取验证码方法
  262. function authCode() {
  263. let phone = $('#phone').val();
  264. if (phone == "") {
  265. alert("手机不可以为空!");
  266. $('#phone').focus();
  267. return;
  268. } else if (!/^1[0-9]{10}$/.test(phone)) {
  269. alert("手机不正确!");
  270. $('#phone').focus();
  271. return;
  272. }
  273. let post_data = {'phone': phone}
  274. // 初始化目录
  275. $.postJSON(
  276. http_ip_prot + 'lottery/authcode', JSON.stringify(post_data),
  277. function (data) {
  278. if (data['code'] == 0) {
  279. phone_settime();
  280. } else {
  281. alert(data['msg'])
  282. }
  283. }
  284. );
  285. }
  286. // 登录
  287. function doAuthLogin() {
  288. let phone = $('#phone').val();
  289. let authcode = $('#code').val();
  290. if (phone == "") {
  291. alert("手机不可以为空!");
  292. $('#phone').focus();
  293. return;
  294. } else if (!/^1[0-9]{10}$/.test(phone)) {
  295. alert("手机不正确!");
  296. $('#phone').focus();
  297. return;
  298. }
  299. if (authcode == "") {
  300. alert("验证码不可以为空!");
  301. $('#code').focus();
  302. return;
  303. }
  304. let post_data = {
  305. 'phone': phone,
  306. 'authcode': authcode
  307. }
  308. $.postJSON(
  309. http_ip_prot + 'lottery/login', JSON.stringify(post_data),
  310. function (data) {
  311. if (data['code'] == 0) {
  312. //登录成功
  313. setCookie('access_token', data['res']['access_token'], data['res']['access_expire'])
  314. setCookie('refresh_token', data['res']['refresh_token'], data['res']['refresh_expire'])
  315. // InitIndex()
  316. $("#username").html(phone);
  317. $("#loginFormID").hide();
  318. $('#to_drawTab').show();
  319. } else {
  320. alert(data['msg'])
  321. }
  322. }
  323. );
  324. }
  325. //抽奖
  326. function doDraw() {
  327. let token = $.cookie('access_token')
  328. let post_data = {
  329. 'token': token
  330. }
  331. $.postJSON(
  332. http_ip_prot + 'lottery/draw', JSON.stringify(post_data),
  333. function (data) {
  334. if (data['code'] == 0) {
  335. //抽奖请求成功
  336. //中奖状态 1:c611,2:c612 ,3:不中奖
  337. let status = data['res']['status']
  338. if (status == 1) {
  339. console.log('中奖c611');
  340. } else if (status == 2) {
  341. console.log('中奖c612');
  342. } else if (status == 3) {
  343. console.log('很遗憾没有中奖');
  344. }
  345. draw_status = status
  346. doDrawRollAction(status);
  347. } else if (data['code'] == 309) {
  348. alert('请绑定手机再来抽奖吧!');
  349. } else {
  350. alert(data['msg']);
  351. }
  352. },
  353. false,//异步
  354. );
  355. }
  356. //设置收货地址
  357. function setAddr() {
  358. let token = $.cookie('access_token')
  359. let rec_name = $('#rec_name').val()
  360. let rec_phone = $('#rec_phone').val()
  361. let rec_addr = $('#rec_addr').val()
  362. if (rec_addr && rec_phone && rec_addr) {
  363. let addr = JSON.stringify({
  364. 'rec_name': rec_name,
  365. 'rec_phone': rec_phone,
  366. 'rec_addr': rec_addr,
  367. });
  368. let post_data = {
  369. 'token': token,
  370. 'addr': addr
  371. };
  372. $.postJSON(
  373. http_ip_prot + 'lottery/setAddr', JSON.stringify(post_data),
  374. function (data) {
  375. if (data['code'] == 0) {
  376. //设置请求成功
  377. alert(data['msg'])
  378. } else {
  379. alert(data['msg'])
  380. }
  381. }
  382. );
  383. }
  384. }
  385. //获取验证码
  386. $('#get_code').click(function () {
  387. if (phone_countdown == 60) {
  388. authCode();
  389. } else {
  390. confirm("不要频繁点击获取验证码!");
  391. }
  392. });
  393. //# 登录
  394. $('#loginId').click(function () {
  395. doAuthLogin()
  396. });
  397. //# 登录
  398. $('#go_site').click(function () {
  399. setAddr()
  400. });
  401. InitIndex()
  402. var bRotate = false;
  403. var rotateFn = function (awards, angles, txt) {
  404. bRotate = !bRotate;
  405. $('#rotate').stopRotate();
  406. $('#rotate').rotate({
  407. angle: 0,
  408. animateTo: angles + 1800,
  409. duration: 8000,
  410. callback: function () {
  411. //alert("¥" + txt);
  412. alert(txt)
  413. if (draw_status == 1 || draw_status == 2) {
  414. $('#drawTab').hide();
  415. $('#detailsTab').show();
  416. }
  417. bRotate = !bRotate;
  418. }
  419. })
  420. };
  421. // 0 2 5 不中奖
  422. // 1 3 c612
  423. // 4 6 c611
  424. $('.pointer').click(function () {
  425. //var a = [0, 1, 2, 3, 4, 5, 6];
  426. doDraw()
  427. });
  428. if ($.cookie("rmbUser") == "true") {
  429. let index_num_cookie = $.cookie('index_num');
  430. console.log(index_num_cookie)
  431. if (index_num_cookie == 2) {
  432. $.cookie("index_num", 3, {expires: 7}); //7天
  433. let index_num_cookie = $.cookie('index_num');
  434. console.log(index_num_cookie)
  435. } else if (index_num_cookie == 1) {
  436. window.location.href = "../subject.html";
  437. } else if (index_num_cookie == 3) {
  438. // window.location.href="index.html";
  439. } else {
  440. window.location.href = "../index.html";
  441. }
  442. }
  443. function doDrawRollAction(status) {
  444. //抽奖值
  445. //var item = 0
  446. let rotate_data = {
  447. '1': [4, 6],
  448. '2': [1, 3],
  449. '3': [0, 2, 5],
  450. };
  451. let rotate = rotate_data[status]
  452. let item = rotate[Math.floor((Math.random() * rotate.length))];
  453. var a = [
  454. '很遗憾没中奖',
  455. '恭喜中奖c612',
  456. '很遗憾没中奖',
  457. '恭喜中奖c612',
  458. '恭喜中奖c611',
  459. '很遗憾没中奖',
  460. '恭喜中奖c611',
  461. ]
  462. //if (bRotate) return;
  463. switch (item) {
  464. case 0:
  465. //var angle = [26, 88, 137, 185, 235, 287, 337];
  466. rotateFn(0, 332, a[0]);
  467. var ss = Number($("#xianjin").val());
  468. var cc = ss + a[0];
  469. $("#xianjin").val(cc);
  470. setTimeout(function () {
  471. $(".xianjin").html(cc);
  472. }, 8000);
  473. $(".qian2").html(cc);
  474. break;
  475. case 1:
  476. //var angle = [88, 137, 185, 235, 287];
  477. rotateFn(1, 24, a[1]);
  478. var ss = Number($("#xianjin").val());
  479. var cc = ss + a[1];
  480. $("#xianjin").val(cc);
  481. setTimeout(function () {
  482. $(".xianjin").html(cc);
  483. }, 8000);
  484. $(".qian2").html(cc);
  485. break;
  486. case 2:
  487. //var angle = [137, 185, 235, 287];
  488. rotateFn(2, 77, a[2]);
  489. var ss = Number($("#xianjin").val());
  490. var cc = ss + a[2];
  491. $("#xianjin").val(cc);
  492. setTimeout(function () {
  493. $(".xianjin").html(cc);
  494. }, 8000);
  495. $(".qian2").html(cc);
  496. break;
  497. case 3:
  498. //var angle = [137, 185, 235, 287];
  499. rotateFn(3, 129, a[3]);
  500. var ss = Number($("#xianjin").val());
  501. var cc = ss + a[3];
  502. $("#xianjin").val(cc);
  503. setTimeout(function () {
  504. $(".xianjin").html(cc);
  505. }, 8000);
  506. $(".qian2").html(cc);
  507. break;
  508. case 4:
  509. //var angle = [185, 235, 287];
  510. rotateFn(4, 180, a[4]);
  511. var ss = Number($("#xianjin").val());
  512. var cc = ss + a[4];
  513. $("#xianjin").val(cc);
  514. setTimeout(function () {
  515. $(".xianjin").html(cc);
  516. }, 8000);
  517. $(".qian2").html(cc);
  518. break;
  519. case 5:
  520. //var angle = [185, 235, 287];
  521. rotateFn(5, 231, a[5]);
  522. var ss = Number($("#xianjin").val());
  523. var cc = ss + a[5];
  524. $("#xianjin").val(cc);
  525. setTimeout(function () {
  526. $(".xianjin").html(cc);
  527. }, 8000);
  528. $(".qian2").html(cc);
  529. break;
  530. case 6:
  531. //var angle = [235, 287];
  532. rotateFn(6, 280, a[6]);
  533. var ss = Number($("#xianjin").val());
  534. var cc = ss + a[6];
  535. $("#xianjin").val(cc);
  536. setTimeout(function () {
  537. $(".xianjin").html(cc);
  538. }, 8000);
  539. $(".qian2").html(cc);
  540. break;
  541. }
  542. }
  543. </script>
  544. <script type="text/javascript">
  545. var ua = navigator.userAgent.toLowerCase();
  546. var isWeixin = ua.indexOf('micromessenger') != -1;
  547. var isAndroid = ua.indexOf('android') != -1;
  548. var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
  549. if (!isWeixin) {
  550. 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">';
  551. 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>';
  552. }
  553. </script>
  554. </body>
  555. </html>