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

feat:职工福利ui优化

Browse Source
This commit is contained in:
c-chengc1
2026-08-26 15:01:10 +08:00
parent 49c34cf226
commit ccc9b518da
1 changed files with 227 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/views/platform/zhghh5/welfare/mine/list.html
+227 -42
View File
@@ -167,9 +167,136 @@ layout("/layouts/platform_h5.html"){
}
.welfare-list-card__summary {
display: flex;
min-height: 120px;
padding: 14px;
box-sizing: border-box;
}
.welfare-list-card__choices-wrap {
display: flex;
min-width: 0;
margin-top: 10px;
padding-top: 2px;
align-items: center;
border-top: 1px solid #edf1f6;
}
.welfare-list-card__choices {
display: flex;
min-width: 0;
flex: 1;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.welfare-list-card__choices::-webkit-scrollbar {
display: none;
}
.welfare-list-card__choices .welfare-inline-selection {
width: 82px;
min-width: 82px;
min-height: 112px;
padding: 8px 0;
flex-direction: column;
align-items: stretch;
border-bottom: 0;
}
.welfare-list-card__choices .welfare-inline-selection__image {
width: 82px;
height: 64px;
margin-right: 0;
}
.welfare-list-card__choices .welfare-inline-selection__image--name {
display: flex;
padding: 8px;
align-items: center;
justify-content: center;
color: #9aa7b8;
background: linear-gradient(145deg, #f7faff 0%, #edf4fc 100%);
font-size: 12px;
line-height: 17px;
text-align: center;
box-sizing: border-box;
}
.welfare-list-card__choices .welfare-inline-selection__image--name span {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.welfare-list-card__choices .welfare-inline-selection__content {
margin-top: 6px;
}
.welfare-list-card__choices .welfare-inline-selection__name {
font-weight: 400;
}
.welfare-list-card__choices .welfare-inline-selection__meta {
margin-top: 5px;
}
.welfare-list-card__order-head {
display: flex;
min-width: 0;
align-items: center;
}
.welfare-list-card__order-info {
min-width: 0;
flex: 1;
}
.welfare-list-card__select-time {
display: flex;
margin-top: 5px;
align-items: center;
color: #8491a6;
font-size: 12px;
line-height: 18px;
}
.welfare-list-card__select-time .van-icon {
margin-right: 5px;
color: #8da2bd;
font-size: 13px;
}
.welfare-list-card__order-status {
margin-left: 10px;
flex: none;
color: #1989fa;
font-size: 13px;
}
.welfare-list-card__choices-arrow {
margin-left: 10px;
flex: none;
transition: transform .2s ease;
}
.welfare-list-card__choices-arrow.is-expanded {
transform: rotate(90deg);
}
.welfare-list-card__choices > .welfare-inline-loading,
.welfare-list-card__choices > .welfare-inline-empty {
width: 100%;
flex: none;
}
.welfare-list-card__product {
display: flex;
min-width: 0;
margin-top: 12px;
padding: 0;
align-items: center;
box-sizing: border-box;
}
@@ -231,7 +358,7 @@ layout("/layouts/platform_h5.html"){
.welfare-list-card__body {
position: relative;
min-width: 0;
padding: 4px 0 4px 14px;
padding-left: 12px;
flex: 1;
box-sizing: border-box;
}
@@ -250,11 +377,29 @@ layout("/layouts/platform_h5.html"){
color: #202938;
font-size: 16px;
line-height: 23px;
font-weight: 600;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
}
.welfare-list-card__selection-title {
display: -webkit-box;
overflow: hidden;
color: #263548;
font-size: 14px;
line-height: 20px;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.welfare-list-card__selection-count {
margin-top: 12px;
color: #8491a6;
font-size: 13px;
text-align: right;
}
.welfare-list-card__status {
display: inline-flex;
min-width: 54px;
@@ -302,6 +447,32 @@ layout("/layouts/platform_h5.html"){
white-space: nowrap;
}
.welfare-list-card__actions {
display: flex;
min-height: 42px;
margin-top: 10px;
padding-top: 10px;
align-items: center;
justify-content: flex-end;
border-top: 1px solid #edf1f6;
box-sizing: border-box;
}
.welfare-list-card__detail-button {
display: inline-flex;
height: 30px;
padding: 0 14px;
align-items: center;
justify-content: center;
border: 1px solid #1989fa;
border-radius: 16px;
color: #1989fa;
background-color: #fff;
font-size: 13px;
line-height: 28px;
box-sizing: border-box;
}
.welfare-list-card__time .van-icon {
margin-right: 5px;
flex: none;
@@ -612,42 +783,37 @@ layout("/layouts/platform_h5.html"){
class="welfare-list-card"
>
<div class="welfare-list-card__summary" @click="toggleRow(row)">
<van-image
v-if="hasCoverImage(row.cover)"
class="welfare-list-card__cover"
:src="row.cover"
:alt="row.name"
>
<template #loading>
<van-loading type="spinner" size="22"></van-loading>
</template>
<template #error>
<div class="welfare-list-card__image-empty">
<van-icon name="photo-o"></van-icon>
<span>暂无图片</span>
<div class="welfare-list-card__order-head">
<div class="welfare-list-card__order-info">
<div class="welfare-list-card__title">{{ row.name }}</div>
<div class="welfare-list-card__select-time">
<van-icon name="clock-o"></van-icon>
<span>选择时间：{{ formatDate(row.selectTime) }}</span>
</div>
</template>
</van-image>
<div v-else class="welfare-list-card__cover welfare-list-card__cover--empty">
<div class="welfare-list-card__image-empty">
<van-icon name="photo-o"></van-icon>
<span>暂无图片</span>
</div>
</div>
<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="row.expanded ? 'arrow-up' : 'arrow-down'"></van-icon>
</div>
<div class="welfare-list-card__time" v-if="row.selectTime">
<van-icon name="clock-o"></van-icon>
<span>选择时间：{{ $moment(row.selectTime).format('YYYY-MM-DD HH:mm') }}</span>
</div>
<div class="welfare-list-card__time" v-else>
<van-icon name="clock-o"></van-icon>
<span>选择时间：暂无记录</span>
<div class="welfare-list-card__choices-wrap">
<div class="welfare-list-card__choices">
<div class="welfare-inline-loading" v-if="row.detailLoading">
<van-loading size="20" color="#1989fa">加载中...</van-loading>
</div>
<template v-else-if="row.selections.length > 0">
<div class="welfare-inline-selection" v-for="item in row.selections" :key="item.id">
<van-image v-if="item.imgUrl" class="welfare-inline-selection__image" :src="item.imgUrl" fit="cover">
<template #error><van-icon name="photo-o" size="24"></van-icon></template>
</van-image>
<div v-else class="welfare-inline-selection__image welfare-inline-selection__image--name">
<span>{{ item.optionName || '未知选项' }}</span>
</div>
<div class="welfare-inline-selection__content">
<div class="welfare-inline-selection__name">{{ item.optionName || '未知选项' }}</div>
</div>
</div>
</template>
<div v-else class="welfare-inline-empty">暂无福利选择记录</div>
</div>
<van-icon class="welfare-list-card__arrow welfare-list-card__choices-arrow" :class="{'is-expanded': row.expanded}" name="arrow"></van-icon>
</div>
</div>
@@ -692,14 +858,13 @@ layout("/layouts/platform_h5.html"){
<div class="welfare-inline-card__title">我的选择</div>
<div v-if="row.selections.length > 0">
<div class="welfare-inline-selection" v-for="item in row.selections" :key="item.selectId || item.id">
<van-image class="welfare-inline-selection__image" :src="item.imgUrl" fit="cover">
<van-image class="welfare-inline-selection__image" :src="item.imgUrl" fit="cover" @click.stop="previewSelectionImage(item.imgUrl)">
<template #error><van-icon name="photo-o" size="24"></van-icon></template>
</van-image>
<div class="welfare-inline-selection__content">
<div class="welfare-inline-selection__name">{{ item.optionName || '未知选项' }}</div>
<div class="welfare-inline-selection__meta">
<span class="welfare-inline-selection__tag">× {{ item.selectNum || 0 }}</span>
<span>{{ formatDate(item.selectTime) }}</span>
</div>
</div>
</div>
@@ -771,6 +936,7 @@ layout("/layouts/platform_h5.html"){
selections: []
}))
this.tableData = this.tableData.concat(list)
list.forEach((row) => this.loadRowSelections(row))
this.pageForm.totalCount = res.data.totalCount || 0
if (this.tableData.length >= this.pageForm.totalCount) {
this.finished = true
@@ -790,6 +956,14 @@ layout("/layouts/platform_h5.html"){
return this.$axios.post("/platform/welfare/userSelect/getUserSelection", {projectId: projectId})
},
/**
* 根据列表接口返回的福利选择摘要计算卡片展示项数，不额外请求接口。
*/
getSelectionCount(row) {
const gist = row.gist_list || row.gistList || ""
return gist ? gist.split(",").filter(Boolean).length : 1
},
/**
* 判断福利封面地址是否有效。cover 应为非空图片 URL 字符串；返回 Boolean，true 时渲染图片组件，false 时展示“暂无图片”占位。
*/
@@ -798,12 +972,11 @@ layout("/layouts/platform_h5.html"){
},
/**
* 展开或收起福利详情；首次展开时加载项目及用户选择数据，后续直接复用已加载内容。
* 加载福利项目及用户选择数据，供卡片直接展示已选择的福利明细。
* @param row 当前福利项目
*/
async toggleRow(row) {
row.expanded = !row.expanded
if (!row.expanded || row.detailLoaded || row.detailLoading) return
async loadRowSelections(row) {
if (row.detailLoaded || row.detailLoading) return
this.$set(row, "detailLoading", true)
try {
const [projectRes, selectionRes] = await Promise.all([
@@ -829,6 +1002,18 @@ layout("/layouts/platform_h5.html"){
}
},
/**
* 展开或收起当前福利卡片的内容详情。
* @param row 当前福利项目
*/
toggleRow(row) {
row.expanded = !row.expanded
},
previewSelectionImage(imageUrl) {
if (imageUrl) vant.ImagePreview([imageUrl])
},
/**
* 获取当前福利的首条选择记录，用于展示联系电话和收货地址。
* @param row 当前福利项目
@@ -855,7 +1040,7 @@ layout("/layouts/platform_h5.html"){
* @return {string} 选择时间文本
*/
formatDate(dateTime) {
return dateTime ? this.$moment(dateTime).format("MM-DD HH:mm") : "时间未知"
return dateTime ? this.$moment(dateTime).format("YYYY-MM-DD HH:mm") : "时间未知"
},
/**