awardActivity.html 31 KB

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