Merge remote-tracking branch 'origin/feature_疗休养模块UI优化' into release_20260831

src/main/resources/views/layouts/platform_h5.html

@@ -256,6 +256,7 @@
                 })
                 $(document).on("pjax:send", function () {
                     window.h5HistoryLayerManager.reset()
+                    showH5PageSkeleton()
                     NProgress.start()
                     window.customStyleList = document.querySelectorAll('style[id^="style-"]')
                 })
@@ -270,6 +271,7 @@
                         window.customStyleList = null
                     }
                     NProgress.done()
+                    hideH5PageSkeleton()
                     toggleShowBar()
                 })
 
@@ -281,6 +283,13 @@
         })()
 
         function pjaxReplace(url, data = null) {
+            showH5PageSkeleton(url)
+            // 疗休养报名页面使用独立 H5 布局，其中包含图片懒加载等专用初始化逻辑。
+            // 禁止通过公共 PJAX 只替换页面片段，否则专用布局脚本不会执行，首次进入会出现图片懒加载指令未注册。
+            if (url && url.indexOf("/platform/tour/signup/h5") === 0) {
+                window.location.href = url
+                return
+            }
             return $.pjax({
                 url: url,
                 container: "#container",
@@ -293,6 +302,24 @@
             })
         }
 
+        // 仅在疗休养 H5 页面切换期间显示骨架，避免影响共用布局下的其他业务模块。
+        const showH5PageSkeleton = (targetUrl) => {
+            const pageUrl = targetUrl || window.location.pathname
+            if (pageUrl.indexOf("/platform/tour/") !== 0) return
+            const skeleton = document.getElementById("tour-page-transition-skeleton")
+            if (skeleton) skeleton.classList.add("is-visible")
+        }
+
+        const hideH5PageSkeleton = () => {
+            const skeleton = document.getElementById("tour-page-transition-skeleton")
+            if (skeleton) skeleton.classList.remove("is-visible")
+        }
+
+        // 从疗休养完整页面返回公共 H5 页面时可能命中 BFCache，需要清除离开前保留的骨架状态。
+        window.addEventListener("pageshow", () => {
+            hideH5PageSkeleton()
+        })
+
         let h5GlobalLoading = null
         let h5PendingRequestCount = 0
 
@@ -362,6 +389,7 @@
         }
 
         function historyBack(func) {
+            showH5PageSkeleton()
             if (window.history.length > 1) {
                 window.history.back()
             } else {
@@ -607,6 +635,8 @@
         Vue.prototype.$axios = commonUtil.axiosService()
         Vue.prototype.$downLoad = commonUtil.downLoadService.bind(commonUtil)
         Vue.prototype.$pjaxReplace = pjaxReplace
+        Vue.prototype.$showH5PageSkeleton = showH5PageSkeleton
+        Vue.prototype.$hideH5PageSkeleton = hideH5PageSkeleton
     </script>
 
     <script nonce="${cspNonce!}">
@@ -652,9 +682,41 @@
         .h5-voice-menu .voice-menu-text {
             display: none;
         }
+
+        .tour-page-transition-skeleton {
+            position: fixed;
+            inset: 0;
+            z-index: 30000;
+            display: none;
+            padding: 58px 12px 20px;
+            background: #f3f7fd;
+            box-sizing: border-box;
+        }
+        .tour-page-transition-skeleton.is-visible { display: block; }
+        .tour-page-transition-skeleton__nav,
+        .tour-page-transition-skeleton__hero,
+        .tour-page-transition-skeleton__line,
+        .tour-page-transition-skeleton__card {
+            background: linear-gradient(90deg, #edf2f8 25%, #f8fbff 37%, #edf2f8 63%);
+            background-size: 400% 100%;
+            animation: tour-page-skeleton-loading 1.35s ease infinite;
+        }
+        .tour-page-transition-skeleton__nav { position: absolute; top: 0; left: 0; right: 0; height: 46px; background-color: #fff; }
+        .tour-page-transition-skeleton__hero { height: 154px; border-radius: 14px; }
+        .tour-page-transition-skeleton__line { width: 42%; height: 18px; margin: 18px 2px 12px; border-radius: 9px; }
+        .tour-page-transition-skeleton__card { height: 126px; margin-top: 12px; border-radius: 14px; }
+        @keyframes tour-page-skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
     </style>
 </head>
 <body>
+<div id="tour-page-transition-skeleton" class="tour-page-transition-skeleton" aria-hidden="true">
+    <div class="tour-page-transition-skeleton__nav"></div>
+    <div class="tour-page-transition-skeleton__hero"></div>
+    <div class="tour-page-transition-skeleton__line"></div>
+    <div class="tour-page-transition-skeleton__card"></div>
+    <div class="tour-page-transition-skeleton__card"></div>
+    <div class="tour-page-transition-skeleton__card"></div>
+</div>
 <div class="main-page page-showtabbar">
     <div class="page-wrapper">
         <div id="container">${layoutContent}</div>