activity.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  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=no">
  6. <title>活动详情</title>
  7. <link rel="stylesheet" href="/css/activity.css">
  8. <style>
  9. .activity-content {
  10. min-height: 100vh;
  11. }
  12. .activity-content img {
  13. max-width: 100%;
  14. height: auto;
  15. }
  16. .activity-content a {
  17. color: #f5a623;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div class="container activity">
  23. <div id="activityContent" class="activity-content">
  24. </div>
  25. <div class="loading-overlay" id="loadingOverlay" style="display: none;">
  26. <div class="loading-content">
  27. <div class="loading-spinner"></div>
  28. <span class="loading-text">加载中...</span>
  29. </div>
  30. </div>
  31. <div class="error-overlay" id="errorOverlay" style="display: none;">
  32. <div class="error-content">
  33. <div class="error-icon">!</div>
  34. <span class="error-text">加载失败,请稍后重试</span>
  35. <button class="error-retry" id="retryBtn">重试</button>
  36. </div>
  37. </div>
  38. </div>
  39. <script>
  40. (function () {
  41. const API_URL = '/api/v1/config/activities/';
  42. const loadingOverlay = document.getElementById('loadingOverlay');
  43. const errorOverlay = document.getElementById('errorOverlay');
  44. const retryBtn = document.getElementById('retryBtn');
  45. // const backButton = document.getElementById('backButton');
  46. const activityContent = document.getElementById('activityContent');
  47. // const activityTitle = document.getElementById('activityTitle');
  48. let token = '';
  49. let activityId = '';
  50. // backButton.addEventListener('click', function () {
  51. // if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
  52. // window.flutter_inappwebview.callHandler('closeWebview');
  53. // }
  54. // });
  55. function showLoading() {
  56. loadingOverlay.style.display = 'flex';
  57. errorOverlay.style.display = 'none';
  58. }
  59. function hideLoading() {
  60. loadingOverlay.style.display = 'none';
  61. }
  62. function showError() {
  63. loadingOverlay.style.display = 'none';
  64. errorOverlay.style.display = 'flex';
  65. }
  66. async function getTokenFromNative() {
  67. try {
  68. const result = await window.flutter_inappwebview.callHandler('getToken');
  69. token = result;
  70. return result;
  71. } catch (e) {
  72. console.error('JSBridge getToken 调用失败', e);
  73. return null;
  74. }
  75. }
  76. async function getActivityIdFromNative() {
  77. try {
  78. const result = await window.flutter_inappwebview.callHandler('getActivityId');
  79. activityId = result;
  80. return result;
  81. } catch (e) {
  82. console.error('JSBridge getActivityId 调用失败', e);
  83. return null;
  84. }
  85. }
  86. async function fetchActivityDetail() {
  87. showLoading();
  88. try {
  89. const headers = {
  90. 'Content-Type': 'application/json',
  91. 'Accept': 'application/json',
  92. 'X-Requested-With': 'XMLHttpRequest',
  93. };
  94. if (token) {
  95. headers['Authorization'] = token;
  96. }
  97. const response = await fetch(API_URL + activityId, {
  98. method: 'GET',
  99. headers: headers,
  100. credentials: 'include',
  101. timeout: 10000
  102. });
  103. if (!response.ok) {
  104. throw new Error(`请求失败! status: ${response.status}`);
  105. }
  106. const result = await response.json();
  107. const data = result.data || {};
  108. if (data.content) {
  109. const decodedHTML = decodeHTMLEntities(data.content);
  110. activityContent.innerHTML = decodedHTML;
  111. } else {
  112. activityContent.innerHTML = '<p style="color: #888; text-align: center; padding: 20px;">暂无活动内容</p>';
  113. }
  114. hideLoading();
  115. } catch (error) {
  116. console.error('Data fetch error:', error);
  117. showError();
  118. }
  119. }
  120. retryBtn.addEventListener('click', fetchActivityDetail);
  121. document.addEventListener('DOMContentLoaded', async function () {
  122. await getTokenFromNative();
  123. await getActivityIdFromNative();
  124. if (activityId) {
  125. fetchActivityDetail();
  126. } else {
  127. console.error('未获取到 activityId');
  128. showError();
  129. }
  130. });
  131. })();
  132. function decodeHTMLEntities(text) {
  133. const textarea = document.createElement('textarea');
  134. textarea.innerHTML = text;
  135. return textarea.value;
  136. }
  137. </script>
  138. </body>
  139. </html>