awardActivity.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903
  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">
  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">换个姿势,再抽一次</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" 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. <div class="curr-award-img">
  150. <!-- <img class="award-img" src="{{icon}}" /> -->
  151. </div>
  152. <div class="curr-award-name">{{goodsName}}</div>
  153. <div class="curr-award-id">{{id}}</div>
  154. </div>
  155. </script>
  156. <script type="text/html" id="awardRecord">
  157. <div class="award-list-item">
  158. <div class="award-list-content">{{createTime}}</div>
  159. <div class="award-list-content">{{goodsName}}</div>
  160. </div>
  161. </script>
  162. <script type="text/html" id="distribution">
  163. <div class="distribution-item">
  164. <div class="distribution-main-content">
  165. <img class="phone-logo" src="../static/img/awardActivity/home_list_icon_xingyao.jpg" />
  166. <div class="distribution-info">
  167. <div class="distribution-name">{{diskName}}</div>
  168. <div class="distribution-time">{{timeLeft}}</div>
  169. </div>
  170. </div>
  171. <div class="change-num-wrap">
  172. <div class="cut" data-id={{userCardId}} data-index={{index}}>-</div>
  173. <input class="num-ipt" value="0" />
  174. <div class="add" data-id={{userCardId}} data-index={{index}}>+</div>
  175. </div>
  176. </div>
  177. </script>
  178. <script type="text/html" id="record">
  179. <div class="award-record-list-item">
  180. <div class="award-record-list-content">{{diskName}}</div>
  181. <div class="award-record-list-content">{{exceptTime}}</div>
  182. <div class="award-record-list-content">{{validTime}}</div>
  183. </div>
  184. </script>
  185. <script>
  186. toastr.options.positionClass = 'toast-center-center';
  187. toastr.options.timeOut = '1500';
  188. </script>
  189. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  190. <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  191. <script type="text/javascript">
  192. // var baseUrl = 'http://192.168.31.194'
  193. let timer,flag = true;
  194. var url = window.location.href;
  195. url = url.split('/')
  196. var loc = window.location.search,
  197. n1 = loc.length,//地址的总长度
  198. n2 = loc.indexOf("="),//取得=号的位置
  199. id = loc.substr(n2 + 1, n1 - n2),//从=号后面的内容
  200. u = navigator.userAgent,
  201. ua = navigator.userAgent.toLowerCase(),
  202. awardData = [],
  203. distributionList = [],
  204. topVal = -0.5,
  205. unAllotTime = 0,
  206. recordFlag = true,
  207. pageNum = 1,
  208. pages = 0,
  209. recordFlag1 = true,
  210. pageNum1 = 1,
  211. recordFlag2 = true,
  212. pageNum2 = 1,
  213. pages2 = 0,
  214. cardList = [],
  215. lotteryCount = 0,
  216. lotteryResult = {},
  217. lotteryFlag = true,
  218. activityState = 0,
  219. awardNumber = 0,
  220. currTotalTime = 0,
  221. flagNum = 1;
  222. isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
  223. isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  224. (function(doc) {
  225. var init = function () {
  226. bindEvent();
  227. headerAward();
  228. goodsList();
  229. rewardList();
  230. allotTimeRecord();
  231. allotTimeCardList();
  232. }
  233. function bindEvent () {
  234. //点击开始抽奖
  235. $('.start-award')[0].addEventListener('click', startLottery, false);
  236. //点击继续抽奖
  237. $('.main-contain')[0].addEventListener('click', nextLottery, false);
  238. //点击抽奖结果关闭弹窗
  239. $('.card-close')[0].addEventListener('click', cardClose, false);
  240. //点击获取次数
  241. $('.get-time-btn')[0].addEventListener('click',getTimeHandle,false);
  242. //tab切换
  243. $('.award-title')[0].addEventListener('click', tabHandle1, false);
  244. $('.award-title')[1].addEventListener('click', tabHandle2, false);
  245. //点击分配时长按钮
  246. $('.distribution-award-btn')[0].addEventListener('click', distributionTime, false);
  247. //点击规则
  248. $('.rule-wrap')[0].addEventListener('click', ruleHandle, false);
  249. //关闭规则
  250. $('.rule-close')[0].addEventListener('click', ruleClose, false);
  251. }
  252. function tabHandle1 (e) {
  253. operate('mfhd_2022_h5_tab奖励一览');
  254. $('.tab-bg1').eq(0).css('display', 'block');
  255. $('.tab-bg2').eq(0).css('display', 'none');
  256. $('.tab-bg3').eq(0).css('display', 'none');
  257. $('.tab-bg4').eq(0).css('display', 'none');
  258. $('.tab-wrap').eq(0).css('height', '5.75rem');
  259. $('.award-title')[0].className = 'award-title active-title';
  260. $('.award-title')[1].className = 'award-title';
  261. $('.award-list').eq(0).css('display', 'block');
  262. $('.no-distribution-data').eq(0).css('display', 'none');
  263. $('.distribution-list-wrap').eq(0).css('display', 'none');
  264. if(pages === 0) {
  265. $('.no-award-data').eq(0).css('display', 'block');
  266. } else {
  267. $('.no-award-data').eq(0).css('display', 'none');
  268. }
  269. }
  270. function tabHandle2 (e) {
  271. operate('mfhd_2022_h5_tab分配奖励');
  272. $('.tab-bg1').eq(0).css('display', 'none');
  273. $('.tab-wrap').eq(0).css('height', '14.75rem');
  274. $('.award-title')[0].className = 'award-title';
  275. $('.award-title')[1].className = 'award-title active-title';
  276. $('.distribution-list-wrap').eq(0).css('display', 'block');
  277. $('.award-list').eq(0).css('display', 'none');
  278. $('.no-award-data').eq(0).css('display', 'none');
  279. if(cardList.length === 0) {
  280. $('.tab-bg2').eq(0).css('display', 'none');
  281. $('.tab-bg3').eq(0).css('display', 'none');
  282. $('.tab-bg4').eq(0).css('display', 'block');
  283. $('.tab-wrap').eq(0).css('height', '5.76rem');
  284. $('.distribution-list-wrap').eq(0).css('display', 'none');
  285. $('.no-distribution-data').eq(0).css('display', 'block');
  286. } else if(pages2 == 0) {
  287. $('.tab-bg4').eq(0).css('display', 'none');
  288. $('.tab-bg2').eq(0).css('display', 'none');
  289. $('.tab-bg3').eq(0).css('display', 'block');
  290. $('.tab-wrap').eq(0).css('height', '9.05rem');
  291. } else {
  292. $('.tab-bg4').eq(0).css('display', 'none');
  293. $('.tab-bg3').eq(0).css('display', 'none');
  294. $('.tab-bg2').eq(0).css('display', 'block');
  295. $('.award-record-list').eq(0).css('display', 'block');
  296. $('.tab-wrap').eq(0).css('height', '14.75rem');
  297. }
  298. }
  299. // 继续抽奖
  300. function nextLottery(e) {
  301. if(e.target.className === 'card-btn'){
  302. $('.main-contain').eq(0).empty();
  303. let num = flagNum > 12 ? flagNum - 12 : flagNum;
  304. $('.curr-award-item').eq(num).css('background', '#ffffff');
  305. cardClose();
  306. stopManyClick(() =>{
  307. startLottery('next');
  308. })
  309. }
  310. }
  311. function animation(num, time, result) {
  312. if(num >= 0) {
  313. $('.curr-award-item').eq(num).css('background', '#ffffff');
  314. }
  315. num++;
  316. $('.curr-award-item').eq(num).css('background', '#FAE892');
  317. if(time < 160) {
  318. time += 30;
  319. } else if(num === flagNum - 5) {
  320. time += 50;
  321. } else if(num === flagNum - 4) {
  322. time += 100;
  323. } else if(num === flagNum - 3) {
  324. time += 200;
  325. } else if(num === flagNum - 2) {
  326. time += 300;
  327. } else if(num === flagNum - 1) {
  328. time += 300;
  329. } else if(num === flagNum) {
  330. time += 100;
  331. } else {
  332. time += 30;
  333. }
  334. let flag = $('.curr-award-id').eq(num).text();
  335. if(flag == lotteryResult.id){
  336. flagNum = num < 6 ? num + awardNumber : num;
  337. }
  338. timer = setTimeout(() => {
  339. if(num === awardNumber) {
  340. num = -1;
  341. animation(num, time);
  342. } else if(flag == lotteryResult.id && time > 500) {
  343. lotteryResultHandle();
  344. clearTimeout(timer);
  345. } else {
  346. animation(num, time)
  347. }
  348. }, time)
  349. }
  350. // 开始抽奖
  351. function startLottery(type){
  352. if(lotteryCount === 0) {
  353. operate('mfhd_2022_h5_购买云机');
  354. getTimeHandle('buy');
  355. return
  356. } else if(type === 'next') {
  357. operate('mfhd_2022_h5_继续抽奖');
  358. } else {
  359. operate('mfhd_2022_h5_开始抽奖');
  360. }
  361. if(!lotteryFlag) {
  362. return
  363. }
  364. lotteryFlag = false;
  365. if(!GetRequest().token){
  366. return
  367. }
  368. $.ajax({
  369. url: baseUrl + '/api/activity/gratis/startLottery',
  370. type: 'get',
  371. headers: {
  372. 'Authorization': GetRequest().token //id
  373. },
  374. data: {
  375. clientType: GetRequest().clientType
  376. },
  377. contentType: "application/json",
  378. dataType: 'json',
  379. cache: false,
  380. success: function (res) {
  381. if(res.status === 0){
  382. let time = 20;
  383. let num = -1;
  384. lotteryResult = res.data;
  385. animation(num, time, 3);
  386. }else{
  387. stopManyClick(() =>{
  388. toastr.error(res.msg)
  389. })
  390. lotteryFlag = true
  391. }
  392. }
  393. })
  394. }
  395. //抽奖结果展示
  396. function lotteryResultHandle() {
  397. $('.result-dialog').animate({top: '3.86rem'},"fast");
  398. $('.result-mask').show();
  399. document.documentElement.style.overflow='hidden';
  400. lotteryFlag = true;
  401. let result = '';
  402. lotteryCount--;
  403. lotteryResult.lotteryCount = lotteryCount;
  404. lotteryResult.tips = lotteryResult.goodsType != 5 ?'奖励已发送您的账户内,请注意查收' : '中奖不是最终的追求,重要的是开心咯';
  405. lotteryResult.cardBtn = lotteryResult.lotteryCount != 0 ?'继续抽奖' : '获取次数';
  406. lotteryResult.icon = `https://file.phone.androidscloud.com:8121/document/newFile/download/0/${uploadKey}?fileKey=${lotteryResult.icon}`
  407. result = $('#card').text().replace(/{{(.*?)}}/g, function(node, key) {
  408. return lotteryResult[key];
  409. })
  410. goodsList();
  411. allotTimeCardList();
  412. $('.main-contain').eq(0).append(result)
  413. $('.times').eq(0).text(lotteryResult.lotteryCount)
  414. }
  415. // 抽奖记录
  416. function rewardList(type){
  417. if(!GetRequest().token){
  418. return
  419. }
  420. $.ajax({
  421. url: baseUrl + '/api/activity/gratis/rewardList',
  422. type: 'get',
  423. headers: {
  424. 'Authorization': GetRequest().token //id
  425. },
  426. data: {
  427. pageNum: pageNum,
  428. pageSize: 5
  429. },
  430. contentType: "application/json",
  431. dataType: 'json',
  432. cache: false,
  433. success: function (res) {
  434. if(res.status === 0){
  435. recordFlag = true;
  436. let list = res.data.list
  437. pages = res.data.pages;
  438. if(type != 'down'){
  439. $('.award-list-wrap').eq(0).empty();
  440. }
  441. let result = ''
  442. list.map((item, index) => {
  443. result += $('#awardRecord').text().replace(/{{(.*?)}}/g, function(node, key) {
  444. return item[key];
  445. })
  446. })
  447. $('.award-list-wrap').eq(0).append(result)
  448. }else{
  449. stopManyClick(() =>{
  450. toastr.error(res.msg)
  451. })
  452. }
  453. }
  454. })
  455. }
  456. //抽奖记录下拉加载
  457. $('.award-list-wrap')[0].addEventListener('scroll',function () {
  458. let scrollTop = $('.award-list-wrap')[0].scrollTop;
  459. let clientHeight = $('.award-list-wrap')[0].clientHeight;
  460. let scrollHeight = $('.award-list-wrap')[0].scrollHeight;
  461. if(scrollTop + clientHeight + 100 > scrollHeight){
  462. if(recordFlag && pageNum < pages && pages > 1){
  463. recordFlag = false;
  464. pageNum++;
  465. rewardList('down');
  466. }
  467. }
  468. });
  469. // 活动基础数据
  470. function goodsList(){
  471. if(!GetRequest().token){
  472. return
  473. }
  474. $.ajax({
  475. url: baseUrl + '/api/activity/gratis/goodsList',
  476. type: 'get',
  477. headers: {
  478. 'Authorization': GetRequest().token //id
  479. },
  480. contentType: "application/json",
  481. dataType: 'json',
  482. cache: false,
  483. success: function (res) {
  484. if(res.status === 0){
  485. let startTime = res.data.startTime
  486. let endTime = res.data.endTime
  487. $('.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)}日`);
  488. awardData = res.data.marquee
  489. let goodsInfos = res.data.goodsInfos
  490. lotteryCount = res.data.lotteryCount
  491. awardNumber = goodsInfos.length
  492. let actRule = res.data.actRule
  493. let result = ''
  494. let resultDom = goodsInfos.length === 9 ? $('#award1') : $('#award2');
  495. if(goodsInfos.length === 9) {
  496. $(".top-bg-one").css({"display": "block"})
  497. $(".top-bg-two").css({"display": "none"})
  498. } else {
  499. $(".top-bg-one").css({"display": "none"})
  500. $(".top-bg-two").css({"display": "block"})
  501. }
  502. goodsInfos.map((item, index) => {
  503. item.index = index
  504. item.icon = `https://file.phone.androidscloud.com:8121/document/newFile/download/0/${uploadKey}?fileKey=${item.icon}`
  505. result += resultDom.text().replace(/{{(.*?)}}/g, function(node, key) {
  506. return item[key];
  507. })
  508. })
  509. if(lotteryCount !== 0) {
  510. $('.start-award')[0].src = '../static/img/awardActivity/start-award.png';
  511. }
  512. $('.rule-point-wrap').eq(0).html(actRule)
  513. $('.times').eq(0).text(lotteryCount)
  514. $('.all-award-wrap').eq(0).append(result)
  515. }else{
  516. stopManyClick(() =>{
  517. toastr.error(res.msg)
  518. })
  519. }
  520. }
  521. })
  522. }
  523. //轮播
  524. function headerAward(){
  525. setInterval(() =>{
  526. awardHandle();
  527. },3000);
  528. }
  529. function awardHandle(){
  530. let index = (topVal/0.5) + 1,awardString;
  531. let awardLen = Array.from($('.award-text')).length;
  532. if(awardLen < 20){
  533. let node = document.createElement('div');
  534. node.className = "award-text";
  535. $('.award-lists')[0].appendChild(node);
  536. }
  537. if(topVal < 9.5){
  538. topVal+=0.5;
  539. }else{
  540. topVal = 0;
  541. $('.award-lists').eq(0).css('top','0.5rem');
  542. }
  543. let numberType = Math.floor(getRandom()/4);
  544. if(awardData && awardData[index] && topVal < awardData.length/2){
  545. awardString = `恭喜${awardData[index].phone}用户获得${['优惠券','激活码','云机时长','星币','云机套餐','谢谢惠顾'][awardData[index].goodsType]}奖品`;
  546. }else{
  547. awardString = `恭喜1${[3,5,7,8,3,5,7,8,3,5][getRandom()]}${getRandom()}****${getRandom()}${getRandom()}${getRandom()}${getRandom()}用户获得${['优惠券','激活码','云机时长','星币','云机套餐','谢谢惠顾'][numberType]}`
  548. }
  549. $('.award-text').eq(index).text(awardString);
  550. $('.award-lists').eq(0).animate({top: -(topVal) + 'rem'},"fast");
  551. }
  552. // 获取一个随机数
  553. function getRandom(){
  554. return Math.floor(Math.random()*10);
  555. }
  556. // 分配云手机列表
  557. function allotTimeCardList(type){
  558. if(!GetRequest().token){
  559. return
  560. }
  561. $.ajax({
  562. url: baseUrl + '/api/activity/gratis/allotTimeCardList',
  563. type: 'get',
  564. headers: {
  565. 'Authorization': GetRequest().token //id
  566. },
  567. contentType: "application/json",
  568. dataType: 'json',
  569. cache: false,
  570. success: function (res) {
  571. if(res.status === 0){
  572. cardList = res.data.cardList
  573. unAllotTime = res.data.unAllotTime
  574. pageCardList()
  575. $('.all-times').eq(0).text(res.data.totalTime)
  576. $('.red').eq(0).text(res.data.totalTime)
  577. $('.red').eq(1).text(res.data.allotTime)
  578. $('.red').eq(2).text(res.data.unAllotTime)
  579. }else{
  580. stopManyClick(() =>{
  581. toastr.error(res.msg)
  582. })
  583. }
  584. }
  585. })
  586. }
  587. // 分页渲染数据
  588. function pageCardList() {
  589. let result = '';
  590. recordFlag1 = true;
  591. let list = cardList.slice(pageNum1 * 5, (pageNum1 * 5) + 5)
  592. list.map((item, index) => {
  593. item.index = index
  594. result += $('#distribution').text().replace(/{{(.*?)}}/g, function(node, key) {
  595. return item[key];
  596. })
  597. })
  598. $('.distribution-container').eq(0).append(result)
  599. }
  600. //抽奖记录下拉加载
  601. $('.distribution-container')[0].addEventListener('scroll',function () {
  602. let scrollTop = $('.distribution-container')[0].scrollTop;
  603. let clientHeight = $('.distribution-container')[0].clientHeight;
  604. let scrollHeight = $('.distribution-container')[0].scrollHeight;
  605. if(scrollTop + clientHeight + 100 > scrollHeight){
  606. if(recordFlag1 && pageNum1 < cardList.length && cardList.length > 1){
  607. recordFlag1 = false;
  608. pageNum1++;
  609. pageCardList();
  610. }
  611. }
  612. });
  613. // 分配时长记录
  614. function allotTimeRecord(){
  615. if(!GetRequest().token){
  616. return
  617. }
  618. $.ajax({
  619. url: baseUrl + '/api/activity/gratis/allotTimeRecord',
  620. type: 'get',
  621. headers: {
  622. 'Authorization': GetRequest().token //id
  623. },
  624. data: {
  625. pageNum: pageNum2,
  626. pageSize: 5
  627. },
  628. contentType: "application/json",
  629. dataType: 'json',
  630. cache: false,
  631. success: function (res) {
  632. if(res.status === 0){
  633. let list = res.data.list
  634. let result = ''
  635. pages2 = res.data.pages
  636. recordFlag2 = true;
  637. list.map(item => {
  638. result += $('#record').text().replace(/{{(.*?)}}/g, function(node, key) {
  639. return item[key];
  640. })
  641. })
  642. $('.award-record-list-wrap').eq(0).append(result)
  643. }else{
  644. stopManyClick(() =>{
  645. toastr.error(res.msg)
  646. })
  647. }
  648. }
  649. })
  650. }
  651. //分配时长记录下拉加载
  652. $('.award-record-list-wrap')[0].addEventListener('scroll',function () {
  653. let scrollTop = $('.award-record-list-wrap')[0].scrollTop;
  654. let clientHeight = $('.award-record-list-wrap')[0].clientHeight;
  655. let scrollHeight = $('.award-record-list-wrap')[0].scrollHeight;
  656. if(scrollTop + clientHeight + 100 > scrollHeight){
  657. if(recordFlag2 && pageNum2 < pages2 && pages2 > 1){
  658. recordFlag2 = false;
  659. pageNum2++;
  660. allotTimeRecord('down');
  661. }
  662. }
  663. });
  664. function getTimeHandle(type) {
  665. if(activityState == 2){
  666. toastr.error('活动已结束!');
  667. return
  668. }
  669. if(type != 'bug') {
  670. operate('mfhd_2022_h5_获取次数按钮');
  671. }
  672. stopManyClick(() =>{
  673. if (window.__wxjs_environment === 'miniprogram') { // 小程序
  674. if(phoneRemainQuantity > 0){
  675. wx.miniProgram.navigateTo({
  676. url: '/packageA/order/buy/index?type=activity'
  677. })
  678. } else {
  679. wx.miniProgram.navigateTo({
  680. url: '/packageA/order/renew/index?record=' + userCardId
  681. })
  682. }
  683. } else if (isAndroid && window.native) { // 安卓
  684. if(phoneRemainQuantity > 0){
  685. window.native.startPurchase('SVIP', 365);
  686. } else {
  687. window.native.startRenew();
  688. }
  689. } else if (isiOS) {
  690. try {
  691. if(phoneRemainQuantity > 0){
  692. window.webkit.messageHandlers.startPurchase.postMessage({ type: 1, day: 365 });
  693. } else {
  694. window.webkit.messageHandlers.startRenew.postMessage({ type: 1, day: 365 });
  695. }
  696. } catch(error) {
  697. if(phoneRemainQuantity > 0){
  698. uni.webView.navigateTo({
  699. url: '/pages/order/order'
  700. })
  701. } else {
  702. uni.webView.navigateTo({
  703. url: '/pages/order/renew?record=' + userCardId
  704. })
  705. }
  706. }
  707. }
  708. })
  709. }
  710. //点击加减号
  711. $('.distribution-container')[0].addEventListener('click',(e) => {
  712. if(e.target.className === 'add'){
  713. operate('mfhd_2022_h5_加号');
  714. const id = e.target.dataset.id;
  715. let index = e.target.dataset.index;
  716. let number = $('.num-ipt').eq(index).val();
  717. currTotalTime = 0;
  718. // 这一次操作
  719. if(number == 0){
  720. if(!distributionList.find((item) => item.userCardId == id)){
  721. distributionList.push({
  722. userCardId: id,
  723. allotTime: +number + 1
  724. });
  725. }else{
  726. distributionList.map(item => {
  727. if(item.userCardId == id){
  728. item.allotTime++;
  729. }
  730. })
  731. }
  732. }else{
  733. distributionList.map(item => {
  734. if(item.userCardId == id){
  735. item.allotTime++;
  736. }
  737. })
  738. }
  739. distributionList.map(item => { // 这一次的总数据
  740. currTotalTime += parseInt(item.allotTime);
  741. })
  742. if(currTotalTime <= unAllotTime){
  743. number++;
  744. $('.num-ipt').eq(index).val(number);
  745. }else{
  746. distributionList.map(item => {
  747. if(item.userCardId == id){
  748. item.allotTime = +number;
  749. }
  750. })
  751. stopManyClick(() => {
  752. toastr.error('分配时长不能大于未分配总时长');
  753. })
  754. }
  755. console.log(distributionList)
  756. }
  757. if(e.target.className === 'cut'){
  758. operate('mfhd_2022_h5_减号');
  759. const id = e.target.dataset.id;
  760. let index = e.target.dataset.index;
  761. let number = $('.num-ipt').eq(index).val();
  762. if(number > 0){
  763. distributionList.map(item => {
  764. if(item.userCardId == id){
  765. item.allotTime--;
  766. }
  767. })
  768. number--;
  769. if(number == 0){
  770. distributionList = distributionList.filter(item => item.userCardId != id);
  771. }
  772. currTotalTime--;
  773. $('.num-ipt').eq(index).val(number);
  774. }else{
  775. stopManyClick(() => {
  776. toastr.error('分配的时长不能小于0');
  777. })
  778. }
  779. console.log(distributionList)
  780. }
  781. });
  782. function distributionTime(e) {
  783. operate('mfhd_2022_h5_分配奖励');
  784. distributionList = distributionList.filter(item => item.duration != 0);
  785. if (distributionList.length === 0) {
  786. stopManyClick(() => {
  787. toastr.error('未选中任何云手机');
  788. })
  789. } else {
  790. $('.sure-distribution-wrap').eq(0).css('display', 'block');
  791. }
  792. }
  793. //点击分配时长取消按钮
  794. $('.sure-distribution-cannel')[0].addEventListener('click', (e) => {
  795. operate('mfhd_2022_h5_分配奖励_取消');
  796. $('.sure-distribution-wrap').eq(0).css('display', 'none');
  797. });
  798. //点击分配时长确定按钮
  799. $('.sure-distribution-sure')[0].addEventListener('click', (e) => {
  800. stopManyClick(() => {
  801. $.ajax({
  802. url: baseUrl + '/api/activity/gratis/allotTime',
  803. type: 'post',
  804. data: JSON.stringify(distributionList),
  805. headers: {
  806. 'Authorization': GetRequest().token //id
  807. },
  808. contentType: "application/json",
  809. dataType: 'json',
  810. cache: false,
  811. success: function (res) {
  812. if(res.status === 0){
  813. operate('mfhd_2022_h5_分配奖励_确定');
  814. $('.sure-distribution-wrap').eq(0).css('display', 'none');
  815. $('.slider-list').eq(0).text('');
  816. $('.page-number').eq(0).text('');
  817. init();
  818. pageNum2 = 1;
  819. pages2 = 0;
  820. allotTimeRecord();
  821. distributionPageNum = 1;
  822. $('.time-row-data').eq(0).text('');
  823. distributionList.map((val) => {
  824. cardList.map((item, indexs) => {
  825. if(val.userCardId == item.userCardId){
  826. $('.num-ipt').eq(indexs).val(0);
  827. }
  828. })
  829. })
  830. distributionList = [];
  831. cardList = [];
  832. stopManyClick(() => {
  833. toastr.error('分配成功,请前往云机列表查看');
  834. })
  835. } else {
  836. console.log(res.msg)
  837. $('.sure-distribution-wrap').eq(0).css('display', 'none');
  838. stopManyClick(() => {
  839. toastr.error(res.msg);
  840. })
  841. }
  842. },
  843. })
  844. })
  845. });
  846. function ruleHandle (e) {
  847. operate('mfhd_2022_h5_规则');
  848. $('.rule-result-dialog').animate({top: '3.86rem'},"fast");
  849. $('.rule-mask').show();
  850. document.documentElement.style.overflow='hidden';
  851. }
  852. function ruleClose (e) {
  853. operate('mfhd_2022_h5_关闭规则');
  854. $('.rule-result-dialog').animate({top: '-10.96rem'},"fast");
  855. $('.rule-mask').hide();
  856. document.documentElement.style.overflow='auto';
  857. }
  858. function cardClose (e) {
  859. operate('mfhd_2022_h5_关闭抽奖结果');
  860. $('.result-dialog').animate({top: '-10.96rem'},"fast");
  861. $('.result-mask').hide();
  862. document.documentElement.style.overflow='auto';
  863. }
  864. init();
  865. })(document);
  866. //埋点
  867. function operate(pointName){
  868. $.ajax({
  869. url: baseUrl + '/api/public/v1/systemBuriedPoint/stat',
  870. type: 'post',
  871. data:JSON.stringify({
  872. pointName: pointName
  873. }),
  874. contentType:"application/json",
  875. dataType: 'json',
  876. cache: false,
  877. success: function (res) {},
  878. })
  879. }
  880. //防止提示一秒内重复显示
  881. function stopManyClick(fn) {
  882. if (flag) {
  883. fn();
  884. }
  885. flag = false;
  886. if(timer){clearTimeout(timer);}
  887. timer = setTimeout(() => {flag = true}, 1500);
  888. }
  889. </script>
  890. </body>
  891. </html>