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

change

Browse Source
This commit is contained in:
c-zhangr1
2026-08-26 15:10:25 +08:00
parent 06debfd1fc
commit fc9613197b
202 changed files with 28919 additions and 5551 deletions
Download Patch File Download Diff File Expand all files Collapse all files
target/classes/views/platform/zhghh5/welfare/select/index.html
+922 -673
View File
File diff suppressed because it is too large Load Diff
target/classes/views/platform/zhghh5/welfare/select/list.html
+564 -84
View File
@@ -3,101 +3,532 @@ layout("/layouts/platform_h5.html"){
#-->
<style>
/* 列表卡片样式 */
.wf-welfare-list {
padding: 10px;
body {
background-color: #f3f7fd;
}
.wf-welfare-card {
.welfare-list-page {
min-height: 100vh;
padding-bottom: calc(24px + env(safe-area-inset-bottom));
box-sizing: border-box;
background-color: #f3f7fd;
}
.welfare-list-page .van-nav-bar {
background-color: #fff;
}
.welfare-list-page .van-nav-bar__title {
color: #1f2937;
font-size: 16px;
font-weight: 600;
}
.welfare-list-page .van-nav-bar .van-icon,
.welfare-list-page .van-nav-bar__text {
color: #1989fa;
}
.welfare-list-content {
padding: 12px 12px 0;
}
.welfare-list-hero {
position: relative;
background: #fff;
border-radius: 8px;
margin-bottom: 15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
height: 134px;
overflow: hidden;
border-radius: 12px;
background-color: #247fe8;
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
}
/* 左右布局容器 */
.wf-card-layout {
.welfare-list-hero__image {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.welfare-list-hero__copy {
position: relative;
z-index: 1;
display: flex;
padding: 15px;
width: 64%;
height: 100%;
padding-left: 16px;
justify-content: center;
flex-direction: column;
color: #fff;
box-sizing: border-box;
background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
text-shadow: 0 2px 6px rgba(17, 86, 182, .18);
}
/* 左侧图片容器 */
.wf-card-img-container {
width: 120px;
height: 120px;
flex-shrink: 0;
margin-right: 15px;
.welfare-list-hero__title {
font-size: 25px;
line-height: 34px;
font-weight: 700;
letter-spacing: 1px;
}
/* 右侧信息容器 */
.wf-card-content {
flex: 1;
min-width: 0;
.welfare-list-hero__subtitle {
margin-top: 4px;
font-size: 13px;
line-height: 20px;
letter-spacing: .5px;
}
.welfare-list-filter-sticky {
padding: 10px 0 1px;
background-color: #f3f7fd;
}
.van-sticky--fixed .welfare-list-filter-sticky {
padding-right: 12px;
padding-left: 12px;
box-sizing: border-box;
}
.welfare-list-filter {
margin-bottom: 10px;
overflow: hidden;
border-radius: 12px;
background-color: #fff;
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
transition: border-radius .18s ease;
}
.welfare-list-search {
margin-bottom: 8px;
padding: 0;
background-color: transparent;
}
.welfare-list-search .van-search__content {
height: 42px;
align-items: center;
border-radius: 12px;
background-color: #fff;
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
}
.welfare-list-filter.is-open {
border-radius: 12px 12px 0 0;
}
.welfare-list-filter .van-dropdown-menu__bar {
height: 44px;
border-radius: inherit;
box-shadow: none;
}
.welfare-list-filter .van-dropdown-menu__title {
color: #263548;
font-size: 15px;
}
.welfare-list-filter .van-dropdown-menu__title--active,
.welfare-list-filter .van-dropdown-item__option--active,
.welfare-list-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
color: #1989fa;
}
.welfare-list-filter .van-dropdown-item__content {
width: calc(100% - 24px);
margin: 0 12px;
overflow: hidden;
border-radius: 0 0 12px 12px;
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
}
.welfare-list-filter .van-dropdown-item__option {
min-height: 48px;
padding: 0 16px;
color: #46566c;
font-size: 14px;
}
.welfare-list-cards {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
}
/* 标题样式 */
.wf-card-heading {
.welfare-list-card {
position: relative;
overflow: hidden;
border-radius: 12px;
background-color: #fff;
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
cursor: pointer;
}
.welfare-list-card__cover {
display: block;
width: 100%;
height: 150px;
background-color: #f7f9fc;
line-height: 0;
}
/* 福利封面统一高度并从中心覆盖显示，保证卡片整齐且不产生两侧留白。 */
.welfare-list-card__cover .van-image__img {
width: 100%;
height: 100% !important;
object-fit: cover !important;
object-position: center;
background-color: #f7f9fc;
}
.welfare-list-card__cover .van-image__loading,
.welfare-list-card__cover .van-image__error {
color: #9ba9bc;
background-color: #edf4fc;
font-size: 13px;
}
.welfare-list-card__body {
position: relative;
padding: 12px 14px 14px;
box-sizing: border-box;
}
.welfare-list-card__head {
display: flex;
min-width: 0;
align-items: center;
column-gap: 8px;
}
.welfare-list-card__title {
min-width: 0;
overflow: hidden;
flex: 1;
color: #202938;
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
color: #333;
line-height: 23px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.welfare-list-card__arrow {
margin-left: 2px;
flex: none;
color: #a9b5c6;
font-size: 17px;
}
.welfare-list-card__tags {
display: flex;
min-width: 0;
margin-top: 8px;
gap: 6px;
overflow: hidden;
}
.welfare-list-card__tag {
display: inline-flex;
max-width: 50%;
height: 22px;
padding: 0 7px;
align-items: center;
border-radius: 4px;
box-sizing: border-box;
color: #4f88cf;
background-color: #edf5ff;
font-size: 11px;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
}
/* 时间信息样式 */
.wf-time-row {
.welfare-list-card__info {
display: flex;
min-width: 0;
margin-top: 8px;
align-items: center;
color: #718198;
font-size: 12px;
line-height: 18px;
}
.welfare-list-card__info .van-icon {
margin-right: 5px;
flex: none;
color: #8da2bd;
font-size: 14px;
color: #666;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.wf-time-label {
color: #999;
display: inline-block;
width: 70px;
.welfare-list-card__info-label {
flex: none;
}
.welfare-list-card__info-value {
min-width: 0;
overflow: hidden;
color: #42546c;
text-overflow: ellipsis;
white-space: nowrap;
}
.welfare-list-card__status {
display: inline-flex;
min-width: 54px;
height: 25px;
padding: 0 10px;
flex: none;
align-items: center;
justify-content: center;
border-radius: 13px;
box-sizing: border-box;
font-size: 12px;
line-height: 25px;
}
.welfare-list-card__status .van-icon {
margin-right: 4px;
font-size: 14px;
}
.welfare-list-card__status.is-available {
color: #1989fa;
background-color: #eaf3ff;
}
.welfare-list-card__status.is-selected {
color: #2da66f;
background-color: #e9f8f0;
}
.welfare-list-card__status.is-upcoming {
color: #d78b20;
background-color: #fff5e4;
}
.welfare-list-card__status.is-ended {
color: #8793a5;
background-color: #f0f2f5;
}
.welfare-list-card__time {
display: flex;
min-width: 0;
margin-top: 8px;
align-items: center;
overflow: hidden;
color: #8491a6;
font-size: 12px;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
.welfare-list-card__time .van-icon {
margin-right: 5px;
flex: none;
color: #8da2bd;
font-size: 14px;
}
.welfare-list-card__footer {
display: flex;
min-height: 40px;
margin: 10px -14px -14px;
padding: 7px 14px;
align-items: center;
justify-content: space-between;
column-gap: 10px;
border-top: 1px solid #edf1f6;
background-color: #f8fbff;
box-sizing: border-box;
}
.welfare-list-card__selected-summary {
min-width: 0;
overflow: hidden;
flex: 1;
color: #6f7e92;
font-size: 11px;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
.welfare-list-page .van-list__finished-text,
.welfare-list-page .van-list__loading {
color: #9aa7b8;
font-size: 13px;
line-height: 44px;
}
.welfare-list-empty {
display: flex;
min-height: 300px;
padding: 28px 18px;
align-items: center;
justify-content: flex-start;
flex-direction: column;
box-sizing: border-box;
text-align: center;
}
/* 空状态插画按原始宽高比缩放，避免被 Vant 默认方形图片容器挤压变形。 */
.welfare-list-empty img {
display: block;
width: 86%;
max-width: 300px;
height: auto;
object-fit: contain;
}
.welfare-list-empty__title {
margin-top: -8px;
color: #50627a;
font-size: 15px;
line-height: 22px;
font-weight: 500;
}
.welfare-list-empty__hint {
margin-top: 6px;
color: #9aa7b8;
font-size: 12px;
line-height: 18px;
}
</style>
<div id="app" v-cloak>
<van-sticky>
<van-nav-bar @click-left="()=>this.$pjaxReplace('/platform/h5/home')" left-arrow left-text="返回" placeholder title="福利列表"></van-nav-bar>
<van-dropdown-menu>
<year-van-dropdown-item :num="10" v-model="pageForm.year" @change="doSearch"></year-van-dropdown-item>
</van-dropdown-menu>
</van-sticky>
<div class="welfare-list-page">
<van-nav-bar
title="福利列表"
left-arrow
left-text="返回"
fixed
placeholder
@click-left="goBack"
></van-nav-bar>
<div>
<van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0" v-model="loading">
<div class="wf-welfare-list">
<div class="wf-welfare-card" v-for="row in tableData" :key="row.id" @click="openChoose(row)">
<van-tag mark :type="row.isChoose?'success':''" style="position: absolute; left: 5px; top: 5px; z-index: 1">
{{row.isChoose?'已选择':'未选择'}}
</van-tag>
<div class="wf-card-layout">
<div class="wf-card-img-container">
<van-image :src="row.cover" fit="cover" width="100%" height="100%" radius="4"></van-image>
</div>
<div class="wf-card-content">
<div class="wf-card-heading">{{row.name}}</div>
<div class="wf-time-row">
<span class="wf-time-label">开始时间:</span>
{{$moment(row.choiceTimeStart).format('YYYY-MM-DD HH:mm')}}
</div>
<div class="wf-time-row">
<span class="wf-time-label">结束时间:</span>
{{$moment(row.choiceTimeEnd).format('YYYY-MM-DD HH:mm')}}
</div>
</div>
</div>
<div class="welfare-list-content">
<section class="welfare-list-hero">
<img
class="welfare-list-hero__image"
src="/assets/mobile/img/benefit/welfare-selection-hero-v2.png"
alt="暖心福利插画"
>
<div class="welfare-list-hero__copy">
<div class="welfare-list-hero__title">暖心福利</div>
<div class="welfare-list-hero__subtitle">精选好礼 · 乐享生活</div>
</div>
</section>
<van-sticky :offset-top="46">
<div class="welfare-list-filter-sticky">
<van-search
v-model="pageForm.name"
class="welfare-list-search"
shape="round"
placeholder="搜索福利名称"
@search="doSearch"
@clear="doSearch"
></van-search>
<van-dropdown-menu
class="welfare-list-filter"
:class="{'is-open': filterOpened}"
active-color="#1989fa"
>
<year-van-dropdown-item
:num="10"
v-model="pageForm.year"
@change="doSearch"
@open="filterOpened = true"
@close="filterOpened = false"
></year-van-dropdown-item>
</van-dropdown-menu>
</div>
</van-sticky>
<van-list
v-if="tableData.length > 0"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="pageData"
>
<div class="welfare-list-cards">
<article
v-for="row in tableData"
:key="row.id"
class="welfare-list-card"
@click="openChoose(row)"
>
<van-image
class="welfare-list-card__cover"
:src="row.cover"
:alt="row.name"
width="100%"
>
<template #loading>
<van-loading type="spinner" size="22"></van-loading>
</template>
<template #error>
<van-icon name="photo-o" size="34"></van-icon>
</template>
</van-image>
<div class="welfare-list-card__body">
<div class="welfare-list-card__head">
<div class="welfare-list-card__title">{{ row.name }}</div>
<van-icon class="welfare-list-card__arrow" name="arrow"></van-icon>
</div>
<div class="welfare-list-card__tags" v-if="row.festival || row.isCheckBox">
<span class="welfare-list-card__tag" v-if="row.festival">节日 {{ row.festival }}</span>
<span class="welfare-list-card__tag" v-if="row.isCheckBox">
{{ getChoiceModeText(row) }}
</span>
</div>
<div class="welfare-list-card__info" v-if="row.gift">
<van-icon name="gift-o"></van-icon>
<span class="welfare-list-card__info-label">福利：</span>
<span class="welfare-list-card__info-value">{{ row.gift }}</span>
</div>
<div class="welfare-list-card__time" v-if="row.choiceTimeStart && row.choiceTimeEnd">
<van-icon name="clock-o"></van-icon>
<span>选择时间：{{ $moment(row.choiceTimeStart).format('MM/DD HH:mm') }} - {{ $moment(row.choiceTimeEnd).format('MM/DD HH:mm') }}</span>
</div>
<div class="welfare-list-card__time" v-else>
<van-icon name="clock-o"></van-icon>
<span>选择时间：未设置</span>
</div>
<div class="welfare-list-card__footer">
<div class="welfare-list-card__selected-summary" v-if="Number(row.isChoose) === 1">
{{ row.gist_list || row.gistList || '已完成福利选择' }}
</div>
<div class="welfare-list-card__selected-summary" v-else>点击卡片查看福利内容</div>
<span
class="welfare-list-card__status"
:class="'is-' + getWelfareStatus(row).type"
>
<van-icon :name="getWelfareStatus(row).icon"></van-icon>
{{ getWelfareStatus(row).text }}
</span>
</div>
</div>
</article>
</div>
</van-list>
<div class="welfare-list-empty" v-else-if="!loading">
<img src="/assets/mobile/img/benefit/welfare-empty.png" alt="福利项目空状态插画">
<div class="welfare-list-empty__title">暂无福利项目</div>
<div class="welfare-list-empty__hint">当前年度暂未发布可选择的福利项目</div>
</div>
</van-list>
<van-empty v-else image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"></van-empty>
</div>
</div>
</div>
@@ -109,37 +540,86 @@ layout("/layouts/platform_h5.html"){
tableData: [],
finished: false,
loading: false,
filterOpened: false,
pageForm: {
pageNumber: 1,
pageSize: 5,
totalCount: 0,
year: new Date().getFullYear()
year: new Date().getFullYear(),
name: ""
}
}
},
methods: {
goBack() {
this.$pjaxReplace("/platform/h5/home")
},
doSearch() {
this.tableKey = new Date().getTime()
this.pageForm.pageNumber = 1
this.pageForm.totalCount = 0
this.tableData = []
this.finished = false
this.pageData()
},
/**
* 福利列表分页接口参数：pageNumber 为页码、pageSize 为每页条数、year 为查询年度。
* 接口返回 Result<Pagination>，data.list 为福利项目数组，data.totalCount 为项目总数。
*/
pageData() {
this.loading = true
this.$axios.post("/platform/welfare/userSelect/pageData", this.pageForm).then((res) => {
this.tableData = this.tableData.concat(res.data.list)
if (this.tableData.length === res.data.totalCount) {
this.finished = true
} else {
this.pageForm.pageNumber++
}
this.pageForm.totalCount = res.data.totalCount
this.loading = false
})
this.$axios.post("/platform/welfare/userSelect/pageData", this.pageForm)
.then((res) => {
if (res.code !== 0 || !res.data) return
const list = res.data.list || []
this.tableData = this.tableData.concat(list)
this.pageForm.totalCount = res.data.totalCount || 0
if (this.tableData.length >= this.pageForm.totalCount) {
this.finished = true
} else {
this.pageForm.pageNumber++
}
})
.finally(() => {
this.loading = false
})
},
async openChoose(row) {
/**
* 福利状态优先展示用户选择结果，其次根据选择起止时间区分未开始、可选择和已结束。
* @param row 福利项目，需包含 isChoose、choiceTimeStart、choiceTimeEnd
* @return {{type: string, text: string}} type 用于状态样式，text 为页面展示文案
*/
getWelfareStatus(row) {
if (Number(row.isChoose) === 1) {
return {type: "selected", text: "已选择", icon: "passed"}
}
const now = new Date().getTime()
const startTime = row.choiceTimeStart ? new Date(row.choiceTimeStart).getTime() : null
const endTime = row.choiceTimeEnd ? new Date(row.choiceTimeEnd).getTime() : null
if (startTime && now < startTime) {
return {type: "upcoming", text: "未开始", icon: "clock-o"}
}
if (endTime && now > endTime) {
return {type: "ended", text: "已结束", icon: "close"}
}
return {type: "available", text: "可选择", icon: "add-o"}
},
/**
* 根据福利项目选择模式生成卡片标签，便于用户在进入详情前了解可选数量。
* @param row 福利项目，包含 isCheckBox 和 multiSelectNum 字段
* @return {string} 单选或多选数量说明
*/
getChoiceModeText(row) {
if (row.isCheckBox === "checkBox") {
return "多选 · 最多" + (row.multiSelectNum || 1) + "份"
}
return "单选"
},
openChoose(row) {
this.$pjaxReplace("/platform/h5/welfare/userSelect/index?id=" + row.id)
}
},
target/classes/views/platform/zhghh5/welfare/select/success.html
+5
View File
@@ -3,6 +3,11 @@ layout("/layouts/platform_h5.html"){
#-->
<style>
:root {
/* 当前福利成功页覆盖全局 H5 的 Vant 主色。 */
--color-primary: #1989fa;
}
.success-container {
min-height: 100vh;
background-color: #f7f8fa;