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

<!--#
layout("/mobile/platform.html"){
#-->
<style>

    .van-doc-card {
        margin: 10px;
        padding: 12px 12px 12px 12px;
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 8px 12px #ebedf0;
        line-height: 20px;
        position: relative;
    }

    .van-grid-item__content {
        padding: 0;
    }

    .choose_button .button_text {
        font-size: 14px;
        margin-top: 6px;
    }

    .list-card {
        width: auto;
    }

    .pre_text {
        white-space: break-spaces;
        padding-left: 7px;
    }

    .pdfjs {
        height: 90%;
        overflow-y: auto;
    }

</style>

<div id="app" v-cloak>

    <van-sticky>
        <van-nav-bar @click-left="pjaxReplace('/mobile/index')" fixed left-arrow placeholder title="职工疗休养"></van-nav-bar>
    </van-sticky>

    <!--顶部轮播图-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
            <van-image width="100%" height="180" src="/assets/mobile/img/therapyRecuperation/index1.jpeg"></van-image>
        </van-swipe-item>
        <van-swipe-item>
            <van-image height="180" src="/assets/mobile/img/therapyRecuperation/index1.jpeg"></van-image>
        </van-swipe-item>
    </van-swipe>

    <!--按钮导航-->
    <div class="choose_button van-doc-card">
        <van-grid :column-num="chooseButton.length" :border="false">
            <van-grid-item @click="toLineList(item.value)" v-for="item in chooseButton">
                <van-image width="46" height="46" :src="item.imgUrl"></van-image>
                <div class="button_text">{{item.label}}</div>
            </van-grid-item>
        </van-grid>
    </div>

    <!--疗休养描述-->
    <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 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],
        data() {
            return {
                chooseButton: [],
                configData: {},
                isPdf: false,
            }
        },
        methods: {
            async toLineList(index) {
                const isExist = await getScopeUser(this.configData.activityGroupId)
                if (!isExist) {
                    vant.Dialog.alert({
                        title: '温馨提示',
                        message: '您不在疗休养报名范围中',
                        confirmButtonColor: '#1867b0'
                    })
                    return
                }
                localStorage.setItem("clickIndex", JSON.stringify({clickIndex: index}))
                pjaxReplace('/platform/mobile/theRapyRecuperation/mobileLineListPage')
            },
            async getConfigData() {
                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>

<!--#
}
#-->