129 lines
3.9 KiB
Vue
129 lines
3.9 KiB
Vue
<template>
|
|
<van-popup :value="value" position="right" class="therapy-notice-preview" :close-on-click-overlay="false"
|
|
:close-on-popstate="true" @input="$emit('input', $event)" @opened="loadPdf" @closed="releasePdf">
|
|
<van-nav-bar :title="title" left-arrow left-text="返回" @click-left="$emit('input', false)"></van-nav-bar>
|
|
<div class="therapy-notice-preview__body">
|
|
<div v-if="src" ref="viewer" class="therapy-notice-preview__viewer"></div>
|
|
<div v-else class="therapy-notice-preview__content" v-html="content"></div>
|
|
<div v-if="loading" class="therapy-notice-preview__status"><van-loading vertical>正在加载须知...</van-loading></div>
|
|
<div v-if="failed" class="therapy-notice-preview__status">
|
|
<van-empty image="error" description="PDF 加载失败，请重试">
|
|
<van-button round type="primary" size="small" @click="loadPdf">重新加载</van-button>
|
|
</van-empty>
|
|
</div>
|
|
</div>
|
|
</van-popup>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: 'TherapyNoticePreview',
|
|
props: {
|
|
value: { type: Boolean, default: false },
|
|
src: { type: String, default: '' },
|
|
title: { type: String, default: '疗休养须知' },
|
|
content: { type: String, default: '' }
|
|
},
|
|
data() {
|
|
return { loading: false, failed: false }
|
|
},
|
|
methods: {
|
|
loadPdf() {
|
|
this.releasePdf()
|
|
if (!this.value || !this.src) return
|
|
this.loading = true
|
|
try {
|
|
const viewer = new Pdfh5(this.$refs.viewer, { pdfurl: this.src, URIenable: false })
|
|
this._pdfViewer = viewer
|
|
viewer.on('complete', (status) => {
|
|
if (this._pdfViewer !== viewer) return
|
|
this.loading = false
|
|
this.failed = status !== 'success'
|
|
})
|
|
viewer.on('error', () => {
|
|
if (this._pdfViewer !== viewer) return
|
|
this.loading = false
|
|
this.failed = true
|
|
})
|
|
} catch (error) {
|
|
this.loading = false
|
|
this.failed = true
|
|
}
|
|
},
|
|
releasePdf() {
|
|
const viewer = this._pdfViewer
|
|
this._pdfViewer = null
|
|
if (viewer) viewer.destroy()
|
|
this.loading = false
|
|
this.failed = false
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
this.releasePdf()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.therapy-notice-preview.van-popup {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100vw;
|
|
max-width: none;
|
|
border-radius: 0;
|
|
height: 100%;
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
background: #f3f7fd;
|
|
box-sizing: border-box;
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.therapy-notice-preview > .van-nav-bar {
|
|
flex-shrink: 0;
|
|
background: #fff;
|
|
}
|
|
|
|
.therapy-notice-preview .van-nav-bar__title {
|
|
max-width: 60%;
|
|
}
|
|
|
|
.therapy-notice-preview__body {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.therapy-notice-preview__viewer {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.therapy-notice-preview__content {
|
|
height: 100%;
|
|
padding: 16px;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
line-height: 1.8;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.therapy-notice-preview__content img,
|
|
.therapy-notice-preview__content video {
|
|
max-width: 100% !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.therapy-notice-preview__status {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #f3f7fd;
|
|
}
|
|
</style>
|