doubleChristmasActivity.html 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825
  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/doubleChristmasActivity.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. <style>
  14. </style>
  15. </head>
  16. <body>
  17. <div class="container">
  18. <div class="header-container">
  19. <img class="top-banner" src="../static/img/doubleChristmasActivity/top-banner.png" />
  20. <div class="activity-meal">活动参与套餐:星曜套餐</div>
  21. <div class="meal-price">云机低至<span class="meal-price-num"></span>元/天</div>
  22. <div class="rest-time"></div>
  23. <div class="limit">PC端用户不参与本次活动</div>
  24. </div>
  25. <div class="middle-container">
  26. <img class="footer-cloud" src="../static/img/doubleChristmasActivity/footer-cloud.png" />
  27. <div class="step-container">
  28. <img class="tips" src="../static/img/doubleChristmasActivity/tip.png" />
  29. <div class="main-step-content">
  30. <div class="top-step">
  31. <div class="step-item">
  32. <img class="buyphone" src="../static/img/doubleElevenActivity/buyphone.png" />
  33. <span class="step-text">购买续费云机</span>
  34. </div>
  35. <img class="step" src="../static/img/doubleElevenActivity/step.png" />
  36. <div class="step-item">
  37. <img class="hongbao" src="../static/img/doubleChristmasActivity/hongbao.png" />
  38. <span class="step-text">累计云机时长</span>
  39. </div>
  40. <img class="step" src="../static/img/doubleElevenActivity/step.png" />
  41. <div class="step-item">
  42. <img class="buyphone" src="../static/img/doubleChristmasActivity/buyphone2.png" />
  43. <span class="step-text">获取额外奖励</span>
  44. </div>
  45. </div>
  46. </div>
  47. <div class="join-activity-btn">
  48. <img class="join-activity" src="../static/img/doubleElevenActivity/button-join-activity.png" />
  49. <div class="activity-btn-content">
  50. <span class="activity-btn-text">立即参与</span>
  51. <img class="icon-left" src="../static/img/doubleElevenActivity/icon-left.png" />
  52. </div>
  53. </div>
  54. <img class="middle-cloud" src="../static/img/doubleChristmasActivity/middle-cloud.png" />
  55. </div>
  56. <div class="rest-tip">使用激活码,优惠券和星币支付不参与活动</div>
  57. <div class="tab-row">
  58. <div class="tab-item tab-active" data-index="0">充值奖励</div>
  59. <div class="tab-item" data-index="1">分配奖励(<span class="time-number">0</span>)</div>
  60. <img class="tab-bg" src="../static/img/doubleChristmasActivity/tab-bg.png" />
  61. </div>
  62. <div class="reward-container">
  63. <div class="activity-finish">
  64. <div class="finish-text">活动已结束</div>
  65. </div>
  66. <div class="reward-time">
  67. <span class="reward-text">购买套餐累计时长</span>
  68. <span class="total-time-num"></span>
  69. <span class="reward-text">天</span>
  70. <span class="next-reward">
  71. <span class="time-line">|</span>
  72. <span class="reward-text">距离下一个奖励还差</span>
  73. <span class="next-time-num"></span>
  74. <span class="reward-text">天</span>
  75. </span>
  76. </div>
  77. <div class="reward-tip-row">
  78. <img class="reward-tip-img" src="../static/img/doubleChristmasActivity/reward-tip-img.png" />
  79. <div class="reward-tip">精彩不停的充值福利专场已经来临充值越多折扣越大</div>
  80. </div>
  81. <div class="reward-list"></div>
  82. </div>
  83. <div class="distribution-container">
  84. <div class="distribution-time">
  85. <div>
  86. <span class="distribution-text">奖励总时长</span>
  87. <span class="distribution-total-num">0</span>
  88. <span class="distribution-text">天</span>
  89. </div>
  90. <span class="distribution-line">|</span>
  91. <div>
  92. <span class="distribution-text">未分配时长</span>
  93. <span class="no-distribution-num">0</span>
  94. <span class="distribution-text">天</span>
  95. </div>
  96. </div>
  97. <div class="reward-list">
  98. <img class="left-ear" src="../static/img/doubleChristmasActivity/left-ear.png" />
  99. <img class="right-ear" src="../static/img/doubleChristmasActivity/right-ear.png" />
  100. <div class="slider" id="slider">
  101. <div class="slider-list flex" id="slider-list"></div>
  102. </div>
  103. <div class="page-row">
  104. <div class="schedule-line">
  105. <div class="schedule-child-line"></div>
  106. </div>
  107. <div class="page">1/4页</div>
  108. </div>
  109. <div class="distribution-reward-btn">
  110. <img class="reward-btn-img" src="../static/img/doubleChristmasActivity/distribution-reward-btn.png" />
  111. </div>
  112. </div>
  113. </div>
  114. <div class="distribution-container time-container">
  115. <div class="time-title-row">
  116. <img class="time-title-bg" src="../static/img/doubleChristmasActivity/time-title-bg.png" />
  117. <div class="time-title">分配时长记录(已分配时长<span class="time-title-usedDuration"></span>天)</div>
  118. </div>
  119. <div class="time-list">
  120. <div class="title-row">
  121. <div>云机名称</div>
  122. <div>时间</div>
  123. <div>时长</div>
  124. </div>
  125. <div class="time-row-data"></div>
  126. <div class="no-time-data">暂无分配时长</div>
  127. </div>
  128. </div>
  129. <div class="rule-container">
  130. <img class="rule-tips" src="../static/img/doubleChristmasActivity/rule.png" />
  131. <div class="rule-content">
  132. <div class="rule-point">一、活动时间:2021年12月18日-2022年1月3日。</div>
  133. <div class="rule-point">二、任务奖励与获取说明</div>
  134. <div class="rule-point">1.活动期间购买星曜云机达累计天数,可获得相应奖励,同一个账号同一进度的奖励只能领取一次。</div>
  135. <div class="rule-point">任务奖励一览:</div>
  136. <div class="rule-point">1.1.累积购买天数小于等于2022天时 ,获得对应任务奖励。</div>
  137. <div class="rule-point">1.2.累积购买天数大于2022天时,超过2022天的部分按买一送二发放奖励。</div>
  138. <div class="rule-point">2.使用星币支付、激活码兑换、优惠劵购买和购买非星曜套餐不计入任务进度。</div>
  139. <div class="rule-point">3.奖励获取的云机时长仅可用于续费账号中现有的星曜云机设备。</div>
  140. <div class="rule-point blue">4.奖励领取日期为:2021年12月18日-2022年1月6日,超过领取时间未领取奖励则视为放弃任务奖励。</div>
  141. <div class="rule-point">5.从他人获取授权的云手机不能分配累计奖励时长。</div>
  142. <div class="rule-point">三、其他说明</div>
  143. <div class="rule-point">1.本次活动不与其他活动优惠叠加。</div>
  144. <div class="rule-point">2.本次活动期间购买的云手机套餐不支持退款。</div>
  145. <div class="rule-point">3.双子星官方对活动具有最终解释权。</div>
  146. </div>
  147. </div>
  148. </div>
  149. <div class="sure-distribution-wrap">
  150. <div class="sure-distribution-box">
  151. <div class="sure-distribution-title">确定分配奖励时长</div>
  152. <div class="sure-distribution-btn-list">
  153. <div class="sure-distribution-btn sure-distribution-cannel">取消</div>
  154. <div class="sure-distribution-btn sure-distribution-sure">确定</div>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. <script>
  160. toastr.options.positionClass = 'toast-center-center';
  161. toastr.options.timeOut = '1500';
  162. </script>
  163. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  164. <script type="text/javascript">
  165. let timer, flag = true;
  166. var url = window.location.href;
  167. url = url.split('/');
  168. var topVal = -0.5;
  169. let obj = {};
  170. // var baseUrl = 'http://test.androidscloud.com'
  171. var loc = window.location.search,
  172. n1 = loc.length,//地址的总长度
  173. n2 = loc.indexOf("="),//取得=号的位置
  174. id = loc.substr(n2 + 1, n1 - n2),//从=号后面的内容
  175. u = navigator.userAgent,
  176. ua = navigator.userAgent.toLowerCase(),
  177. isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
  178. isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
  179. isMiniprogram = false;
  180. if (ua.match(/MicroMessenger/i) == "micromessenger") {
  181. //ios的ua中无miniProgram,但都有MicroMessenger(表示是微信浏览器)
  182. wx.miniProgram.getEnv((res) => {
  183. if (res.miniprogram) {
  184. isMiniprogram = true;
  185. } else {
  186. isMiniprogram = false;
  187. }
  188. })
  189. } else {
  190. isMiniprogram = false;
  191. }
  192. let tabIndex = 0,
  193. userName = '',
  194. totalTime = 0,
  195. activityState = 0,
  196. christmasDoubleReward = 0,
  197. currTotalTime = 0,
  198. distributionList = [],
  199. totalRecords = [],
  200. pageNum = 0,
  201. distributionFlag = true,
  202. distributionPageNum = 0,
  203. distributionPages = 0,
  204. sliderNumber = 0;//滑块是数量,控制溢出不能滑动
  205. getBaseData();
  206. getLists();
  207. //点击立即参与按钮
  208. $('.join-activity-btn')[0].addEventListener('click', () => {
  209. if(activityState == 0){
  210. stopManyClick(() => {
  211. toastr.error('活动未开始');
  212. })
  213. return
  214. }else if(activityState == 1){
  215. operate('dt_双旦_h5_立即参与');
  216. }else if(activityState == 2){
  217. stopManyClick(() => {
  218. toastr.error('活动已结束');
  219. })
  220. return
  221. }
  222. if (isMiniprogram) { // 小程序
  223. wx.miniProgram.navigateTo({
  224. url: '/packageA/order/buy/index?type=activity'
  225. })
  226. } else if (isAndroid) { // 安卓
  227. window.native.startPurchase(1, 365);
  228. } else if (isiOS) {
  229. window.webkit.messageHandlers.startPurchase.postMessage({ type: 1, day: 365 });
  230. }
  231. })
  232. //点击去完成
  233. $('.reward-list')[0].addEventListener('click', (e) => {
  234. if (e.target.className === 'reward-btn') {
  235. let receive = e.target.dataset.receive;
  236. if (receive !== 'null') {
  237. return
  238. }
  239. if (isMiniprogram) { // 小程序
  240. wx.miniProgram.navigateTo({
  241. url: '/packageA/order/buy/index?type=activity'
  242. })
  243. } else if (isAndroid) { // 安卓
  244. window.native.startPurchase(1, 365);
  245. } else if (isiOS) {
  246. window.webkit.messageHandlers.startPurchase.postMessage({ type: 1, day: 365 });
  247. }
  248. }
  249. });
  250. //点击tab选项卡
  251. $('.tab-row')[0].addEventListener('click', (e) => {
  252. const index = e.target.dataset.index;
  253. if (!index || tabIndex == index) {
  254. return
  255. }
  256. tabIndex = index;
  257. if (index == 0) {
  258. operate('dt_双旦_h5_tab_充值奖励');
  259. $('.tab-item')[1].className = 'tab-item';
  260. $('.tab-bg')[0].className = 'tab-bg tab-left';
  261. $('.reward-container').eq(0).css('display', 'block');
  262. $('.distribution-container').eq(0).css('display', 'none');
  263. $('.distribution-container').eq(1).css('display', 'none');
  264. } else {
  265. operate('dt_双旦_h5_tab_分配奖励');
  266. $('.tab-item')[0].className = 'tab-item';
  267. $('.tab-bg')[0].className = 'tab-bg tab-right';
  268. $('.reward-container').eq(0).css('display', 'none');
  269. $('.distribution-container').eq(0).css('display', 'block');
  270. $('.distribution-container').eq(1).css('display', 'block');
  271. }
  272. $('.tab-item')[index].className = 'tab-item tab-active';
  273. })
  274. //获取倒计时
  275. function getBaseData() {
  276. $.ajax({
  277. url: baseUrl + '/api/user/v1/activity/getChristmasActivityConf',
  278. type: 'get',
  279. headers: {
  280. 'Authorization': id //id
  281. },
  282. contentType: "application/json",
  283. dataType: 'json',
  284. cache: false,
  285. success: function (res) {
  286. getList();
  287. const objData = res.data;
  288. userName = objData.userName;
  289. activityState = objData.activityState;
  290. distributionRecord();
  291. christmasDoubleReward = objData.christmasDoubleReward;
  292. // 解决ios时间显示为NaN
  293. objData.now = objData.now.replace(/T/g, ' ');
  294. objData.now = objData.now.replace(/\-/g, '/');
  295. objData.endTime = objData.endTime.replace(/T/g, ' ');
  296. objData.endTime = objData.endTime.replace(/\-/g, '/');
  297. $('.meal-price-num').eq(0).text(objData.price);
  298. let currTime = parseInt(Date.parse(objData.now)),
  299. closeTime = parseInt(Date.parse(objData.endTime)),
  300. result = closeTime - currTime,
  301. day = parseInt(result / 1000 / 60 / 60 / 24),
  302. hour = parseInt(result / 1000 / 60 / 60 % 24),
  303. minute = parseInt(result / 1000 / 60 % 60),
  304. seconds = parseInt(result / 1000 % 60),
  305. time = day + "天" + hour + "时" + minute + "分" + seconds + "秒";
  306. if (day == 0 && hour == 0 && minute == 0 && seconds == 0 || objData.activityState == 2) {
  307. astr = '活动已结束';
  308. $('.activity-finish').eq(0).css('display', 'block');
  309. $('.rest-time').eq(0).text(astr);
  310. return
  311. }else if(objData.activityState == 0){
  312. astr = '活动未开始';
  313. $('.rest-time').eq(0).text(astr);
  314. return
  315. }
  316. const timeInterval = setInterval(() => {
  317. if (seconds > 0) {
  318. seconds--;
  319. } else if (minute > 0) {
  320. seconds = 59;
  321. minute--;
  322. } else if (hour > 0) {
  323. minute = 59;
  324. seconds = 59;
  325. hour--;
  326. } else if (day > 0) {
  327. hour = 59;
  328. minute = 59;
  329. seconds = 59;
  330. day--;
  331. } else {
  332. clearInterval(timeInterval);
  333. }
  334. time = day + "天" + hour + "时" + minute + "分" + seconds + "秒";
  335. let str = `距离活动结束:${time}`
  336. if (day == 0 && hour == 0 && minute == 0 && seconds == 0 || objData.activityState == 2) {
  337. str = '活动已结束';
  338. clearInterval(timeInterval);
  339. $('.activity-finish').eq(0).css('display', 'block');
  340. }
  341. $('.rest-time').eq(0).text(str);
  342. }, 1000)
  343. let str = `距离活动结束:${time}`
  344. $('.rest-time').eq(0).text(str);
  345. },
  346. })
  347. }
  348. //调用获取数据列表接口
  349. function getList() {
  350. $.ajax({
  351. url: baseUrl + '/api/user/v1/activity/getReceivingList',
  352. type: 'get',
  353. headers: {
  354. 'Authorization': id //id
  355. },
  356. contentType: "application/json",
  357. dataType: 'json',
  358. cache: false,
  359. success: function (res) {
  360. if (res.status === 0) {
  361. if (res.data.open == 2) {
  362. $('.activity-finish').eq(0).css('display', 'block');
  363. }
  364. if (res.data && res.data.operateActivityGoodsInfos.length > 0) {
  365. var str = '',
  366. flag = true,
  367. nextDuration = 0,
  368. usedDuration = res.data.usedDuration,
  369. rewardDuration = res.data.rewardDuration,
  370. totalDuration = res.data.totalDuration,
  371. len = res.data.operateActivityGoodsInfos.length;
  372. for (var i = 0; i < len; i++) {
  373. let rewardDuration = res.data.operateActivityGoodsInfos[i].rewardDuration,
  374. receiveDuration = res.data.operateActivityGoodsInfos[i].receiveDuration,
  375. cumulativeDuration = res.data.operateActivityGoodsInfos[i].cumulativeDuration;
  376. str += `<div class="reward-row">
  377. <img class="reward-row-bg" src="../static/img/doubleChristmasActivity/reward-row-bg.png" />
  378. <div class="reward-row-content">
  379. <img class="reward-img" src="../static/img/doubleChristmasActivity/reward.png" />
  380. <div class="reward-day-text">
  381. <div class="reward-day">奖励天数${rewardDuration}天</div>
  382. <div class="total-day">购买套餐累计时长达${cumulativeDuration}天</div>
  383. </div>
  384. <img class="reward-btn" data-receive=${receiveDuration} src="../static/img/doubleChristmasActivity/${receiveDuration ? 'get-btn' : 'finish-btn'}.png" />
  385. </div>
  386. </div>`
  387. if (totalDuration - cumulativeDuration < 0 && flag) {
  388. flag = false;
  389. nextDuration = cumulativeDuration - totalDuration;
  390. }
  391. }
  392. str += `<div class="reward-row">
  393. <img class="reward-row-bg" src="../static/img/doubleChristmasActivity/reward-row-bg.png" />
  394. <div class="reward-row-content">
  395. <img class="reward-img" src="../static/img/doubleChristmasActivity/three-reward.png" />
  396. <div class="reward-day-text">
  397. <div class="reward-day">星曜套餐买一送二</div>
  398. <div class="total-day">购买套餐累计时长达高于${christmasDoubleReward}天</div>
  399. </div>
  400. <img class="reward-btn" data-receive='null' src="../static/img/doubleChristmasActivity/finish-btn.png" />
  401. </div>
  402. </div>`
  403. str += `<div class="reward-last-tip">已获得奖励请在分配奖励栏中进行时长分配</div>`
  404. const noDistributionDuration = rewardDuration - usedDuration;
  405. $('.reward-list').eq(0).append(str);
  406. $('.time-number').eq(0).text(noDistributionDuration);
  407. $('.total-time-num').eq(0).text(totalDuration);
  408. $('.next-time-num').eq(0).text(nextDuration);
  409. $('.distribution-total-num').eq(0).text(rewardDuration);
  410. $('.time-title-usedDuration').eq(0).text(usedDuration);
  411. totalTime = noDistributionDuration;
  412. $('.no-distribution-num').eq(0).text(noDistributionDuration);
  413. if(totalDuration >= 2022){
  414. $('.next-reward').eq(0).css('display', 'none');
  415. }
  416. }
  417. } else if(res.status === 4104) {
  418. let sliderItemDom = `<div class="slider-item no-slider">暂无活动开启</div>`;
  419. $('.reward-container').eq(0).append(sliderItemDom);
  420. stopManyClick(() => {
  421. toastr.error(res.msg);
  422. })
  423. }
  424. }
  425. })
  426. }
  427. // 获取分配列表数据
  428. function distributionRecord() {
  429. $.ajax({
  430. url: baseUrl + '/api/user/v1/activity/queryUserDistribution',
  431. type: 'get',
  432. data:{
  433. pageNum: distributionPageNum + 1,
  434. pageSize: 10,
  435. userName: userName
  436. },
  437. headers: {
  438. 'Authorization': id //id
  439. },
  440. contentType: "application/json",
  441. dataType: 'json',
  442. cache: false,
  443. success: function (res) {
  444. if(res.status === 0){
  445. distributionFlag = true;
  446. let records = res.data.records;
  447. distributionPages = res.data.pages;
  448. if(res.data && records.length > 0){
  449. var str = '',
  450. len = records.length;
  451. for (var i = 0; i < len; i++) {
  452. var diskName = records[i].diskName,
  453. createTime = records[i].createTime,
  454. increaseDuration = records[i].increaseDuration;
  455. str += `<div class="time-content-row">
  456. <div class="time-content-diskName">${diskName}</div>
  457. <div class="time-content-time">${createTime.substring(0,4)}年${createTime.substring(5,7)}月${createTime.substring(8,10)}日 ${createTime.substring(11,19)}</div>
  458. <div class="time-content-day">${increaseDuration}天</div>
  459. </div>`
  460. }
  461. $('.time-row-data').eq(0).append(str);
  462. if (len !== 0) {
  463. $('.no-time-data').eq(0).css('display', 'none');
  464. }
  465. }
  466. } else {
  467. stopManyClick(() => {
  468. toastr.error(res.msg);
  469. })
  470. }
  471. },
  472. })
  473. }
  474. //分配列表数据下拉加载
  475. $('.time-container')[0].addEventListener('scroll',function () {
  476. let scrollTop = $('.time-container')[0].scrollTop;
  477. let clientHeight = $('.time-container')[0].clientHeight;
  478. let scrollHeight = $('.time-container')[0].scrollHeight;
  479. if(scrollTop + clientHeight + 100 > scrollHeight){
  480. if(distributionFlag && distributionPageNum < distributionPages){
  481. distributionFlag = false;
  482. distributionPageNum++;
  483. distributionRecord();
  484. }
  485. }
  486. });
  487. // 活动获取用户云机列表,分页
  488. function getLists(){
  489. const sliderLen = Array.from($('.slider-item')).length;
  490. // if(sliderLen != 0 && sliderLen >= sliderNumber){
  491. // return
  492. // }
  493. $.ajax({
  494. url: baseUrl + '/api/user/v1/activity/getUserCardPage',
  495. type: 'get',
  496. data: {
  497. pageNum: pageNum + 1,
  498. pageSize: 4,
  499. phoneType: 'SVIP'
  500. },
  501. headers: {
  502. 'Authorization': id //id
  503. },
  504. contentType: "application/json",
  505. dataType: 'json',
  506. cache: false,
  507. success: function (res) {
  508. if (res.status === 0) {
  509. let records = res.data.userCardPage.records;
  510. totalRecords = [...totalRecords, ...records];
  511. if(records.length === 0){
  512. $('.page-row').eq(0).css('display','none');
  513. let sliderItemDom = `<div class="slider-item no-slider">暂无可分配的云手机</div>`;
  514. $('#slider-list').append(sliderItemDom);
  515. return
  516. }
  517. if(res.data && records.length > 0){
  518. sliderNumber = res.data.userCardPage.pages;
  519. let sliderItemText = $('.slider-item').eq(pageNum).text();
  520. var str = '',
  521. len = records.length;
  522. for (var i = 0; i < len; i++) {
  523. // 解决ios时间显示为NaN
  524. var now = res.data.now.replace(/T/g, ' ');
  525. now = now.replace(/\-/g, '/');
  526. var exceptTime = records[i].exceptTime.replace(/T/g, ' ');
  527. exceptTime = exceptTime.replace(/\-/g, '/');
  528. var diskName = records[i].diskName,
  529. currTime = parseInt(Date.parse(now)),
  530. closeTime = parseInt(Date.parse(exceptTime)),
  531. resultTime = closeTime - currTime,
  532. day = parseInt(resultTime / 1000 / 60 / 60 / 24),
  533. hour = parseInt(resultTime / 1000 / 60 / 60 % 24),
  534. time = day + "天" + hour + "时",
  535. recordsId = records[i].id;
  536. if(day == 0 && hour <= 0){
  537. time = '已过期';
  538. }
  539. if(sliderItemText){
  540. $('.reward-diskName').eq(pageNum*4 + i).text(diskName);
  541. $('.reward-time-content').eq(pageNum*4 + i).text(time);
  542. }
  543. str += `<div class="reward-row">
  544. <img class="reward-row-bg" src="../static/img/doubleChristmasActivity/reward-row-bg.png" />
  545. <div class="reward-row-content">
  546. <img class="icon_xingyao" src="../static/img/doubleChristmasActivity/home_list_icon_xingyao.png" />
  547. <div class="reward-day-text">
  548. <div class="reward-day reward-diskName">${diskName}</div>
  549. <div class="total-day time-row">
  550. <img class="time-icon" src="../static/img/doubleChristmasActivity/time-icon.png" />
  551. <span class="reward-time-content ${time === '已过期'?'time-overdue':''}">${time}</span>
  552. </div>
  553. </div>
  554. <div class="compute-block">
  555. <img class="compute-icon cut" data-id=${recordsId} data-index=${i} src="../static/img/doubleChristmasActivity/cut.png" />
  556. <input class="ipt" data-id=${recordsId} data-index=${(pageNum)*4 + i} type="number" onkeyup="this.value=this.value.replace(/-/g,'')" value="0" />
  557. <img class="compute-icon add" data-id=${recordsId} data-index=${i} src="../static/img/doubleChristmasActivity/add.png" />
  558. </div>
  559. </div>
  560. </div>`
  561. }
  562. let sliderItemDom = `<div class="slider-item">${str}</div>`;
  563. if(!sliderItemText){
  564. $('#slider-list').append(sliderItemDom);
  565. }else{
  566. return
  567. }
  568. $('.left-ear').eq(0).css('display','block');
  569. $('.right-ear').eq(0).css('display','block');
  570. $('.distribution-reward-btn').eq(0).css('display','block');
  571. $('.schedule-child-line').eq(0).css('width',`${36/sliderNumber}px`);
  572. $('.page').eq(0).text(`${pageNum + 1}/${sliderNumber}页`);
  573. if(sliderNumber === 1){
  574. $('.left-ear').eq(0).css('display','none');
  575. $('.right-ear').eq(0).css('display','none');
  576. $('.page-row').eq(0).css('display','none');
  577. $('.distribution-reward-btn').eq(0).css('margin-top','20px');
  578. }
  579. for (var i = 0; i < len; i++) {
  580. iptIndex = (pageNum) * 4 + parseInt(i);
  581. $('.ipt')[iptIndex].oninput = function (e) {
  582. const id = e.target.dataset.id;
  583. let oldDuration = 0;
  584. let preTotalTime = 0;
  585. let index = e.target.dataset.index;
  586. let value = $('.ipt').eq(index).val();
  587. if(value.length >= 5){
  588. value = value.substr(0, 5);
  589. }
  590. console.log('value',value)
  591. var position = String(value).indexOf(".");//获取小数点的位置
  592. if(position != -1){
  593. value = value.substr(0, position);
  594. }
  595. distributionList.map(item => { // 上一次的总数据
  596. preTotalTime += parseInt(item.duration);
  597. })
  598. //这一次操作
  599. if(value == 0){
  600. if(!distributionList.find((item) => item.cardId == id)){
  601. distributionList.push({
  602. cardId: id,
  603. duration: +value
  604. });
  605. }else{
  606. distributionList = distributionList.filter(item => item.cardId != id);
  607. }
  608. distributionList = distributionList.filter(item => item.duration != 0);
  609. }else{
  610. if(!distributionList.find((item) => item.cardId == id)){
  611. distributionList.push({
  612. cardId: id,
  613. duration: Math.abs(value)
  614. });
  615. }else{
  616. distributionList.map(item => {
  617. if (item.cardId == id) {
  618. oldDuration = item.duration;
  619. item.duration = +value;
  620. }
  621. })
  622. }
  623. }
  624. currTotalTime = 0;
  625. distributionList.map(item => { // 这一次的总数据
  626. currTotalTime += parseInt(item.duration);
  627. })
  628. if(currTotalTime > totalTime){ // 当前已分配大于总分配时长
  629. let val = totalTime - preTotalTime + oldDuration;
  630. distributionList.map(item => {
  631. if (item.cardId == id) {
  632. item.duration = val;
  633. }
  634. })
  635. $('.ipt').eq(index).val(val);
  636. stopManyClick(() => {
  637. toastr.error('分配时长不能大于未分配总时长');
  638. })
  639. return
  640. }
  641. console.log(distributionList)
  642. if(value.length > 5) value=value.slice(0, 5);
  643. $('.ipt').eq(index).val(value);
  644. }
  645. }
  646. }
  647. } else {
  648. stopManyClick(() => {
  649. toastr.error(res.msg);
  650. })
  651. }
  652. }
  653. })
  654. }
  655. //点击分配时长按钮
  656. $('.distribution-reward-btn')[0].addEventListener('click', (e) => {
  657. distributionList = distributionList.filter(item => item.duration != 0);
  658. if (distributionList.length === 0) {
  659. stopManyClick(() => {
  660. toastr.error('未选中任何云手机');
  661. })
  662. } else {
  663. $('.sure-distribution-wrap').eq(0).css('display', 'block');
  664. }
  665. });
  666. //点击分配时长取消按钮
  667. $('.sure-distribution-cannel')[0].addEventListener('click', (e) => {
  668. operate('dt_双旦_h5_分配奖励_取消');
  669. $('.sure-distribution-wrap').eq(0).css('display', 'none');
  670. });
  671. //点击分配时长确定按钮
  672. $('.sure-distribution-sure')[0].addEventListener('click', (e) => {
  673. $.ajax({
  674. url: baseUrl + '/api/user/v1/activity/distributeRewardDuration',
  675. type: 'post',
  676. data: JSON.stringify(distributionList),
  677. headers: {
  678. 'Authorization': id //id
  679. },
  680. contentType: "application/json",
  681. dataType: 'json',
  682. cache: false,
  683. success: function (res) {
  684. if(res.status === 0){
  685. operate('dt_双旦_h5_分配奖励_确定');
  686. $('.sure-distribution-wrap').eq(0).css('display', 'none');
  687. $('.reward-list').eq(0).text('');
  688. getList();
  689. getLists();
  690. distributionPageNum = 0;
  691. $('.time-row-data').eq(0).text('');
  692. distributionRecord();
  693. distributionList.map((val) => {
  694. totalRecords.map((item, indexs) => {
  695. if(val.cardId == item.id){
  696. $('.ipt').eq(indexs).val(0);
  697. }
  698. })
  699. })
  700. distributionList = [];
  701. stopManyClick(() => {
  702. toastr.error('分配成功,请前往云机列表查看');
  703. })
  704. } else {
  705. stopManyClick(() => {
  706. toastr.error(res.msg);
  707. })
  708. }
  709. },
  710. })
  711. });
  712. //点击加号
  713. $('.slider-list')[0].addEventListener('click',(e) => {
  714. if(e.target.className === 'compute-icon add'){
  715. const id = e.target.dataset.id;
  716. let currTotalTime = 0;
  717. let index = e.target.dataset.index;
  718. index = (pageNum)*4 + parseInt(index);
  719. let number = $('.ipt').eq(index).val();
  720. // 这一次操作
  721. if(number == 0){
  722. if(!distributionList.find((item) => item.cardId == id)){
  723. distributionList.push({
  724. cardId: id,
  725. duration: +number + 1
  726. });
  727. }else{
  728. distributionList.map(item => {
  729. if(item.cardId == id){
  730. item.duration++;
  731. }
  732. })
  733. }
  734. }else{
  735. distributionList.map(item => {
  736. if(item.cardId == id){
  737. item.duration++;
  738. }
  739. })
  740. }
  741. distributionList.map(item => { // 这一次的总数据
  742. currTotalTime += parseInt(item.duration);
  743. })
  744. console.log(currTotalTime)
  745. console.log(totalTime)
  746. if(currTotalTime <= totalTime){
  747. number++;
  748. $('.ipt').eq(index).val(number);
  749. }else{
  750. distributionList.map(item => {
  751. if(item.cardId == id){
  752. item.duration = +number;
  753. }
  754. })
  755. stopManyClick(() => {
  756. toastr.error('分配时长不能大于未分配总时长');
  757. })
  758. }
  759. console.log(distributionList)
  760. }
  761. });
  762. //点击减号
  763. $('.slider-list')[0].addEventListener('click',(e) => {
  764. if(e.target.className === 'compute-icon cut'){
  765. const id = e.target.dataset.id;
  766. let index = e.target.dataset.index;
  767. index = (pageNum)*4 + parseInt(index);
  768. let number = $('.ipt').eq(index).val();
  769. if(number > 0){
  770. distributionList.map(item => {
  771. if(item.cardId == id){
  772. item.duration--;
  773. }
  774. })
  775. number--;
  776. if(number == 0){
  777. distributionList = distributionList.filter(item => item.cardId != id);
  778. }
  779. currTotalTime--;
  780. $('.ipt').eq(index).val(number);
  781. }else{
  782. stopManyClick(() => {
  783. toastr.error('分配的时长不能小于0');
  784. })
  785. }
  786. console.log(distributionList)
  787. }
  788. });
  789. //埋点
  790. operate('dt_双旦_h5_活动首页');
  791. function operate(pointName, type) {
  792. $.ajax({
  793. url: baseUrl + '/api/public/v1/systemBuriedPoint/stat',
  794. type: 'post',
  795. data: JSON.stringify({
  796. pointName: pointName
  797. }),
  798. contentType: "application/json",
  799. dataType: 'json',
  800. cache: false,
  801. success: function (res) {
  802. },
  803. })
  804. }
  805. //防止提示一秒内重复显示
  806. function stopManyClick(fn) {
  807. if (flag) {
  808. fn();
  809. }
  810. flag = false;
  811. if (timer) { clearTimeout(timer); }
  812. timer = setTimeout(() => { flag = true }, 1500);
  813. }
  814. </script>
  815. <script src="../static/js/vender/move.js"></script>
  816. </body>
  817. </html>