activity_preview.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <!DOCTYPE HTML>
  2. <html xmlns:th="http://www.thymeleaf.org"
  3. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  4. layout:decorate="~{admin/common/common}">
  5. <head>
  6. <title>活动详情</title>
  7. <style>
  8. #timer span {
  9. background-color: #0c80fe;
  10. color: #fff;
  11. padding: 0 5px;
  12. }
  13. </style>
  14. </head>
  15. <body layout:fragment="content">
  16. <article class="page-container">
  17. <div id="activity_top" class="row">
  18. <div class="col-sm-5 col-md-5 col-lg-5" id="poster">
  19. </div>
  20. <div class="col-sm-7 col-md-7 col-lg-7 home-activity-left">
  21. <h2 class="activity-title" id="activity_title">1</h2>
  22. <p id="activity_time"><i class="iconfont">&#xe62d;</i>2</p>
  23. <p id="activity_location"><i class="iconfont">&#xe6e5;</i>3</p>
  24. <p id="activity_quota"><i class="iconfont">&#xe722;</i>4</p>
  25. <p id="activity_remain"><i class="iconfont">&#xe722;</i>5</p>
  26. <div style="margin-bottom: 20px;">距离报名结束还剩 <span id="timer"><span>0天</span>:<span>0小时</span>:<span>0分</span>:<span>0秒</span></span>
  27. </div>
  28. </div>
  29. </div>
  30. <div class="row">
  31. <div class="col-sm-12 col-md-12 col-lg-12">
  32. <div class="centerContent" style="padding-top: 20px;">
  33. <div id="content">
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="row cl">
  39. <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
  40. <a onclick="removeIframe();" class="btn btn-default radius" type="button">返回</a>
  41. </div>
  42. </div>
  43. </article>
  44. <script th:inline="javascript">
  45. $(function () {
  46. var activity_title = parent.$("#activity_title").val();
  47. var activity_location = parent.$("#activity_location").val();
  48. var activity_starttime = parent.$("#activity_starttime").val();
  49. var activity_endtime = parent.$("#activity_endtime").val();
  50. var activity_deadline = parent.$("#activity_deadline").val();
  51. var is_quota = parent.$("#is_quota").val();
  52. var activity_quota = parent.$("#activity_quota").val();
  53. var content = parent.$("#content").val();
  54. var src = parent.$("img").attr("src");
  55. /*fileListPre
  56. preImg*/
  57. $("#activity_title").html(activity_title);
  58. $("#activity_location").html('<i class="iconfont">&#xe6e5;</i>' + activity_location);
  59. $("#activity_time").html('<i class="iconfont">&#xe62d;</i>' + activity_starttime.substring(0, 4) + "年" + activity_starttime.substring(5, 7) + "月" + activity_starttime.substring(8, 10) + "日" + " " + activity_starttime.substring(10, 16) + "~" + activity_endtime.substring(0, 4) + "年" + activity_endtime.substring(5, 7) + "月" + activity_endtime.substring(8, 10) + "日" + " " + activity_endtime.substring(10, 16));
  60. if (is_quota == '1') {
  61. $("#activity_quota").html('<i class="iconfont">&#xe722;</i>限额' + activity_quota + "人")
  62. } else {
  63. $("#activity_quota").html('<i class="iconfont">&#xe722;</i>名额不限')
  64. }
  65. $("#content").html(content);
  66. if (is_quota) {
  67. $("#activity_remain").html('<i class="iconfont">&#xe722;</i>剩余' + activity_quota + "个名额")
  68. } else {
  69. $("#activity_remain").text("")
  70. }
  71. var str = ""
  72. if (src) {
  73. str = '<img style="padding: 30px 0px 0px 30px;" src="' + src + '" class="notice-img"/>'
  74. } else {
  75. str = '<div style="padding: 30px 0px 0px 30px;" class="notice-img"/>'
  76. }
  77. $("#poster").append(str);
  78. var d1 = new Date(Date.parse(activity_deadline.replace(/-/g, "/")))
  79. var d2 = new Date()
  80. time = parseInt((d1.getTime() - d2.getTime()) / 1000, 10)
  81. if (time <= 0) {
  82. $("#timer").html("<span>" + 0 + "天</span>:<span>" + 0 + "小时</span>:<span>" + 0 + "分</span>:<span>" + 0 + "秒</span>")
  83. } else {
  84. countDown(time)
  85. }
  86. });
  87. function countDown(times) {
  88. var timer = null;
  89. timer = setInterval(function () {
  90. var day = 0,
  91. hour = 0,
  92. minute = 0,
  93. second = 0;//时间默认值
  94. if (times > 0) {
  95. day = Math.floor(times / (60 * 60 * 24));
  96. hour = Math.floor(times / (60 * 60)) - (day * 24);
  97. minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
  98. second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
  99. }
  100. if (day <= 9) day = '0' + day;
  101. if (hour <= 9) hour = '0' + hour;
  102. if (minute <= 9) minute = '0' + minute;
  103. if (second <= 9) second = '0' + second;
  104. //
  105. $("#timer").html("<span>" + day + "天</span>:<span>" + hour + "小时</span>:<span>" + minute + "分</span>:<span>" + second + "秒</span>")
  106. times--;
  107. }, 1000);
  108. if (times <= 0) {
  109. clearInterval(timer);
  110. }
  111. }
  112. /**
  113. * 取消
  114. */
  115. function removeIframe() {
  116. var index = parent.layer.getFrameIndex(window.name);
  117. parent.layer.close(index);
  118. }
  119. </script>
  120. </body>
  121. </html>