整改福利UI
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@@ -1,13 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="h5-signature">
|
<div class="h5-signature">
|
||||||
<div v-if="!showSignaturePanel" class="main-panel">
|
<slot v-if="$slots.default"></slot>
|
||||||
<slot v-if="$slots.default"></slot>
|
<div v-else class="signature-entry">
|
||||||
<template v-else>
|
<!-- 未签名时展示统一空状态和入口，组件放入 van-field 时仍保持完整宽度。 -->
|
||||||
<van-button @click="openSignature" class="open-button" size="middle" plain native-type="button">打开签字板</van-button>
|
<div v-if="!signatureContent" class="signature-entry-panel">
|
||||||
<van-image :src="signatureContent"></van-image>
|
<van-icon class="signature-placeholder-icon" name="edit"></van-icon>
|
||||||
</template>
|
<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>
|
</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>
|
<signature @save="save"></signature>
|
||||||
</van-popup>
|
</van-popup>
|
||||||
</div>
|
</div>
|
||||||
@@ -36,14 +51,39 @@ module.exports = {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
signatureContent: null,
|
signatureContent: null,
|
||||||
showSignaturePanel: false
|
showSignaturePanel: false,
|
||||||
|
historyLayerName: "",
|
||||||
|
historyLayerUnsubscribe: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
/**
|
||||||
|
* 打开签字板。
|
||||||
|
* 无请求参数；优先向全局历史栈增加当前签字弹层，返回值为空。
|
||||||
|
*/
|
||||||
openSignature() {
|
openSignature() {
|
||||||
|
const manager = window.h5HistoryLayerManager
|
||||||
|
if (manager && manager.open(this.historyLayerName)) return
|
||||||
this.showSignaturePanel = true
|
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) {
|
save(signature) {
|
||||||
const file = this.base64ToFile(signature, "signature.png")
|
const file = this.base64ToFile(signature, "signature.png")
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
@@ -59,11 +99,20 @@ module.exports = {
|
|||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
alert("保存成功")
|
// 保存成功后使用项目统一的 Vant 反馈，避免浏览器原生弹框阻塞签字流程。
|
||||||
this.showSignaturePanel = false
|
this.$toast.success({
|
||||||
|
message: "签名保存成功",
|
||||||
|
duration: 1500,
|
||||||
|
forbidClick: true
|
||||||
|
})
|
||||||
this.$emit("input", res.data)
|
this.$emit("input", res.data)
|
||||||
|
this.closeSignaturePanel()
|
||||||
} else {
|
} else {
|
||||||
alert("保存失败")
|
// 接口返回失败时保留签字板，方便用户重试。
|
||||||
|
this.$toast.fail({
|
||||||
|
message: res.msg || "签名保存失败，请重试",
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@@ -86,27 +135,114 @@ module.exports = {
|
|||||||
return new File([blob], filename, { type: contentType })
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.h5-signature {
|
.h5-signature {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-panel {
|
.signature-entry {
|
||||||
position: relative;
|
width: 100%;
|
||||||
flex-direction: column-reverse;
|
|
||||||
display: flex;
|
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;
|
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 {
|
.signature-placeholder-icon {
|
||||||
color: var(--color-primary);
|
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>
|
</style>
|
||||||
|
|||||||
@@ -57,7 +57,16 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
save() {
|
save() {
|
||||||
if (signature.isEmpty()) {
|
if (signature.isEmpty()) {
|
||||||
alert("请签字后再保存")
|
// H5 页面使用统一的 Vant 提示；未加载 Vant 的独立签字页保留原生提示作为兼容兜底。
|
||||||
|
if (typeof this.$toast === "function") {
|
||||||
|
this.$toast({
|
||||||
|
message: "请先完成手写签名",
|
||||||
|
icon: "edit",
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
alert("请先完成手写签名")
|
||||||
|
}
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// const png = signature.getPNG()
|
// const png = signature.getPNG()
|
||||||
|
|||||||
@@ -95,6 +95,152 @@
|
|||||||
// toast多例模式
|
// toast多例模式
|
||||||
vant.Toast.allowMultiple()
|
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
|
//初始化pjax
|
||||||
;(function initPjax() {
|
;(function initPjax() {
|
||||||
if ($.support.pjax) {
|
if ($.support.pjax) {
|
||||||
@@ -106,6 +252,7 @@
|
|||||||
timeout: 8000
|
timeout: 8000
|
||||||
})
|
})
|
||||||
$(document).on("pjax:send", function () {
|
$(document).on("pjax:send", function () {
|
||||||
|
window.h5HistoryLayerManager.reset()
|
||||||
NProgress.start()
|
NProgress.start()
|
||||||
window.customStyleList = document.querySelectorAll('style[id^="style-"]')
|
window.customStyleList = document.querySelectorAll('style[id^="style-"]')
|
||||||
})
|
})
|
||||||
@@ -121,6 +268,9 @@
|
|||||||
|
|
||||||
// 监听浏览器的前进和后退操作
|
// 监听浏览器的前进和后退操作
|
||||||
$(window).on("popstate", function (event) {
|
$(window).on("popstate", function (event) {
|
||||||
|
if (window.h5HistoryLayerManager.handlePopState(event.originalEvent)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
if (event.originalEvent.state) {
|
if (event.originalEvent.state) {
|
||||||
// 如果存在历史记录状态，触发 Pjax 加载对应内容
|
// 如果存在历史记录状态，触发 Pjax 加载对应内容
|
||||||
$.pjax({
|
$.pjax({
|
||||||
@@ -466,7 +616,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script nonce="${cspNonce!}">
|
<script nonce="${cspNonce!}">
|
||||||
const h5ComponentVersion = "20260524"
|
const h5ComponentVersion = "20260821_2"
|
||||||
Vue.component("rich-text", httpVueLoader("/components/plugins/sysRichTextView/index.vue?v=" + h5ComponentVersion))
|
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-file-upload", httpVueLoader("/components/plugins/sysUpload/h5Index.vue?v=" + h5ComponentVersion))
|
||||||
Vue.component("h5-signature", httpVueLoader("/components/plugins/sysSignature/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"){
|
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>
|
<div id="app" v-cloak>
|
||||||
<van-sticky>
|
<welfare-address-manager class="address-size-compact" page-title="地址管理"
|
||||||
<van-nav-bar @click-left="back" left-arrow left-text="返回" placeholder title="地址管理"></van-nav-bar>
|
flat-list :area-list="areaList" @back="handlePageBack">
|
||||||
</van-sticky>
|
</welfare-address-manager>
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script nonce="${cspNonce!}">
|
<script nonce="${cspNonce!}">
|
||||||
<!--#include("/platform/zhghh5/welfare/include/areaList.js"){}#-->
|
<!--#include("/platform/zhghh5/welfare/include/areaList.js"){}#-->
|
||||||
|
<!--#include("/platform/zhghh5/welfare/address/addressManager.js"){}#-->
|
||||||
const vue = new Vue({
|
const vue = new Vue({
|
||||||
el: "#app",
|
el: "#app",
|
||||||
store,
|
store,
|
||||||
|
components: {
|
||||||
|
"welfare-address-manager": WELFARE_ADDRESS_MANAGER_COMPONENT
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
areaList: areaList,
|
projectId: "",
|
||||||
addressInfo: {},
|
historyLayerPageKey: "",
|
||||||
addressList: [],
|
areaList: areaList
|
||||||
editActionSheet: false,
|
|
||||||
showDelete: "",
|
|
||||||
title: "",
|
|
||||||
chosenAddressId: "",
|
|
||||||
projectId: ""
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async selectUserAddress() {
|
/**
|
||||||
const loading = this.$toast.loading({
|
* 注册地址管理页面历史。
|
||||||
message: "加载中...",
|
* 页面标识由项目 ID 组成，公共地址组件通过 subscribe 接收栈变化；无返回值。
|
||||||
forbidClick: true,
|
*/
|
||||||
overlay: true,
|
registerHistoryLayers() {
|
||||||
duration: 0
|
this.historyLayerPageKey = "welfare-address-manage-" + (this.projectId || "default")
|
||||||
})
|
if (!window.h5HistoryLayerManager) return
|
||||||
const resp = await this.$axios.post("/platform/welfare/addressManage/selectUserAddress", { userId: this.$store.state.user.id })
|
window.h5HistoryLayerManager.register(this.historyLayerPageKey, null)
|
||||||
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)
|
|
||||||
},
|
},
|
||||||
back() {
|
|
||||||
|
// 有子弹框时关闭最上层弹框，没有弹框时返回上一个业务页面。
|
||||||
|
handlePageBack() {
|
||||||
|
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.stack.length) {
|
||||||
|
window.h5HistoryLayerManager.close()
|
||||||
|
return
|
||||||
|
}
|
||||||
this.historyBack()
|
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() {
|
created() {
|
||||||
this.projectId = GetQueryString("projectId")
|
this.projectId = GetQueryString("projectId") || ""
|
||||||
this.selectUserAddress()
|
this.registerHistoryLayers()
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (window.h5HistoryLayerManager) {
|
||||||
|
window.h5HistoryLayerManager.unregister(this.historyLayerPageKey)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -2,101 +2,416 @@
|
|||||||
layout("/layouts/platform_h5.html"){
|
layout("/layouts/platform_h5.html"){
|
||||||
#-->
|
#-->
|
||||||
<style>
|
<style>
|
||||||
/* 列表卡片样式 */
|
body {
|
||||||
.wf-welfare-list {
|
background-color: #f3f7fd;
|
||||||
padding: 10px;
|
|
||||||
}
|
}
|
||||||
.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;
|
position: relative;
|
||||||
background: #fff;
|
height: 134px;
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
overflow: hidden;
|
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;
|
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 {
|
.welfare-list-hero__title {
|
||||||
width: 120px;
|
font-size: 25px;
|
||||||
height: 120px;
|
line-height: 34px;
|
||||||
flex-shrink: 0;
|
font-weight: 700;
|
||||||
margin-right: 15px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
/* 右侧信息容器 */
|
|
||||||
.wf-card-content {
|
.welfare-list-hero__subtitle {
|
||||||
flex: 1;
|
margin-top: 4px;
|
||||||
min-width: 0;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
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-size: 16px;
|
||||||
font-weight: bold;
|
line-height: 23px;
|
||||||
margin-bottom: 8px;
|
font-weight: 600;
|
||||||
color: #333;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
/* 时间信息样式 */
|
|
||||||
.wf-time-row {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
.wf-time-label {
|
|
||||||
color: #999;
|
.welfare-list-card__status {
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
width: 70px;
|
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>
|
</style>
|
||||||
|
|
||||||
<div id="app" v-cloak>
|
<div id="app" v-cloak>
|
||||||
<van-sticky>
|
<div class="welfare-list-page">
|
||||||
<van-nav-bar @click-left="()=>this.$pjaxReplace('/platform/h5/home')" left-arrow left-text="返回" placeholder title="我的福利"></van-nav-bar>
|
<van-nav-bar
|
||||||
<van-dropdown-menu>
|
title="我的福利"
|
||||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
left-arrow
|
||||||
</van-dropdown-menu>
|
left-text="返回"
|
||||||
</van-sticky>
|
fixed
|
||||||
|
placeholder
|
||||||
|
@click-left="goBack"
|
||||||
|
></van-nav-bar>
|
||||||
|
|
||||||
<div>
|
<div class="welfare-list-content">
|
||||||
<van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0" v-model="loading">
|
<section class="welfare-list-hero">
|
||||||
<div class="wf-welfare-list">
|
<img
|
||||||
<div class="wf-welfare-card" v-for="row in tableData" :key="row.id" @click="openView(row)">
|
class="welfare-list-hero__image"
|
||||||
<van-tag mark :type="row.isChoose?'success':''" style="position: absolute; left: 5px; top: 5px; z-index: 1">
|
src="/assets/mobile/img/home/v4/feature-benefit.png"
|
||||||
{{row.isChoose?'已选择':'未选择'}}
|
alt="暖心福利插画"
|
||||||
</van-tag>
|
>
|
||||||
<div class="wf-card-layout">
|
<div class="welfare-list-hero__copy">
|
||||||
<div class="wf-card-img-container">
|
<div class="welfare-list-hero__title">暖心福利</div>
|
||||||
<van-image :src="row.cover" fit="cover" width="100%" height="100%" radius="4"></van-image>
|
<div class="welfare-list-hero__subtitle">精选好礼 · 乐享生活</div>
|
||||||
</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>
|
</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>
|
</div>
|
||||||
</van-list>
|
</div>
|
||||||
<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>
|
<select-view ref="selectViewRef"></select-view>
|
||||||
</div>
|
</div>
|
||||||
@@ -125,34 +440,59 @@ layout("/layouts/platform_h5.html"){
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
goBack() {
|
||||||
|
this.$pjaxReplace("/platform/h5/home")
|
||||||
|
},
|
||||||
doSearch() {
|
doSearch() {
|
||||||
this.tableKey = new Date().getTime()
|
|
||||||
this.pageForm.pageNumber = 1
|
this.pageForm.pageNumber = 1
|
||||||
this.pageForm.totalCount = 0
|
this.pageForm.totalCount = 0
|
||||||
this.tableData = []
|
this.tableData = []
|
||||||
|
this.finished = false
|
||||||
this.pageData()
|
this.pageData()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 我的福利分页接口参数：pageNumber 为页码、pageSize 为每页条数、year 为查询年度。
|
||||||
|
* 接口返回 Result<Pagination>，data.list 为福利项目数组，data.totalCount 为项目总数。
|
||||||
|
*/
|
||||||
pageData() {
|
pageData() {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
this.$axios.post("/platform/welfare/mine/pageData", this.pageForm).then((res) => {
|
this.$axios.post("/platform/welfare/mine/pageData", this.pageForm)
|
||||||
this.tableData = this.tableData.concat(res.data.list)
|
.then((res) => {
|
||||||
if (this.tableData.length === res.data.totalCount) {
|
if (res.code !== 0 || !res.data) return
|
||||||
this.finished = true
|
const list = res.data.list || []
|
||||||
} else {
|
this.tableData = this.tableData.concat(list)
|
||||||
this.pageForm.pageNumber++
|
this.pageForm.totalCount = res.data.totalCount || 0
|
||||||
}
|
if (this.tableData.length >= this.pageForm.totalCount) {
|
||||||
this.pageForm.totalCount = res.data.totalCount
|
this.finished = true
|
||||||
this.loading = false
|
} 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,
|
projectId: projectId,
|
||||||
userId: this.$store.state.user.id
|
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)
|
this.$refs.selectViewRef.onOpen(item.id)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -324,7 +324,7 @@ const selectView = {
|
|||||||
/deep/ .welfare-card__header i {
|
/deep/ .welfare-card__header i {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
color: var(--color-primary);
|
color: #1989fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .welfare-card__header span {
|
/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>
|
<style>
|
||||||
/* 列表卡片样式 */
|
body {
|
||||||
.wf-welfare-list {
|
background-color: #f3f7fd;
|
||||||
padding: 10px;
|
|
||||||
}
|
}
|
||||||
.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;
|
position: relative;
|
||||||
background: #fff;
|
height: 134px;
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
overflow: hidden;
|
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;
|
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 {
|
.welfare-list-hero__title {
|
||||||
width: 120px;
|
font-size: 25px;
|
||||||
height: 120px;
|
line-height: 34px;
|
||||||
flex-shrink: 0;
|
font-weight: 700;
|
||||||
margin-right: 15px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
/* 右侧信息容器 */
|
|
||||||
.wf-card-content {
|
.welfare-list-hero__subtitle {
|
||||||
flex: 1;
|
margin-top: 4px;
|
||||||
min-width: 0;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
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-size: 16px;
|
||||||
font-weight: bold;
|
line-height: 23px;
|
||||||
margin-bottom: 8px;
|
font-weight: 600;
|
||||||
color: #333;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
/* 时间信息样式 */
|
|
||||||
.wf-time-row {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
.wf-time-label {
|
|
||||||
color: #999;
|
.welfare-list-card__status {
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
width: 70px;
|
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>
|
</style>
|
||||||
|
|
||||||
<div id="app" v-cloak>
|
<div id="app" v-cloak>
|
||||||
<van-sticky>
|
<div class="welfare-list-page">
|
||||||
<van-nav-bar @click-left="()=>this.$pjaxReplace('/platform/h5/home')" left-arrow left-text="返回" placeholder title="福利列表"></van-nav-bar>
|
<van-nav-bar
|
||||||
<van-dropdown-menu>
|
title="福利列表"
|
||||||
<year-van-dropdown-item :num="10" v-model="pageForm.year" @change="doSearch"></year-van-dropdown-item>
|
left-arrow
|
||||||
</van-dropdown-menu>
|
left-text="返回"
|
||||||
</van-sticky>
|
fixed
|
||||||
|
placeholder
|
||||||
|
@click-left="goBack"
|
||||||
|
></van-nav-bar>
|
||||||
|
|
||||||
<div>
|
<div class="welfare-list-content">
|
||||||
<van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0" v-model="loading">
|
<section class="welfare-list-hero">
|
||||||
<div class="wf-welfare-list">
|
<img
|
||||||
<div class="wf-welfare-card" v-for="row in tableData" :key="row.id" @click="openChoose(row)">
|
class="welfare-list-hero__image"
|
||||||
<van-tag mark :type="row.isChoose?'success':''" style="position: absolute; left: 5px; top: 5px; z-index: 1">
|
src="/assets/mobile/img/home/v4/feature-benefit.png"
|
||||||
{{row.isChoose?'已选择':'未选择'}}
|
alt="暖心福利插画"
|
||||||
</van-tag>
|
>
|
||||||
<div class="wf-card-layout">
|
<div class="welfare-list-hero__copy">
|
||||||
<div class="wf-card-img-container">
|
<div class="welfare-list-hero__title">暖心福利</div>
|
||||||
<van-image :src="row.cover" fit="cover" width="100%" height="100%" radius="4"></van-image>
|
<div class="welfare-list-hero__subtitle">精选好礼 · 乐享生活</div>
|
||||||
</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>
|
</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>
|
</div>
|
||||||
</van-list>
|
</div>
|
||||||
<van-empty v-else image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"></van-empty>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -118,28 +396,63 @@ layout("/layouts/platform_h5.html"){
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
goBack() {
|
||||||
|
this.$pjaxReplace("/platform/h5/home")
|
||||||
|
},
|
||||||
doSearch() {
|
doSearch() {
|
||||||
this.tableKey = new Date().getTime()
|
|
||||||
this.pageForm.pageNumber = 1
|
this.pageForm.pageNumber = 1
|
||||||
this.pageForm.totalCount = 0
|
this.pageForm.totalCount = 0
|
||||||
this.tableData = []
|
this.tableData = []
|
||||||
|
this.finished = false
|
||||||
this.pageData()
|
this.pageData()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 福利列表分页接口参数：pageNumber 为页码、pageSize 为每页条数、year 为查询年度。
|
||||||
|
* 接口返回 Result<Pagination>，data.list 为福利项目数组，data.totalCount 为项目总数。
|
||||||
|
*/
|
||||||
pageData() {
|
pageData() {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
this.$axios.post("/platform/welfare/userSelect/pageData", this.pageForm).then((res) => {
|
this.$axios.post("/platform/welfare/userSelect/pageData", this.pageForm)
|
||||||
this.tableData = this.tableData.concat(res.data.list)
|
.then((res) => {
|
||||||
if (this.tableData.length === res.data.totalCount) {
|
if (res.code !== 0 || !res.data) return
|
||||||
this.finished = true
|
const list = res.data.list || []
|
||||||
} else {
|
this.tableData = this.tableData.concat(list)
|
||||||
this.pageForm.pageNumber++
|
this.pageForm.totalCount = res.data.totalCount || 0
|
||||||
}
|
if (this.tableData.length >= this.pageForm.totalCount) {
|
||||||
this.pageForm.totalCount = res.data.totalCount
|
this.finished = true
|
||||||
this.loading = false
|
} 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)
|
this.$pjaxReplace("/platform/h5/welfare/userSelect/index?id=" + row.id)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -3,6 +3,11 @@ layout("/layouts/platform_h5.html"){
|
|||||||
#-->
|
#-->
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
:root {
|
||||||
|
/* 当前福利成功页覆盖全局 H5 的 Vant 主色。 */
|
||||||
|
--color-primary: #1989fa;
|
||||||
|
}
|
||||||
|
|
||||||
.success-container {
|
.success-container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #f7f8fa;
|
background-color: #f7f8fa;
|
||||||
|
|||||||
@@ -3,6 +3,11 @@ layout("/layouts/platform_h5.html"){
|
|||||||
#-->
|
#-->
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
:root {
|
||||||
|
/* 当前福利选择页覆盖全局 H5 的 Vant 主色。 */
|
||||||
|
--color-primary: #1989fa;
|
||||||
|
}
|
||||||
|
|
||||||
.selection:not(:last-child) {
|
.selection:not(:last-child) {
|
||||||
border-bottom: 1px dashed lightgrey;
|
border-bottom: 1px dashed lightgrey;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,11 @@ layout("/layouts/platform_h5.html"){
|
|||||||
#-->
|
#-->
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
:root {
|
||||||
|
/* 当前福利列表覆盖全局 H5 的 Vant 主色。 */
|
||||||
|
--color-primary: #1989fa;
|
||||||
|
}
|
||||||
|
|
||||||
.table-card {
|
.table-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|||||||
Reference in New Issue
Block a user