整改福利UI
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@@ -1,13 +1,28 @@
|
||||
<template>
|
||||
<div class="h5-signature">
|
||||
<div v-if="!showSignaturePanel" class="main-panel">
|
||||
<slot v-if="$slots.default"></slot>
|
||||
<template v-else>
|
||||
<van-button @click="openSignature" class="open-button" size="middle" plain native-type="button">打开签字板</van-button>
|
||||
<van-image :src="signatureContent"></van-image>
|
||||
</template>
|
||||
<slot v-if="$slots.default"></slot>
|
||||
<div v-else class="signature-entry">
|
||||
<!-- 未签名时展示统一空状态和入口，组件放入 van-field 时仍保持完整宽度。 -->
|
||||
<div v-if="!signatureContent" class="signature-entry-panel">
|
||||
<van-icon class="signature-placeholder-icon" name="edit"></van-icon>
|
||||
<div class="signature-placeholder-text">请完成本人手写签名</div>
|
||||
<van-button @click="openSignature" class="signature-open-button" block plain
|
||||
native-type="button">进入签字板</van-button>
|
||||
</div>
|
||||
|
||||
<!-- 已签名时直接预览结果，并在下方提供统一的重新签名入口。 -->
|
||||
<div v-else class="signature-entry-panel signature-entry-panel--completed">
|
||||
<van-image :src="signatureContent" class="signature-preview" fit="contain"></van-image>
|
||||
<div class="signature-completed-text">
|
||||
<van-icon name="passed"></van-icon>
|
||||
<span>已完成本人手写签名</span>
|
||||
</div>
|
||||
</div>
|
||||
<button v-if="signatureContent" @click="openSignature" class="signature-reset-button"
|
||||
type="button">重新签名</button>
|
||||
</div>
|
||||
<van-popup v-model="showSignaturePanel" :style="{ height: '100vh', width: '100vw' }">
|
||||
<van-popup v-model="showSignaturePanel" :close-on-click-overlay="false"
|
||||
:style="{ height: '100vh', width: '100vw' }" @close="handleSignaturePopupClose">
|
||||
<signature @save="save"></signature>
|
||||
</van-popup>
|
||||
</div>
|
||||
@@ -36,14 +51,39 @@ module.exports = {
|
||||
data() {
|
||||
return {
|
||||
signatureContent: null,
|
||||
showSignaturePanel: false
|
||||
showSignaturePanel: false,
|
||||
historyLayerName: "",
|
||||
historyLayerUnsubscribe: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 打开签字板。
|
||||
* 无请求参数；优先向全局历史栈增加当前签字弹层，返回值为空。
|
||||
*/
|
||||
openSignature() {
|
||||
const manager = window.h5HistoryLayerManager
|
||||
if (manager && manager.open(this.historyLayerName)) return
|
||||
this.showSignaturePanel = true
|
||||
},
|
||||
|
||||
// 保存成功或业务主动关闭时同步回退签字弹层历史，管理器不可用时直接关闭 Popup。
|
||||
closeSignaturePanel() {
|
||||
const manager = window.h5HistoryLayerManager
|
||||
if (manager && manager.close(this.historyLayerName)) return
|
||||
this.showSignaturePanel = false
|
||||
},
|
||||
|
||||
// Vant 组件自行关闭时仅处理仍位于栈顶的签字层，避免返回同步触发重复 history.back。
|
||||
handleSignaturePopupClose() {
|
||||
const manager = window.h5HistoryLayerManager
|
||||
if (!manager) return
|
||||
const stack = manager.stack
|
||||
if (stack[stack.length - 1] === this.historyLayerName) {
|
||||
manager.close(this.historyLayerName)
|
||||
}
|
||||
},
|
||||
|
||||
save(signature) {
|
||||
const file = this.base64ToFile(signature, "signature.png")
|
||||
const formData = new FormData()
|
||||
@@ -59,11 +99,20 @@ module.exports = {
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
alert("保存成功")
|
||||
this.showSignaturePanel = false
|
||||
// 保存成功后使用项目统一的 Vant 反馈，避免浏览器原生弹框阻塞签字流程。
|
||||
this.$toast.success({
|
||||
message: "签名保存成功",
|
||||
duration: 1500,
|
||||
forbidClick: true
|
||||
})
|
||||
this.$emit("input", res.data)
|
||||
this.closeSignaturePanel()
|
||||
} else {
|
||||
alert("保存失败")
|
||||
// 接口返回失败时保留签字板，方便用户重试。
|
||||
this.$toast.fail({
|
||||
message: res.msg || "签名保存失败，请重试",
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -86,27 +135,114 @@ module.exports = {
|
||||
return new File([blob], filename, { type: contentType })
|
||||
}
|
||||
},
|
||||
created() {}
|
||||
mounted() {
|
||||
const manager = window.h5HistoryLayerManager
|
||||
if (!manager || typeof manager.ensureRegistered !== "function" || typeof manager.subscribe !== "function") return
|
||||
|
||||
// 每个组件实例使用唯一弹层名称，同一页面存在多个签字组件时互不影响。
|
||||
this.historyLayerName = "h5-signature-" + this._uid
|
||||
manager.ensureRegistered("h5-signature-page-" + window.location.pathname + window.location.search)
|
||||
this.historyLayerUnsubscribe = manager.subscribe((stack) => {
|
||||
this.showSignaturePanel = stack.includes(this.historyLayerName)
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (typeof this.historyLayerUnsubscribe === "function") {
|
||||
this.historyLayerUnsubscribe()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.h5-signature {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.main-panel {
|
||||
position: relative;
|
||||
flex-direction: column-reverse;
|
||||
.signature-entry {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
row-gap: 10px;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.main-panel .van-image {
|
||||
.signature-entry-panel {
|
||||
width: 100%;
|
||||
min-height: 150px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border: 1px dashed #dfe6ef;
|
||||
border-radius: 9px;
|
||||
background: #fbfcfe;
|
||||
}
|
||||
|
||||
.main-panel .open-button {
|
||||
color: var(--color-primary);
|
||||
.signature-placeholder-icon {
|
||||
margin-bottom: 6px;
|
||||
color: #c7cfda;
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.signature-placeholder-text {
|
||||
margin-bottom: 12px;
|
||||
color: #9aa4b2;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.signature-open-button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: var(--color-primary, #1989fa);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(90deg, #f0f7ff, #f5f9ff);
|
||||
border-color: #d8e9ff;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.signature-entry-panel--completed {
|
||||
min-height: 150px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.signature-preview {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.signature-completed-text {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #5f6b7a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.signature-completed-text .van-icon {
|
||||
margin-right: 5px;
|
||||
color: #28a745;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.signature-reset-button {
|
||||
align-self: center;
|
||||
margin-top: 10px;
|
||||
padding: 3px 12px;
|
||||
color: var(--color-primary, #1989fa);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -57,7 +57,16 @@ module.exports = {
|
||||
},
|
||||
save() {
|
||||
if (signature.isEmpty()) {
|
||||
alert("请签字后再保存")
|
||||
// H5 页面使用统一的 Vant 提示；未加载 Vant 的独立签字页保留原生提示作为兼容兜底。
|
||||
if (typeof this.$toast === "function") {
|
||||
this.$toast({
|
||||
message: "请先完成手写签名",
|
||||
icon: "edit",
|
||||
duration: 2000
|
||||
})
|
||||
} else {
|
||||
alert("请先完成手写签名")
|
||||
}
|
||||
return
|
||||
}
|
||||
// const png = signature.getPNG()
|
||||
|
||||
@@ -95,6 +95,152 @@
|
||||
// toast多例模式
|
||||
vant.Toast.allowMultiple()
|
||||
|
||||
/**
|
||||
* H5 弹层历史管理器。
|
||||
* 页面通过 register 注册页面标识和弹层状态回调，通过 open/close/closeAll 维护浏览器历史；
|
||||
* popstate 返回 true 表示本次返回仅用于同步弹层，PJAX 不再执行页面跳转。
|
||||
*/
|
||||
window.h5HistoryLayerManager = {
|
||||
pageKey: "",
|
||||
stack: [],
|
||||
onChange: null,
|
||||
afterClose: null,
|
||||
subscribers: [],
|
||||
pendingNavigation: null,
|
||||
register(pageKey, onChange) {
|
||||
const currentState = window.history.state || {}
|
||||
this.pageKey = pageKey
|
||||
this.stack = []
|
||||
this.onChange = onChange
|
||||
this.afterClose = null
|
||||
this.pendingNavigation = null
|
||||
window.history.replaceState({
|
||||
...currentState,
|
||||
url: currentState.url || window.location.href,
|
||||
h5HistoryLayerPage: pageKey,
|
||||
h5HistoryLayerStack: []
|
||||
}, "", window.location.href)
|
||||
this.notify()
|
||||
},
|
||||
/**
|
||||
* 确保当前页面已初始化弹层历史。
|
||||
* pageKey 传当前页面的稳定标识；返回 boolean，true 表示已有或已完成页面注册。
|
||||
*/
|
||||
ensureRegistered(pageKey) {
|
||||
if (this.pageKey) return true
|
||||
this.register(pageKey, null)
|
||||
return true
|
||||
},
|
||||
/**
|
||||
* 订阅全局弹层栈变化。
|
||||
* onChange 接收当前弹层名称数组；返回 Function 类型的注销方法，组件销毁时必须调用。
|
||||
*/
|
||||
subscribe(onChange) {
|
||||
if (typeof onChange !== "function") return () => {}
|
||||
this.subscribers.push(onChange)
|
||||
onChange(this.stack.slice())
|
||||
return () => {
|
||||
const index = this.subscribers.indexOf(onChange)
|
||||
if (index !== -1) this.subscribers.splice(index, 1)
|
||||
}
|
||||
},
|
||||
unregister(pageKey) {
|
||||
if (pageKey && this.pageKey !== pageKey) return
|
||||
this.reset()
|
||||
},
|
||||
open(layerName) {
|
||||
if (!this.pageKey || !layerName) return false
|
||||
const currentLayer = this.stack[this.stack.length - 1]
|
||||
if (currentLayer === layerName) return true
|
||||
const nextStack = this.stack.concat(layerName)
|
||||
window.history.pushState({
|
||||
...(window.history.state || {}),
|
||||
url: window.location.href,
|
||||
h5HistoryLayerPage: this.pageKey,
|
||||
h5HistoryLayerStack: nextStack
|
||||
}, "", window.location.href)
|
||||
this.stack = nextStack
|
||||
this.notify()
|
||||
return true
|
||||
},
|
||||
close(layerName, afterClose = null) {
|
||||
if (!this.stack.length) {
|
||||
if (typeof afterClose === "function") afterClose()
|
||||
return false
|
||||
}
|
||||
const currentLayer = this.stack[this.stack.length - 1]
|
||||
if (layerName && currentLayer !== layerName) return false
|
||||
this.afterClose = afterClose
|
||||
window.history.back()
|
||||
return true
|
||||
},
|
||||
closeAll(afterClose = null) {
|
||||
if (!this.stack.length) {
|
||||
if (typeof afterClose === "function") afterClose()
|
||||
return false
|
||||
}
|
||||
this.afterClose = afterClose
|
||||
window.history.go(-this.stack.length)
|
||||
return true
|
||||
},
|
||||
/**
|
||||
* 关闭当前页面全部弹层后跳转业务页面。
|
||||
* url 传目标页面地址，data 传可选的 PJAX 请求参数；返回 boolean，true 表示已接管本次跳转。
|
||||
*/
|
||||
closeAllAndNavigate(url, data = null) {
|
||||
if (!url) return false
|
||||
if (!this.stack.length) {
|
||||
pjaxReplace(url, data)
|
||||
return true
|
||||
}
|
||||
this.pendingNavigation = {url: url, data: data}
|
||||
this.afterClose = null
|
||||
window.history.go(-this.stack.length)
|
||||
return true
|
||||
},
|
||||
handlePopState(nativeEvent) {
|
||||
const state = nativeEvent && nativeEvent.state ? nativeEvent.state : {}
|
||||
const targetStack = state.h5HistoryLayerPage === this.pageKey && Array.isArray(state.h5HistoryLayerStack)
|
||||
? state.h5HistoryLayerStack.slice()
|
||||
: []
|
||||
const stackChanged = this.stack.length !== targetStack.length ||
|
||||
this.stack.some((layerName, index) => layerName !== targetStack[index])
|
||||
if (!stackChanged) return false
|
||||
if (!this.stack.length && !targetStack.length) return false
|
||||
this.stack = targetStack
|
||||
this.notify()
|
||||
const callback = this.afterClose
|
||||
const navigation = this.pendingNavigation
|
||||
this.afterClose = null
|
||||
this.pendingNavigation = null
|
||||
if (navigation && navigation.url) {
|
||||
pjaxReplace(navigation.url, navigation.data)
|
||||
return true
|
||||
}
|
||||
if (typeof callback === "function") {
|
||||
setTimeout(() => callback(), 0)
|
||||
}
|
||||
return true
|
||||
},
|
||||
notify() {
|
||||
if (typeof this.onChange === "function") {
|
||||
this.onChange(this.stack.slice())
|
||||
}
|
||||
this.subscribers.slice().forEach((subscriber) => {
|
||||
subscriber(this.stack.slice())
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
this.stack = []
|
||||
this.notify()
|
||||
this.pageKey = ""
|
||||
this.onChange = null
|
||||
this.afterClose = null
|
||||
this.subscribers = []
|
||||
this.pendingNavigation = null
|
||||
}
|
||||
}
|
||||
|
||||
//初始化pjax
|
||||
;(function initPjax() {
|
||||
if ($.support.pjax) {
|
||||
@@ -106,6 +252,7 @@
|
||||
timeout: 8000
|
||||
})
|
||||
$(document).on("pjax:send", function () {
|
||||
window.h5HistoryLayerManager.reset()
|
||||
NProgress.start()
|
||||
window.customStyleList = document.querySelectorAll('style[id^="style-"]')
|
||||
})
|
||||
@@ -121,6 +268,9 @@
|
||||
|
||||
// 监听浏览器的前进和后退操作
|
||||
$(window).on("popstate", function (event) {
|
||||
if (window.h5HistoryLayerManager.handlePopState(event.originalEvent)) {
|
||||
return
|
||||
}
|
||||
if (event.originalEvent.state) {
|
||||
// 如果存在历史记录状态，触发 Pjax 加载对应内容
|
||||
$.pjax({
|
||||
@@ -466,7 +616,7 @@
|
||||
</script>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
const h5ComponentVersion = "20260524"
|
||||
const h5ComponentVersion = "20260821_2"
|
||||
Vue.component("rich-text", httpVueLoader("/components/plugins/sysRichTextView/index.vue?v=" + h5ComponentVersion))
|
||||
Vue.component("h5-file-upload", httpVueLoader("/components/plugins/sysUpload/h5Index.vue?v=" + h5ComponentVersion))
|
||||
Vue.component("h5-signature", httpVueLoader("/components/plugins/sysSignature/h5Index.vue?v=" + h5ComponentVersion))
|
||||
|
||||
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