awardActivity.html 35 KB

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