doubleChristmasActivity.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  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">云机低至0.24元/天</div>
  22. <div class="rest-time">距离活动结束:20天3时4分30秒</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">分配奖励(0000)</div>
  60. <img class="tab-bg" src="../static/img/doubleChristmasActivity/tab-bg.png" />
  61. </div>
  62. <div class="reward-container">
  63. <div class="reward-time">
  64. <span class="reward-text">购买套餐累计时长</span>
  65. <span class="time-num">2222</span>
  66. <span class="reward-text">天</span>
  67. <span class="time-line">|</span>
  68. <span class="reward-text">距离下一个奖励还差</span>
  69. <span class="time-num">2222</span>
  70. <span class="reward-text">天</span>
  71. </div>
  72. <div class="reward-tip-row">
  73. <img class="reward-tip-img" src="../static/img/doubleChristmasActivity/reward-tip-img.png" />
  74. <div class="reward-tip">精彩不停的充值福利专场已经来临充值越多折扣越大</div>
  75. </div>
  76. <div class="reward-list">
  77. <div class="reward-last-tip">已获得奖励请在分配奖励栏中进行时长分配</div>
  78. </div>
  79. </div>
  80. <div class="distribution-container">
  81. <div class="distribution-time">
  82. <div>
  83. <span class="distribution-text">奖励总时长</span>
  84. <span class="distribution-num">2222</span>
  85. <span class="distribution-text">天</span>
  86. </div>
  87. <span class="distribution-line">|</span>
  88. <div>
  89. <span class="distribution-text">未分配时长</span>
  90. <span class="distribution-num">2222</span>
  91. <span class="distribution-text">天</span>
  92. </div>
  93. </div>
  94. <div class="reward-list">
  95. <img class="left-ear" src="../static/img/doubleChristmasActivity/left-ear.png" />
  96. <img class="right-ear" src="../static/img/doubleChristmasActivity/right-ear.png" />
  97. <div class="slider" id="slider">
  98. <div class="slider-list flex" id="slider-list"></div>
  99. </div>
  100. <div class="page-row">
  101. <div class="schedule-line">
  102. <div class="schedule-child-line"></div>
  103. </div>
  104. <div class="page">1/4页</div>
  105. </div>
  106. <div class="distribution-reward-btn">
  107. <img class="reward-btn-img" src="../static/img/doubleChristmasActivity/distribution-reward-btn.png" />
  108. </div>
  109. </div>
  110. </div>
  111. <div class="distribution-container time-container">
  112. <div class="time-title-row">
  113. <img class="time-title-bg" src="../static/img/doubleChristmasActivity/time-title-bg.png" />
  114. <div class="time-title">分配时长记录(已分配时长999天)</div>
  115. </div>
  116. <div class="time-list">
  117. <div class="title-row">
  118. <div>云机名称</div>
  119. <div>时间</div>
  120. <div>时长</div>
  121. </div>
  122. <div class="time-content-row">
  123. <div>lo试玩撒了</div>
  124. <div>2021年11月24日15:48:44</div>
  125. <div>1000天</div>
  126. </div>
  127. <div class="time-content-row">
  128. <div>lo试玩撒了</div>
  129. <div>2021年11月24日15:48:44</div>
  130. <div>1000天</div>
  131. </div>
  132. <div class="time-content-row">
  133. <div>lo试玩撒了</div>
  134. <div>2021年11月24日15:48:44</div>
  135. <div>1000天</div>
  136. </div>
  137. <div class="time-content-row">
  138. <div>lo试玩撒了</div>
  139. <div>2021年11月24日15:48:44</div>
  140. <div>1000天</div>
  141. </div>
  142. </div>
  143. </div>
  144. <div class="rule-container">
  145. <img class="rule-tips" src="../static/img/doubleChristmasActivity/rule.png" />
  146. <div class="rule-content">
  147. <div class="rule-point">一、活动时间:2021年12月18日-2022年1月3日。</div>
  148. <div class="rule-point">二、任务奖励与获取说明</div>
  149. <div class="rule-point">1.活动期间购买星曜云机达累计天数,可获得相应奖励,同一个账号同一进度的奖励只能领取一次。</div>
  150. <div class="rule-point">任务奖励一览:</div>
  151. <div class="rule-point">1.1.累积购买天数小于等于2022天时 ,获得对应任务奖励。</div>
  152. <div class="rule-point">1.2.累积购买天数大于2022天时,超过2022天的部分按买一送二发放奖励。</div>
  153. <div class="rule-point">2.使用星币支付、激活码兑换、优惠劵购买和购买非星耀套餐不计入任务进度。</div>
  154. <div class="rule-point">3.奖励获取的云机时长仅可用于续费账号中现有的星曜云机设备。</div>
  155. <div class="rule-point blue">4.奖励领取日期为:2021年12月18日-2022年1月6日,超过领取时间未领取奖励则视为放弃任务奖励。</div>
  156. <div class="rule-point">5.授权的云手机不能获取累计奖励时长。</div>
  157. <div class="rule-point">三、其他说明</div>
  158. <div class="rule-point">1.本次活动不与其他活动优惠叠加。</div>
  159. <div class="rule-point">2.本次活动期间购买的云手机套餐不支持退款。</div>
  160. <div class="rule-point">3.双子星官方对活动具有最终解释权。</div>
  161. </div>
  162. </div>
  163. </div>
  164. </div>
  165. <script>
  166. toastr.options.positionClass = 'toast-center-center';
  167. toastr.options.timeOut = '1500';
  168. </script>
  169. <script type="text/javascript">
  170. let timer,flag = true;
  171. var url = window.location.href;
  172. url = url.split('/');
  173. var topVal = -0.5;
  174. let obj = {};
  175. // 上线分享环境改为0,图片路径改为正式站路径
  176. // var baseUrl = 'https://test.androidscloud.com'
  177. var loc = window.location.search,
  178. u = navigator.userAgent,
  179. ua = navigator.userAgent.toLowerCase(),
  180. isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
  181. isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  182. let s = loc.substr(1,loc.length-1);//取得=号的位置
  183. let parms = s.split('&');
  184. parms.map((item) =>{
  185. let arr = item.split('=');
  186. let key = arr[0];
  187. obj[key] = arr[1];
  188. })
  189. getList();
  190. getLists();
  191. //点击立即参与按钮
  192. $('.join-activity-btn')[0].addEventListener('click',() => {
  193. if(isAndroid){ // 安卓
  194. window.native.startPurchase(1,365);
  195. }else{
  196. window.webkit.messageHandlers.startPurchase.postMessage(1,365);
  197. }
  198. })
  199. //点击去完成
  200. $('.reward-list')[0].addEventListener('click',(e) => {
  201. if(e.target.className === 'reward-btn'){
  202. if(isAndroid){ // 安卓
  203. window.native.startPurchase(1,365);
  204. }else{
  205. window.webkit.messageHandlers.startPurchase.postMessage(1,365);
  206. }
  207. }
  208. });
  209. //点击tab选项卡
  210. $('.tab-row')[0].addEventListener('click',(e) => {
  211. const index = e.target.dataset.index;
  212. if(!index){
  213. return
  214. }
  215. if(index == 0){
  216. $('.tab-item')[1].className = 'tab-item';
  217. $('.tab-bg')[0].className = 'tab-bg tab-left';
  218. $('.reward-container').eq(0).css('display','block');
  219. $('.distribution-container').eq(0).css('display','none');
  220. $('.distribution-container').eq(1).css('display','none');
  221. }else{
  222. $('.tab-item')[0].className = 'tab-item';
  223. $('.tab-bg')[0].className = 'tab-bg tab-right';
  224. $('.reward-container').eq(0).css('display','none');
  225. $('.distribution-container').eq(0).css('display','block');
  226. $('.distribution-container').eq(1).css('display','block');
  227. }
  228. $('.tab-item')[index].className = 'tab-item tab-active';
  229. })
  230. //调用获取数据列表接口
  231. function getList(){
  232. // $.ajax({
  233. // url: baseUrl + '/api/user/v1/activity/orderRedEnvelopeSharing',
  234. // type: 'post',
  235. // headers: {
  236. // 'Authorization': obj.token //id
  237. // },
  238. // contentType: "application/json",
  239. // dataType: 'json',
  240. // cache: false,
  241. // success: function (res) {
  242. // if(res.status === 0){
  243. // if(res.data && res.data.length > 0){
  244. let res = {
  245. data:[{
  246. shareCount: 10,
  247. totalMoney: 30
  248. },{
  249. shareCount: 40,
  250. totalMoney: 90
  251. },{
  252. shareCount: 80,
  253. totalMoney: 180
  254. },{
  255. shareCount: 240,
  256. totalMoney: 365
  257. },{
  258. shareCount: 800,
  259. totalMoney: 730
  260. },{
  261. shareCount: 3022,
  262. totalMoney: 2022
  263. },{
  264. shareCount: 3022,
  265. totalMoney: 2022
  266. }]
  267. }
  268. var str = '',
  269. len = res.data.length;
  270. for (var i = 0; i < len; i++) {
  271. var totalMoney = res.data[i].totalMoney,
  272. shareCount = res.data[i].shareCount;
  273. str += `<div class="reward-row">
  274. <img class="reward-row-bg" src="../static/img/doubleChristmasActivity/reward-row-bg.png" />
  275. <div class="reward-row-content">
  276. <img class="reward-img" src="../static/img/doubleChristmasActivity/reward.png" />
  277. <div class="reward-day-text">
  278. <div class="reward-day">奖励天数${shareCount}天</div>
  279. <div class="total-day">购买套餐累计时长达${totalMoney}天</div>
  280. </div>
  281. <img class="reward-btn" src="../static/img/doubleChristmasActivity/finish-btn.png" />
  282. </div>
  283. </div>`
  284. }
  285. str +=`<div class="reward-last-tip">已获得奖励请在分配奖励栏中进行时长分配</div>`
  286. $('.reward-list').eq(0).append(str);
  287. // }
  288. // }else{
  289. // stopManyClick(() => {
  290. // toastr.error(res.msg);
  291. // })
  292. // }
  293. // }
  294. // })
  295. }
  296. //获取分配列表数据
  297. function getLists(){
  298. const sliderLen = Array.from($('.slider-item')).length;
  299. if(sliderLen > 4){
  300. return
  301. }
  302. // $.ajax({
  303. // url: baseUrl + '/api/user/v1/activity/orderRedEnvelopeSharing',
  304. // type: 'post',
  305. // headers: {
  306. // 'Authorization': obj.token //id
  307. // },
  308. // contentType: "application/json",
  309. // dataType: 'json',
  310. // cache: false,
  311. // success: function (res) {
  312. // if(res.status === 0){
  313. // if(res.data && res.data.length > 0){
  314. let res = {
  315. data:[{
  316. shareCount: 0,
  317. totalMoney: 0
  318. },{
  319. shareCount: 0,
  320. totalMoney: 0
  321. },{
  322. shareCount: 0,
  323. totalMoney: 0
  324. },{
  325. shareCount: 0,
  326. totalMoney: 0
  327. }]
  328. }
  329. var str = '',
  330. len = res.data.length;
  331. for (var i = 0; i < len; i++) {
  332. var totalMoney = res.data[i].totalMoney,
  333. shareCount = res.data[i].shareCount;
  334. str += `<div class="reward-row">
  335. <img class="reward-row-bg" src="../static/img/doubleChristmasActivity/reward-row-bg.png" />
  336. <div class="reward-row-content">
  337. <img class="icon_xingyao" src="../static/img/doubleChristmasActivity/home_list_icon_xingyao.png" />
  338. <div class="reward-day-text">
  339. <div class="reward-day">Y2-12567</div>
  340. <div class="total-day time-row">
  341. <img class="time-icon" src="../static/img/doubleChristmasActivity/time-icon.png" />
  342. <span>剩99999天24小时</span>
  343. </div>
  344. </div>
  345. <div class="compute-block">
  346. <img class="compute-icon cut" src="../static/img/doubleChristmasActivity/cut.png" />
  347. <input class="ipt" type="number" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" value="0" maxlength="5" />
  348. <img class="compute-icon add" src="../static/img/doubleChristmasActivity/add.png" />
  349. </div>
  350. </div>
  351. </div>`
  352. }
  353. let sliderItemDom = res.data.length === 0 ? `<div class="slider-item no-slider">暂无可分配的云手机</div>` : `<div class="slider-item">${str}</div>`;
  354. $('#slider-list').append(sliderItemDom);
  355. // }
  356. // }else{
  357. // stopManyClick(() => {
  358. // toastr.error(res.msg);
  359. // })
  360. // }
  361. // }
  362. // })
  363. }
  364. //点击加号
  365. $('.slider-list')[0].addEventListener('click',(e) => {
  366. if(e.target.className === 'compute-icon add'){
  367. let number = $('.ipt').eq(0).val();
  368. number++;
  369. if(number < 30){
  370. $('.ipt').eq(0).val(number);
  371. }else{
  372. stopManyClick(() => {
  373. toastr.error('分配时常不能大于未分配时常');
  374. })
  375. }
  376. }
  377. });
  378. //点击减号
  379. $('.slider-list')[0].addEventListener('click',(e) => {
  380. if(e.target.className === 'compute-icon cut'){
  381. let number = $('.ipt').eq(0).val();
  382. if(number > 0){
  383. number--;
  384. $('.ipt').eq(0).val(number);
  385. }else{
  386. stopManyClick(() => {
  387. toastr.error('分配的时常不能小于0');
  388. })
  389. }
  390. }
  391. });
  392. //埋点
  393. operate('dt_双11_h5_活动页面');
  394. function operate(pointName,type){
  395. $.ajax({
  396. url: baseUrl + '/api/public/v1/systemBuriedPoint/stat',
  397. type: 'post',
  398. data:JSON.stringify({
  399. pointName: pointName
  400. }),
  401. contentType:"application/json",
  402. dataType: 'json',
  403. cache: false,
  404. success: function (res) {
  405. },
  406. })
  407. }
  408. //防止提示一秒内重复显示
  409. function stopManyClick(fn) {
  410. if (flag) {
  411. fn();
  412. }
  413. flag = false;
  414. if(timer){clearTimeout(timer);}
  415. timer = setTimeout(() => {flag = true}, 1500);
  416. }
  417. </script>
  418. <script src="../static/js/vender/move.js"></script>
  419. </body>
  420. </html>