change
This commit is contained in:
@@ -2,159 +2,874 @@
|
||||
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__summary {
|
||||
display: flex;
|
||||
min-height: 120px;
|
||||
padding: 14px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.welfare-list-card__cover {
|
||||
display: block;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
flex: 0 0 92px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
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__cover 的固定高度，避免占位高度被 100% 覆盖。 */
|
||||
.welfare-list-card__cover--empty {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.welfare-list-card__image-empty {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: #edf4fc;
|
||||
color: #9ba9bc;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.welfare-list-card__image-empty .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.welfare-list-card__image-empty span {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.welfare-list-card__body {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
padding: 4px 0 4px 14px;
|
||||
flex: 1;
|
||||
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;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
line-height: 23px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 时间信息样式 */
|
||||
.wf-time-row {
|
||||
|
||||
.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.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;
|
||||
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__arrow {
|
||||
margin-left: 2px;
|
||||
flex: none;
|
||||
color: #adb7c6;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.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,
|
||||
.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="5" @change="doSearch" v-model="pageForm.year"></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="openView(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"
|
||||
>
|
||||
<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>
|
||||
</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__expanded" v-show="row.expanded">
|
||||
<div class="welfare-inline-loading" v-if="row.detailLoading">
|
||||
<van-loading size="20" color="#1989fa">加载中...</van-loading>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
<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: []
|
||||
}
|
||||
},
|
||||
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/mine/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/mine/pageData", this.pageForm)
|
||||
.then((res) => {
|
||||
if (res.code !== 0 || !res.data) return
|
||||
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) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
async getUserSelection(projectId) {
|
||||
const resp = await this.$axios.post("/platform/welfare/mine/getUserSelection", {
|
||||
projectId: projectId,
|
||||
userId: this.$store.state.user.id
|
||||
})
|
||||
return resp
|
||||
|
||||
/**
|
||||
* 复用原“我的福利选择”弹窗接口查询当前用户的福利选择明细。
|
||||
*/
|
||||
getUserSelection(projectId) {
|
||||
return this.$axios.post("/platform/welfare/userSelect/getUserSelection", {projectId: projectId})
|
||||
},
|
||||
async openView(item) {
|
||||
this.$refs.selectViewRef.onOpen(item.id)
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断福利封面地址是否有效。cover 应为非空图片 URL 字符串；返回 Boolean，true 时渲染图片组件，false 时展示“暂无图片”占位。
|
||||
*/
|
||||
hasCoverImage(cover) {
|
||||
return typeof cover === "string" && !!cover.trim()
|
||||
},
|
||||
|
||||
/**
|
||||
* 展开或收起福利详情；首次展开时加载项目及用户选择数据，后续直接复用已加载内容。
|
||||
* @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()
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
@@ -324,7 +321,7 @@ const selectView = {
|
||||
/deep/ .welfare-card__header i {
|
||||
font-size: 16px;
|
||||
margin-right: 6px;
|
||||
color: var(--color-primary);
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
/deep/ .welfare-card__header span {
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user