awardActivity.html 36 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6. <title>免费活动</title>
  7. <link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
  8. <link rel="stylesheet" href="../static/js/vender/toastr/toastr.min.css">
  9. <link rel="stylesheet" href="../static/css/awardActivity.css">
  10. <script src="../static/js/vender/jquery-3.4.1.min.js"></script>
  11. <script src="../static/js/vender/toastr/toastr.min.js"></script>
  12. <script src="../static/js/vender/config.js"></script>
  13. </head>
  14. <body>
  15. <div class="container">
  16. <div class="all-bg-wrap">
  17. <img class="all-bg-img" src="../static/img/awardActivity/all-bg.png" />
  18. </div>
  19. <div class="rule-wrap">活动规则</div>
  20. <div class="time-position"></div>
  21. <div class="time-wrap"></div>
  22. <div class="top-container">
  23. <img class="top-bg-one" src="../static/img/awardActivity/top-bg-one.png" />
  24. <img class="top-bg-two" src="../static/img/awardActivity/top-bg-two.png" />
  25. <div class="get-award-container">
  26. <div class="award-lists"></div>
  27. </div>
  28. <div class="all-award-wrap"></div>
  29. </div>
  30. <div class="rest-wrap">
  31. <div class="award-btn-wrap">
  32. <img class="start-award" src="../static/img/awardActivity/bug-phone.png" />
  33. </div>
  34. <div class="get-time-wrap">
  35. <div class="rest-time">剩余抽奖次数 <span class="times"></span>次</div>
  36. <div class="get-time-btn">获取次数</div>
  37. </div>
  38. <div class="tab-wrap">
  39. <img class="tab-bg1" src="../static/img/awardActivity/tab-bg1.png" />
  40. <img class="tab-bg2" src="../static/img/awardActivity/tab-bg2.png" />
  41. <img class="tab-bg3" src="../static/img/awardActivity/tab-bg3.png" />
  42. <img class="tab-bg4" src="../static/img/awardActivity/tab-bg4.png" />
  43. <div class="award-container">
  44. <div class="award-title-wrap">
  45. <div class="award-title active-title">奖励一览</div>
  46. <div class="award-title">分配奖励(<span class="all-times"></span>)</div>
  47. </div>
  48. <div class="award-list">
  49. <div class="award-list-title-wrap">
  50. <div class="award-list-title">时间</div>
  51. <div class="award-list-title">奖品</div>
  52. </div>
  53. <div class="award-list-wrap"></div>
  54. </div>
  55. <div class="distribution-wrap">
  56. <div class="distribution-list-wrap">
  57. <div class="distribution-list">
  58. <div class="distribution-total-wrap">
  59. <div class="award-total-data">奖励总时长<span class="red"></span>天</div>
  60. <div class="award-total-data">已分配时长<span class="red"></span>天</div>
  61. <div class="award-total-data">未分配时长<span class="red"></span>天</div>
  62. </div>
  63. <div class="distribution-container"></div>
  64. <div class="distribution-award-btn">分配奖励</div>
  65. </div>
  66. <div class="award-record-list">
  67. <div class="record-list-title">分配时长记录</div>
  68. <div class="award-record-list-title-wrap">
  69. <div class="award-record-list-title">云机名称</div>
  70. <div class="award-record-list-title">时间</div>
  71. <div class="award-record-list-title">时长</div>
  72. </div>
  73. <div class="award-record-list-wrap"></div>
  74. </div>
  75. </div>
  76. </div>
  77. <div class="no-award-data">
  78. <img class="no-award-img" src="../static/img/awardActivity/no-award.png" />
  79. <div class="no-award-text">没有抽奖记录,我都替你着急~</div>
  80. </div>
  81. <div class="no-distribution-data">
  82. <img class="no-distribution-img" src="../static/img/awardActivity/no-data.png" />
  83. <div class="no-distribution-text">先购买云手机,才能分配喔~</div>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="rule-mask">
  89. <div class="rule-result-dialog">
  90. <div class="rule-content">
  91. <div class="rule-title-wrap">
  92. <div class="rule-title-icon"></div>
  93. <div class="rule-title">活动规则</div>
  94. <div class="rule-title-icon"></div>
  95. </div>
  96. <div class="rule-point-wrap" style="white-space: pre-line;">
  97. <!-- <div class="rule-point">1、活动期间,购买获得的抽取资格不限次数, 活动期间可用,活动结束后未使用的做过期处理。</div>
  98. <div class="rule-point">2、参与活动的套餐是星曜月卡与年卡套餐,其他套餐不参与活动。</div>
  99. <div class="rule-point">3、星币、激活码购买的订单不参与本次活动。</div>
  100. <div class="rule-point">4、抽取的奖励只能新增云机,请去云手机首页查看。</div>
  101. <div class="rule-point">5、活动结束后3天保留奖励分配入口,但不能再参与活动。</div>
  102. <div class="rule-point">6、双子星官方对活动具有最终解释权。</div> -->
  103. </div>
  104. </div>
  105. <img class="rule-close" src="../static/img/anniversaryCelebrate/close.png" />
  106. </div>
  107. </div>
  108. <div class="result-mask">
  109. <div class="result-dialog">
  110. <div class="result-content">
  111. <div class="rule-title-wrap result-title-wrap">
  112. <div class="rule-title-icon"></div>
  113. <div class="rule-title result-title">换个姿势,再抽一次</div>
  114. <div class="rule-title-icon"></div>
  115. </div>
  116. <div class="main-contain"></div>
  117. </div>
  118. <img class="card-close" src="../static/img/anniversaryCelebrate/close.png" />
  119. </div>
  120. </div>
  121. <div class="sure-distribution-wrap">
  122. <div class="sure-distribution-box">
  123. <div class="sure-distribution-title">确定分配奖励时长</div>
  124. <div class="sure-distribution-btn-list">
  125. <div class="sure-distribution-btn sure-distribution-cannel">取消</div>
  126. <div class="sure-distribution-btn sure-distribution-sure">确定</div>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. <script type="text/html" id="card">
  132. <img class="card-img" src="{{icon}}" />
  133. <div class="card-title">{{goodsName}}</div>
  134. <div class="card-tips">{{tips}}</div>
  135. <div class="card-btn">{{cardBtn}}</div>
  136. <div class="card-rest-times">剩余次数{{lotteryCount}}次</div>
  137. </script>
  138. <script type="text/html" id="award1">
  139. <div class="curr-award-item curr-award-item-one">
  140. <div class="curr-award-img curr-award-img-one">
  141. <img class="award-img curr-award-img-one" src="{{icon}}" />
  142. </div>
  143. <div class="curr-award-name">{{goodsName}}</div>
  144. <div class="curr-award-id">{{id}}</div>
  145. </div>
  146. </script>
  147. <script type="text/html" id="award2">
  148. <div class="curr-award-item">
  149. <img class="award-img" src="{{icon}}" />
  150. <div class="curr-award-name">{{goodsName}}</div>
  151. <div class="curr-award-id">{{id}}</div>
  152. </div>
  153. </script>
  154. <script type="text/html" id="awardRecord">
  155. <div class="award-list-item">
  156. <div class="award-list-content">{{createTime}}</div>
  157. <div class="award-list-content">{{goodsName}}</div>
  158. </div>
  159. </script>
  160. <script type="text/html" id="distribution">
  161. <div class="distribution-item">
  162. <div class="distribution-main-content">
  163. <img class="phone-logo" src="{{icon}}" />
  164. <div class="distribution-info">
  165. <div class="distribution-name">{{diskName}}</div>
  166. <div class="distribution-time">{{timeLeft}}</div>
  167. </div>
  168. </div>
  169. <div class="change-num-wrap">
  170. <div class="cut" data-id={{userCardId}} data-index={{index}}>-</div>
  171. <input class="num-ipt" type="number" onkeyup="this.value=this.value.replace(/-/g,'')" value="0" data-id={{userCardId}} data-index={{index}} />
  172. <div class="add" data-id={{userCardId}} data-index={{index}}>+</div>
  173. </div>
  174. </div>
  175. </script>
  176. <script type="text/html" id="record">
  177. <div class="award-record-list-item">
  178. <div class="award-record-list-content award-record-list-name">{{diskName}}</div>
  179. <div class="award-record-list-content">{{createTime}}</div>
  180. <div class="award-record-list-content award-record-list-day">{{validTime}}</div>
  181. </div>
  182. </script>
  183. <script>
  184. toastr.options.positionClass = 'toast-center-center';
  185. toastr.options.timeOut = '1500';
  186. </script>
  187. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  188. <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  189. <script type="text/javascript">
  190. // var baseUrl = 'http://gntest.phone.androidscloud.com:1280'
  191. const fileCenterApi = 'https://file.phone.androidscloud.com:8121';
  192. let uploadKey = ''
  193. if (window.location.origin.includes('client.phone.androidscloud.com')) {
  194. uploadKey = 'edv834e74a9c43eaac02'
  195. } else if (window.location.origin.includes('prese.phone.androidscloud')) {
  196. uploadKey = '347905r86eb745a1sc38'
  197. } else {
  198. uploadKey = '13d0arghebcc4cm49cf04'
  199. }
  200. let timer,flag = true;
  201. var url = window.location.href;
  202. url = url.split('/')
  203. var loc = window.location.search,
  204. n1 = loc.length,//地址的总长度
  205. n2 = loc.indexOf("="),//取得=号的位置
  206. id = loc.substr(n2 + 1, n1 - n2),//从=号后面的内容
  207. u = navigator.userAgent,
  208. ua = navigator.userAgent.toLowerCase(),
  209. awardData = [],
  210. distributionList = [],
  211. topVal = -0.5,
  212. unAllotTime = 0,
  213. recordFlag = true,
  214. pageNum = 1,
  215. pages = 0,
  216. recordFlag1 = true,
  217. pageNum1 = 0,
  218. recordFlag2 = true,
  219. pageNum2 = 1,
  220. pages2 = 0,
  221. cardList = [],
  222. lotteryCount = 0,
  223. lotteryResult = {},
  224. lotteryFlag = true,
  225. activityState = 0,
  226. awardNumber = 0,
  227. currTotalTime = 0,
  228. phoneRemainQuantity = 0,
  229. userCardId = 0,
  230. awardTimer = null,
  231. tab = 1,
  232. flagNum = 1;
  233. isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
  234. isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  235. (function(doc) {
  236. var init = function () {
  237. getPhoneNumber();
  238. bindEvent();
  239. goodsList();
  240. rewardList();
  241. allotTimeRecord();
  242. allotTimeCardList();
  243. }
  244. function bindEvent () {
  245. //点击开始抽奖
  246. $('.start-award')[0].addEventListener('click', startLottery, false);
  247. //点击继续抽奖
  248. $('.main-contain')[0].addEventListener('click', nextLottery, false);
  249. //点击抽奖结果关闭弹窗
  250. $('.card-close')[0].addEventListener('click', cardClose, false);
  251. //点击获取次数
  252. $('.get-time-btn')[0].addEventListener('click',getTimeHandle,false);
  253. //tab切换
  254. $('.award-title')[0].addEventListener('click', tabHandle1, false);
  255. $('.award-title')[1].addEventListener('click', tabHandle2, false);
  256. //点击分配时长按钮
  257. $('.distribution-award-btn')[0].addEventListener('click', distributionTime, false);
  258. //点击规则
  259. $('.rule-wrap')[0].addEventListener('click', ruleHandle, false);
  260. //关闭规则
  261. $('.rule-close')[0].addEventListener('click', ruleClose, false);
  262. }
  263. function tabHandle1 (e) {
  264. tab = 1;
  265. operate('mfhd_2022_h5_tab奖励一览');
  266. $('.tab-bg1').eq(0).css('display', 'block');
  267. $('.tab-bg2').eq(0).css('display', 'none');
  268. $('.tab-bg3').eq(0).css('display', 'none');
  269. $('.tab-bg4').eq(0).css('display', 'none');
  270. $('.tab-wrap').eq(0).css('height', '5.75rem');
  271. $('.award-title')[0].className = 'award-title active-title';
  272. $('.award-title')[1].className = 'award-title';
  273. $('.award-list').eq(0).css('display', 'block');
  274. $('.no-distribution-data').eq(0).css('display', 'none');
  275. $('.distribution-list-wrap').eq(0).css('display', 'none');
  276. if(pages === 0) {
  277. $('.no-award-data').eq(0).css('display', 'block');
  278. $('.award-list').eq(0).css('display', 'none');
  279. } else {
  280. $('.award-list').eq(0).css('display', 'block');
  281. $('.no-award-data').eq(0).css('display', 'none');
  282. }
  283. }
  284. function tabHandle2 (e) {
  285. tab = 2;
  286. if(activityState == 0){
  287. stopManyClick(() =>{
  288. toastr.error('活动未开始!');
  289. })
  290. return
  291. }
  292. operate('mfhd_2022_h5_tab分配奖励');
  293. $('.tab-bg1').eq(0).css('display', 'none');
  294. $('.award-title')[0].className = 'award-title';
  295. $('.award-title')[1].className = 'award-title active-title';
  296. $('.distribution-list-wrap').eq(0).css('display', 'block');
  297. $('.award-list').eq(0).css('display', 'none');
  298. $('.no-award-data').eq(0).css('display', 'none');
  299. if(cardList.length === 0) {
  300. $('.tab-bg2').eq(0).css('display', 'none');
  301. $('.tab-bg3').eq(0).css('display', 'none');
  302. $('.tab-bg4').eq(0).css('display', 'block');
  303. $('.tab-wrap').eq(0).css('height', '5.76rem');
  304. $('.distribution-list-wrap').eq(0).css('display', 'none');
  305. $('.no-distribution-data').eq(0).css('display', 'block');
  306. } else if(pages2 == 0) {
  307. $('.tab-bg4').eq(0).css('display', 'none');
  308. $('.tab-bg2').eq(0).css('display', 'none');
  309. $('.tab-bg3').eq(0).css('display', 'block');
  310. $('.tab-wrap').eq(0).css('height', '9.05rem');
  311. } else {
  312. $('.tab-bg4').eq(0).css('display', 'none');
  313. $('.tab-bg3').eq(0).css('display', 'none');
  314. $('.tab-bg2').eq(0).css('display', 'block');
  315. $('.award-record-list').eq(0).css('display', 'block');
  316. $('.tab-wrap').eq(0).css('height', '14.75rem');
  317. }
  318. }
  319. // 继续抽奖
  320. function nextLottery(e) {
  321. if(e.target.className === 'card-btn'){
  322. cardClose();
  323. stopManyClick(() =>{
  324. startLottery('next');
  325. })
  326. }
  327. }
  328. function animation(num, time, result) {
  329. if(num >= 0) {
  330. $('.curr-award-item').eq(num).css('background', '#ffffff');
  331. }
  332. num++;
  333. $('.curr-award-item').eq(num).css('background', '#FAE892');
  334. if(time < 160) {
  335. time += 30;
  336. } else if(num === flagNum - 5) {
  337. time += 50;
  338. } else if(num === flagNum - 4) {
  339. time += 100;
  340. } else if(num === flagNum - 3) {
  341. time += 200;
  342. } else if(num === flagNum - 2) {
  343. time += 300;
  344. } else if(num === flagNum - 1) {
  345. time += 300;
  346. } else if(num === flagNum) {
  347. time += 100;
  348. } else {
  349. time += 30;
  350. }
  351. let flag = $('.curr-award-id').eq(num).text();
  352. if(flag == lotteryResult.id){
  353. flagNum = num < 6 ? num + awardNumber : num;
  354. }
  355. timer = setTimeout(() => {
  356. if(num === awardNumber) {
  357. num = -1;
  358. animation(num, time);
  359. } else if(flag == lotteryResult.id && time > 500) {
  360. lotteryResultHandle();
  361. clearTimeout(timer);
  362. } else {
  363. animation(num, time)
  364. }
  365. }, time)
  366. }
  367. // 开始抽奖
  368. function startLottery(type){
  369. if(activityState == 0){
  370. stopManyClick(() =>{
  371. toastr.error('活动未开始!');
  372. })
  373. return
  374. }
  375. if(activityState == 2){
  376. stopManyClick(() =>{
  377. toastr.error('活动已结束!');
  378. })
  379. return
  380. }
  381. if(lotteryCount <= 0) {
  382. operate('mfhd_2022_h5_购买云机');
  383. getTimeHandle('buy');
  384. return
  385. } else if(type === 'next') {
  386. operate('mfhd_2022_h5_继续抽奖');
  387. } else {
  388. operate('mfhd_2022_h5_开始抽奖');
  389. }
  390. if(!lotteryFlag) {
  391. return
  392. }
  393. lotteryFlag = false;
  394. if(!GetRequest().token){
  395. return
  396. }
  397. let num = flagNum > awardNumber ? flagNum - awardNumber : flagNum;
  398. $('.curr-award-item').eq(num).css('background', '#ffffff');
  399. $.ajax({
  400. url: baseUrl + '/api/activity/gratis/startLottery',
  401. type: 'get',
  402. headers: {
  403. 'Authorization': GetRequest().token //id
  404. },
  405. data: {
  406. clientType: GetRequest().clientType
  407. },
  408. contentType: "application/json",
  409. dataType: 'json',
  410. cache: false,
  411. success: function (res) {
  412. if(res.status === 0){
  413. let time = 20;
  414. let num = -1;
  415. lotteryResult = res.data;
  416. animation(num, time, 3);
  417. }else{
  418. stopManyClick(() =>{
  419. toastr.error(res.msg)
  420. })
  421. lotteryFlag = true
  422. }
  423. }
  424. })
  425. }
  426. //抽奖结果展示
  427. function lotteryResultHandle() {
  428. $('.main-contain').eq(0).empty();
  429. $('.result-dialog').animate({top: '3.86rem'},"fast");
  430. $('.result-mask').show();
  431. document.documentElement.style.overflow='hidden';
  432. lotteryFlag = true;
  433. let result = '';
  434. lotteryCount--;
  435. lotteryResult.lotteryCount = lotteryCount;
  436. lotteryResult.tips = lotteryResult.goodsType != 5 ?'奖励已发送您的账户内,请注意查收' : '中奖不是最终的追求,重要的是开心咯';
  437. lotteryResult.cardBtn = lotteryResult.lotteryCount != 0 ?'继续抽奖' : '获取次数';
  438. let text = lotteryResult.lotteryCount != 0 ?'换个姿势,再抽一次' : '次数用完,点击获取';
  439. $('.result-title').eq(0).text(text)
  440. if(lotteryCount === 0) {
  441. $('.start-award')[0].src = '../static/img/awardActivity/bug-phone.png';
  442. }
  443. lotteryResult.icon = `https://file.phone.androidscloud.com:8121/document/newFile/download/0/${uploadKey}?fileKey=${lotteryResult.icon}`
  444. result = $('#card').text().replace(/{{(.*?)}}/g, function(node, key) {
  445. return lotteryResult[key];
  446. })
  447. goodsList();
  448. pageNum = 1;
  449. rewardList();
  450. allotTimeCardList();
  451. $('.main-contain').eq(0).append(result)
  452. if(awardNumber === 9) {
  453. $('.card-img')[0].className = 'card-img card-img1';
  454. } else {
  455. $('.card-img')[0].className = 'card-img card-img2';
  456. }
  457. $('.times').eq(0).text(lotteryResult.lotteryCount)
  458. }
  459. // 抽奖记录
  460. function rewardList(type){
  461. if(!GetRequest().token){
  462. return
  463. }
  464. $.ajax({
  465. url: baseUrl + '/api/activity/gratis/rewardList',
  466. type: 'get',
  467. headers: {
  468. 'Authorization': GetRequest().token //id
  469. },
  470. data: {
  471. page: pageNum,
  472. pageSize: 5
  473. },
  474. contentType: "application/json",
  475. dataType: 'json',
  476. cache: false,
  477. success: function (res) {
  478. if(res.status === 0){
  479. recordFlag = true;
  480. let list = res.data.list
  481. pages = res.data.pages;
  482. if(type != 'down'){
  483. $('.award-list-wrap').eq(0).empty();
  484. }
  485. if(pages === 0) {
  486. $('.no-award-data').eq(0).css('display', 'block');
  487. $('.award-list').eq(0).css('display', 'none');
  488. } else {
  489. $('.award-list').eq(0).css('display', 'block');
  490. $('.no-award-data').eq(0).css('display', 'none');
  491. }
  492. let result = ''
  493. list.map((item, index) => {
  494. item.createTime = `${item.createTime.substring(5, 7)}月${item.createTime.substring(8, 10)}日${item.createTime.substring(11)}`
  495. result += $('#awardRecord').text().replace(/{{(.*?)}}/g, function(node, key) {
  496. return item[key];
  497. })
  498. })
  499. $('.award-list-wrap').eq(0).append(result)
  500. if(tab === 2) {
  501. $('.award-list').eq(0).css('display', 'none');
  502. $('.no-award-data').eq(0).css('display', 'none');
  503. }
  504. }else{
  505. stopManyClick(() =>{
  506. toastr.error(res.msg)
  507. })
  508. }
  509. }
  510. })
  511. }
  512. //抽奖记录下拉加载
  513. $('.award-list-wrap')[0].addEventListener('scroll',function () {
  514. let scrollTop = $('.award-list-wrap')[0].scrollTop;
  515. let clientHeight = $('.award-list-wrap')[0].clientHeight;
  516. let scrollHeight = $('.award-list-wrap')[0].scrollHeight;
  517. if(scrollTop + clientHeight + 100 > scrollHeight){
  518. if(recordFlag && pageNum < pages && pages > 1){
  519. recordFlag = false;
  520. pageNum++;
  521. rewardList('down');
  522. }
  523. }
  524. });
  525. // 活动基础数据
  526. function goodsList(){
  527. if(!GetRequest().token){
  528. return
  529. }
  530. $.ajax({
  531. url: baseUrl + '/api/activity/gratis/goodsList',
  532. type: 'get',
  533. headers: {
  534. 'Authorization': GetRequest().token //id
  535. },
  536. contentType: "application/json",
  537. dataType: 'json',
  538. cache: false,
  539. success: function (res) {
  540. if(res.status === 0){
  541. let startTime = res.data.startTime
  542. let endTime = res.data.endTime
  543. $('.time-wrap').eq(0).text(`活动时间:${startTime.substring(0,4)}年${startTime.substring(5,7)}月${startTime.substring(8,10)}日-${endTime.substring(5,7)}月${endTime.substring(8,10)}日`);
  544. awardData = res.data.marquee
  545. let goodsInfos = res.data.goodsInfos
  546. lotteryCount = res.data.lotteryCount
  547. activityState = res.data.activityState
  548. awardNumber = goodsInfos.length
  549. let actRule = res.data.actRule
  550. let result = ''
  551. let resultDom = goodsInfos.length === 9 ? $('#award1') : $('#award2');
  552. if(goodsInfos.length === 9) {
  553. $(".top-bg-one").css({"display": "block"})
  554. $(".all-award-wrap").css({"marginLeft": "0.1rem"})
  555. $(".top-bg-two").css({"display": "none"})
  556. } else {
  557. $(".top-bg-one").css({"display": "none"})
  558. $(".all-award-wrap").css({"marginLeft": "0.14rem"})
  559. $(".top-bg-two").css({"display": "block"})
  560. }
  561. goodsInfos.map((item, index) => {
  562. item.index = index
  563. item.icon = `https://file.phone.androidscloud.com:8121/document/newFile/download/0/${uploadKey}?fileKey=${item.icon}`
  564. result += resultDom.text().replace(/{{(.*?)}}/g, function(node, key) {
  565. return item[key];
  566. })
  567. })
  568. if(lotteryCount > 0) {
  569. $('.start-award')[0].src = '../static/img/awardActivity/start-award.png';
  570. }
  571. clearInterval(awardTimer);
  572. headerAward();
  573. $('.rule-point-wrap').eq(0).html(actRule)
  574. $('.times').eq(0).text(lotteryCount)
  575. let content = $('.all-award-wrap').eq(0).text();
  576. if(!content){
  577. $('.all-award-wrap').eq(0).append(result)
  578. }
  579. }else{
  580. stopManyClick(() =>{
  581. toastr.error(res.msg)
  582. })
  583. }
  584. }
  585. })
  586. }
  587. //轮播
  588. function headerAward(){
  589. if(awardData.length === 0) {
  590. return
  591. }
  592. awardTimer = setInterval(() =>{
  593. awardHandle();
  594. },3000);
  595. }
  596. function awardHandle(){
  597. let index = (topVal/0.5) + 1,awardString;
  598. let awardLen = Array.from($('.award-text')).length;
  599. if(awardLen < awardData.length){
  600. let node = document.createElement('div');
  601. node.className = "award-text";
  602. $('.award-lists')[0].appendChild(node);
  603. }
  604. if(topVal < awardData.length/2 - 0.5){
  605. topVal+=0.5;
  606. }else{
  607. topVal = 0;
  608. $('.award-lists').eq(0).css('top','0.5rem');
  609. }
  610. let numberType = Math.floor(getRandom()/4);
  611. if(awardData && awardData[index] && topVal < awardData.length/2){
  612. awardString = `恭喜${awardData[index].phone}用户获得${awardData[index].goodsName}奖品`;
  613. }
  614. // else{
  615. // awardString = `恭喜1${[3,5,7,8,3,5,7,8,3,5][getRandom()]}${getRandom()}****${getRandom()}${getRandom()}${getRandom()}${getRandom()}用户获得${['优惠券','激活码','云机时长','星币','云机套餐','谢谢惠顾'][numberType]}`
  616. // }
  617. $('.award-text').eq(index).text(awardString);
  618. $('.award-lists').eq(0).animate({top: -(topVal) + 'rem'},"fast");
  619. }
  620. // 获取一个随机数
  621. function getRandom(){
  622. return Math.floor(Math.random()*10);
  623. }
  624. // 分配云手机列表
  625. function allotTimeCardList(type){
  626. pageNum1 = 0;
  627. recordFlag1 = false;
  628. $('.distribution-container').eq(0).empty();
  629. if(!GetRequest().token){
  630. return
  631. }
  632. $.ajax({
  633. url: baseUrl + '/api/activity/gratis/allotTimeCardList',
  634. type: 'get',
  635. headers: {
  636. 'Authorization': GetRequest().token //id
  637. },
  638. contentType: "application/json",
  639. dataType: 'json',
  640. cache: false,
  641. success: function (res) {
  642. if(res.status === 0){
  643. cardList = res.data.cardList
  644. unAllotTime = res.data.unAllotTime
  645. userCardId = cardList[0] && cardList[0].userCardId
  646. pageCardList()
  647. $('.all-times').eq(0).text(unAllotTime)
  648. $('.red').eq(0).text(res.data.totalTime)
  649. $('.red').eq(1).text(res.data.allotTime)
  650. $('.red').eq(2).text(unAllotTime)
  651. }else{
  652. stopManyClick(() =>{
  653. toastr.error(res.msg)
  654. })
  655. }
  656. }
  657. })
  658. }
  659. // 分页渲染数据
  660. function pageCardList() {
  661. let result = '';
  662. recordFlag1 = true;
  663. let list = cardList.slice(pageNum1 * 5, (pageNum1 * 5) + 5);
  664. let mealTypeObj = {
  665. VIP: 'card1.png',
  666. SVIP: 'card2.jpg',
  667. STAR: 'card3.png',
  668. STARPRO: 'card4.png'
  669. }
  670. list.map((item, index) => {
  671. item.index = pageNum1 * 5 + index
  672. item.icon = `../static/img/awardActivity/${mealTypeObj[item.buyVipType]}`
  673. result += $('#distribution').text().replace(/{{(.*?)}}/g, function(node, key) {
  674. return item[key];
  675. })
  676. })
  677. $('.distribution-container').eq(0).append(result);
  678. for (var i = 0; i < list.length; i++) {
  679. $('.num-ipt')[pageNum1 * 5 + i].oninput = function (e) {
  680. const id = e.target.dataset.id;
  681. let oldDuration = 0;
  682. let preTotalTime = 0;
  683. let index = e.target.dataset.index;
  684. let value = $('.num-ipt').eq(index).val();
  685. if(value.length >= 5){
  686. value = value.substr(0, 5);
  687. }
  688. var position = String(value).indexOf(".");//获取小数点的位置
  689. if(position != -1){
  690. value = value.substr(0, position);
  691. }
  692. distributionList.map(item => { // 上一次的总数据
  693. preTotalTime += parseInt(item.allotTime);
  694. })
  695. //这一次操作
  696. if(value == 0){
  697. if(!distributionList.find((item) => item.userCardId == id)){
  698. distributionList.push({
  699. userCardId: id,
  700. allotTime: +value
  701. });
  702. }else{
  703. distributionList = distributionList.filter(item => item.userCardId != id);
  704. }
  705. distributionList = distributionList.filter(item => item.allotTime != 0);
  706. }else{
  707. if(!distributionList.find((item) => item.userCardId == id)){
  708. distributionList.push({
  709. userCardId: id,
  710. allotTime: Math.abs(value)
  711. });
  712. }else{
  713. distributionList.map(item => {
  714. if (item.userCardId == id) {
  715. oldDuration = item.allotTime;
  716. item.allotTime = +value;
  717. }
  718. })
  719. }
  720. }
  721. currTotalTime = 0;
  722. distributionList.map(item => { // 这一次的总数据
  723. currTotalTime += parseInt(item.allotTime);
  724. })
  725. if(currTotalTime > unAllotTime){ // 当前已分配大于总分配时长
  726. let val = unAllotTime - preTotalTime + oldDuration;
  727. distributionList.map(item => {
  728. if (item.userCardId == id) {
  729. item.allotTime = val;
  730. }
  731. })
  732. $('.num-ipt').eq(index).val(val);
  733. if(!lotteryFlag) {
  734. return
  735. } else {
  736. stopManyClick(() => {
  737. toastr.error('分配时长不能大于未分配总时长');
  738. })
  739. return
  740. }
  741. }
  742. if(value.length > 5) value = value.slice(0, 5);
  743. $('.num-ipt').eq(index).val(value);
  744. }
  745. }
  746. }
  747. //抽奖记录下拉加载
  748. $('.distribution-container')[0].addEventListener('scroll',function () {
  749. let scrollTop = $('.distribution-container')[0].scrollTop;
  750. let clientHeight = $('.distribution-container')[0].clientHeight;
  751. let scrollHeight = $('.distribution-container')[0].scrollHeight;
  752. if(scrollTop + clientHeight + 100 > scrollHeight){
  753. if(recordFlag1 && pageNum1 < (cardList.length/5) && (cardList.length/5) > 1){
  754. recordFlag1 = false;
  755. pageNum1++;
  756. pageCardList();
  757. }
  758. }
  759. });
  760. // 分配时长记录
  761. function allotTimeRecord(type){
  762. if(!GetRequest().token){
  763. return
  764. }
  765. $.ajax({
  766. url: baseUrl + '/api/activity/gratis/allotTimeRecord',
  767. type: 'get',
  768. headers: {
  769. 'Authorization': GetRequest().token //id
  770. },
  771. data: {
  772. page: pageNum2,
  773. pageSize: 5
  774. },
  775. contentType: "application/json",
  776. dataType: 'json',
  777. cache: false,
  778. success: function (res) {
  779. if(res.status === 0){
  780. let list = res.data.list
  781. let result = ''
  782. pages2 = res.data.pages
  783. recordFlag2 = true;
  784. if(type != 'down'){
  785. $('.award-record-list-wrap').eq(0).empty();
  786. }
  787. list.map(item => {
  788. item.createTime = `${item.createTime.substring(0, 4)}年${item.createTime.substring(5, 7)}月${item.createTime.substring(8, 10)}日${item.createTime.substring(11)}`
  789. result += $('#record').text().replace(/{{(.*?)}}/g, function(node, key) {
  790. return item[key];
  791. })
  792. })
  793. $('.award-record-list-wrap').eq(0).append(result)
  794. }else{
  795. stopManyClick(() =>{
  796. toastr.error(res.msg)
  797. })
  798. }
  799. }
  800. })
  801. }
  802. //分配时长记录下拉加载
  803. $('.award-record-list-wrap')[0].addEventListener('scroll',function () {
  804. let scrollTop = $('.award-record-list-wrap')[0].scrollTop;
  805. let clientHeight = $('.award-record-list-wrap')[0].clientHeight;
  806. let scrollHeight = $('.award-record-list-wrap')[0].scrollHeight;
  807. if(scrollTop + clientHeight + 100 > scrollHeight){
  808. if(recordFlag2 && pageNum2 < pages2 && pages2 > 1){
  809. recordFlag2 = false;
  810. pageNum2++;
  811. allotTimeRecord('down');
  812. }
  813. }
  814. });
  815. function getTimeHandle(type) {
  816. if(activityState == 0){
  817. stopManyClick(() =>{
  818. toastr.error('活动未开始!');
  819. })
  820. return
  821. }
  822. if(activityState == 2){
  823. stopManyClick(() =>{
  824. toastr.error('活动已结束!');
  825. })
  826. return
  827. }
  828. if(!lotteryFlag) {
  829. return
  830. }
  831. if(type != 'bug') {
  832. operate('mfhd_2022_h5_获取次数按钮');
  833. }
  834. stopManyClick(() =>{
  835. if (window.__wxjs_environment === 'miniprogram') { // 小程序
  836. if(phoneRemainQuantity > 0){
  837. wx.miniProgram.navigateTo({
  838. url: '/packageA/order/buy/index?type=activity'
  839. })
  840. } else {
  841. wx.miniProgram.navigateTo({
  842. url: '/packageA/order/renew/index?record=' + userCardId
  843. })
  844. }
  845. } else if (isAndroid && window.native) { // 安卓
  846. if(phoneRemainQuantity > 0){
  847. window.native.startPurchase('SVIP', 365);
  848. } else {
  849. window.native.startRenew();
  850. }
  851. } else if (isiOS) {
  852. try {
  853. if(phoneRemainQuantity > 0){
  854. window.webkit.messageHandlers.startPurchase.postMessage({ type: 1, day: 365 });
  855. } else {
  856. window.webkit.messageHandlers.startRenew.postMessage({ type: 1, day: 365 });
  857. }
  858. } catch(error) {
  859. if(phoneRemainQuantity > 0){
  860. uni.webView.navigateTo({
  861. url: '/pages/order/order'
  862. })
  863. } else {
  864. uni.webView.navigateTo({
  865. url: '/pages/order/renew?record=' + userCardId
  866. })
  867. }
  868. }
  869. }
  870. })
  871. }
  872. //点击加减号
  873. $('.distribution-container')[0].addEventListener('click',(e) => {
  874. if(!lotteryFlag) {
  875. return
  876. }
  877. console.log(e.target.className)
  878. if(e.target.className === 'add'){
  879. operate('mfhd_2022_h5_加号');
  880. const id = e.target.dataset.id;
  881. let index = e.target.dataset.index;
  882. let number = $('.num-ipt').eq(index).val();
  883. currTotalTime = 0;
  884. // 这一次操作
  885. if(number == 0){
  886. if(!distributionList.find((item) => item.userCardId == id)){
  887. distributionList.push({
  888. userCardId: id,
  889. allotTime: +number + 1
  890. });
  891. }else{
  892. distributionList.map(item => {
  893. if(item.userCardId == id){
  894. item.allotTime++;
  895. }
  896. })
  897. }
  898. }else{
  899. distributionList.map(item => {
  900. if(item.userCardId == id){
  901. item.allotTime++;
  902. }
  903. })
  904. }
  905. distributionList.map(item => { // 这一次的总数据
  906. currTotalTime += parseInt(item.allotTime);
  907. })
  908. if(currTotalTime <= unAllotTime){
  909. number++;
  910. $('.num-ipt').eq(index).val(number);
  911. }else{
  912. distributionList.map(item => {
  913. if(item.userCardId == id){
  914. item.allotTime = +number;
  915. }
  916. })
  917. stopManyClick(() => {
  918. toastr.error('分配时长不能大于未分配总时长');
  919. })
  920. }
  921. }
  922. if(e.target.className === 'cut'){
  923. operate('mfhd_2022_h5_减号');
  924. const id = e.target.dataset.id;
  925. let index = e.target.dataset.index;
  926. let number = $('.num-ipt').eq(index).val();
  927. if(number > 0){
  928. distributionList.map(item => {
  929. if(item.userCardId == id){
  930. item.allotTime--;
  931. }
  932. })
  933. number--;
  934. if(number == 0){
  935. distributionList = distributionList.filter(item => item.userCardId != id);
  936. }
  937. currTotalTime--;
  938. $('.num-ipt').eq(index).val(number);
  939. }else{
  940. stopManyClick(() => {
  941. toastr.error('分配的时长不能小于0');
  942. })
  943. }
  944. }
  945. });
  946. async function distributionTime(e) {
  947. if(!lotteryFlag) {
  948. return
  949. }
  950. let res = await isShow();
  951. if(res == 0) {
  952. stopManyClick(() =>{
  953. toastr.error('活动已结束!');
  954. })
  955. return
  956. }
  957. operate('mfhd_2022_h5_分配奖励');
  958. distributionList = distributionList.filter(item => item.allotTime != 0);
  959. if (distributionList.length === 0) {
  960. stopManyClick(() => {
  961. toastr.error('未选中任何云手机');
  962. })
  963. } else {
  964. $('.sure-distribution-wrap').eq(0).css('display', 'block');
  965. }
  966. }
  967. // 活动结束是否超过三天
  968. function isShow(){
  969. return new Promise((resolve, reject) => {
  970. $.ajax({
  971. url: baseUrl + '/api/activity/gratis/isShow',
  972. type: 'get',
  973. headers: {
  974. 'Authorization': GetRequest().token //id
  975. },
  976. contentType:"application/json",
  977. dataType: 'json',
  978. cache: false,
  979. success: function (res) {
  980. resolve(res.data)
  981. },
  982. })
  983. })
  984. }
  985. //点击分配时长取消按钮
  986. $('.sure-distribution-cannel')[0].addEventListener('click', (e) => {
  987. operate('mfhd_2022_h5_分配奖励_取消');
  988. $('.sure-distribution-wrap').eq(0).css('display', 'none');
  989. });
  990. //点击分配时长确定按钮
  991. $('.sure-distribution-sure')[0].addEventListener('click', (e) => {
  992. stopManyClick(() => {
  993. $.ajax({
  994. url: baseUrl + '/api/activity/gratis/allotTime',
  995. type: 'post',
  996. data: JSON.stringify(distributionList),
  997. headers: {
  998. 'Authorization': GetRequest().token //id
  999. },
  1000. contentType: "application/json",
  1001. dataType: 'json',
  1002. cache: false,
  1003. success: function (res) {
  1004. if(res.status === 0){
  1005. operate('mfhd_2022_h5_分配奖励_确定');
  1006. $('.sure-distribution-wrap').eq(0).css('display', 'none');
  1007. $('.slider-list').eq(0).text('');
  1008. $('.page-number').eq(0).text('');
  1009. init();
  1010. pageNum2 = 1;
  1011. pages2 = 0;
  1012. allotTimeRecord();
  1013. distributionPageNum = 1;
  1014. $('.time-row-data').eq(0).text('');
  1015. distributionList.map((val) => {
  1016. cardList.map((item, indexs) => {
  1017. if(val.userCardId == item.userCardId){
  1018. $('.num-ipt').eq(indexs).val(0);
  1019. }
  1020. })
  1021. })
  1022. distributionList = [];
  1023. cardList = [];
  1024. $('.tab-bg4').eq(0).css('display', 'none');
  1025. $('.tab-bg3').eq(0).css('display', 'none');
  1026. $('.tab-bg2').eq(0).css('display', 'block');
  1027. $('.award-record-list').eq(0).css('display', 'block');
  1028. $('.tab-wrap').eq(0).css('height', '14.75rem');
  1029. toastr.error('分配成功,请前往云机列表查看');
  1030. } else {
  1031. console.log(res.msg)
  1032. $('.sure-distribution-wrap').eq(0).css('display', 'none');
  1033. toastr.error(res.msg);
  1034. }
  1035. },
  1036. })
  1037. })
  1038. });
  1039. function ruleHandle (e) {
  1040. operate('mfhd_2022_h5_规则');
  1041. $('.rule-result-dialog').animate({top: '3.86rem'},"fast");
  1042. $('.rule-mask').show();
  1043. document.documentElement.style.overflow='hidden';
  1044. }
  1045. function ruleClose (e) {
  1046. operate('mfhd_2022_h5_关闭规则');
  1047. $('.rule-result-dialog').animate({top: '-10.96rem'},"fast");
  1048. $('.rule-mask').hide();
  1049. document.documentElement.style.overflow='auto';
  1050. }
  1051. function cardClose (e) {
  1052. operate('mfhd_2022_h5_关闭抽奖结果');
  1053. $('.result-dialog').animate({top: '-10.96rem'},"fast");
  1054. $('.result-mask').hide();
  1055. document.documentElement.style.overflow='auto';
  1056. }
  1057. //获取云机数量
  1058. function getPhoneNumber(){
  1059. $.ajax({
  1060. url: baseUrl + '/api/pay/v2/meal/info?phoneType=SVIP',
  1061. type: 'get',
  1062. headers: {
  1063. 'Authorization': GetRequest().token //id
  1064. },
  1065. contentType: "application/json",
  1066. dataType: 'json',
  1067. cache: false,
  1068. success: function (res) {
  1069. if(res.status === 0){
  1070. phoneRemainQuantity = res.data.list[0].phoneRemainQuantity;
  1071. }else{
  1072. stopManyClick(() =>{
  1073. toastr.error(res.msg)
  1074. })
  1075. }
  1076. },
  1077. })
  1078. }
  1079. init();
  1080. })(document);
  1081. //埋点
  1082. function operate(pointName){
  1083. $.ajax({
  1084. url: baseUrl + '/api/public/v1/systemBuriedPoint/stat',
  1085. type: 'post',
  1086. data:JSON.stringify({
  1087. pointName: pointName
  1088. }),
  1089. contentType:"application/json",
  1090. dataType: 'json',
  1091. cache: false,
  1092. success: function (res) {},
  1093. })
  1094. }
  1095. //防止提示一秒内重复显示
  1096. function stopManyClick(fn) {
  1097. if (flag) {
  1098. fn();
  1099. }
  1100. flag = false;
  1101. if(timer){clearTimeout(timer);}
  1102. timer = setTimeout(() => {flag = true}, 1500);
  1103. }
  1104. </script>
  1105. </body>
  1106. </html>