doubleChristmasActivity.html 27 KB

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