From c085e8370376cee1b144bcf0dd26837a2b6ff842 Mon Sep 17 00:00:00 2001
From: hongqiwei <hqw123456>
Date: Tue, 9 Jun 2026 15:14:51 +0800
Subject: [PATCH] 1

---
 .../zhghh5/sys/home/featuredActivity.html     | 309 ++++++++++++++++++
 .../zhghh5/sys/home/festivalBenefit.html      | 309 ++++++++++++++++++
 2 files changed, 618 insertions(+)
 create mode 100644 src/main/resources/views/platform/zhghh5/sys/home/featuredActivity.html
 create mode 100644 src/main/resources/views/platform/zhghh5/sys/home/festivalBenefit.html

diff --git a/src/main/resources/views/platform/zhghh5/sys/home/featuredActivity.html b/src/main/resources/views/platform/zhghh5/sys/home/featuredActivity.html
new file mode 100644
index 0000000..5560e67
--- /dev/null
+++ b/src/main/resources/views/platform/zhghh5/sys/home/featuredActivity.html
@@ -0,0 +1,309 @@
+<!--#
+layout("/layouts/platform_h5.html"){
+#-->
+
+<div id="app" v-cloak>
+    <div class="featured-page">
+        <van-nav-bar
+                title="精彩活动"
+                left-text="返回"
+                left-arrow
+                fixed
+                placeholder
+                @click-left="goBack"
+        ></van-nav-bar>
+
+        <div class="featured-banner">
+            <img :src="topImage" alt="">
+            <div class="featured-banner__shade"></div>
+            <div class="featured-banner__text">
+                <div class="featured-banner__title">精彩活动</div>
+                <div class="featured-banner__sub">发现更多校园工会活动</div>
+            </div>
+        </div>
+
+        <div class="featured-list">
+            <template v-if="activityOptions && activityOptions.length > 0">
+                <div v-for="item in activityOptions" :key="item.id" class="act-item" @click="enterAct(item)">
+                    <van-tag class="act-item-wrapper-tag" v-if="$moment().unix() > $moment(item.endDate).unix()">
+                        已结束
+                    </van-tag>
+
+                    <van-tag class="act-item-wrapper-tag" type="success"
+                             v-else-if="$moment().unix() > $moment(item.startDate).unix() && $moment().unix() < $moment(item.endDate).unix()">
+                        进行中
+                    </van-tag>
+
+                    <van-tag class="act-item-wrapper-tag" type="success" v-else-if="$moment().unix() < $moment(item.startDate).unix()">
+                        即将开始
+                    </van-tag>
+
+                    <div class="act-item-cover">
+                        <van-image v-if="item.cover" width="120" height="84" :src="item.cover"></van-image>
+                    </div>
+                    <div class="act-item-wrapper">
+                        <div class="content-title">{{ item.name }}</div>
+                        <div class="content-text">
+                            <div>开始时间：{{ $moment(item.startDate).format('MM-DD HH:mm') }}</div>
+                            <div class="mt5">结束时间：{{ $moment(item.endDate).format('MM-DD HH:mm') }}</div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <van-empty v-if="!activityOptions || activityOptions.length === 0" description="暂无精彩活动"></van-empty>
+        </div>
+    </div>
+</div>
+
+<script nonce="${cspNonce!}">
+    new Vue({
+        el: "#app",
+        data: function () {
+            return {
+                topImage: "/assets/mobile/img/home/home1.png",
+                activityOptions: []
+            }
+        },
+        methods: {
+            // 顶部导航返回入口，统一复用返回首页逻辑。
+            goBack: function () {
+                this.returnHome()
+            },
+            // 返回移动端首页并恢复首页 tab，PJAX 不可用时退回整页跳转。
+            returnHome: function () {
+                if (window.store && typeof window.store.commit === "function") {
+                    window.store.commit("setActiveTarBar", "home")
+                }
+                if (!window.$ || !$.support || !$.support.pjax) {
+                    window.location.replace("/platform/h5/home")
+                    return
+                }
+                var fallbackTimer = window.setTimeout(function () {
+                    window.location.replace("/platform/h5/home")
+                }, 1200)
+                $(document).one("pjax:complete", function () {
+                    window.clearTimeout(fallbackTimer)
+                })
+                $(document).one("pjax:error pjax:timeout", function () {
+                    window.clearTimeout(fallbackTimer)
+                    window.location.replace("/platform/h5/home")
+                })
+                $.pjax({
+                    url: "/platform/h5/home",
+                    container: "#container",
+                    fragment: "#container",
+                    push: false,
+                    replace: true,
+                    timeout: 8000
+                })
+            },
+            // 加载精彩活动页顶部图片，未配置时使用默认首页图兜底。
+            loadTopImage: function () {
+                var self = this
+                this.$axios.post("/open/common/getConfigKey", { key: "AppFeaturedActivityImg" }).then(function (res) {
+                    if (res.code === 0 && res.data) {
+                        self.topImage = String(res.data).split(",")[0]
+                    }
+                })
+            },
+            // 查询首页活动并排除福利类活动，形成精彩活动列表。
+            listActivity: function () {
+                var self = this
+                this.$axios.post("/platform/home/listHomeActivity").then(function (resp) {
+                    if (resp.code === 0) {
+                        self.activityOptions = (resp.data || []).filter(function (item) {
+                            return !self.isWelfareItem(item)
+                        })
+                    }
+                })
+            },
+            // 根据活动地址识别福利类活动，用于与节日福利页拆分展示。
+            isWelfareItem: function (item) {
+                var url = ((item && item.url) || "") + "," + ((item && item.h5Url) || "")
+                return url.indexOf("/welfare/") > -1
+            },
+            // 点击活动时先校验开始时间，未开始活动只提示不跳转。
+            enterAct: function (item) {
+                if (this.$moment().unix() < this.$moment(item.startDate).unix()) {
+                    this.$toast("活动即将开始")
+                    return
+                }
+                this.$pjaxReplace(item.h5Url)
+            }
+        },
+        created: function () {
+            this.loadTopImage()
+            this.listActivity()
+        },
+        style: /*language=CSS*/ `
+            body {
+                background-color: #f4f7fb;
+            }
+
+            .featured-page {
+                min-height: 100vh;
+                background-color: #f4f7fb;
+                padding-bottom: 18px;
+                box-sizing: border-box;
+            }
+
+            .featured-page /deep/ .van-nav-bar {
+                background-color: #fff;
+            }
+
+            .featured-page /deep/ .van-nav-bar__title {
+                color: #1f2937;
+                font-size: 17px;
+                font-weight: 600;
+            }
+
+            .featured-page /deep/ .van-nav-bar .van-icon,
+            .featured-page /deep/ .van-nav-bar__text {
+                color: #1989fa;
+            }
+
+            .featured-banner {
+                position: relative;
+                height: 140px;
+                margin: 12px 12px 10px;
+                border-radius: 12px;
+                overflow: hidden;
+                background-color: #e9eef6;
+                box-shadow: 0 8px 22px rgba(31, 41, 55, .1);
+            }
+
+            .featured-banner img {
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            .featured-banner__shade {
+                position: absolute;
+                inset: 0;
+                background: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .08));
+            }
+
+            .featured-banner__text {
+                position: absolute;
+                left: 18px;
+                bottom: 18px;
+                color: #fff;
+                text-shadow: 0 2px 10px rgba(0, 0, 0, .26);
+            }
+
+            .featured-banner__title {
+                font-size: 24px;
+                line-height: 30px;
+                font-weight: 700;
+            }
+
+            .featured-banner__sub {
+                margin-top: 5px;
+                font-size: 13px;
+                line-height: 18px;
+                opacity: .92;
+            }
+
+            .featured-list {
+                margin: 0 10px;
+                background-color: #fff;
+                border-radius: 10px;
+                padding: 8px 0;
+                overflow: hidden;
+            }
+
+            .act-item {
+                position: relative;
+                display: flex;
+                padding: 10px 12px;
+                background-color: #fff;
+                box-sizing: border-box;
+            }
+
+            .act-item + .act-item {
+                border-top: 1px solid #f0f2f5;
+            }
+
+            .featured-list /deep/ .act-item-wrapper-tag {
+                position: absolute !important;
+                top: 10px !important;
+                left: 12px !important;
+                z-index: 2;
+                width: auto !important;
+                min-width: 42px;
+                height: 20px !important;
+                flex: none !important;
+                padding: 0 6px !important;
+                margin: 0 !important;
+                border: 0 !important;
+                border-radius: 2px !important;
+                display: inline-flex !important;
+                align-items: center;
+                justify-content: center;
+                color: #fff !important;
+                background-color: #1f73b7 !important;
+                font-size: 12px;
+                line-height: 20px;
+                white-space: nowrap !important;
+                text-align: center;
+            }
+
+            .featured-list /deep/ .act-item-wrapper-tag.van-tag--success {
+                background-color: #1f73b7 !important;
+            }
+
+            .act-item-cover {
+                width: 120px;
+                height: 84px;
+                flex: 0 0 120px;
+                overflow: hidden;
+                border-radius: 4px;
+                background-color: #f2f3f5;
+            }
+
+            .act-item-cover /deep/ .van-image,
+            .act-item-cover /deep/ img {
+                display: block;
+                width: 120px;
+                height: 84px;
+                object-fit: cover;
+            }
+
+            .act-item-wrapper {
+                min-width: 0;
+                flex: 1;
+                padding-left: 12px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+            }
+
+            .content-title {
+                color: #111827;
+                font-size: 15px;
+                line-height: 21px;
+                font-weight: 600;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+
+            .content-text {
+                margin-top: 9px;
+                color: #6b7280;
+                font-size: 12px;
+                line-height: 17px;
+            }
+
+            .mt5 {
+                margin-top: 5px;
+            }
+        `
+    })
+</script>
+<!--#
+}
+#-->
diff --git a/src/main/resources/views/platform/zhghh5/sys/home/festivalBenefit.html b/src/main/resources/views/platform/zhghh5/sys/home/festivalBenefit.html
new file mode 100644
index 0000000..f271564
--- /dev/null
+++ b/src/main/resources/views/platform/zhghh5/sys/home/festivalBenefit.html
@@ -0,0 +1,309 @@
+<!--#
+layout("/layouts/platform_h5.html"){
+#-->
+
+<div id="app" v-cloak>
+    <div class="festival-page">
+        <van-nav-bar
+                title="节日福利"
+                left-text="返回"
+                left-arrow
+                fixed
+                placeholder
+                @click-left="goBack"
+        ></van-nav-bar>
+
+        <div class="festival-banner">
+            <img :src="topImage" alt="">
+            <div class="festival-banner__shade"></div>
+            <div class="festival-banner__text">
+                <div class="festival-banner__title">节日福利</div>
+                <div class="festival-banner__sub">查看可参与的节日福利活动</div>
+            </div>
+        </div>
+
+        <div class="festival-list">
+            <template v-if="activityOptions && activityOptions.length > 0">
+                <div v-for="item in activityOptions" :key="item.id" class="act-item" @click="enterAct(item)">
+                    <van-tag class="act-item-wrapper-tag" v-if="$moment().unix() > $moment(item.endDate).unix()">
+                        已结束
+                    </van-tag>
+
+                    <van-tag class="act-item-wrapper-tag" type="success"
+                             v-else-if="$moment().unix() > $moment(item.startDate).unix() && $moment().unix() < $moment(item.endDate).unix()">
+                        进行中
+                    </van-tag>
+
+                    <van-tag class="act-item-wrapper-tag" type="success" v-else-if="$moment().unix() < $moment(item.startDate).unix()">
+                        即将开始
+                    </van-tag>
+
+                    <div class="act-item-cover">
+                        <van-image v-if="item.cover" width="120" height="84" :src="item.cover"></van-image>
+                    </div>
+                    <div class="act-item-wrapper">
+                        <div class="content-title">{{ item.name }}</div>
+                        <div class="content-text">
+                            <div>开始时间：{{ $moment(item.startDate).format('MM-DD HH:mm') }}</div>
+                            <div class="mt5">结束时间：{{ $moment(item.endDate).format('MM-DD HH:mm') }}</div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <van-empty v-if="!activityOptions || activityOptions.length === 0" description="暂无节日福利"></van-empty>
+        </div>
+    </div>
+</div>
+
+<script nonce="${cspNonce!}">
+    new Vue({
+        el: "#app",
+        data: function () {
+            return {
+                topImage: "/assets/mobile/img/home/home2.png",
+                activityOptions: []
+            }
+        },
+        methods: {
+            // 顶部导航返回入口，统一复用返回首页逻辑。
+            goBack: function () {
+                this.returnHome()
+            },
+            // 返回移动端首页并恢复首页 tab，PJAX 不可用时退回整页跳转。
+            returnHome: function () {
+                if (window.store && typeof window.store.commit === "function") {
+                    window.store.commit("setActiveTarBar", "home")
+                }
+                if (!window.$ || !$.support || !$.support.pjax) {
+                    window.location.replace("/platform/h5/home")
+                    return
+                }
+                var fallbackTimer = window.setTimeout(function () {
+                    window.location.replace("/platform/h5/home")
+                }, 1200)
+                $(document).one("pjax:complete", function () {
+                    window.clearTimeout(fallbackTimer)
+                })
+                $(document).one("pjax:error pjax:timeout", function () {
+                    window.clearTimeout(fallbackTimer)
+                    window.location.replace("/platform/h5/home")
+                })
+                $.pjax({
+                    url: "/platform/h5/home",
+                    container: "#container",
+                    fragment: "#container",
+                    push: false,
+                    replace: true,
+                    timeout: 8000
+                })
+            },
+            // 加载节日福利页顶部图片，未配置时使用默认首页图兜底。
+            loadTopImage: function () {
+                var self = this
+                this.$axios.post("/open/common/getConfigKey", { key: "AppFestivalBenefitImg" }).then(function (res) {
+                    if (res.code === 0 && res.data) {
+                        self.topImage = String(res.data).split(",")[0]
+                    }
+                })
+            },
+            // 查询首页活动并仅保留福利类活动，形成节日福利列表。
+            listActivity: function () {
+                var self = this
+                this.$axios.post("/platform/home/listHomeActivity").then(function (resp) {
+                    if (resp.code === 0) {
+                        self.activityOptions = (resp.data || []).filter(function (item) {
+                            return self.isWelfareItem(item)
+                        })
+                    }
+                })
+            },
+            // 根据活动地址识别福利类活动，用于与精彩活动页拆分展示。
+            isWelfareItem: function (item) {
+                var url = ((item && item.url) || "") + "," + ((item && item.h5Url) || "")
+                return url.indexOf("/welfare/") > -1
+            },
+            // 点击活动时先校验开始时间，未开始活动只提示不跳转。
+            enterAct: function (item) {
+                if (this.$moment().unix() < this.$moment(item.startDate).unix()) {
+                    this.$toast("活动即将开始")
+                    return
+                }
+                this.$pjaxReplace(item.h5Url)
+            }
+        },
+        created: function () {
+            this.loadTopImage()
+            this.listActivity()
+        },
+        style: /*language=CSS*/ `
+            body {
+                background-color: #f4f7fb;
+            }
+
+            .festival-page {
+                min-height: 100vh;
+                background-color: #f4f7fb;
+                padding-bottom: 18px;
+                box-sizing: border-box;
+            }
+
+            .festival-page /deep/ .van-nav-bar {
+                background-color: #fff;
+            }
+
+            .festival-page /deep/ .van-nav-bar__title {
+                color: #1f2937;
+                font-size: 17px;
+                font-weight: 600;
+            }
+
+            .festival-page /deep/ .van-nav-bar .van-icon,
+            .festival-page /deep/ .van-nav-bar__text {
+                color: #1989fa;
+            }
+
+            .festival-banner {
+                position: relative;
+                height: 140px;
+                margin: 12px 12px 10px;
+                border-radius: 12px;
+                overflow: hidden;
+                background-color: #e9eef6;
+                box-shadow: 0 8px 22px rgba(31, 41, 55, .1);
+            }
+
+            .festival-banner img {
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            .festival-banner__shade {
+                position: absolute;
+                inset: 0;
+                background: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .08));
+            }
+
+            .festival-banner__text {
+                position: absolute;
+                left: 18px;
+                bottom: 18px;
+                color: #fff;
+                text-shadow: 0 2px 10px rgba(0, 0, 0, .26);
+            }
+
+            .festival-banner__title {
+                font-size: 24px;
+                line-height: 30px;
+                font-weight: 700;
+            }
+
+            .festival-banner__sub {
+                margin-top: 5px;
+                font-size: 13px;
+                line-height: 18px;
+                opacity: .92;
+            }
+
+            .festival-list {
+                margin: 0 10px;
+                background-color: #fff;
+                border-radius: 10px;
+                padding: 8px 0;
+                overflow: hidden;
+            }
+
+            .act-item {
+                position: relative;
+                display: flex;
+                padding: 10px 12px;
+                background-color: #fff;
+                box-sizing: border-box;
+            }
+
+            .act-item + .act-item {
+                border-top: 1px solid #f0f2f5;
+            }
+
+            .festival-list /deep/ .act-item-wrapper-tag {
+                position: absolute !important;
+                top: 10px !important;
+                left: 12px !important;
+                z-index: 2;
+                width: auto !important;
+                min-width: 42px;
+                height: 20px !important;
+                flex: none !important;
+                padding: 0 6px !important;
+                margin: 0 !important;
+                border: 0 !important;
+                border-radius: 2px !important;
+                display: inline-flex !important;
+                align-items: center;
+                justify-content: center;
+                color: #fff !important;
+                background-color: #1f73b7 !important;
+                font-size: 12px;
+                line-height: 20px;
+                white-space: nowrap !important;
+                text-align: center;
+            }
+
+            .festival-list /deep/ .act-item-wrapper-tag.van-tag--success {
+                background-color: #1f73b7 !important;
+            }
+
+            .act-item-cover {
+                width: 120px;
+                height: 84px;
+                flex: 0 0 120px;
+                overflow: hidden;
+                border-radius: 4px;
+                background-color: #f2f3f5;
+            }
+
+            .act-item-cover /deep/ .van-image,
+            .act-item-cover /deep/ img {
+                display: block;
+                width: 120px;
+                height: 84px;
+                object-fit: cover;
+            }
+
+            .act-item-wrapper {
+                min-width: 0;
+                flex: 1;
+                padding-left: 12px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+            }
+
+            .content-title {
+                color: #111827;
+                font-size: 15px;
+                line-height: 21px;
+                font-weight: 600;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+            }
+
+            .content-text {
+                margin-top: 9px;
+                color: #6b7280;
+                font-size: 12px;
+                line-height: 17px;
+            }
+
+            .mt5 {
+                margin-top: 5px;
+            }
+        `
+    })
+</script>
+<!--#
+}
+#-->