awardActivity.html 31 KB

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