awardActivity.html 36 KB

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