幸福工惠整改

2026-10-14 15:23:42 +08:00
parent 1be063f818
commit 3e7fc55a40
3 changed files with 100 additions and 75 deletions
@@ -30,13 +30,6 @@ public class H5InclusiveBenefitController {
    public void index() {
    }

-    /** 打开详情页，页面通过查询参数 id 请求具体内容。 */
-    @At("/detail")
-    @Ok("beetl:/platform/zhghh5/inclusive/detail.html")
-    @SaCheckPermission("h5.inclusive.benefit")
-    public void detail() {
-    }
-
    /**
     * @param pageForm 必填 pageNumber、pageSize；tagType 为标签编码，可选 year、title
     * @return Result，data 为已发布且未删除内容的分页对象，含 list、totalCount、pageNo、pageSize
@@ -1,66 +0,0 @@
-<!--#
-layout("/layouts/platform_h5.html"){
-#-->
-<div class="inclusive-detail-page" id="app" v-cloak>
-    <van-nav-bar @click-left="back" left-arrow left-text="返回" placeholder title="幸福工荟详情"></van-nav-bar>
-    <van-image :src="previewUrl(detail.cover)" fit="cover" height="220" v-if="detail.cover" width="100%"></van-image>
-    <van-cell-group v-if="detail.id">
-        <van-cell :title="detail.title"></van-cell>
-        <van-cell :value="detail.tagTypeName || '幸福工荟'" title="标签"></van-cell>
-        <van-cell :value="formatDate(detail.publishTime || detail.createdAt)" title="发布时间"></van-cell>
-        <van-cell :label="detail.summary" title="摘要"></van-cell>
-    </van-cell-group>
-    <van-empty v-if="!formLoading && !detail.id" description="内容不存在或已下架"></van-empty>
-    <div class="inclusive-content" v-html="detail.content"></div>
-    <div class="inclusive-footer" v-if="hasLink"><van-button @click="openLink" block type="primary">查看活动页面</van-button></div>
-</div>
-<style>
-    .inclusive-content { padding: 16px; line-height: 1.8; word-break: break-word; }
-    .inclusive-content img { height: auto; max-width: 100%; }
-    .inclusive-footer { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
-</style>
-<script nonce="${cspNonce!}">
-    new Vue({
-        el: "#app",
-        data() { return {id: "", detail: {}, formLoading: false} },
-        computed: {
-            hasLink() { return !!(this.detail.linkUrl && this.detail.linkUrl.trim()) }
-        },
-        methods: {
-            back() { this.historyBack() },
-            previewUrl(cover) { return cover || "" },
-            formatDate(value) { return value ? moment(value).format("YYYY-MM-DD") : "" },
-            // id 来自地址参数；data 为已发布详情，无效或已下架时清空旧内容并展示提示。
-            findOne() {
-                if (!this.id) return
-                this.$set(this, "formLoading", true)
-                this.$axios.post("/platform/h5/inclusive/findOne", {id: this.id}).then((res) => {
-                    this.$set(this, "detail", res.code === 0 && res.data ? res.data : {})
-                    if (res.code !== 0 || !res.data) this.$toast(res.msg || "未查询到活动详情")
-                }).finally(() => {
-                    this.$set(this, "formLoading", false)
-                }).catch(() => {
-                    // 包括下架、无权限和网络异常；错误提示由公共 Axios 拦截器统一展示。
-                    this.$set(this, "detail", {})
-                })
-            },
-            // 外链沿用原模块配置；如公共组件存在弹层，先清理历史再离开当前页面。
-            openLink() {
-                if (!this.hasLink) return
-                const navigate = () => { window.location.href = this.detail.linkUrl.trim() }
-                if (window.h5HistoryLayerManager) {
-                    window.h5HistoryLayerManager.closeAll(navigate)
-                } else {
-                    navigate()
-                }
-            }
-        },
-        created() {
-            this.$set(this, "id", GetQueryString("id"))
-            this.findOne()
-        }
-    })
-</script>
-<!--#
-}
-#-->
@@ -24,6 +24,12 @@ layout("/layouts/platform_h5.html"){
    .inclusive-arrow { color: #8a96a8; position: absolute; right: 14px; bottom: 16px; font-size: 22px; }
    .inclusive-empty { min-height: 320px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #909399; font-size: 14px; background: transparent; }
    .inclusive-empty-icon { width: 120px; height: 120px; margin-bottom: 10px; opacity: .56; }
+    .inclusive-detail-popup { width: 100%; height: 100%; background: #fff; }
+    .inclusive-detail-popup .van-nav-bar { position: sticky; top: 0; z-index: 1; }
+    .inclusive-detail-loading { padding: 32px; text-align: center; }
+    .inclusive-content { padding: 16px; line-height: 1.8; word-break: break-word; }
+    .inclusive-content img { height: auto; max-width: 100%; }
+    .inclusive-footer { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
 </style>
 <div class="inclusive-page" id="app" v-cloak>
    <van-nav-bar @click-left="back" fixed left-arrow left-text="返回" placeholder title="幸福工荟"></van-nav-bar>
@@ -55,6 +61,23 @@ layout("/layouts/platform_h5.html"){
            <div>暂无数据</div>
        </div>
    </div>
+    <!-- 详情在当前列表内从右侧滑入，关闭后保留筛选、分页和列表滚动位置。 -->
+    <van-popup :value="detailVisible" position="right" class="inclusive-detail-popup" :close-on-click-overlay="false" :close-on-popstate="false">
+        <van-nav-bar @click-left="closeDetail" left-arrow left-text="返回" title="幸福工荟详情"></van-nav-bar>
+        <div class="inclusive-detail-loading" v-if="formLoading"><van-loading>加载中...</van-loading></div>
+        <template v-else>
+            <van-image :src="previewUrl(detail.cover)" fit="cover" height="220" v-if="detail.cover" width="100%"></van-image>
+            <van-cell-group v-if="detail.id">
+                <van-cell :title="detail.title"></van-cell>
+                <van-cell :value="detail.tagTypeName || '幸福工荟'" title="标签"></van-cell>
+                <van-cell :value="formatDate(detail.publishTime || detail.createdAt)" title="发布时间"></van-cell>
+                <van-cell :label="detail.summary" title="摘要"></van-cell>
+            </van-cell-group>
+            <van-empty v-if="!detail.id" description="内容不存在或已下架"></van-empty>
+            <div class="inclusive-content" v-html="detail.content"></div>
+            <div class="inclusive-footer" v-if="hasLink"><van-button @click="openLink" block type="primary">查看活动页面</van-button></div>
+        </template>
+    </van-popup>
 </div>
 <script nonce="${cspNonce!}">
    new Vue({
@@ -63,13 +86,24 @@ layout("/layouts/platform_h5.html"){
            return {
                activeTag: "", tagOptions: [], tableData: [], loading: false, refreshing: false,
                finished: false, loadError: false, requesting: false, loadSequence: 0,
+                detailVisible: false, detailClosing: false, detail: {}, formLoading: false,
+                detailSequence: 0, popupHistoryToken: "",
                pageForm: {pageNumber: 1, pageSize: 6, totalCount: 0, tagType: ""}
            }
        },
+        computed: {
+            hasLink() { return !!(this.detail.linkUrl && this.detail.linkUrl.trim()) }
+        },
        methods: {
            previewUrl(cover) { return cover || "" },
            formatDate(value) { return value ? moment(value).format("YYYY-MM-DD") : "" },
-            back() { this.historyBack() },
+            back() {
+                if (this.detailVisible) {
+                    this.closeDetail()
+                    return
+                }
+                this.historyBack()
+            },
            // 无参数；data 数组中的 text/value 分别对应标签名称和标签编码。
            getTagOptions() {
                this.$axios.post("/platform/h5/inclusive/tagOptions", {}).then((res) => {
@@ -133,16 +167,80 @@ layout("/layouts/platform_h5.html"){
                this.$set(this, "refreshing", true)
                this.pageData()
            },
+            // item 为点击的列表记录，id 为内容主键；打开弹框时只增加当前地址的历史记录。
            openDetail(item) {
-                this.$pjaxReplace("/platform/h5/inclusive/detail?id=" + encodeURIComponent(item.id))
+                if (!item || !item.id || this.detailVisible) return
+                this.$set(this, "detail", {})
+                this.$set(this, "detailVisible", true)
+                window.h5PopupHistory.open(this.popupHistoryToken, "inclusiveDetail")
+                this.findOne(item.id)
+            },
+            // id 传内容主键；接口返回 Result，data 为已发布详情对象，含正文、封面、标签和活动链接。
+            findOne(id) {
+                this.$set(this, "detailSequence", this.detailSequence + 1)
+                const sequence = this.detailSequence
+                this.$set(this, "formLoading", true)
+                this.$axios.post("/platform/h5/inclusive/findOne", {id: id}).then((res) => {
+                    // 关闭或重新打开详情后，旧请求不得覆盖当前弹框内容。
+                    if (sequence !== this.detailSequence) return
+                    this.$set(this, "detail", res.code === 0 && res.data ? res.data : {})
+                    if (res.code !== 0 || !res.data) this.$toast(res.msg || "未查询到活动详情")
+                }).catch(() => {
+                    // 网络及权限错误由公共拦截器提示；仅清空当前请求对应的详情。
+                    if (sequence === this.detailSequence) this.$set(this, "detail", {})
+                }).finally(() => {
+                    if (sequence === this.detailSequence) this.$set(this, "formLoading", false)
+                })
+            },
+            // 返回按钮交给全局历史栈处理；防止连续点击触发多次 history.back。
+            closeDetail() {
+                if (!this.detailVisible || this.detailClosing) return
+                this.$set(this, "detailClosing", true)
+                if (!window.h5PopupHistory.close(this.popupHistoryToken, "inclusiveDetail")) {
+                    this.closeDetailState()
+                }
+            },
+            // 历史回退回调只同步弹框状态，使在途请求失效，不再额外回退历史。
+            closeDetailState() {
+                this.$set(this, "detailVisible", false)
+                this.$set(this, "detailClosing", false)
+                this.$set(this, "detailSequence", this.detailSequence + 1)
+                this.$set(this, "formLoading", false)
+            },
+            // 先保存目标地址，再清理当前页面弹框历史，避免外链返回后残留空弹框历史。
+            openLink() {
+                if (!this.hasLink || this.detailClosing) return
+                const url = this.detail.linkUrl.trim()
+                this.$set(this, "detailClosing", true)
+                window.h5PopupHistory.clear(this.popupHistoryToken).then(() => {
+                    const navigate = () => { window.location.href = url }
+                    if (window.h5HistoryLayerManager) {
+                        window.h5HistoryLayerManager.closeAll(navigate)
+                    } else {
+                        navigate()
+                    }
+                })
+            },
+            // PJAX 直接替换 DOM 不会自动销毁 Vue，主动触发生命周期以注销页面回调。
+            destroyPage() {
+                this.$destroy()
            }
        },
        created() {
+            this.$set(this, "popupHistoryToken", window.h5PopupHistory.register((popupKey) => {
+                if (popupKey === "inclusiveDetail") this.closeDetailState()
+            }))
            this.getTagOptions()
            this.pageData()
        },
+        mounted() {
+            $(document).on("pjax:beforeReplace.inclusiveDetail", this.destroyPage)
+        },
        beforeDestroy() {
            this.$set(this, "loadSequence", this.loadSequence + 1)
+            this.$set(this, "detailSequence", this.detailSequence + 1)
+            window.h5PopupHistory.unregister(this.popupHistoryToken)
+            $(document).off("pjax:beforeReplace.inclusiveDetail", this.destroyPage)
        }
    })
 </script>