navigation.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. /**
  2. * H5版本的页面导航工具
  3. * 提供统一的页面跳转、返回、刷新等功能
  4. */
  5. /**
  6. * 页面导航管理器
  7. */
  8. const NavigationManager = {
  9. /**
  10. * 跳转到目标页面
  11. * @param {string} destPage - 目标页面名称(不含.html)
  12. * @param {object} params - 传递的参数
  13. * @param {object} options - 跳转选项
  14. */
  15. goTo(destPage, params = {}, options = {}) {
  16. try {
  17. const urlParams = new URLSearchParams(window.location.search);
  18. // 添加新参数
  19. Object.keys(params).forEach(key => {
  20. if (params[key] !== undefined && params[key] !== null) {
  21. urlParams.set(key, encodeURIComponent(params[key]));
  22. }
  23. });
  24. // 添加导航标记,用于返回时刷新
  25. if (options.needRefresh) {
  26. urlParams.set('_needRefresh', '1');
  27. }
  28. // 构建目标URL
  29. const newUrl = `${destPage}.html?${urlParams.toString()}`;
  30. console.log('🔗 导航到:', newUrl);
  31. console.log('📋 传递参数:', Object.fromEntries(urlParams));
  32. // 跳转页面
  33. window.location.href = newUrl;
  34. } catch (error) {
  35. console.error('❌ 页面导航失败:', error);
  36. if (typeof showToast !== 'undefined') {
  37. showToast('页面跳转失败', 'error');
  38. } else {
  39. alert('页面跳转失败');
  40. }
  41. }
  42. },
  43. /**
  44. * 处理buttonList按钮跳转
  45. * @param {object} button - 按钮配置
  46. */
  47. goToFromButton(button) {
  48. // 优先检查function.dest,然后是button.dest
  49. const destPage = button.function?.dest || button.dest;
  50. if (!destPage) {
  51. console.warn('按钮没有配置跳转页面:', button);
  52. return false;
  53. }
  54. const params = {
  55. dest: destPage,
  56. title: button.function?.desc || button.buttonName,
  57. service: button.function?.servName || button.service || ''
  58. };
  59. // 跳转页面,标记需要刷新
  60. this.goTo(destPage, params, { needRefresh: true });
  61. return true;
  62. },
  63. /**
  64. * 返回上一页
  65. * @param {object} options - 返回选项
  66. */
  67. goBack(options = {}) {
  68. try {
  69. // 检查是否需要刷新父页面
  70. const urlParams = new URLSearchParams(window.location.search);
  71. const needRefresh = urlParams.get('_needRefresh') === '1';
  72. if (needRefresh && options.refreshParent !== false) {
  73. // 通知父页面刷新
  74. this.notifyParentRefresh();
  75. }
  76. // 返回上一页
  77. if (window.history.length > 1) {
  78. window.history.back();
  79. } else {
  80. NavigationManager.goBack()
  81. }
  82. } catch (error) {
  83. console.error('❌ 页面返回失败:', error);
  84. if (typeof showToast !== 'undefined') {
  85. showToast('页面返回失败', 'error');
  86. }
  87. }
  88. },
  89. /**
  90. * 通知父页面刷新(通过localStorage)
  91. */
  92. notifyParentRefresh() {
  93. try {
  94. const refreshData = {
  95. timestamp: Date.now(),
  96. action: 'refresh',
  97. source: window.location.pathname
  98. };
  99. localStorage.setItem('_pageRefreshNotify', JSON.stringify(refreshData));
  100. // 触发storage事件
  101. window.dispatchEvent(new StorageEvent('storage', {
  102. key: '_pageRefreshNotify',
  103. newValue: JSON.stringify(refreshData)
  104. }));
  105. console.log('📢 通知父页面刷新');
  106. } catch (error) {
  107. console.error('❌ 通知父页面刷新失败:', error);
  108. }
  109. },
  110. /**
  111. * 监听页面刷新通知
  112. * @param {function} callback - 刷新回调函数
  113. */
  114. onRefreshNotify(callback) {
  115. if (typeof callback !== 'function') {
  116. console.warn('刷新回调必须是函数');
  117. return;
  118. }
  119. // 监听localStorage变化
  120. const handleStorageChange = (event) => {
  121. if (event.key === '_pageRefreshNotify' && event.newValue) {
  122. try {
  123. const refreshData = JSON.parse(event.newValue);
  124. console.log('📢 收到页面刷新通知:', refreshData);
  125. // 执行刷新回调
  126. callback(refreshData);
  127. // 清除通知
  128. localStorage.removeItem('_pageRefreshNotify');
  129. } catch (error) {
  130. console.error('❌ 处理刷新通知失败:', error);
  131. }
  132. }
  133. };
  134. window.addEventListener('storage', handleStorageChange);
  135. // 返回清理函数
  136. return () => {
  137. window.removeEventListener('storage', handleStorageChange);
  138. };
  139. },
  140. /**
  141. * 刷新当前页面数据
  142. * @param {function} refreshCallback - 刷新数据的回调函数
  143. */
  144. refreshCurrentPage(refreshCallback) {
  145. if (typeof refreshCallback === 'function') {
  146. console.log('🔄 刷新当前页面数据');
  147. refreshCallback();
  148. } else {
  149. // 默认刷新整个页面
  150. window.location.reload();
  151. }
  152. },
  153. /**
  154. * 获取URL参数
  155. * @param {string} key - 参数名,不传则返回所有参数
  156. * @returns {string|object} 参数值或参数对象
  157. */
  158. getUrlParam(key) {
  159. const urlParams = new URLSearchParams(window.location.search);
  160. if (key) {
  161. const value = urlParams.get(key);
  162. return value ? decodeURIComponent(value) : null;
  163. }
  164. // 返回所有参数
  165. const params = {};
  166. for (const [paramKey, paramValue] of urlParams) {
  167. params[paramKey] = decodeURIComponent(paramValue);
  168. }
  169. return params;
  170. }
  171. };
  172. // 导出到全局
  173. window.NavigationManager = NavigationManager;
  174. // 兼容性:也导出为全局函数
  175. window.goTo = NavigationManager.goTo.bind(NavigationManager);
  176. window.goBack = NavigationManager.goBack.bind(NavigationManager);
  177. window.getUrlParam = NavigationManager.getUrlParam.bind(NavigationManager);
  178. console.log('✅ H5页面导航工具加载完成');