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 13:50:12 +08:00
parent 6678ca6a5a
commit cc2b3b8ab5
8 changed files with 1207 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/java/com/budwk/app/zhgh/welfare/controller/WelfareMineController.java
+9 -4
View File
@@ -48,7 +48,8 @@ public class WelfareMineController {
@At
@SaCheckPermission("welfare.mine")
public Result pageData(PageForm pageForm,
Integer year) {
Integer year,
String name) {
Sql sql = Sqls.create("""
SELECT
wp.*,
@@ -57,13 +58,14 @@ public class WelfareMineController {
WHEN wus.selectUserId IS NOT NULL THEN
1 ELSE 0
END AS isChoose,
GROUP_CONCAT(DISTINCT wuso.optionName ,'（',wus.selectNum,'份）') AS gist_list,
wus.receiveAddress,
GROUP_CONCAT(DISTINCT wuso.optionName ,'（',wus.selectNum,'份）') AS gist_list,
MAX(wus.selectTime) AS selectTime,
wus.receiveAddress,
wl.userId
FROM
welfare_list wl
LEFT JOIN welfare_project wp ON wp.id = wl.projectId
LEFT JOIN welfare_project_user_selection wus ON wl.projectId = wus.welfareId
INNER JOIN welfare_project_user_selection wus ON wl.projectId = wus.welfareId
AND wus.selectUserId = @selectUserId
LEFT JOIN welfare_project_subject_option wuso ON wus.selectOptionId = wuso.id
$condition
@@ -73,6 +75,9 @@ public class WelfareMineController {
cnd.and("wp.isDisabled", "=", 0);
cnd.andEX("YEAR(wp.choiceTimeStart)", "=", year);
cnd.andEX("wl.userId", "=", SecurityUtil.getUserId());
if (StrUtil.isNotBlank(name)) {
cnd.and("wp.name", "like", "%" + name.trim() + "%");
}
cnd.desc("wp.choiceTimeStart");
cnd.groupBy("wl.id");
sql.setCondition(cnd);
src/main/java/com/budwk/app/zhgh/welfare/controller/WelfareUserSelectController.java
+5 -1
View File
@@ -1,6 +1,7 @@
package com.budwk.app.zhgh.welfare.controller;
import cn.dev33.satoken.annotation.SaCheckPermission;
import cn.hutool.core.util.StrUtil;
import com.budwk.app.base.annotation.SLog;
import com.budwk.app.base.page.Pagination;
import com.budwk.app.base.param.PageForm;
@@ -47,7 +48,7 @@ public class WelfareUserSelectController {
@At
@SaCheckPermission("welfare.user.select")
@ApiOperation("获取用户选择列表分页")
public Result pageData(PageForm pageForm, Integer year) {
public Result pageData(PageForm pageForm, Integer year, String name) {
Sql sql = Sqls.create("""
SELECT
wp.*,
@@ -71,6 +72,9 @@ public class WelfareUserSelectController {
cnd.and("wp.provideMode", "in", "2,3");
cnd.andEX("YEAR(wp.choiceTimeStart)", "in", year);
cnd.and("wp.isDisabled", "=", 0);
if (StrUtil.isNotBlank(name)) {
cnd.and("wp.name", "like", "%" + name.trim() + "%");
}
cnd.groupBy("wp.id");
cnd.desc("wp.choiceTimeStart");
sql.setCondition(cnd);
src/main/resources/static/assets/mobile/img/benefit/welfare-selection-hero-v2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

src/main/resources/views/platform/zhghh5/welfare/address/addressManager.js
+12 -9
View File
@@ -101,7 +101,7 @@ const WELFARE_ADDRESS_MANAGER_COMPONENT = {
@click-left="closeHistoryLayer(historyLayerNames.edit)"></van-nav-bar>
<div class="address-edit-scroll">
<div class="address-recognition-card">
<van-field v-model="addressRecognitionText" type="textarea" rows="3" autosize
<van-field v-model="addressRecognitionText" type="textarea" rows="4" autosize
maxlength="300"
placeholder="试试粘贴收件人姓名、手机号、收货地址，可快速识别您的收货信息"></van-field>
<div class="address-recognition-card__footer">
@@ -110,18 +110,18 @@ const WELFARE_ADDRESS_MANAGER_COMPONENT = {
</div>
</div>
<div class="address-form-card">
<van-field v-model="addressForm.userName" label="姓名" left-icon="manager-o"
<van-field v-model="addressForm.userName" class="address-form-field" label="姓名"
placeholder="请输入收货人姓名" maxlength="50"
:error="addressFormErrors.userName"
@input="clearAddressFormError('userName')"></van-field>
<van-field v-model="addressForm.tel" label="电话" left-icon="phone-o" type="tel"
<van-field v-model="addressForm.tel" class="address-form-field" label="电话" type="tel"
placeholder="请输入收货人手机号" maxlength="11"
:error="addressFormErrors.tel"
@input="clearAddressFormError('tel')"></van-field>
<van-field :value="addressRegionText" label="地区" left-icon="location-o"
<van-field :value="addressRegionText" class="address-form-field" label="地区"
right-icon="arrow" placeholder="请选择省 / 市 / 区" readonly clickable
:error="addressFormErrors.area" @click="openAddressArea"></van-field>
<van-field v-model="addressForm.addressDetail" label="详细地址" left-icon="records"
<van-field v-model="addressForm.addressDetail" class="address-form-field" label="详细地址"
type="textarea" rows="1" autosize maxlength="100"
placeholder="请输入街道门牌、楼层房间号等信息"
:error="addressFormErrors.addressDetail"
@@ -129,7 +129,6 @@ const WELFARE_ADDRESS_MANAGER_COMPONENT = {
<van-cell>
<template #title>
<div class="address-default-title">
<van-icon name="shield-o"></van-icon>
<span>设为默认收货地址</span>
</div>
</template>
@@ -834,10 +833,10 @@ const WELFARE_ADDRESS_MANAGER_COMPONENT = {
/deep/ .address-edit-scroll { min-height: 0; padding: 22px 16px calc(76px + env(safe-area-inset-bottom)); flex: 1; overflow-y: auto; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
/deep/ .address-recognition-card { margin-bottom: 16px; padding: 18px 16px 14px; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(49, 83, 126, .10); }
/deep/ .address-recognition-card .van-cell { padding: 0; background: transparent; }
/deep/ .address-recognition-card .van-field__control { min-height: 72px; color: #202938; font-size: 15px; line-height: 24px; }
/deep/ .address-recognition-card .van-field__control { min-height: 96px; color: #202938; font-size: 15px; line-height: 24px; }
/deep/ .address-recognition-card .van-field__control::placeholder { color: #7d7d7d; opacity: 1; }
/deep/ .address-recognition-card__footer { margin-top: 12px; display: flex; justify-content: flex-end; }
/deep/ .address-recognition-button { width: 82px; height: 38px; border-color: #1989fa; background: #1989fa; font-size: 15px; font-weight: 500; }
/deep/ .address-recognition-button { width: 70px; height: 32px; border-color: #1989fa; background: #1989fa; font-size: 14px; font-weight: 500; }
/deep/ .address-form-card { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(49, 83, 126, .10); }
/deep/ .address-form-card .van-cell { min-height: 68px; padding: 17px 18px; align-items: center; }
/deep/ .address-form-card .van-cell::after { right: 18px; left: 18px; border-color: #edf0f5; }
@@ -845,6 +844,11 @@ const WELFARE_ADDRESS_MANAGER_COMPONENT = {
/deep/ .address-form-card .van-field__left-icon .van-icon,
/deep/ .address-default-title .van-icon { color: #1989fa; font-size: 22px; }
/deep/ .address-form-card .van-field__label { width: 72px; color: #202938; font-size: 15px; font-weight: 500; }
/deep/ .address-form-card .address-form-field.van-cell { min-height: 88px; padding: 15px 18px 13px; align-items: stretch; flex-direction: column; }
/deep/ .address-form-card .address-form-field .van-field__label { width: auto; margin: 0 0 8px; color: #8c98aa; font-weight: 400; line-height: 20px; }
/deep/ .address-form-card .address-form-field .van-cell__value { width: 100%; text-align: left; }
/deep/ .address-form-card .address-form-field .van-field__body { min-height: 24px; }
/deep/ .address-form-card .address-form-field .van-field__control { text-align: left; }
/deep/ .address-default-title { display: flex; align-items: center; color: #202938; font-size: 15px; font-weight: 500; }
/deep/ .address-default-title .van-icon { margin-right: 12px; }
/deep/ .address-edit-footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 30; padding: 0 16px calc(12px + env(safe-area-inset-bottom)); background: transparent; }
@@ -1018,7 +1022,6 @@ const WELFARE_ADDRESS_MANAGER_COMPONENT = {
overflow-wrap: anywhere;
color: #20242d;
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
.welfare-address-manager.address-size-compact /deep/ .address-flat__edit {
src/main/resources/views/platform/zhghh5/welfare/mine/list.html
+443 -68
View File
@@ -37,11 +37,14 @@ layout("/layouts/platform_h5.html"){
height: 134px;
overflow: hidden;
border-radius: 12px;
background-color: #fff0f1;
box-shadow: 0 8px 20px rgba(190, 89, 98, .12);
background-color: #247fe8;
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
}
.welfare-list-hero__image {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
@@ -50,17 +53,18 @@ layout("/layouts/platform_h5.html"){
}
.welfare-list-hero__copy {
position: absolute;
top: 0;
bottom: 0;
left: 0;
position: relative;
z-index: 1;
display: flex;
padding-left: 18px;
width: 64%;
height: 100%;
padding-left: 16px;
justify-content: center;
flex-direction: column;
color: #fff;
box-sizing: border-box;
text-shadow: 0 2px 8px rgba(190, 74, 84, .55);
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);
}
.welfare-list-hero__title {
@@ -94,10 +98,30 @@ layout("/layouts/platform_h5.html"){
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;
}
@@ -142,10 +166,21 @@ layout("/layouts/platform_h5.html"){
cursor: pointer;
}
.welfare-list-card__summary {
display: flex;
min-height: 120px;
padding: 14px;
align-items: center;
box-sizing: border-box;
}
.welfare-list-card__cover {
display: block;
width: 100%;
height: 150px;
width: 92px;
height: 92px;
flex: 0 0 92px;
overflow: hidden;
border-radius: 10px;
background-color: #f7f9fc;
line-height: 0;
}
@@ -195,7 +230,9 @@ layout("/layouts/platform_h5.html"){
.welfare-list-card__body {
position: relative;
padding: 12px 42px 14px 14px;
min-width: 0;
padding: 4px 0 4px 14px;
flex: 1;
box-sizing: border-box;
}
@@ -253,7 +290,10 @@ layout("/layouts/platform_h5.html"){
}
.welfare-list-card__time {
margin-top: 6px;
display: flex;
min-width: 0;
margin-top: 8px;
align-items: center;
overflow: hidden;
color: #8491a6;
font-size: 12px;
@@ -262,13 +302,206 @@ layout("/layouts/platform_h5.html"){
white-space: nowrap;
}
.welfare-list-card__time .van-icon {
margin-right: 5px;
flex: none;
color: #8da2bd;
font-size: 14px;
}
.welfare-list-card__arrow {
position: absolute;
top: 50%;
right: 14px;
margin-left: 2px;
flex: none;
color: #adb7c6;
font-size: 17px;
transform: translateY(-50%);
}
.welfare-list-card__expanded {
padding: 12px;
border-top: 1px solid #edf1f6;
background-color: #f8fbff;
}
.welfare-inline-card {
margin-bottom: 10px;
padding: 0 12px;
overflow: hidden;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 4px 14px rgba(55, 85, 126, .06);
}
.welfare-inline-card:last-child {
margin-bottom: 0;
}
.welfare-inline-card__title {
position: relative;
height: 42px;
padding-left: 8px;
border-bottom: 1px solid #edf1f6;
color: #263548;
font-size: 14px;
font-weight: 600;
line-height: 42px;
}
.welfare-inline-card__title::before {
position: absolute;
top: 14px;
bottom: 14px;
left: 0;
width: 3px;
border-radius: 2px;
background-color: #1989fa;
content: '';
}
.welfare-inline-row {
display: flex;
min-height: 40px;
padding: 6px 0;
align-items: center;
border-bottom: 1px solid #edf1f6;
box-sizing: border-box;
}
.welfare-inline-row:last-child {
border-bottom: 0;
}
.welfare-inline-row__label {
width: 72px;
flex: none;
color: #7f8da1;
font-size: 12px;
}
.welfare-inline-row__value {
min-width: 0;
flex: 1;
color: #263548;
font-size: 13px;
line-height: 19px;
word-break: break-word;
}
.welfare-inline-selection {
display: flex;
min-height: 72px;
padding: 10px 0;
align-items: center;
border-bottom: 1px solid #edf1f6;
box-sizing: border-box;
}
.welfare-inline-selection:last-child {
border-bottom: 0;
}
.welfare-inline-selection__image {
width: 54px;
height: 54px;
margin-right: 10px;
flex: none;
overflow: hidden;
border-radius: 8px;
background-color: #edf4fc;
}
.welfare-inline-selection__content {
min-width: 0;
flex: 1;
}
.welfare-inline-selection__name {
overflow: hidden;
color: #263548;
font-size: 14px;
line-height: 21px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.welfare-inline-selection__meta {
display: flex;
margin-top: 7px;
align-items: center;
gap: 6px;
color: #7f8da1;
font-size: 11px;
}
.welfare-inline-selection__tag {
height: 20px;
padding: 0 6px;
border-radius: 4px;
background-color: #edf5ff;
color: #4f88cf;
line-height: 20px;
}
.welfare-inline-loading,
.welfare-inline-empty {
padding: 24px 12px;
color: #9aa7b8;
font-size: 12px;
text-align: center;
}
.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;
overflow: hidden;
border-radius: 4px;
color: #4f88cf;
background-color: #edf5ff;
box-sizing: border-box;
font-size: 11px;
line-height: 22px;
text-overflow: ellipsis;
white-space: nowrap;
}
.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;
}
.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-page .van-list__finished-text,
@@ -289,6 +522,7 @@ layout("/layouts/platform_h5.html"){
text-align: center;
}
/* 空状态插画按原始宽高比缩放，避免被 Vant 默认方形图片容器挤压变形。 */
.welfare-list-empty img {
display: block;
@@ -329,22 +563,36 @@ layout("/layouts/platform_h5.html"){
<section class="welfare-list-hero">
<img
class="welfare-list-hero__image"
src="/assets/mobile/img/home/v4/feature-benefit.png"
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 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-dropdown-menu class="welfare-list-filter" active-color="#1989fa">
<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="5"
:num="10"
v-model="pageForm.year"
@change="doSearch"
@open="filterOpened = true"
@close="filterOpened = false"
></year-van-dropdown-item>
</van-dropdown-menu>
</div>
@@ -362,45 +610,103 @@ layout("/layouts/platform_h5.html"){
v-for="row in tableData"
:key="row.id"
class="welfare-list-card"
@click="openView(row)"
>
<van-image
v-if="hasCoverImage(row.cover)"
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>
<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>
</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>
</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 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>
</div>
</div>
<div class="welfare-list-card__body">
<div class="welfare-list-card__head">
<div class="welfare-list-card__title">{{ row.name }}</div>
<span
class="welfare-list-card__status"
:class="row.isChoose ? 'is-selected' : 'is-available'"
>{{ row.isChoose ? '已选择' : '未选择' }}</span>
<div class="welfare-list-card__expanded" v-show="row.expanded">
<div class="welfare-inline-loading" v-if="row.detailLoading">
<van-loading size="20" color="#1989fa">加载中...</van-loading>
</div>
<div class="welfare-list-card__time" v-if="row.choiceTimeStart && row.choiceTimeEnd">
选择时间：{{ $moment(row.choiceTimeStart).format('MM/DD HH:mm') }} - {{ $moment(row.choiceTimeEnd).format('MM/DD HH:mm') }}
</div>
<div class="welfare-list-card__time" v-else>选择时间：未设置</div>
<van-icon class="welfare-list-card__arrow" name="arrow"></van-icon>
<template v-else-if="row.projectInfo">
<section class="welfare-inline-card">
<div class="welfare-inline-card__title">项目基本信息</div>
<div class="welfare-inline-row">
<span class="welfare-inline-row__label">项目名称</span>
<span class="welfare-inline-row__value">{{ row.projectInfo.name || row.name }}</span>
</div>
<div class="welfare-inline-row">
<span class="welfare-inline-row__label">选择时间</span>
<span class="welfare-inline-row__value">{{ formatRange(row.projectInfo.choiceTimeStart, row.projectInfo.choiceTimeEnd) }}</span>
</div>
<div class="welfare-inline-row">
<span class="welfare-inline-row__label">发放时间</span>
<span class="welfare-inline-row__value">{{ formatRange(row.projectInfo.provideTimeStart, row.projectInfo.provideTimeEnd) }}</span>
</div>
<div class="welfare-inline-row">
<span class="welfare-inline-row__label">发放地点</span>
<span class="welfare-inline-row__value">{{ row.projectInfo.provideAddress || '暂无' }}</span>
</div>
</section>
<section class="welfare-inline-card">
<div class="welfare-inline-card__title">联系信息</div>
<div class="welfare-inline-row">
<span class="welfare-inline-row__label">联系电话</span>
<span class="welfare-inline-row__value">{{ firstSelection(row).mobile || '暂无' }}</span>
</div>
<div class="welfare-inline-row">
<span class="welfare-inline-row__label">收货地址</span>
<span class="welfare-inline-row__value">{{ firstSelection(row).receiveAddress || '暂无' }}</span>
</div>
</section>
<section class="welfare-inline-card">
<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">
<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>
</div>
<div v-else class="welfare-inline-empty">暂无福利选择记录</div>
</section>
</template>
</div>
</article>
</div>
@@ -413,28 +719,24 @@ layout("/layouts/platform_h5.html"){
</div>
</div>
</div>
<select-view ref="selectViewRef"></select-view>
</div>
<script nonce="${cspNonce!}">
<!--#include('selectView.js'){}#-->
new Vue({
el: "#app",
store,
components: {
"select-view": selectView
},
data() {
return {
tableData: [],
finished: false,
loading: false,
filterOpened: false,
pageForm: {
pageNumber: 1,
pageSize: 5,
totalCount: 0,
year: new Date().getFullYear()
year: new Date().getFullYear(),
name: ""
},
yearList: []
}
@@ -460,7 +762,14 @@ layout("/layouts/platform_h5.html"){
this.$axios.post("/platform/welfare/mine/pageData", this.pageForm)
.then((res) => {
if (res.code !== 0 || !res.data) return
const list = res.data.list || []
const list = (res.data.list || []).map((row) => ({
...row,
expanded: false,
detailLoading: false,
detailLoaded: false,
projectInfo: null,
selections: []
}))
this.tableData = this.tableData.concat(list)
this.pageForm.totalCount = res.data.totalCount || 0
if (this.tableData.length >= this.pageForm.totalCount) {
@@ -475,14 +784,10 @@ layout("/layouts/platform_h5.html"){
},
/**
* 查询福利选择详情，projectId 为福利项目 ID，userId 使用当前登录用户 ID。
* 返回值为 Axios Promise，响应 data 为用户已选择的福利明细数组。
* 复用原“我的福利选择”弹窗接口查询当前用户的福利选择明细。
*/
getUserSelection(projectId) {
return this.$axios.post("/platform/welfare/mine/getUserSelection", {
projectId: projectId,
userId: this.$store.state.user.id
})
return this.$axios.post("/platform/welfare/userSelect/getUserSelection", {projectId: projectId})
},
/**
@@ -492,9 +797,79 @@ layout("/layouts/platform_h5.html"){
return typeof cover === "string" && !!cover.trim()
},
openView(item) {
this.$refs.selectViewRef.onOpen(item.id)
}
/**
* 展开或收起福利详情；首次展开时加载项目及用户选择数据，后续直接复用已加载内容。
* @param row 当前福利项目
*/
async toggleRow(row) {
row.expanded = !row.expanded
if (!row.expanded || row.detailLoaded || row.detailLoading) return
this.$set(row, "detailLoading", true)
try {
const [projectRes, selectionRes] = await Promise.all([
this.$axios.post("/platform/welfare/common/projectInfo", {id: row.projectId || row.id}),
this.getUserSelection(row.projectId || row.id)
])
const projectInfo = projectRes.code === 0 ? projectRes.data : row
const options = projectInfo && projectInfo.options ? projectInfo.options : []
const selections = selectionRes.code === 0 ? (selectionRes.data || []).map((item) => {
const option = options.find((current) => current.id === item.selectOptionId) || {}
return {
...item,
optionName: option.optionName || "未知选项",
imgUrl: option.imgUrl,
description: option.description
}
}) : []
this.$set(row, "projectInfo", projectInfo)
this.$set(row, "selections", selections)
this.$set(row, "detailLoaded", true)
} finally {
this.$set(row, "detailLoading", false)
}
},
/**
* 获取当前福利的首条选择记录，用于展示联系电话和收货地址。
* @param row 当前福利项目
* @return {Object} 首条选择记录；无记录时返回空对象
*/
firstSelection(row) {
return row.selections && row.selections.length > 0 ? row.selections[0] : {}
},
/**
* 格式化项目起止时间。
* @param startTime 开始时间
* @param endTime 结束时间
* @return {string} 起止时间文本
*/
formatRange(startTime, endTime) {
if (!startTime || !endTime) return "暂无"
return this.$moment(startTime).format("YYYY-MM-DD HH:mm") + " 至 " + this.$moment(endTime).format("YYYY-MM-DD HH:mm")
},
/**
* 格式化用户选择时间。
* @param dateTime 选择时间
* @return {string} 选择时间文本
*/
formatDate(dateTime) {
return dateTime ? this.$moment(dateTime).format("MM-DD HH:mm") : "时间未知"
},
/**
* 根据福利项目选择模式展示与福利列表一致的选择数量标签。
* @param row 福利项目数据
* @return {string} 单选或多选数量说明
*/
getChoiceModeText(row) {
if (row.isCheckBox === "checkBox") {
return "多选 · 最多" + (row.multiSelectNum || 1) + "份"
}
return "单选"
},
},
created() {
this.pageData()
src/main/resources/views/platform/zhghh5/welfare/mine/selectView.js
+236 -16
View File
@@ -3,8 +3,11 @@ const selectView = {
<van-action-sheet
v-model="visible"
:title="'我的福利选择'"
class="welfare-view-sheet"
:style="{ height: '78%' }"
close-icon="close"
safe-area-inset-bottom
:close-on-click-overlay="true"
@close="handleClose"
:overlay-class="detailVisible ? 'no-overlay' : ''"
>
@@ -16,14 +19,9 @@ const selectView = {
<!-- 项目基本信息 -->
<div class="welfare-card">
<van-collapse v-model="activeNames">
<van-collapse-item name="1">
<template #title>
<div class="welfare-card__header">
<i class="el-icon-s-flag"></i>
<span>项目基本信息</span>
</div>
</template>
<div class="welfare-card__header">
<span>项目基本信息</span>
</div>
<div class="welfare-card__content">
<div class="info-row">
<div class="info-row__label">项目名称</div>
@@ -61,15 +59,12 @@ const selectView = {
</div>
</div>
</div>
</van-collapse-item>
</van-collapse>
</div>
<!-- 联系信息 -->
<div class="welfare-card">
<div class="welfare-card__header">
<i class="el-icon-user"></i>
<span>联系信息</span>
</div>
<div class="welfare-card__content">
@@ -90,7 +85,6 @@ const selectView = {
<div class="selections-container">
<div class="welfare-card">
<div class="welfare-card__header">
<i class="el-icon-shopping-cart-full"></i>
<span>我的选择</span>
</div>
@@ -108,21 +102,20 @@ const selectView = {
<div class="selection-item__name">{{ item.optionName }}</div>
<div class="selection-item__meta">
<div class="selection-item__count">
<i class="el-icon-shopping-cart-2"></i> {{ item.selectNum }}
× {{ item.selectNum }}
</div>
<div class="selection-item__time">
<i class="el-icon-time"></i> {{ formatDate(item.selectTime) }}
{{ formatDate(item.selectTime) }}
</div>
</div>
</div>
<div class="selection-item__arrow">
<i class="el-icon-arrow-right"></i>
<van-icon name="arrow"></van-icon>
</div>
</div>
</div>
<div v-else class="empty-state">
<i class="el-icon-warning-outline"></i>
<span>您还未选择任何福利项目</span>
</div>
</div>
@@ -135,8 +128,12 @@ const selectView = {
<van-action-sheet
v-model="detailVisible"
:title="currentOption?.optionName || '福利详情'"
class="welfare-view-detail-sheet"
:style="{ height: '78%' }"
close-icon="close"
safe-area-inset-bottom
cancel-text="取消"
:close-on-click-overlay="true"
@close="closeDetail"
:z-index="2001"
>
@@ -533,6 +530,229 @@ const selectView = {
margin: 8px 0;
}
/deep/ .welfare-view-sheet,
/deep/ .welfare-view-detail-sheet {
overflow: hidden !important;
border-radius: 16px 16px 0 0 !important;
background-color: #f3f7fd !important;
}
/deep/ .welfare-view-sheet .van-action-sheet__header,
/deep/ .welfare-view-detail-sheet .van-action-sheet__header {
height: 48px;
padding: 0 48px;
overflow: hidden;
color: #1f2f43;
background-color: #fff;
font-size: 16px;
font-weight: normal;
line-height: 48px;
text-overflow: ellipsis;
white-space: nowrap;
}
/deep/ .welfare-view-sheet .van-action-sheet__close,
/deep/ .welfare-view-detail-sheet .van-action-sheet__close {
top: 0;
right: 16px;
display: flex;
height: 48px;
align-items: center;
color: #aeb8c6;
font-size: 20px;
}
/deep/ .welfare-view {
height: calc(100% - 48px);
background-color: #f3f7fd;
}
/deep/ .welfare-view__content {
min-height: 100%;
height: auto;
padding: 12px;
box-sizing: border-box;
}
/deep/ .welfare-card {
margin-bottom: 10px;
overflow: hidden;
border-radius: 12px;
background-color: #fff;
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
}
/deep/ .welfare-card__header {
min-height: 46px;
padding: 0 14px 0 18px;
box-sizing: border-box;
}
/deep/ .welfare-card__header::before {
position: absolute;
top: 15px;
bottom: 15px;
left: 12px;
width: 3px;
border-radius: 2px;
background-color: #1989fa;
content: '';
}
/deep/ .welfare-card__header::after {
right: 14px;
left: 14px;
background-color: #e8eef6;
}
/deep/ .welfare-card__header span {
color: #1f2f43;
font-size: 15px;
font-weight: 600;
}
/deep/ .welfare-card__content {
padding: 4px 14px 8px;
}
/deep/ .info-row {
min-height: 44px;
margin-bottom: 0;
border-bottom: 1px solid #edf1f6;
box-sizing: border-box;
}
/deep/ .info-row:last-child {
border-bottom: 0;
}
/deep/ .info-row__label {
width: 76px;
color: #7f8da1;
font-size: 13px;
}
/deep/ .info-row__value {
color: #263548;
font-size: 14px;
line-height: 20px;
word-break: break-word;
}
/deep/ .info-row--time {
padding: 8px 0;
}
/deep/ .time-item {
min-height: 20px;
padding-left: 40px;
}
/deep/ .selections-container {
margin-bottom: 0;
}
/deep/ .selection-list {
padding: 10px 14px 14px;
}
/deep/ .selection-item {
min-height: 76px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #edf2f8;
border-radius: 10px;
background-color: #f8fbff;
box-shadow: none;
box-sizing: border-box;
}
/deep/ .selection-item__image {
width: 62px;
height: 62px;
margin-right: 12px;
border-radius: 8px;
}
/deep/ .selection-item__name {
margin-bottom: 9px;
color: #263548;
font-size: 15px;
font-weight: 600;
}
/deep/ .selection-item__meta {
min-width: 0;
color: #8290a4;
font-size: 12px;
}
/deep/ .selection-item__count,
/deep/ .selection-item__time {
height: 22px;
padding: 0 7px;
border-radius: 4px;
background-color: #eef5ff;
line-height: 22px;
white-space: nowrap;
}
/deep/ .selection-item__count {
margin-right: 8px;
color: #1989fa;
}
/deep/ .selection-item__time {
min-width: 0;
overflow: hidden;
color: #7f8da1;
text-overflow: ellipsis;
}
/deep/ .selection-item__arrow {
padding-left: 10px;
color: #adb7c6;
}
/deep/ .empty-state {
padding: 28px 16px;
color: #9aa7b8;
font-size: 13px;
}
/deep/ .welfare-view-detail-sheet .welfare-detail {
position: absolute;
top: 58px;
right: 12px;
bottom: 60px;
left: 12px;
max-height: none;
padding: 16px;
overflow-y: auto;
border-radius: 12px;
background-color: #fff;
box-sizing: border-box;
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
}
/deep/ .welfare-view-detail-sheet .van-action-sheet__cancel {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
margin: 0;
color: #66758a;
background-color: #fff;
text-align: center;
}
/deep/ .welfare-view-detail-sheet .welfare-detail__content {
color: #3f4c5e;
font-size: 14px;
line-height: 1.8;
}
/* 阻止嵌套 action-sheet 时的背景重叠 */
/deep/ .no-overlay {
background-color: transparent !important;
src/main/resources/views/platform/zhghh5/welfare/select/index.html
+305 -254
View File
@@ -21,7 +21,7 @@ layout("/layouts/platform_h5.html"){
.page-container {
min-height: 100vh;
padding-bottom: calc(118px + env(safe-area-inset-bottom));
padding-bottom: calc(78px + env(safe-area-inset-bottom));
box-sizing: border-box;
background: var(--bg-color);
}
@@ -33,7 +33,6 @@ layout("/layouts/platform_h5.html"){
.page-container .van-nav-bar__title {
color: #1f2937;
font-size: 16px;
font-weight: 600;
}
.page-container .van-nav-bar .van-icon,
@@ -53,9 +52,13 @@ layout("/layouts/platform_h5.html"){
}
.welfare-skeleton-hero .van-skeleton__row {
height: 154px;
height: 134px;
margin: 0;
border-radius: 0;
border-radius: 12px;
}
.welfare-skeleton-hero {
margin: 12px;
}
.welfare-skeleton-option {
@@ -93,49 +96,22 @@ layout("/layouts/platform_h5.html"){
.welfare-header {
position: relative;
height: 154px;
height: 164px;
margin: 12px 12px 12px;
overflow: hidden;
background-color: #f7e9ea;
border-radius: 14px;
background-color: #fff;
box-shadow: 0 7px 18px rgba(55, 85, 126, .1);
}
.welfare-header-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.85);
}
.welfare-header-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(18, 32, 51, 0.02) 35%, rgba(20, 31, 48, 0.68) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 16px 14px;
box-sizing: border-box;
color: #fff;
}
.welfare-title {
font-size: 22px;
line-height: 30px;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.welfare-subtitle {
font-size: 15px;
opacity: 0.95;
display: flex;
align-items: center;
}
.welfare-subtitle .van-icon {
margin-right: 5px;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.main-content {
@@ -145,7 +121,7 @@ layout("/layouts/platform_h5.html"){
}
.welfare-options-container {
padding: 0 12px 16px;
padding: 0 12px 18px;
background: transparent;
}
@@ -153,47 +129,44 @@ layout("/layouts/platform_h5.html"){
background: #fff;
border-radius: 12px;
overflow: hidden;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
margin-bottom: 10px;
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: row;
min-height: 112px;
display: block;
min-height: 0;
border: 1px solid transparent;
box-sizing: border-box;
}
.welfare-option-main {
display: flex;
min-height: 142px;
}
.welfare-option.selected {
border-color: var(--primary-color);
box-shadow: 0 5px 16px rgba(25, 137, 250, 0.16);
border-color: transparent;
background: linear-gradient(90deg, #fff 0%, #fbfffd 100%);
box-shadow: 0 7px 20px rgba(53, 184, 120, .12);
}
.welfare-option.selected::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid var(--primary-color);
border-radius: 12px;
pointer-events: none;
content: none;
}
.welfare-option-image {
width: 92px;
height: 92px;
margin: 10px 0 10px 10px;
width: 108px;
height: 108px;
margin: 17px 0 17px 14px;
position: relative;
flex-shrink: 0;
border-radius: 9px;
border-radius: 10px;
overflow: hidden;
background: #f7f8fa;
}
.welfare-option-content {
padding: 8px 10px;
padding: 16px 14px 14px;
flex: 1;
display: flex;
flex-direction: column;
@@ -202,11 +175,10 @@ layout("/layouts/platform_h5.html"){
}
.welfare-option-title {
font-size: 15px;
font-weight: bold;
font-size: 16px;
color: var(--text-primary);
margin-bottom: 4px;
padding-right: 56px;
margin-bottom: 8px;
padding-right: 28px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -220,48 +192,104 @@ layout("/layouts/platform_h5.html"){
padding: 0 4px;
margin-right: 5px;
border-radius: 3px;
border: 1px solid var(--primary-color);
background: #fff;
color: #1989fa;
border: 0;
background: #edf5ff;
color: #4b88d3;
font-size: 11px;
line-height: 17px;
vertical-align: 1px;
}
.welfare-option-tag-row {
min-height: 17px;
margin-bottom: 9px;
line-height: 17px;
}
.welfare-option-rank {
margin-bottom: 4px;
color: #f29a22;
font-size: 12px;
line-height: 1.3;
margin-bottom: 9px;
color: #dd8a20;
font-size: 11px;
line-height: 1.4;
display: flex;
align-items: center;
}
.welfare-option-rank .van-icon {
margin-right: 3px;
font-size: 14px;
font-size: 12px;
}
.welfare-option-desc-row {
display: flex;
min-width: 0;
align-items: flex-end;
}
.welfare-option-desc {
padding-right: 4px;
min-width: 0;
overflow: hidden;
flex: 1;
color: var(--text-secondary);
font-size: 12px;
line-height: 1.45;
overflow: hidden;
line-height: 1.6;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.welfare-option-footer {
margin-top: auto;
padding-top: 5px;
border-top: 1px solid #edf1f6;
display: flex;
justify-content: space-between;
.welfare-detail-link {
display: inline-flex;
height: 20px;
margin-left: 6px;
flex: none;
align-items: center;
gap: 10px;
color: #1989fa;
font-size: 12px;
line-height: 20px;
}
.welfare-detail-link span {
display: inline-flex;
height: 20px;
align-items: center;
line-height: 20px;
}
.welfare-detail-link .van-icon {
display: inline-flex;
width: 14px;
height: 20px;
margin-left: 2px;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 20px;
}
.welfare-option-select-row {
display: flex;
min-height: 48px;
padding: 9px 14px;
align-items: center;
justify-content: flex-end;
border-top: 1px solid #edf1f6;
background: #fff;
box-sizing: border-box;
}
.welfare-option-select-label {
display: flex;
align-items: center;
color: #42546c;
font-size: 13px;
}
.welfare-option-select-label .van-icon {
margin-right: 0;
color: #8296b0;
font-size: 15px;
}
.welfare-option-checkbox {
@@ -271,79 +299,95 @@ layout("/layouts/platform_h5.html"){
.welfare-option-checkbox .van-stepper {
}
.welfare-detail-btn {
height: 26px;
padding: 0;
color: #1989fa;
font-size: 13px;
.welfare-detail-sheet {
overflow: hidden !important;
border-radius: 16px 16px 0 0 !important;
background-color: #f3f7fd !important;
}
.welfare-detail-sheet .van-action-sheet__header {
height: 48px;
padding: 0 48px;
overflow: hidden;
color: #1f2f43;
background-color: #fff;
box-sizing: border-box;
font-size: 16px;
line-height: 48px;
text-overflow: ellipsis;
white-space: nowrap;
}
.welfare-detail-sheet .van-action-sheet__close {
top: 0;
right: 16px;
display: flex;
height: 48px;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.welfare-detail-btn .van-icon {
margin-left: 4px;
font-size: 14px;
}
.welfare-radio-select-btn {
min-width: 64px;
height: 27px;
padding: 0 16px;
border-radius: 6px;
font-size: 13px;
line-height: 25px;
}
.welfare-radio-select-btn.is-selected {
color: #fff;
border-color: var(--primary-color);
background: var(--primary-color);
color: #b5bdc9;
font-size: 20px;
}
.welfare-detail-popup {
padding: 20px;
max-height: 70vh;
position: absolute;
top: 58px;
right: 12px;
bottom: 60px;
left: 12px;
padding: 16px;
overflow-y: auto;
min-height: 300px;
}
.welfare-detail-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
color: var(--text-primary);
text-align: center;
border-radius: 10px;
color: #3f4c5e;
background-color: #fff;
box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
box-sizing: border-box;
}
.welfare-detail-content {
color: #3f4c5e;
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
line-height: 1.8;
}
.welfare-tag {
.welfare-detail-sheet .van-action-sheet__cancel {
position: absolute;
right: 10px;
top: 10px;
z-index: 2;
right: 0;
bottom: 0;
left: 0;
height: 50px;
margin: 0;
color: #66758a;
background-color: #fff;
text-align: center;
}
.welfare-tag .van-tag {
height: 24px;
padding: 0 9px;
border-radius: 12px;
font-weight: 500;
font-size: 12px;
line-height: 24px;
.welfare-option-selected-mark {
position: absolute;
right: 0;
top: 0;
z-index: 2;
display: flex;
width: 32px;
height: 32px;
padding: 0 0 4px 4px;
align-items: center;
justify-content: center;
border-radius: 0 11px 0 18px;
color: #fff;
background: #35b878;
box-shadow: none;
box-sizing: border-box;
font-size: 14px;
line-height: 32px;
text-align: center;
}
.welfare-deadline {
margin: 8px 0;
padding: 10px 12px;
margin: 0 12px 8px;
padding: 9px 11px;
background: #fff7f7;
border-radius: 6px;
border: 1px solid #ffe6e6;
border-radius: 10px;
color: var(--danger-color);
font-size: 13px;
display: flex;
@@ -351,8 +395,9 @@ layout("/layouts/platform_h5.html"){
}
.welfare-deadline .van-icon {
margin-right: 4px;
font-size: 16px;
margin-right: 8px;
flex-shrink: 0;
font-size: 13px;
}
.welfare-footer {
@@ -361,28 +406,13 @@ layout("/layouts/platform_h5.html"){
left: 0;
right: 0;
background: #fff;
padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
box-sizing: border-box;
border-radius: 14px 14px 0 0;
box-shadow: 0 -5px 20px rgba(45, 79, 118, .10);
border-radius: 0;
box-shadow: 0 -5px 20px rgba(45, 79, 118, .1);
z-index: 99;
}
.welfare-footer-summary {
margin-bottom: 9px;
color: #303846;
font-size: 14px;
line-height: 20px;
text-align: center;
}
.welfare-footer-summary strong {
margin: 0 2px;
color: #1989fa;
font-size: 18px;
font-weight: 600;
}
.welfare-submit-btn {
width: 100%;
height: 44px;
@@ -673,8 +703,9 @@ layout("/layouts/platform_h5.html"){
.welfare-section-title {
position: relative;
min-height: 40px;
padding: 8px 14px;
min-height: 42px;
margin: 0 12px 9px;
padding: 8px 12px;
box-sizing: border-box;
font-size: 14px;
font-weight: 600;
@@ -682,16 +713,15 @@ layout("/layouts/platform_h5.html"){
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
border-bottom: 1px solid rgba(230, 235, 242, .9);
border-radius: 10px;
background: rgba(255, 255, 255, .96);
border-bottom: 0;
box-shadow: 0 5px 16px rgba(43, 73, 112, .07);
backdrop-filter: blur(8px);
}
.welfare-section-title .van-icon {
font-size: 16px;
margin-right: 5px;
color: #1989fa;
position: relative;
top: -1px;
.van-sticky--fixed .welfare-section-title {
margin-top: 8px;
}
.welfare-section-title .title-text {
@@ -703,7 +733,7 @@ layout("/layouts/platform_h5.html"){
.welfare-section-title .title-count {
font-size: 13px;
color: var(--text-light);
margin-left: 8px;
margin-left: 0;
font-weight: normal;
}
@@ -744,9 +774,6 @@ layout("/layouts/platform_h5.html"){
<!-- 项目头部信息 -->
<div class="welfare-header" v-if="!pageLoading && projectInfo.id">
<img :src="projectInfo.cover" class="welfare-header-img"/>
<div class="welfare-header-overlay">
<div class="welfare-title">{{ projectInfo.name }}</div>
</div>
</div>
<div class="main-content" v-if="!pageLoading && projectInfo.id">
@@ -760,8 +787,6 @@ layout("/layouts/platform_h5.html"){
<van-sticky :offset-top="46" :z-index="30">
<div class="welfare-section-title">
<div class="title-text">
<van-icon name="gift-o"/>
<span>福利选项</span>
<span class="title-count">共 {{ projectInfo.options.length }} 项</span>
</div>
<div class="title-selection">已选 <strong>{{ selectedCount }}</strong>/{{ selectionLimit }}</div>
@@ -775,84 +800,69 @@ layout("/layouts/platform_h5.html"){
:key="option.id"
class="welfare-option"
:class="{ selected: projectInfo.isCheckBox === 'radio' ? selectedRadioId === option.id : option.selectNum > 0 }"
@click="projectInfo.isCheckBox === 'radio' && !isDeadlinePassed ? selectRadioOption(option.id) : null"
>
<div class="welfare-option-image" role="button" aria-label="查看福利图片"
@click.stop="previewOptionImage(option)">
<van-image :src="option.imgUrl" fit="cover" width="100%" height="100%" radius="4px"></van-image>
</div>
<van-icon
v-if="projectInfo.isCheckBox === 'radio' ? selectedRadioId === option.id : option.selectNum > 0"
class="welfare-option-selected-mark"
name="success"
></van-icon>
<div class="welfare-tag"
v-if="projectInfo.isCheckBox === 'radio' ? selectedRadioId === option.id : option.selectNum > 0">
<van-tag type="primary" round>已选择</van-tag>
</div>
<div class="welfare-option-content">
<div class="welfare-option-title">
<span class="welfare-option-type-tag">套餐</span>{{ option.optionName }}
<div class="welfare-option-main">
<div class="welfare-option-image" role="button" aria-label="查看福利图片"
@click.stop="previewOptionImage(option)">
<van-image :src="option.imgUrl" fit="cover" width="100%" height="100%" radius="4px"></van-image>
</div>
<div class="welfare-option-rank">
<van-icon name="medal-o"/>
<span>{{ optionRankText(option) }}</span>
</div>
<div class="welfare-option-desc">{{ optionBrief(option) }}</div>
<div class="welfare-option-footer">
<!-- 查看详情按钮 -->
<div class="welfare-detail-btn" @click.stop="showOptionDetail(option)">
<span style="position: relative; top: -0.5px">查看详情</span>
<van-icon name="arrow"/>
<div class="welfare-option-content">
<div class="welfare-option-title">
{{ option.optionName }}
</div>
<!-- 单选模式通过明确的状态按钮完成选择，截止后保持禁用。 -->
<van-button
v-if="projectInfo.isCheckBox === 'radio'"
class="welfare-radio-select-btn"
:class="{ 'is-selected': selectedRadioId === option.id }"
:disabled="isDeadlinePassed || (systemDefaultOption && systemDefaultOption.id !== option.id)"
:type="selectedRadioId === option.id ? 'primary' : 'info'"
plain
@click.stop="selectRadioOption(option.id)"
>{{ selectedRadioId === option.id ? '已选择' : '选择' }}</van-button>
<!-- <div class="welfare-option-tag-row">-->
<!-- <span class="welfare-option-type-tag">套餐</span>-->
<!-- </div>-->
<!-- 多选模式使用步进器 -->
<div class="welfare-option-checkbox"
v-if="projectInfo.isCheckBox !== 'radio' && option.selectNum > 0">
<van-stepper
:key="'input-number-'+index+'-'+option.selectNumKey|| 0"
v-model="option.selectNum"
integer
disable-input
:default-value="0"
:min="option.isSystemDefault ? 1 : 0"
:disabled="isDeadlinePassed"
input-width="40px"
button-size="22px"
@change="selectNumChange(index,option.selectNum)"
theme="round"
></van-stepper>
<div class="welfare-option-rank">
<van-icon name="medal-o"/>
<span>{{ optionRankText(option) }}</span>
</div>
<div class="welfare-option-desc-row" v-if="optionBrief(option)">
<div class="welfare-option-desc">
{{ optionBrief(option) }}
</div>
<div class="welfare-detail-link" @click.stop="showOptionDetail(option)">
<span>查看详情</span>
<van-icon name="arrow"/>
</div>
</div>
<van-button
v-else-if="projectInfo.isCheckBox !== 'radio'"
class="welfare-radio-select-btn"
type="info"
plain
:disabled="isDeadlinePassed || selectedCount >= selectionLimit"
@click.stop="selectCheckboxOption(index)"
>选择</van-button>
</div>
</div>
<div class="welfare-option-select-row" @click.stop>
<div class="welfare-option-checkbox">
<van-stepper
:key="'input-number-'+index+'-'+(option.selectNumKey || 0)"
:value="getOptionSelectNum(option)"
integer
disable-input
:min="option.isSystemDefault ? 1 : 0"
:max="projectInfo.isCheckBox === 'radio' ? 1 : selectionLimit"
:disabled="isDeadlinePassed || (projectInfo.isCheckBox === 'radio' && systemDefaultOption && systemDefaultOption.id !== option.id)"
input-width="40px"
button-size="22px"
@change="changeOptionQuantity(index, option, $event)"
theme="round"
></van-stepper>
</div>
</div>
</div>
</div>
</div>
<!-- 底部提交按钮 -->
<div class="welfare-footer" v-if="!pageLoading && projectInfo.id">
<div class="welfare-footer-summary">
已选择 <strong>{{ selectedCount }}</strong> 项，还可选 <strong>{{ remainingSelectionCount }}</strong> 项
</div>
<van-button type="primary" class="welfare-submit-btn" :disabled="submitButtonDisabled"
@click="submitSelection" round>
{{ isDeadlinePassed ? '已截止' : '确认选择' }}
@@ -870,7 +880,6 @@ layout("/layouts/platform_h5.html"){
<div class="confirm-card">
<div class="confirm-card-header">
<div class="confirm-card-title">
<van-icon name="location"></van-icon>
<span>收货信息</span>
</div>
</div>
@@ -914,7 +923,6 @@ layout("/layouts/platform_h5.html"){
<div class="confirm-card">
<div class="confirm-card-header">
<div class="confirm-card-title">
<van-icon name="gift-o"></van-icon>
<span>福利清单</span>
</div>
<div class="welfare-list-summary">
@@ -961,13 +969,14 @@ layout("/layouts/platform_h5.html"){
</van-popup>
<!-- 选项详情弹窗 -->
<van-popup v-model="showOptionDetailDialog" round closeable close-icon="close" position="bottom"
:style="{ maxHeight: '70%' }" @close="handleHistoryLayerComponentClose('detail')">
<van-action-sheet v-model="showOptionDetailDialog" class="welfare-detail-sheet"
:style="{ height: '78%' }" :close-on-click-overlay="true"
:title="selectedOption ? selectedOption.optionName : ''" cancel-text="取消"
@close="handleHistoryLayerComponentClose('detail')">
<div class="welfare-detail-popup" v-if="selectedOption">
<div class="welfare-detail-title">{{ selectedOption.optionName }}</div>
<div class="welfare-detail-content" v-html="selectedOption.description"></div>
</div>
</van-popup>
</van-action-sheet>
<!-- 收货地址从右侧全屏滑入，并继续接入页面统一的弹层历史栈。 -->
<van-popup v-model="showAddressPopup" class="address-full-popup" position="right"
@@ -1166,7 +1175,7 @@ layout("/layouts/platform_h5.html"){
const div = document.createElement("div")
div.innerHTML = content
const text = (div.textContent || div.innerText || "").replace(/\s+/g, " ").trim()
return text || "暂无套餐详情"
return text
},
selectNumChange(index, newValue) {
const option = this.projectInfo.options[index];
@@ -1207,7 +1216,43 @@ layout("/layouts/platform_h5.html"){
}
},
// 多选项目的“选择”按钮首次加入一份，后续数量继续交由步进器调整。
/**
* 获取卡片数量控件的当前值，单选项目按是否选中转换为 0 或 1。
* @param option 福利选项
* @return {number} 数量控件展示值
*/
getOptionSelectNum(option) {
if (this.projectInfo.isCheckBox === "radio") {
return this.selectedRadioId === option.id ? 1 : 0
}
return Number(option.selectNum) || 0
},
/**
* 统一处理单选和多选项目的数量变化，保持原有默认项及总数量限制。
* @param index 福利选项索引
* @param option 福利选项
* @param value 数量控件的新值
*/
changeOptionQuantity(index, option, value) {
const quantity = Number(value) || 0
if (this.projectInfo.isCheckBox === "radio") {
if (quantity > 0) {
this.selectRadioOption(option.id)
return
}
if (option.isSystemDefault) return
this.selectedRadioId = ""
this.projectInfo.options.forEach((item) => {
item.selectNum = 0
})
return
}
this.$set(option, "selectNum", quantity)
this.selectNumChange(index, quantity)
},
// 保留原有首次选择方法，兼容其他调用入口。
selectCheckboxOption(index) {
if (this.isDeadlinePassed) {
this.$toast.fail("已过选择截止时间，无法修改")
@@ -1247,8 +1292,8 @@ layout("/layouts/platform_h5.html"){
this.projectInfo.options.forEach((option) => {
this.$set(option, "selectNum", 0)
})
// 获取用户已有的选择
initialRequests.push(this.getUserSelection())
// 先恢复当前项目的选择，再使用“我的签名”中的签名覆盖业务历史签名。
initialRequests.push(this.getUserSelection().then(() => this.getUserSignature()))
}
return Promise.all(initialRequests)
} else {
@@ -1318,6 +1363,20 @@ layout("/layouts/platform_h5.html"){
})
},
/**
* 获取“我的签名”中当前用户保存的签名。
*
* @return {Promise<void>} 签名读取完成后结束；无签名或读取失败时清空签名，由用户现场签字
*/
getUserSignature() {
return this.$axios.post("/platform/signature/get").then((res) => {
const signatureData = res.code === 0 ? (res.data || {}) : {}
this.formData.userSign = signatureData.signature || ""
}).catch(() => {
this.formData.userSign = ""
})
},
// 执行提交
doSubmit() {
// 再次检查截止时间
@@ -1467,14 +1526,6 @@ layout("/layouts/platform_h5.html"){
return
}
// 重置签名数据
if (this.projectInfo.signMode === 2) {
// 如果已经有签名数据，且签名模式是修改，保留原签名
if (!this.formData.userSign || !this.hasSubmittedBefore) {
this.formData.userSign = ""
}
}
this.openHistoryLayer("confirm")
},
src/main/resources/views/platform/zhghh5/welfare/select/list.html
+197 -30
View File
@@ -38,11 +38,14 @@ layout("/layouts/platform_h5.html"){
height: 134px;
overflow: hidden;
border-radius: 12px;
background-color: #fff0f1;
box-shadow: 0 8px 20px rgba(190, 89, 98, .12);
background-color: #247fe8;
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
}
.welfare-list-hero__image {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
@@ -51,17 +54,18 @@ layout("/layouts/platform_h5.html"){
}
.welfare-list-hero__copy {
position: absolute;
top: 0;
bottom: 0;
left: 0;
position: relative;
z-index: 1;
display: flex;
padding-left: 18px;
width: 64%;
height: 100%;
padding-left: 16px;
justify-content: center;
flex-direction: column;
color: #fff;
box-sizing: border-box;
text-shadow: 0 2px 8px rgba(190, 74, 84, .55);
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);
}
.welfare-list-hero__title {
@@ -95,10 +99,30 @@ layout("/layouts/platform_h5.html"){
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;
}
@@ -169,7 +193,7 @@ layout("/layouts/platform_h5.html"){
.welfare-list-card__body {
position: relative;
padding: 12px 42px 14px 14px;
padding: 12px 14px 14px;
box-sizing: border-box;
}
@@ -192,6 +216,67 @@ layout("/layouts/platform_h5.html"){
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;
white-space: nowrap;
}
.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;
}
.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;
@@ -206,6 +291,11 @@ layout("/layouts/platform_h5.html"){
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;
@@ -227,7 +317,10 @@ layout("/layouts/platform_h5.html"){
}
.welfare-list-card__time {
margin-top: 6px;
display: flex;
min-width: 0;
margin-top: 8px;
align-items: center;
overflow: hidden;
color: #8491a6;
font-size: 12px;
@@ -236,13 +329,35 @@ layout("/layouts/platform_h5.html"){
white-space: nowrap;
}
.welfare-list-card__arrow {
position: absolute;
top: 50%;
right: 14px;
color: #adb7c6;
font-size: 17px;
transform: translateY(-50%);
.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,
@@ -303,7 +418,7 @@ layout("/layouts/platform_h5.html"){
<section class="welfare-list-hero">
<img
class="welfare-list-hero__image"
src="/assets/mobile/img/home/v4/feature-benefit.png"
src="/assets/mobile/img/benefit/welfare-selection-hero-v2.png"
alt="暖心福利插画"
>
<div class="welfare-list-hero__copy">
@@ -314,11 +429,25 @@ layout("/layouts/platform_h5.html"){
<van-sticky :offset-top="46">
<div class="welfare-list-filter-sticky">
<van-dropdown-menu class="welfare-list-filter" active-color="#1989fa">
<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>
@@ -355,16 +484,40 @@ layout("/layouts/platform_h5.html"){
<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"
>{{ getWelfareStatus(row).text }}</span>
>
<van-icon :name="getWelfareStatus(row).icon"></van-icon>
{{ getWelfareStatus(row).text }}
</span>
</div>
<div class="welfare-list-card__time" v-if="row.choiceTimeStart && row.choiceTimeEnd">
选择时间：{{ $moment(row.choiceTimeStart).format('MM/DD HH:mm') }} - {{ $moment(row.choiceTimeEnd).format('MM/DD HH:mm') }}
</div>
<div class="welfare-list-card__time" v-else>选择时间：未设置</div>
<van-icon class="welfare-list-card__arrow" name="arrow"></van-icon>
</div>
</article>
</div>
@@ -387,11 +540,13 @@ 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: ""
}
}
},
@@ -437,19 +592,31 @@ layout("/layouts/platform_h5.html"){
*/
getWelfareStatus(row) {
if (Number(row.isChoose) === 1) {
return {type: "selected", text: "已选择"}
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: "未开始"}
return {type: "upcoming", text: "未开始", icon: "clock-o"}
}
if (endTime && now > endTime) {
return {type: "ended", text: "已结束"}
return {type: "ended", text: "已结束", icon: "close"}
}
return {type: "available", text: "可选择"}
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) {