报告详情分页

src/views/report/ChapterDetail.vue

@@ -23,6 +23,7 @@ import collectIcon from '@/assets/collect2.png'
 import collectSIcon from '@/assets/collect2-s.png'
 import {useWaterMark} from '@/hooks/waterMark.js'
 import {addTokenToIframe} from '@/utils/common.js'
+import ReportContent from './components/ReportContent.vue'
 
 const route=useRoute()
 const router=useRouter()
@@ -404,7 +405,8 @@ const posterParams=computed(()=>{
                     <AudioBox :data="audioData" v-if="info.report_chapter_item.video_url&&info.report_chapter_item.video_play_seconds>0"></AudioBox>
                     <!-- <div class="abstract" v-if="info.report_chapter_item.abstract">摘要：{{info.report_chapter_item.abstract}}</div> -->
                     <div id="report-rich-content" class="no-select-text rich-content" ref="waterMarkEl">
-                        <div v-html="info.report_chapter_item.content" v-if="info.auth_ok"></div>
+                        <!-- <div v-html="info.report_chapter_item.content" v-if="info.auth_ok"></div> -->
+                        <ReportContent :html="info.report_chapter_item.content" v-if="info.auth_ok"></ReportContent>
                         <div v-html="info.report_chapter_item.content_sub" v-else ></div>
                         <!-- 隐藏的水印 -->
                         <div class="hide-watermark-box">

src/views/report/Detail.vue

@@ -17,6 +17,7 @@ import CollectBox from '@/components/CollectBox.vue'
 import collectIcon from '@/assets/collect2.png'
 import collectSIcon from '@/assets/collect2-s.png'
 import {addTokenToIframe} from '@/utils/common.js'
+import ReportContent from './components/ReportContent.vue'
 moment.locale('zh-cn')
 
 const route=useRoute()
@@ -104,7 +105,7 @@ const getReportDetail=async ()=>{
 
             // 设置水印
             nextTick(()=>{
-                useWaterMark(store.state.userInfo.mobile,waterMarkEl)
+                useWaterMark(store.state.userInfo?.mobile,waterMarkEl)
             })
         }
 
@@ -467,7 +468,8 @@ const formatTitle=(e)=>{
                     <!-- <div class="abstract" v-if="info.report_info.abstract">摘要：{{info.report_info.abstract}}</div> -->
 
                     <div id="report-rich-content" class="no-select-text rich-content" ref="waterMarkEl">
-                        <div v-html="info.report_info.content" v-if="info.auth_ok"></div>
+                        <!-- <div v-html="info.report_info.content" v-if="info.auth_ok"></div> -->
+                        <ReportContent :html="info.report_info.content" v-if="info.auth_ok"></ReportContent>
                         <div v-html="info.report_info.content_sub" v-else></div>
                         <!-- 隐藏的水印 -->
                         <div class="hide-watermark-box">

src/views/report/components/ReportContent.vue

@@ -0,0 +1,69 @@
+<script setup>
+import {reactive,watch,onMounted,onUnmounted, nextTick} from 'vue'
+import { useThrottleFn } from '@vueuse/core'
+
+const props=defineProps({
+    html:{
+        type:String
+    }
+})
+
+const listState=reactive({
+    totalList:[],//分割好的html数组
+    totalPage:0,//总页数
+    list:[],
+    page:0,
+    pageSize:20,
+})
+
+function loadContent(){
+    listState.list = listState.list.concat(listState.totalList.slice(listState.page*listState.pageSize, (listState.page + 1)*listState.pageSize))
+}
+
+const load=useThrottleFn(()=>{
+    if(listState.page>=listState.totalPage) return
+    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 可视高度
+    const scrollHeight = document.body.scrollHeight; // 总高度
+    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动的高度
+    // console.log(clientHeight,scrollHeight);
+    const bufferHeight = 600;
+
+    if((scrollHeight - scrollTop - clientHeight) < bufferHeight) {
+        console.log('触底')
+        listState.page ++;
+        loadContent();
+    }
+},300)
+
+
+watch(
+    ()=>props.html,
+    (n)=>{
+        
+        const arr = props.html.split('</p>');
+        listState.totalList = arr.map(_ => _+'</p>');
+        listState.list = listState.totalList.slice(0,listState.pageSize)
+        listState.totalPage =  parseInt(listState.totalList.length / listState.pageSize) + 1;
+    },
+    {
+        immediate:true
+    }
+)
+
+onMounted(()=>{
+    window.addEventListener('scroll',load)
+})
+onUnmounted(()=>{
+    window.removeEventListener('scroll',load)
+})
+
+
+</script>
+
+<template>
+    <div v-for="item in listState.list" :key="item" v-html="item"></div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>