Compare commits
2
Commits
28d8b14bab
...
f2fda8202a
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f2fda8202a | ||
|
|
0a431bf86e |
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user