commit

src/main/resources/views/mobile/therapyRecuperation/index.html

@@ -31,6 +31,11 @@ layout("/mobile/platform.html"){
         padding-left: 7px;
     }
 
+    .pdfjs {
+        height: 90%;
+        overflow-y: auto;
+    }
+
 </style>
 
 <div id="app" v-cloak>
@@ -60,13 +65,15 @@ layout("/mobile/platform.html"){
     </div>
 
     <!--疗休养描述-->
-    <div class="van-doc-card" style="margin-top: 20px">
+    <div class="van-doc-card" style="margin-top: 20px; height: calc(100vh - 200px)">
         <van-image width="190" height="43" src="/assets/mobile/img/therapyRecuperation/title.png"></van-image>
-        <div class="pre_text" v-html="configData.notice"></div>
+        <div v-if="isPdf" class="pre_text" v-html="configData.notice"></div>
+        <div v-else id="demo" class="pdf_div"></div>
     </div>
 
 </div>
 <script>
+    let pdfh5 = null
     const vue = new Vue({
         el: '#app',
         mixins: [mobileMixins],
@@ -74,6 +81,7 @@ layout("/mobile/platform.html"){
             return {
                 chooseButton: [],
                 configData: {},
+                isPdf: false,
             }
         },
         methods: {
@@ -94,11 +102,63 @@ layout("/mobile/platform.html"){
                 const resp = await $.get('/platform/theRapyRecuperation/TheRapyConfig/findOne')
                 this.configData = resp.data
             },
+            initPdf() {
+                try {
+                    const parser = new DOMParser();
+                    const doc = parser.parseFromString(this.configData.notice, 'text/html');
+                    const link = doc.querySelector('a');
+                    const href = link.getAttribute('href');
+                    this.$nextTick(() => {
+                        pdfh5 = new Pdfh5('#demo', {
+                            pdfurl: href,
+                        });
+                    })
+                }catch (e) {
+                    this.isPdf = true
+                    document.addEventListener('click', function (event) {
+                        // 打印被点击的元素标签名和 class
+                        if (event.target.tagName === 'IMG' && !['van-image__img', 'top_icon'].includes(event.target.className)) {
+                            vant.ImagePreview({
+                                images: [event.target.src],
+                                closeable: true,
+                            })
+                        }
+                    })
+                }
+
+                this.$nextTick(() => {
+                    pdfh5.on("complete", function () {
+                        const imgDoc = document.querySelectorAll('img')
+                        let array = []
+                        let classArray = []
+                        imgDoc.forEach(o => {
+                            if(!['van-image__img', 'top_icon'].includes(o.getAttribute('class'))) {
+                                classArray.push(o.getAttribute('class'))
+                                array.push(o.getAttribute('src'))
+                            }
+                        })
+                        document.addEventListener('click', function (event) {
+                            // 打印被点击的元素标签名和 class
+                            if (event.target.tagName === 'IMG' && !['van-image__img', 'top_icon'].includes(event.target.className)) {
+                                const index = classArray.indexOf(event.target.className)
+                                if(index !== -1) {
+                                    vant.ImagePreview({
+                                        images: array,
+                                        startPosition: index,
+                                        closeable: true,
+                                    })
+                                }
+                            }
+                        })
+                    })
+                })
+            }
         },
         async created() {
             this.chooseButton = await getEnumOptions('TheRapyRecuperationType')
             this.chooseButton = this.chooseButton.filter(o => o.value !== 2)
             await this.getConfigData()
+            this.initPdf()
         }
     })
 </script>