整改福利UI
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -2,131 +2,73 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fc;
|
||||
}
|
||||
|
||||
#app {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 地址列表视觉样式由公共地址组件统一提供，页面仅保留自身容器样式。 */
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="back" left-arrow left-text="返回" placeholder title="地址管理"></van-nav-bar>
|
||||
</van-sticky>
|
||||
|
||||
<van-address-list
|
||||
:list="addressList"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
add-button-text="新增地址"
|
||||
default-tag-text="默认"
|
||||
v-if="addressList && addressList.length>0"
|
||||
v-model="chosenAddressId"
|
||||
></van-address-list>
|
||||
|
||||
<van-empty image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据" v-else>
|
||||
<van-button @click="onAdd" class="mt10" round type="primary">新增地址</van-button>
|
||||
</van-empty>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" :title="title" v-model="editActionSheet">
|
||||
<van-address-edit
|
||||
:address-info="addressInfo"
|
||||
:area-columns-placeholder="['请选择', '请选择', '请选择']"
|
||||
:area-list="areaList"
|
||||
:show-delete="showDelete"
|
||||
@delete="onDelete"
|
||||
@save="onSave"
|
||||
ref="address"
|
||||
show-search-result
|
||||
show-set-default
|
||||
tel-maxlengtfals
|
||||
></van-address-edit>
|
||||
</van-action-sheet>
|
||||
<welfare-address-manager class="address-size-compact" page-title="地址管理"
|
||||
flat-list :area-list="areaList" @back="handlePageBack">
|
||||
</welfare-address-manager>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("/platform/zhghh5/welfare/include/areaList.js"){}#-->
|
||||
<!--#include("/platform/zhghh5/welfare/address/addressManager.js"){}#-->
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
"welfare-address-manager": WELFARE_ADDRESS_MANAGER_COMPONENT
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
areaList: areaList,
|
||||
addressInfo: {},
|
||||
addressList: [],
|
||||
editActionSheet: false,
|
||||
showDelete: "",
|
||||
title: "",
|
||||
chosenAddressId: "",
|
||||
projectId: ""
|
||||
projectId: "",
|
||||
historyLayerPageKey: "",
|
||||
areaList: areaList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async selectUserAddress() {
|
||||
const loading = this.$toast.loading({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
const resp = await this.$axios.post("/platform/welfare/addressManage/selectUserAddress", { userId: this.$store.state.user.id })
|
||||
resp.data.map((r) => {
|
||||
r.name = r.userName
|
||||
r.default = r.isDefault
|
||||
r.address = "收货地址:" + r.province + r.city + r.county + r.addressDetail
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.addressList = resp.data
|
||||
loading.close()
|
||||
}, 500)
|
||||
/**
|
||||
* 注册地址管理页面历史。
|
||||
* 页面标识由项目 ID 组成，公共地址组件通过 subscribe 接收栈变化；无返回值。
|
||||
*/
|
||||
registerHistoryLayers() {
|
||||
this.historyLayerPageKey = "welfare-address-manage-" + (this.projectId || "default")
|
||||
if (!window.h5HistoryLayerManager) return
|
||||
window.h5HistoryLayerManager.register(this.historyLayerPageKey, null)
|
||||
},
|
||||
back() {
|
||||
|
||||
// 有子弹框时关闭最上层弹框，没有弹框时返回上一个业务页面。
|
||||
handlePageBack() {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.stack.length) {
|
||||
window.h5HistoryLayerManager.close()
|
||||
return
|
||||
}
|
||||
this.historyBack()
|
||||
},
|
||||
onEdit(row) {
|
||||
this.title = "编辑地址"
|
||||
const data = JSON.parse(JSON.stringify(row))
|
||||
this.showDelete = !!data.id
|
||||
this.addressInfo = data
|
||||
this.editActionSheet = true
|
||||
},
|
||||
onAdd() {
|
||||
this.title = "新增地址"
|
||||
this.addressInfo = {}
|
||||
this.editActionSheet = true
|
||||
},
|
||||
async onSave(row) {
|
||||
const loading = this.$toast.loading({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
row.userName = row.name
|
||||
const resp = await this.$axios.post("/platform/welfare/addressManage/doSaveUserAddress", { data: JSON.stringify(row) })
|
||||
if (resp.code === 0) {
|
||||
this.$toast.success(resp.msg)
|
||||
await this.selectUserAddress()
|
||||
loading.close()
|
||||
this.editActionSheet = false
|
||||
} else {
|
||||
this.$toast.fail(resp.msg)
|
||||
}
|
||||
},
|
||||
async onDelete(row) {
|
||||
const loading = this.$toast.loading({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
const resp = await this.$axios.post("/platform/welfare/addressManage/deleteAddress", { id: row.id })
|
||||
if (resp.code === 0) {
|
||||
this.$toast.success(resp.msg)
|
||||
await this.selectUserAddress()
|
||||
loading.close()
|
||||
this.editActionSheet = false
|
||||
} else {
|
||||
this.$toast.fail(resp.msg)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.projectId = GetQueryString("projectId")
|
||||
this.selectUserAddress()
|
||||
this.projectId = GetQueryString("projectId") || ""
|
||||
this.registerHistoryLayers()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (window.h5HistoryLayerManager) {
|
||||
window.h5HistoryLayerManager.unregister(this.historyLayerPageKey)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -2,101 +2,416 @@
|
||||
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: #fff0f1;
|
||||
box-shadow: 0 8px 20px rgba(190, 89, 98, .12);
|
||||
}
|
||||
/* 左右布局容器 */
|
||||
.wf-card-layout {
|
||||
|
||||
.welfare-list-hero__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.welfare-list-hero__copy {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
padding-left: 18px;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0 2px 8px rgba(190, 74, 84, .55);
|
||||
}
|
||||
/* 左侧图片容器 */
|
||||
.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);
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-menu__title {
|
||||
color: #263548;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-menu__title--active,
|
||||
.welfare-list-filter .van-dropdown-item__option--active,
|
||||
.welfare-list-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-item__option {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.welfare-list-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
/* 标题样式 */
|
||||
.wf-card-heading {
|
||||
|
||||
.welfare-list-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.welfare-list-card__cover {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: #f7f9fc;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/* 福利封面统一高度并从中心覆盖显示，保证卡片整齐且不产生两侧留白。 */
|
||||
.welfare-list-card__cover .van-image__img {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
object-position: center;
|
||||
background-color: #f7f9fc;
|
||||
}
|
||||
|
||||
.welfare-list-card__cover .van-image__loading,
|
||||
.welfare-list-card__cover .van-image__error {
|
||||
color: #9ba9bc;
|
||||
background-color: #edf4fc;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 空图外层复用 welfare-list-card__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;
|
||||
padding: 12px 42px 14px 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.welfare-list-card__head {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
.welfare-list-card__title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
color: #202938;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
line-height: 23px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
/* 时间信息样式 */
|
||||
.wf-time-row {
|
||||
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__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 {
|
||||
margin-top: 6px;
|
||||
overflow: hidden;
|
||||
color: #8491a6;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.welfare-list-card__arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 14px;
|
||||
color: #adb7c6;
|
||||
font-size: 17px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.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/home/v4/feature-benefit.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-dropdown-menu class="welfare-list-filter" active-color="#1989fa">
|
||||
<year-van-dropdown-item
|
||||
:num="5"
|
||||
v-model="pageForm.year"
|
||||
@change="doSearch"
|
||||
></year-van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<van-list
|
||||
v-if="tableData.length > 0"
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="pageData"
|
||||
>
|
||||
<div class="welfare-list-cards">
|
||||
<article
|
||||
v-for="row in tableData"
|
||||
:key="row.id"
|
||||
class="welfare-list-card"
|
||||
@click="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__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>
|
||||
<span
|
||||
class="welfare-list-card__status"
|
||||
:class="row.isChoose ? 'is-selected' : 'is-available'"
|
||||
>{{ row.isChoose ? '已选择' : '未选择' }}</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>
|
||||
</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>
|
||||
@@ -125,34 +440,59 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
},
|
||||
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 || []
|
||||
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 为福利项目 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 resp
|
||||
},
|
||||
async openView(item) {
|
||||
|
||||
/**
|
||||
* 判断福利封面地址是否有效。cover 应为非空图片 URL 字符串；返回 Boolean，true 时渲染图片组件，false 时展示“暂无图片”占位。
|
||||
*/
|
||||
hasCoverImage(cover) {
|
||||
return typeof cover === "string" && !!cover.trim()
|
||||
},
|
||||
|
||||
openView(item) {
|
||||
this.$refs.selectViewRef.onOpen(item.id)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -324,7 +324,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 {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -3,101 +3,379 @@ 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: #fff0f1;
|
||||
box-shadow: 0 8px 20px rgba(190, 89, 98, .12);
|
||||
}
|
||||
/* 左右布局容器 */
|
||||
.wf-card-layout {
|
||||
|
||||
.welfare-list-hero__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.welfare-list-hero__copy {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
padding-left: 18px;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0 2px 8px rgba(190, 74, 84, .55);
|
||||
}
|
||||
/* 左侧图片容器 */
|
||||
.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);
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-menu__title {
|
||||
color: #263548;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-menu__title--active,
|
||||
.welfare-list-filter .van-dropdown-item__option--active,
|
||||
.welfare-list-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-item__option {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.welfare-list-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
/* 标题样式 */
|
||||
.wf-card-heading {
|
||||
|
||||
.welfare-list-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.welfare-list-card__cover {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: #f7f9fc;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/* 福利封面统一高度并从中心覆盖显示，保证卡片整齐且不产生两侧留白。 */
|
||||
.welfare-list-card__cover .van-image__img {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
object-position: center;
|
||||
background-color: #f7f9fc;
|
||||
}
|
||||
|
||||
.welfare-list-card__cover .van-image__loading,
|
||||
.welfare-list-card__cover .van-image__error {
|
||||
color: #9ba9bc;
|
||||
background-color: #edf4fc;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.welfare-list-card__body {
|
||||
position: relative;
|
||||
padding: 12px 42px 14px 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.welfare-list-card__head {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
.welfare-list-card__title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
color: #202938;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
line-height: 23px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
/* 时间信息样式 */
|
||||
.wf-time-row {
|
||||
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__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 {
|
||||
margin-top: 6px;
|
||||
overflow: hidden;
|
||||
color: #8491a6;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.welfare-list-card__arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 14px;
|
||||
color: #adb7c6;
|
||||
font-size: 17px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.welfare-list-page .van-list__finished-text,
|
||||
.welfare-list-page .van-list__loading {
|
||||
color: #9aa7b8;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.welfare-list-empty {
|
||||
display: flex;
|
||||
min-height: 300px;
|
||||
padding: 28px 18px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 空状态插画按原始宽高比缩放，避免被 Vant 默认方形图片容器挤压变形。 */
|
||||
.welfare-list-empty img {
|
||||
display: block;
|
||||
width: 86%;
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.welfare-list-empty__title {
|
||||
margin-top: -8px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.welfare-list-empty__hint {
|
||||
margin-top: 6px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="()=>this.$pjaxReplace('/platform/h5/home')" left-arrow left-text="返回" placeholder title="福利列表"></van-nav-bar>
|
||||
<van-dropdown-menu>
|
||||
<year-van-dropdown-item :num="10" v-model="pageForm.year" @change="doSearch"></year-van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
<div class="welfare-list-page">
|
||||
<van-nav-bar
|
||||
title="福利列表"
|
||||
left-arrow
|
||||
left-text="返回"
|
||||
fixed
|
||||
placeholder
|
||||
@click-left="goBack"
|
||||
></van-nav-bar>
|
||||
|
||||
<div>
|
||||
<van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0" v-model="loading">
|
||||
<div class="wf-welfare-list">
|
||||
<div class="wf-welfare-card" v-for="row in tableData" :key="row.id" @click="openChoose(row)">
|
||||
<van-tag mark :type="row.isChoose?'success':''" style="position: absolute; left: 5px; top: 5px; z-index: 1">
|
||||
{{row.isChoose?'已选择':'未选择'}}
|
||||
</van-tag>
|
||||
<div class="wf-card-layout">
|
||||
<div class="wf-card-img-container">
|
||||
<van-image :src="row.cover" fit="cover" width="100%" height="100%" radius="4"></van-image>
|
||||
</div>
|
||||
<div class="wf-card-content">
|
||||
<div class="wf-card-heading">{{row.name}}</div>
|
||||
<div class="wf-time-row">
|
||||
<span class="wf-time-label">开始时间:</span>
|
||||
{{$moment(row.choiceTimeStart).format('YYYY-MM-DD HH:mm')}}
|
||||
</div>
|
||||
<div class="wf-time-row">
|
||||
<span class="wf-time-label">结束时间:</span>
|
||||
{{$moment(row.choiceTimeEnd).format('YYYY-MM-DD HH:mm')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="welfare-list-content">
|
||||
<section class="welfare-list-hero">
|
||||
<img
|
||||
class="welfare-list-hero__image"
|
||||
src="/assets/mobile/img/home/v4/feature-benefit.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-dropdown-menu class="welfare-list-filter" active-color="#1989fa">
|
||||
<year-van-dropdown-item
|
||||
:num="10"
|
||||
v-model="pageForm.year"
|
||||
@change="doSearch"
|
||||
></year-van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<van-list
|
||||
v-if="tableData.length > 0"
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="pageData"
|
||||
>
|
||||
<div class="welfare-list-cards">
|
||||
<article
|
||||
v-for="row in tableData"
|
||||
:key="row.id"
|
||||
class="welfare-list-card"
|
||||
@click="openChoose(row)"
|
||||
>
|
||||
<van-image
|
||||
class="welfare-list-card__cover"
|
||||
:src="row.cover"
|
||||
:alt="row.name"
|
||||
width="100%"
|
||||
>
|
||||
<template #loading>
|
||||
<van-loading type="spinner" size="22"></van-loading>
|
||||
</template>
|
||||
<template #error>
|
||||
<van-icon name="photo-o" size="34"></van-icon>
|
||||
</template>
|
||||
</van-image>
|
||||
|
||||
<div class="welfare-list-card__body">
|
||||
<div class="welfare-list-card__head">
|
||||
<div class="welfare-list-card__title">{{ row.name }}</div>
|
||||
<span
|
||||
class="welfare-list-card__status"
|
||||
:class="'is-' + getWelfareStatus(row).type"
|
||||
>{{ 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>
|
||||
</van-list>
|
||||
|
||||
<div class="welfare-list-empty" v-else-if="!loading">
|
||||
<img src="/assets/mobile/img/benefit/welfare-empty.png" alt="福利项目空状态插画">
|
||||
<div class="welfare-list-empty__title">暂无福利项目</div>
|
||||
<div class="welfare-list-empty__hint">当前年度暂未发布可选择的福利项目</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<van-empty v-else image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"></van-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -118,28 +396,63 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$pjaxReplace("/platform/h5/home")
|
||||
},
|
||||
doSearch() {
|
||||
this.tableKey = new Date().getTime()
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.pageData()
|
||||
},
|
||||
|
||||
/**
|
||||
* 福利列表分页接口参数：pageNumber 为页码、pageSize 为每页条数、year 为查询年度。
|
||||
* 接口返回 Result<Pagination>，data.list 为福利项目数组，data.totalCount 为项目总数。
|
||||
*/
|
||||
pageData() {
|
||||
this.loading = true
|
||||
this.$axios.post("/platform/welfare/userSelect/pageData", this.pageForm).then((res) => {
|
||||
this.tableData = this.tableData.concat(res.data.list)
|
||||
if (this.tableData.length === res.data.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
this.loading = false
|
||||
})
|
||||
this.$axios.post("/platform/welfare/userSelect/pageData", this.pageForm)
|
||||
.then((res) => {
|
||||
if (res.code !== 0 || !res.data) return
|
||||
const list = res.data.list || []
|
||||
this.tableData = this.tableData.concat(list)
|
||||
this.pageForm.totalCount = res.data.totalCount || 0
|
||||
if (this.tableData.length >= this.pageForm.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
async openChoose(row) {
|
||||
/**
|
||||
* 福利状态优先展示用户选择结果，其次根据选择起止时间区分未开始、可选择和已结束。
|
||||
* @param row 福利项目，需包含 isChoose、choiceTimeStart、choiceTimeEnd
|
||||
* @return {{type: string, text: string}} type 用于状态样式，text 为页面展示文案
|
||||
*/
|
||||
getWelfareStatus(row) {
|
||||
if (Number(row.isChoose) === 1) {
|
||||
return {type: "selected", text: "已选择"}
|
||||
}
|
||||
|
||||
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: "未开始"}
|
||||
}
|
||||
if (endTime && now > endTime) {
|
||||
return {type: "ended", text: "已结束"}
|
||||
}
|
||||
return {type: "available", text: "可选择"}
|
||||
},
|
||||
|
||||
openChoose(row) {
|
||||
this.$pjaxReplace("/platform/h5/welfare/userSelect/index?id=" + row.id)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -3,6 +3,11 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
:root {
|
||||
/* 当前福利成功页覆盖全局 H5 的 Vant 主色。 */
|
||||
--color-primary: #1989fa;
|
||||
}
|
||||
|
||||
.success-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f7f8fa;
|
||||
|
||||
@@ -3,6 +3,11 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
:root {
|
||||
/* 当前福利选择页覆盖全局 H5 的 Vant 主色。 */
|
||||
--color-primary: #1989fa;
|
||||
}
|
||||
|
||||
.selection:not(:last-child) {
|
||||
border-bottom: 1px dashed lightgrey;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,11 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
:root {
|
||||
/* 当前福利列表覆盖全局 H5 的 Vant 主色。 */
|
||||
--color-primary: #1989fa;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
|
||||
Reference in New Issue
Block a user