huaweiLottery.blade.php 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta
  6. name="viewport"
  7. content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
  8. />
  9. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  10. <title>抽大奖</title>
  11. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  12. <style>
  13. html,
  14. body {
  15. height: 100%;
  16. width: 100%;
  17. font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue",
  18. "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
  19. Arial, sans-serif;
  20. padding: 0;
  21. margin: 0;
  22. background-color: #ba3d26;
  23. font-size: 100px;
  24. }
  25. .main_box {
  26. position: relative;
  27. }
  28. .bg {
  29. width: 100%;
  30. }
  31. .index .slider #slider {
  32. width: 100%;
  33. height: 0.3rem;
  34. position: absolute;
  35. top: 16%;
  36. left: 0;
  37. right: 0;
  38. overflow: hidden;
  39. font-size: 0.14rem;
  40. text-align: center;
  41. line-height: 0.3rem;
  42. color: #590700;
  43. }
  44. .index .slider #slider .slider-img {
  45. background: #ffffff;
  46. width: 3rem;
  47. height: 100%;
  48. position: absolute;
  49. -webkit-transform: translateX(-50%);
  50. transform: translateX(-50%);
  51. left: 50%;
  52. top: 0;
  53. z-index: -1;
  54. border-radius: 15px;
  55. opacity: 0.72;
  56. }
  57. .index .slider #slider .slider-img.active {
  58. z-index: auto;
  59. }
  60. .index .slider #slider .slider-nav-list {
  61. position: absolute;
  62. bottom: 5%;
  63. left: 50%;
  64. transform: translateX(-50%);
  65. -webkit-transform: translateX(-50%);
  66. list-style: none;
  67. margin: 0;
  68. padding: 0;
  69. }
  70. .index .slider #slider .slider-nav-list .nav-item {
  71. width: 8px;
  72. height: 8px;
  73. border-radius: 50%;
  74. background: #fff;
  75. display: inline-block;
  76. margin: 0 8px;
  77. cursor: pointer;
  78. -webkit-transition: all 0.5s linear;
  79. transition: all 0.5s linear;
  80. }
  81. .index .slider #slider .slider-nav-list .nav-item.active {
  82. margin-bottom: -1px;
  83. width: 10px;
  84. height: 10px;
  85. background: #ff9800;
  86. }
  87. .index .time {
  88. position: absolute;
  89. top: 22%;
  90. width: 50%;
  91. left: 50%;
  92. -webkit-transform: translate(-50%);
  93. transform: translate(-50%);
  94. display: -webkit-box;
  95. display: -ms-flexbox;
  96. display: flex;
  97. -webkit-box-pack: justify;
  98. -ms-flex-pack: justify;
  99. justify-content: space-between;
  100. font-size: 0.12rem;
  101. font-weight: bold;
  102. }
  103. .index .time div {
  104. color: #ffffff;
  105. padding: 0.05rem 0;
  106. }
  107. .index .time span {
  108. background-color: #ffffff;
  109. color: #c13b22;
  110. padding: 0.05rem;
  111. border-radius: 0.05rem;
  112. }
  113. .index .zp_out {
  114. position: absolute;
  115. top: 28%;
  116. left: 50%;
  117. -webkit-transform: translate(-50%);
  118. transform: translate(-50%);
  119. width: 63.5%;
  120. }
  121. .index .zp_out .zp {
  122. width: 100%;
  123. -webkit-transition: -webkit-transform 5s ease;
  124. transition: -webkit-transform 5s ease;
  125. transition: transform 5s ease;
  126. transition: transform 5s ease, -webkit-transform 5s ease;
  127. }
  128. .index .zz {
  129. position: absolute;
  130. top: 35%;
  131. left: 50%;
  132. -webkit-transform: translate(-50%);
  133. transform: translate(-50%);
  134. font-size: 0.16rem;
  135. }
  136. .index .zz img {
  137. width: 1rem;
  138. }
  139. .index .zz span {
  140. position: absolute;
  141. top: 38%;
  142. left: 53%;
  143. -webkit-transform: translate(-50%);
  144. transform: translate(-50%);
  145. width: 0.4rem;
  146. color: white;
  147. }
  148. .index .button {
  149. font-size: 0.25rem;
  150. color: #9b1800;
  151. position: absolute;
  152. top: 61%;
  153. left: 50%;
  154. -webkit-transform: translate(-50%);
  155. transform: translate(-50%);
  156. }
  157. .index .button img {
  158. width: 3rem;
  159. height: 0.5rem;
  160. }
  161. .index .button div {
  162. position: absolute;
  163. text-align: center;
  164. font-weight: bold;
  165. line-height: 0.5rem;
  166. width: 3rem;
  167. top: 0;
  168. left: 50%;
  169. -webkit-transform: translate(-50%);
  170. transform: translate(-50%);
  171. }
  172. .index .remaining {
  173. display: -webkit-box;
  174. display: -ms-flexbox;
  175. display: flex;
  176. position: absolute;
  177. top: 69.5%;
  178. left: 50%;
  179. -webkit-transform: translate(-50%);
  180. transform: translate(-50%);
  181. font-size: 0.15rem;
  182. color: #ffd264;
  183. white-space: nowrap;
  184. }
  185. .index .remaining .rmb {
  186. background-color: #ffd264;
  187. padding: 0.03rem 0.05rem;
  188. border-radius: 100px;
  189. color: #ba3d26;
  190. margin-right: 0.1rem;
  191. font-weight: bold;
  192. }
  193. .index .remaining .remaining-rmb {
  194. line-height: 0.25rem;
  195. }
  196. .index .rule {
  197. position: absolute;
  198. top: 75%;
  199. padding: 0 0.37rem;
  200. }
  201. .index .rule .rule_title {
  202. display: -webkit-box;
  203. display: -ms-flexbox;
  204. display: flex;
  205. -webkit-box-pack: justify;
  206. -ms-flex-pack: justify;
  207. justify-content: space-between;
  208. padding: 0 0.4rem;
  209. font-size: 0.15rem;
  210. color: #fabbaf;
  211. }
  212. .index .rule .rule_title div {
  213. padding: 0 0.1rem;
  214. }
  215. .index .rule .rule_title .rule_title_active {
  216. padding-bottom: 0.1rem;
  217. border-bottom: 0.02rem solid #fabbaf;
  218. }
  219. .index .rule .rule_content {
  220. font-size: 0.12rem;
  221. color: #fabbaf;
  222. overflow-y: scroll;
  223. height: 1.25rem;
  224. }
  225. .dialog {
  226. position: fixed;
  227. top: 0;
  228. bottom: 0;
  229. left: 0;
  230. right: 0;
  231. background: rgba(0, 0, 0, 0.6);
  232. z-index: 9999;
  233. }
  234. .dialog .content {
  235. position: fixed;
  236. width: 90%;
  237. height: 3.5rem;
  238. top: 45%;
  239. left: 50%;
  240. -webkit-transform: translate(-50%, -50%);
  241. transform: translate(-50%, -50%);
  242. background: top/cover url(https://cdn-novel.iycdm.com/h5/activity-2019-05-30/get.png) no-repeat;
  243. font-size: 0;
  244. border-radius: 6px;
  245. }
  246. .dialog .content .winning-content {
  247. top: 2rem;
  248. font-size: 0.24rem;
  249. font-weight: bold;
  250. position: absolute;
  251. left: 50%;
  252. -webkit-transform: translate(-50%, -50%);
  253. transform: translate(-50%, -50%);
  254. white-space: nowrap;
  255. color: white;
  256. }
  257. .dialog .content .winning-content span {
  258. color: #ffdc80;
  259. }
  260. .dialog .content .dialog_button {
  261. width: 3rem;
  262. height: 0.5rem;
  263. position: relative;
  264. top: 2.6rem;
  265. left: 50%;
  266. -webkit-transform: translate(-50%);
  267. transform: translate(-50%);
  268. }
  269. .dialog .content .dialog_close {
  270. position: relative;
  271. top: 3.3rem;
  272. left: 50%;
  273. -webkit-transform: translate(-50%);
  274. transform: translate(-50%);
  275. width: 0.3rem;
  276. }
  277. .wei-dialog {
  278. position: fixed;
  279. top: 0;
  280. bottom: 0;
  281. left: 0;
  282. right: 0;
  283. background: rgba(0, 0, 0, 0.6);
  284. z-index: 9999;
  285. }
  286. .wei-dialog .content {
  287. position: fixed;
  288. width: 90%;
  289. height: 2.4rem;
  290. top: 50%;
  291. left: 50%;
  292. -webkit-transform: translate(-50%, -50%);
  293. transform: translate(-50%, -50%);
  294. background: top/cover url(https://cdn-novel.iycdm.com/h5/activity-2019-05-30/failure.png) no-repeat;
  295. font-size: 0;
  296. border-radius: 6px;
  297. }
  298. .wei-dialog .content .wei-dialog_button {
  299. width: 3rem;
  300. height: 0.5rem;
  301. position: relative;
  302. top: 1.55rem;
  303. left: 50%;
  304. -webkit-transform: translate(-50%);
  305. transform: translate(-50%);
  306. }
  307. .wei-dialog .content .wei-dialog_close {
  308. position: relative;
  309. top: 2.5rem;
  310. left: 50%;
  311. -webkit-transform: translate(-50%);
  312. transform: translate(-50%);
  313. width: 0.3rem;
  314. }
  315. .hide{
  316. display: none;
  317. }
  318. </style>
  319. </head>
  320. <body>
  321. <main class="main_box">
  322. <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/bg.jpg" class="bg" />
  323. <div class="index">
  324. <div class="slider">
  325. <div id="slider">
  326. <div class="slider-img active">大灰狼 5月33日 16:59 获得 年会vip会员 </div>
  327. <div class="slider-img">雨过天琴 5月22日 17:23 获得 年费vip会员</div>
  328. <div class="slider-img">培训师钮维娜 5月22日 10:05 获得 500元京东卡</div>
  329. <div class="slider-img">香草姑娘 5月22日 6:11 获得1000书币</div>
  330. <div class="slider-img">liwenwen 5月22日 14:48 获得1000书币</div>
  331. <!-- <ul class="slider-nav-list">
  332. <li class="nav-item active"></li>
  333. <li class="nav-item"></li>
  334. <li class="nav-item"></li>
  335. </ul> -->
  336. </div>
  337. </div>
  338. <div class="time">
  339. <span>活动倒计时</span>
  340. <span id="hour">00</span>
  341. <div>:</div>
  342. <span id="minute">00</span>
  343. <div>:</div>
  344. <span id="second">00</span>
  345. </div>
  346. <div class="zp_out">
  347. <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/plate.png" class="zp" />
  348. </div>
  349. <div class="zz">
  350. <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/point.png" />
  351. <span id="left_count">剩余{{$count}} 次</span>
  352. </div>
  353. <div class="button">
  354. <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/button.png" />
  355. @if($count >0)
  356. <div id="lottery_button">立即抽奖</div>
  357. @else
  358. <div id="lottery_button">充值后才可抽奖</div>
  359. @endif
  360. </div>
  361. <div class="remaining">
  362. <div class="rmb">¥</div>
  363. <div class="remaining-rmb">奖金池剩余:{{$total}}书币</div>
  364. </div>
  365. <div class="rule">
  366. <div class="rule_title">
  367. <div class="rule_title_bt rule_title_active" data-toggle="role">活动规则</div>
  368. <div class="rule_title_bt" style="margin-left: 0.61rem" data-toggle="record">中奖记录</div>
  369. </div>
  370. <div class="rule_content" >
  371. <p>1、书币奖品实时到账;</p>
  372. <p>
  373. 2、抽到实物奖品用户需先填手机号和身份证信息,客服
  374. 确认信息后将会在7个工作日寄出;
  375. </p>
  376. <p>
  377. 3、抽奖机会必须在活动充值页面成功充值后获得,其余
  378. 充值页面充值不会获得抽奖机会;
  379. </p>
  380. </div>
  381. <div class="hide" id="record">
  382. @foreach($list as $item)
  383. <p>{{$item->created_at}} {{$item->price}}书币</p>
  384. @endforeach
  385. </div>
  386. <div class="hide" id="role">
  387. <p>1、书币奖品实时到账;</p>
  388. <p>
  389. 2、抽到实物奖品用户需先填手机号和身份证信息,客服
  390. 确认信息后将会在7个工作日寄出;
  391. </p>
  392. <p>
  393. 3、抽奖机会必须在活动充值页面成功充值后获得,其余
  394. 充值页面充值不会获得抽奖机会;
  395. </p>
  396. </div>
  397. </div>
  398. </div>
  399. <div class="dialog" style="display:none">
  400. <div class="content">
  401. <div class="winning-content">恭喜您抽中<span id="price">0书币</span></div>
  402. <div class="dialog_button"></div>
  403. <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/close.png" class="dialog_close" />
  404. </div>
  405. </div>
  406. <div class="wei-dialog" style="display:none">
  407. <div class="content">
  408. <div class="wei-dialog_button"></div>
  409. <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/close.png" class="wei-dialog_close" />
  410. </div>
  411. </div>
  412. </main>
  413. </body>
  414. <script>
  415. //轮播
  416. function carousel() {
  417. var interval = 3000; //间隔多久轮换一次
  418. var duration = 3000; //轮换动画的持续时间
  419. var cur = 0; //当前图片的下标
  420. var next = 1; //下一个图片的下标
  421. // var li_list = $(".nav-item");
  422. var img_list = $(".slider-img");
  423. setInterval(function() {
  424. sliderImg();
  425. }, interval);
  426. function sliderImg() {
  427. //轮换导航
  428. // li_list
  429. // .eq(next)
  430. // .addClass("active")
  431. // .siblings()
  432. // .removeClass("active");
  433. //轮换图片
  434. img_list.eq(cur).animate(
  435. {
  436. left: "-150%"
  437. },
  438. duration,
  439. function() {
  440. $(this).removeClass("active");
  441. }
  442. );
  443. img_list
  444. .eq(next)
  445. .addClass("active")
  446. .css("left", "150%")
  447. .animate({ left: "50%" }, duration);
  448. cur = next;
  449. next++;
  450. if (next >= img_list.length) {
  451. next = 0;
  452. }
  453. }
  454. }
  455. carousel();
  456. var time_diff = {{$time_diff}}
  457. time_diff = parseInt(time_diff);
  458. var oHour = document.querySelector('#hour');
  459. var oMinute = document.querySelector('#minute');
  460. var oSecond = document.querySelector('#second');
  461. function times() {
  462. time_diff--;
  463. day = Math.floor(time_diff/86400);
  464. hour = Math.floor((time_diff-day*86400)/3600)+day*24;
  465. minute = Math.floor((time_diff - hour * 3600) / 60);
  466. second = time_diff - hour * 3600 - minute * 60;
  467. oHour.innerHTML = hour<10?hour:hour;
  468. oMinute.innerHTML = minute<10?minute:minute;
  469. oSecond.innerHTML = second<10?second:second;
  470. }
  471. times();
  472. var timeInterval = setInterval(function () {
  473. if(time_diff<=0){
  474. clearInterval(timeInterval);
  475. }else{
  476. times()
  477. }
  478. },1000)
  479. //活动规则点击
  480. $(function() {
  481. $(".rule_title_bt").click(function(event) {
  482. $(this)
  483. .addClass("rule_title_bt")
  484. .addClass("rule_title_active");
  485. $(this)
  486. .siblings()
  487. .removeClass("rule_title_active");
  488. if($(this).data('toggle') == 'role'){
  489. $('.rule_content').html( $('#role').html() );
  490. }else{
  491. $('.rule_content').html( $('#record').html() );
  492. }
  493. });
  494. });
  495. var lasttime; //第一次点击时间
  496. var rotatesize = 0; //旋转角度
  497. var count = {{$count}}
  498. count = parseInt(count);
  499. //活动规则点击
  500. var canClick = true;
  501. $(function() {
  502. $(".button").click(function(event) {
  503. if(count <=0){
  504. location.href='/activity/huaweiActivity';
  505. return ;
  506. }
  507. if(time_diff<=0){
  508. console.log('time_diff<=0---');
  509. return ;
  510. }
  511. if(!canClick) return ;
  512. canClick = false;
  513. $.ajax({
  514. 'url':'/api/activity/huaweiLottery',
  515. 'type':'post',
  516. 'success':function(res){
  517. if (lasttime && Date.parse(new Date()) - lasttime <= 5000) {
  518. //旋转时间5S在样式中修改后再修改间隔时间
  519. console.log("还在旋转");
  520. return;
  521. } else {
  522. lasttime = Date.parse(new Date());
  523. //点击时间赋值
  524. var m = res.data.rotate;
  525. var price = res.data.price;
  526. price = parseInt(price);
  527. //获取旋转角度 逆时针旋转
  528. $(".zp").css({ transform: "rotate(" + m + "deg)" });
  529. //旋转
  530. setTimeout(() => {
  531. if(price >0){
  532. $('#price').html(price+'书币');
  533. document.querySelector(".dialog").style.display = "";
  534. }else{
  535. document.querySelector(".wei-dialog").style.display = "";
  536. }
  537. //旋转完毕后弹窗
  538. console.log('over');
  539. count--;
  540. $('#left_count').html('剩余'+count+' 次');
  541. if(count<=0){
  542. $('#lottery_button').html('充值后才可抽奖');
  543. }
  544. canClick = true;
  545. }, 5000);
  546. }
  547. }
  548. })
  549. });
  550. });
  551. //获取旋转角度(随机数)
  552. function getnub(x, y) {
  553. /*//角度需大于x小于y
  554. var m = Math.ceil(Math.random() * 10000);
  555. var n = rotatesize + m;
  556. var angle = n % 360;
  557. if (m < 5000 || (angle < x + 10 || angle > y - 10)) {
  558. return this.getnub(x, y);
  559. } else {
  560. rotatesize = n;
  561. return n;
  562. }*/
  563. }
  564. function resetPoint() {
  565. $(".zp").css({transition:"none", transform: "rotate(0deg)" });
  566. setTimeout(()=>{
  567. $(".zp").css({transition:"transform 5s ease, -webkit-transform 5s ease"});
  568. },200);
  569. }
  570. //奖励弹窗点击关闭
  571. $(function() {
  572. $(".dialog_button").click(function(event) {
  573. document.querySelector(".dialog").style.display = "none";
  574. //transition: transform 5s ease, -webkit-transform 5s ease;
  575. $('#price').html('0书币');
  576. resetPoint()
  577. });
  578. });
  579. $(function() {
  580. $(".dialog_close").click(function(event) {
  581. document.querySelector(".dialog").style.display = "none";
  582. $('#price').html('0书币');
  583. resetPoint()
  584. });
  585. });
  586. $(function() {
  587. $(".wei-dialog_button").click(function(event) {
  588. document.querySelector(".wei-dialog").style.display = "none";
  589. resetPoint()
  590. });
  591. });
  592. $(function() {
  593. $(".wei-dialog_close").click(function(event) {
  594. document.querySelector(".wei-dialog").style.display = "none";
  595. resetPoint()
  596. });
  597. });
  598. </script>
  599. </html>