Compare commits

...
2 Commits
@@ -10,13 +10,48 @@ layout("/layouts/platform_h5.html"){
box-shadow: 0 8px 12px #ebedf0;
text-align: center !important;
}
.info-container {
margin-bottom: 60px;
.activity-info-sheet {
height: 90vh;
height: 90dvh;
max-height: 90vh;
max-height: 90dvh;
}
.button {
position: fixed;
bottom: 0;
.activity-info-sheet .van-action-sheet__content {
display: flex;
min-height: 0;
overflow: hidden;
}
.activity-info-sheet .info-container {
display: flex;
flex: 1;
min-width: 0;
min-height: 0;
flex-direction: column;
}
.activity-info-sheet .info-body {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* PDF内部使用百分比高度,必须提供明确的预览高度;外层正文仍可滚动查看封面和全文。 */
.activity-info-sheet .info-preview {
height: 60vh;
height: 60dvh;
min-height: 260px;
}
.activity-info-sheet .info-preview > div {
height: 100%;
}
.activity-info-sheet .info-preview .content img {
max-width: 100%;
height: auto;
}
.activity-info-sheet .button {
flex-shrink: 0;
width: 100%;
padding-bottom: env(safe-area-inset-bottom);
background: #fff;
}
.info-img {
display: block;
@@ -27,7 +62,7 @@ layout("/layouts/platform_h5.html"){
</style>
<div id="app">
<van-nav-bar title="品牌活动" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
<van-nav-bar title="品牌活动" left-text="返回" left-arrow @click-left="onNavBack" fixed placeholder></van-nav-bar>
<van-sticky offset-top="46px">
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
@@ -67,13 +102,14 @@ layout("/layouts/platform_h5.html"){
</template>
</table-list>
<van-action-sheet :close-on-click-overlay="false" title="详细信息" v-model="infoVisible">
<van-action-sheet class="activity-info-sheet" :close-on-click-overlay="false" title="详细信息"
:value="infoVisible" @input="visible => { if (!visible) closeInfo() }">
<div class="info-container">
<div>
<van-image class="info-img" height="186" width="100%" :src="infoRow.cover"></van-image>
<div class="info-body">
<van-image class="info-img" height="124" width="100%" :src="infoRow.cover"></van-image>
<div class="info-title">{{infoRow.activityName}}</div>
<pdf-preview :content="infoRow.introduce"></pdf-preview>
<div class="info-preview"><pdf-preview :content="infoRow.introduce"></pdf-preview></div>
</div>
<div class="button">
<van-button @click="onApply(infoRow)" type="primary" block>
@@ -82,7 +118,7 @@ layout("/layouts/platform_h5.html"){
</span>
<template v-else>
距离开始
<van-count-down :time="Math.abs(time)" class="count-down" format="DD 天 HH 时 mm 分 ss 秒" @finish="time = 0"></van-count-down>
<van-count-down :time="Math.abs(time)" class="count-down" format="DD 天 HH 时 mm 分 ss 秒" @finish="this.$set(this, 'time', 0)"></van-count-down>
</template>
</van-button>
</div>
@@ -100,6 +136,9 @@ layout("/layouts/platform_h5.html"){
},
data() {
return {
popupOwnerId: 'train-activity-info-' + Date.now(),
infoClosing: false,
pageDisposed: false,
time: 0,
pageForm: {
pageNumber: 1,
@@ -116,35 +155,45 @@ layout("/layouts/platform_h5.html"){
],
infoVisible: false,
infoRow: {},
id: GetQueryString('id')
}
},
methods: {
onView(row) {
this.infoRow = row
this.time = this.$moment().diff(this.$moment(row.activitySignUpStartTime), 'milliseconds')
this.infoVisible = true
if (this.pageDisposed || this.infoClosing) return
// 详情只由列表中的“查看介绍”点击打开,不根据链接参数或报名操作自动打开。
this.$set(this, 'infoRow', row)
this.$set(this, 'time', this.$moment().diff(this.$moment(row.activitySignUpStartTime), 'milliseconds'))
this.$set(this, 'infoVisible', true)
// 重复查看仅更新内容,不重复压入历史;关闭和系统返回统一交给全局栈。
window.mobilePopupHistory.open(this.popupOwnerId, 'info')
},
closeInfo() {
if (!this.infoVisible || this.infoClosing) return
// 回退为异步操作:立即隐藏并锁定本次关闭,防止连点产生多次历史回退。
this.$set(this, 'infoClosing', true)
this.$set(this, 'infoVisible', false)
window.mobilePopupHistory.close(this.popupOwnerId, 'info')
},
onInfoHistoryClose() {
// 系统返回和关闭按钮共用回调,关闭后允许用户再次主动查看。
this.$set(this, 'infoVisible', false)
this.$set(this, 'infoClosing', false)
},
onNavBack() {
if (window.mobilePopupHistory.hasOpen(this.popupOwnerId)) this.closeInfo()
else historyBack()
},
onApply(row) {
if(this.$moment().isBefore(this.$moment(row.activitySignUpStartTime))) {
this.onView(row)
this.$toast('报名尚未开始')
return
}
window.mobilePopupHistory.clear(this.popupOwnerId)
this.$pjaxReplace('/platform/trainSignUp/apply/list/h5?id=' + row.id)
},
fetchOne() {
this.$axios.post('/platform/trainSignUp/manage/findOne', {id: this.id}).then((res) => {
if(res.code === 0) {
this.onView(res.data)
}
})
},
onReady() {
// 首次进入和组件重新就绪都只加载列表,不触发详情弹窗。
this.doSearch()
if(this.id) {
this.fetchOne()
}
},
doSearch() {
this.$nextTick(() => {
@@ -154,8 +203,12 @@ layout("/layouts/platform_h5.html"){
})
}
},
mounted() {
created() {
window.mobilePopupHistory.register(this.popupOwnerId, () => this.onInfoHistoryClose())
},
beforeDestroy() {
this.$set(this, 'pageDisposed', true)
window.mobilePopupHistory.unregister(this.popupOwnerId)
}
})
</script>