navigation.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  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 rawDestPage = button.function?.dest || button.dest;
  50. // 功能说明:后端返回 dest(如 objInp)时自动补齐 mp_ 前缀,统一跳转到移动端页面 by xu 2026-02-28
  51. const destPage = (() => {
  52. const target = String(rawDestPage || '').trim();
  53. if (!target) return '';
  54. if (target.startsWith('mp_')) return target;
  55. return `mp_${target}`;
  56. })();
  57. if (!destPage) {
  58. console.warn('按钮没有配置跳转页面:', button);
  59. return false;
  60. }
  61. const params = {
  62. dest: destPage,
  63. title: button.function?.desc || button.function?.title || button.desc || button.title || button.buttonName || button.name || '',
  64. service: button.function?.servName || button.servName || button.service || ''
  65. };
  66. // 跳转页面,标记需要刷新
  67. this.goTo(destPage, params, { needRefresh: true });
  68. return true;
  69. },
  70. /**
  71. * 返回上一页
  72. * @param {object} options - 返回选项
  73. */
  74. goBack(options = {}) {
  75. try {
  76. // 检查是否需要刷新父页面
  77. const urlParams = new URLSearchParams(window.location.search);
  78. const needRefresh = urlParams.get('_needRefresh') === '1';
  79. if (needRefresh && options.refreshParent !== false) {
  80. // 通知父页面刷新
  81. this.notifyParentRefresh();
  82. }
  83. // 返回上一页
  84. if (window.history.length > 1) {
  85. window.history.back();
  86. } else {
  87. NavigationManager.goBack()
  88. }
  89. } catch (error) {
  90. console.error('❌ 页面返回失败:', error);
  91. if (typeof showToast !== 'undefined') {
  92. showToast('页面返回失败', 'error');
  93. }
  94. }
  95. },
  96. /**
  97. * 通知父页面刷新(通过localStorage)
  98. */
  99. notifyParentRefresh() {
  100. try {
  101. const refreshData = {
  102. timestamp: Date.now(),
  103. action: 'refresh',
  104. source: window.location.pathname
  105. };
  106. localStorage.setItem('_pageRefreshNotify', JSON.stringify(refreshData));
  107. // 触发storage事件
  108. window.dispatchEvent(new StorageEvent('storage', {
  109. key: '_pageRefreshNotify',
  110. newValue: JSON.stringify(refreshData)
  111. }));
  112. console.log('📢 通知父页面刷新');
  113. } catch (error) {
  114. console.error('❌ 通知父页面刷新失败:', error);
  115. }
  116. },
  117. /**
  118. * 监听页面刷新通知
  119. * @param {function} callback - 刷新回调函数
  120. */
  121. onRefreshNotify(callback) {
  122. if (typeof callback !== 'function') {
  123. console.warn('刷新回调必须是函数');
  124. return;
  125. }
  126. // 监听localStorage变化
  127. const handleStorageChange = (event) => {
  128. if (event.key === '_pageRefreshNotify' && event.newValue) {
  129. try {
  130. const refreshData = JSON.parse(event.newValue);
  131. console.log('📢 收到页面刷新通知:', refreshData);
  132. // 执行刷新回调
  133. callback(refreshData);
  134. // 清除通知
  135. localStorage.removeItem('_pageRefreshNotify');
  136. } catch (error) {
  137. console.error('❌ 处理刷新通知失败:', error);
  138. }
  139. }
  140. };
  141. window.addEventListener('storage', handleStorageChange);
  142. // 返回清理函数
  143. return () => {
  144. window.removeEventListener('storage', handleStorageChange);
  145. };
  146. },
  147. /**
  148. * 刷新当前页面数据
  149. * @param {function} refreshCallback - 刷新数据的回调函数
  150. */
  151. refreshCurrentPage(refreshCallback) {
  152. if (typeof refreshCallback === 'function') {
  153. console.log('🔄 刷新当前页面数据');
  154. refreshCallback();
  155. } else {
  156. // 默认刷新整个页面
  157. window.location.reload();
  158. }
  159. },
  160. /**
  161. * 获取URL参数
  162. * @param {string} key - 参数名,不传则返回所有参数
  163. * @returns {string|object} 参数值或参数对象
  164. */
  165. getUrlParam(key) {
  166. const urlParams = new URLSearchParams(window.location.search);
  167. if (key) {
  168. const value = urlParams.get(key);
  169. return value ? decodeURIComponent(value) : null;
  170. }
  171. // 返回所有参数
  172. const params = {};
  173. for (const [paramKey, paramValue] of urlParams) {
  174. params[paramKey] = decodeURIComponent(paramValue);
  175. }
  176. return params;
  177. }
  178. };
  179. // 导出到全局
  180. window.NavigationManager = NavigationManager;
  181. // 兼容性:也导出为全局函数
  182. window.goTo = NavigationManager.goTo.bind(NavigationManager);
  183. window.goBack = NavigationManager.goBack.bind(NavigationManager);
  184. window.getUrlParam = NavigationManager.getUrlParam.bind(NavigationManager);
  185. console.log('✅ H5页面导航工具加载完成');