doubleChristmasActivity.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  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({type:2,day: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({type:2,day: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: 10,
  317. totalMoney: 30
  318. },{
  319. shareCount: 40,
  320. totalMoney: 90
  321. },{
  322. shareCount: 80,
  323. totalMoney: 180
  324. }]
  325. }
  326. var str = '',
  327. len = res.data.length;
  328. for (var i = 0; i < len; i++) {
  329. var totalMoney = res.data[i].totalMoney,
  330. shareCount = res.data[i].shareCount;
  331. str += `<div class="reward-row">
  332. <img class="reward-row-bg" src="../static/img/doubleChristmasActivity/reward-row-bg.png" />
  333. <div class="reward-row-content">
  334. <img class="icon_xingyao" src="../static/img/doubleChristmasActivity/home_list_icon_xingyao.png" />
  335. <div class="reward-day-text">
  336. <div class="reward-day">Y2-12567</div>
  337. <div class="total-day time-row">
  338. <img class="time-icon" src="../static/img/doubleChristmasActivity/time-icon.png" />
  339. <span>剩99999天24小时</span>
  340. </div>
  341. </div>
  342. <div class="compute-block">
  343. <img class="compute-icon cut" src="../static/img/doubleChristmasActivity/cut.png" />
  344. <input class="ipt" type="number" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" value="0" maxlength="5" />
  345. <img class="compute-icon add" src="../static/img/doubleChristmasActivity/add.png" />
  346. </div>
  347. </div>
  348. </div>`
  349. }
  350. let sliderItemDom = res.data.length === 0 ? `<div class="slider-item no-slider">暂无可分配的云手机</div>` : `<div class="slider-item">${str}</div>`;
  351. $('#slider-list').append(sliderItemDom);
  352. if(res.data.length === 0){
  353. $('.left-ear').eq(0).css('display','none');
  354. $('.right-ear').eq(0).css('display','none');
  355. $('.page-row').eq(0).css('display','none');
  356. }
  357. // }
  358. // }else{
  359. // stopManyClick(() => {
  360. // toastr.error(res.msg);
  361. // })
  362. // }
  363. // }
  364. // })
  365. }
  366. //点击加号
  367. $('.slider-list')[0].addEventListener('click',(e) => {
  368. if(e.target.className === 'compute-icon add'){
  369. let number = $('.ipt').eq(0).val();
  370. number++;
  371. if(number < 30){
  372. $('.ipt').eq(0).val(number);
  373. }else{
  374. stopManyClick(() => {
  375. toastr.error('分配时常不能大于未分配时常');
  376. })
  377. }
  378. }
  379. });
  380. //点击减号
  381. $('.slider-list')[0].addEventListener('click',(e) => {
  382. if(e.target.className === 'compute-icon cut'){
  383. let number = $('.ipt').eq(0).val();
  384. if(number > 0){
  385. number--;
  386. $('.ipt').eq(0).val(number);
  387. }else{
  388. stopManyClick(() => {
  389. toastr.error('分配的时常不能小于0');
  390. })
  391. }
  392. }
  393. });
  394. //埋点
  395. operate('dt_双11_h5_活动页面');
  396. function operate(pointName,type){
  397. $.ajax({
  398. url: baseUrl + '/api/public/v1/systemBuriedPoint/stat',
  399. type: 'post',
  400. data:JSON.stringify({
  401. pointName: pointName
  402. }),
  403. contentType:"application/json",
  404. dataType: 'json',
  405. cache: false,
  406. success: function (res) {
  407. },
  408. })
  409. }
  410. //防止提示一秒内重复显示
  411. function stopManyClick(fn) {
  412. if (flag) {
  413. fn();
  414. }
  415. flag = false;
  416. if(timer){clearTimeout(timer);}
  417. timer = setTimeout(() => {flag = true}, 1500);
  418. }
  419. </script>
  420. <script src="../static/js/vender/move.js"></script>
  421. </body>
  422. </html>