feat: 疗休养优化移动端

2026-11-05 08:37:27 +08:00
parent fd117b4fc3
commit 4d9fd57d6c
7 changed files with 421 additions and 112 deletions
@@ -0,0 +1,128 @@
+<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>