doubleChristmasActivity.html 30 KB

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