c-zhangr1/zhgh_zjipc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
hongqiwei
2026-06-09 15:14:51 +08:00
parent 82bbce229a
commit c085e83703
2 changed files with 618 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/views/platform/zhghh5/sys/home/featuredActivity.html
+309
View File
@@ -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>
<!--#
}
#-->
src/main/resources/views/platform/zhghh5/sys/home/festivalBenefit.html
+309
View File
@@ -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>
<!--#
}
#-->