raiwechat_link_h5/src/views/hzyb/report/Detail.vue

<template>
<van-pull-refresh v-model="loading" disabled style="min-height:100vh">
    <!-- <div class="content-swipe" v-if="bannerDataList.length > 0">
        <van-swipe class="my-swipe" :autoplay="4000" :show-indicators="false">
            <van-swipe-item v-for="item in bannerDataList" :key="item.id" @click="bannerSwiperHandler(item)">
                <img :src="item.image_url_mobile" />
            </van-swipe-item>
        </van-swipe>
    </div> -->
    <div class="report-detail-page" @click="closeAttention" v-if="info" :style="{paddingBottom:$store.state.hzyb.audioData.url&&'80px'}">
        <!-- 晨报、周报章节 -->
        <div class="chapter-list-wrap" v-if="info.report_info.has_chapter&&info.report_detail_show_type===2">
            <div class="top-box" :style="'background-image:url(' + info.report_info.banner_url + ')'">
                <div class="title">{{info.report_info.classify_name_first}}</div>
                <div class="sub-title">{{info.report_info.title}}</div>
                <div class="flex top-bot">
                    <div class="flex time-box">
                        <div class="day">{{formatChapterTime(info.report_info.publish_time,'day')}}</div>
                        <div>
                            <div>{{formatChapterTime(info.report_info.publish_time,'week')}}</div>
                            <div>{{formatChapterTime(info.report_info.publish_time,'year-month')}}</div>
                        </div>
                    </div>
                    <div class="audio-play-list-box" @click="handleGoSetAudioList" v-if="info.report_info.classify_name_first=='周报'&&info.auth_ok">播放清单</div>
                    <div class="attention-box" v-if="showAttention">
                        点击<span style="color:#E3B377">播放清单</span>，打开章节列表，进行<span style="color:#E3B377">播放清单配置</span>
                        <img class="close-icon" src="@/assets/hzyb/report/close.png" alt="" @click.stop="closeAttention">
                    </div>
                </div>
                <div :class="['stage-num',info.report_info.classify_name_first=='晨报'?'stage-num-day':'']">第{{info.report_info.stage}}期</div>
            </div>
            <div class="list-box">
                <div class="flex item" v-for="item in chapterList" :key="item.report_chapter_id" @click="goChapterDetail(item)">
                    <div class="img-box">
                        <van-image class="img" :src="item.report_chapter_type_thumb" mode="aspectFill" />
                    </div>
                    <div class="con">
                        <div class="title">
                            {{item.report_chapter_type_name}} 
                            <text class="tag" :style="{backgroundColor:getTagColor(tag)}" v-for="tag in item.trend.split(',')" :key="tag">{{tag}}</text>
                        </div>
                        <div class="van-multi-ellipsis--l2 sub-title">{{item.title}}</div>
                        <div class="update-time">更新至：{{formatChapterTime(item.publish_time,'year-month-day')}}</div>
                        <div 
                            :class="['audio-icon-box',item.video_url==$store.state.hzyb.audioData.list[$store.state.hzyb.audioData.index]?.url?'audio-icon-box_active':'']" 
                            v-if="info.report_info.classify_name_first=='周报'&&item.is_close==0"
                            @click.stop="handlePlayWeekAudio(item)"
                        ></div>
                    </div>
                </div>
            </div>
            <!-- 无权限 -->
            <div class="no-auth-box" v-if="!info.auth_ok">
                <img class="img" src="https://hzstatic.hzinsights.com/static/icon/hzyb/activity_no_auth.png" mode="widthFix" />
                <div class="apply-box" v-if="info.permission_check.type=='apply'">
                    <div>您暂无权限查看报告，若想查看请申请开通</div>
                    <div class="btn" @click="handleGoApply">立即申请</div>
                </div>
                <div class="apply-box" v-else>
                    <div>您暂无权限查看报告 </div>
                    <div>若想查看请联系对口销售：{{info.permission_check.name}}</div>
                    <a class="btn" :href="'tel:'+info.permission_check.mobile" tag="div">立即联系</a>
                </div>
            </div>
        </div>

        <!-- 报告详情 -->
        <div :class="['main-box',!info.auth_ok&&'main-box-noauth']" v-else>
            <!-- <div class="title">【第{{info.report_info.stage}}期｜{{info.report_info.classify_name_second}}】{{info.report_info.title}}</div> -->
            <div :style="{backgroundColor:info.report_info.canvas_color||''}">
                <!-- 无版头板尾显示标题 -->
                <template v-if="(!info.report_info.head_img) && (!info.report_info.end_img)">
                    <div class="title">{{title}}</div>
                    <div class="flex time">
                        <span>{{info.report_info.author}}</span>
                        <span>{{formatTime(info.report_info.publish_time)}}</span>
                    </div>
                </template>

                <!-- 拼接版头 -->
                <div class="html-head-img-box" v-if="info.auth_ok&&info.report_info.head_img">
                    <img :src="info.report_info.head_img" alt="" style="display:block;width:100%">
                    <div class="head-layout-item" v-for="item in headImgStyle" :key="item.value"
                    :style="{fontFamily:item.family,fontSize:(item.size*2)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
                        width:item.width,height:item.height,left:item.left,top:item.top
                    }">
                        {{ layoutBaseInfo[item.value] }}
                    </div>
                </div>

                
                <!-- 音频模块 -->
                <AudioBox :audioData="audioData" v-if="info.report_info.video_url&&info.report_info.video_play_seconds>0"></AudioBox>
                <div class="flex tips">
                    <div style="flex:1">
                        <div v-if="info.road_video_id">点击<span style="color: #e3b377;" @click="goVideoPage">查看视频</span></div>
                        <div class="abstract" v-if="info.report_info.abstract">摘要：{{info.report_info.abstract}}</div>
                        <div>
                            <span v-if="disclaimer">注：请务必阅读</span>
                            <span v-if="disclaimer" style="color:#E3B377;margin-left:20px" @click="showDisclaimers=true">免责声明</span>
                            <span 
                                v-if="info.report_info.video_url&&info.report_info.video_play_seconds>0" 
                                style="float:right;background:#E3B377;color:#fff;border-radius:30px;padding:0 10px;font-size:0.9em" @click="handlePlayAudioBG"
                            >背景播放</span>
                        </div>
                    </div>
                </div>
                <div id="report-rich-content" class="rich-content" style="position: relative;" ref="richConBox">
                    <!-- 单人报告 -->
                    <template v-if="info.auth_ok">
                        <div v-if="!info.report_info.has_chapter">
                            <ul>
                                <li v-for="item in realContent" :key="item" v-html="item"></li>
                            </ul>
                        </div>
                        
                        <!-- 展示拼接的章节报告 -->
                        <template v-if="info.report_info.has_chapter && info.report_detail_show_type===1">
                            <div 
                                class="chapter-concat-item" 
                                v-for="chapter in info.report_chapter_list"
                                :key="chapter.report_chapter_id"
                            >
                                <div class="chapter-title">
                                    <h3 class="chapter-title-text">{{chapter.title}}</h3>
                                </div>
                                <div class="html-cont" v-html="chapter.content"></div>
                            </div>
                        </template>
                    </template>

                    <div v-html="info.report_info.content_sub" v-else></div>
                    <!-- 隐藏的水印 -->
                    <div class="hide-watermark-box" v-if="userInfo">
                        <div v-for="item in 20" :key="item">{{userInfo.mobile}}</div>
                    </div>
                </div>

                <!-- 拼接版尾 -->
                <div class="html-end-img-box" v-if="info.auth_ok&&info.report_info.end_img">
                    <img :src="info.report_info.end_img" alt="" style="display:block;width:100%">
                    <div class="head-layout-item" v-for="item in endImgStyle" :key="item.value"
                    :style="{fontFamily:item.family,fontSize:(item.size*2)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
                        width:item.width,height:item.height,left:item.left,top:item.top
                    }">
                        {{ layoutBaseInfo[item.value] }}
                    </div>
                </div>
            </div>

            <!-- 无权限 -->
            <div class="no-auth-wrap" v-if="!info.auth_ok">
                <div class="apply-box" v-if="info.permission_check.type=='apply'">
                    <div>您暂无权限查看报告，若想查看请申请开通</div>
                    <div class="btn" @click="handleGoApply">立即申请</div>
                </div>
                <div class="apply-box" v-else>
                    <div>您暂无权限查看报告 </div>
                    <div>若想查看请联系对口销售：{{info.permission_check.name}}</div>
                    <a class="btn" :href="'tel:'+info.permission_check.mobile" tag="div">立即联系</a>
                </div>
            </div>

            <!-- 右侧悬浮操作栏 -->
            <div class="right-fix-box">
                <!-- 收藏 -->
                <img v-if="info.auth_ok" @click="handleCollect" class="item collect-icon" :src="info.collection_id>0?collectIcons:collectIcon" alt="">
                <!-- ppt -->
                <img class="item ppt-icon" v-if="hasPPt" @click="goPPtDetail" src="@/assets/hzyb/report/ppt-icon.png" alt="">
                <!-- 分享海报 -->
                <SharePoster 
                    v-if="info.auth_ok"
                    :isSlot="true"
                    :shareData="{
                        type:'report_detail',
                        code_page:'pages-report/reportDetail',
                        code_scene:code_scene,
                        data:posterParams
                    }"
                >
                    <img class="item share-icon" src="@/assets/hzyb/share-poster-icon.png"/>
                </SharePoster>
                <!-- 返回顶部 -->
                <div class="item back-top-img">
                    <img v-show="showToTop&&info.auth_ok" @click="handleBackTop" class="back-top-img" src="@/assets/hzyb/report/back-top.png"/>
                </div>
            </div>
        </div>
        
        <!-- 留言点赞模块 -->
        <div id="messgaeBoardCont" v-if="info.auth_ok && (!info.report_info.has_chapter||info.report_detail_show_type===1)">
            <LeaveMessage
                :info="info"
                @like_change="giveOrCancelLike"
            />
        </div>

        <!-- 免责声明 -->
        <Disclaimer v-model:show="showDisclaimers"/>

        <!-- 申请提示弹窗 -->
        <van-popup :show="pupData.show" @close="pupData.show=false" :close-on-click-overlay="false">
            <div class="global-pup">
                <div class="content">
                    <div v-html="pupData.content"></div>
                </div>
                <div class="flex bot">
                    <div @click="pupData.show=false">知道了</div>
                </div>
            </div>
        </van-popup>
    </div>
    <reportCancel v-if="isReportPublishCancel"/>
</van-pull-refresh>
</template>

<script>
// 由于当时写在uni中 直接复制过来的 也不想改了就写成vue2形式吧
import moment from 'moment'
import 'moment/dist/locale/zh-cn'
moment.locale('zh-cn')
import {addTokenToIframe} from '../utils/common'
import { apiBaseConfig } from '@/api/hzyb/common'

import {apiReportDetail,apiRddpShareImg,apiReportPPtImgs,apiPublicBannerMark,apiPublicBannerList} from '@/api/hzyb/report'
import {apiApplyPermission,apiUserInfo,apiSetCollect,apiCancelCollect} from '@/api/hzyb/user'
import {Popup,Image as VanImage,PullRefresh,Dialog, Toast,Swipe, SwipeItem} from 'vant'
import AudioBox from './components/AudioBox.vue'
import SharePoster from '../components/SharePoster.vue'
import _ from 'lodash';
import LeaveMessage from '../components/leaveMessage/index.vue'
import collectIcon from '@/assets/hzyb/collect-icon.png'
import collectIcons from '@/assets/hzyb/collect-icon-s.png'
import reportCancel from './components/reportCancel.vue'
import Disclaimer from '../components/Disclaimer.vue'

export default {
    components:{
        [Popup.name]:Popup,
        [VanImage.name]:VanImage,
        [PullRefresh.name]:PullRefresh,
        [Swipe.name]:Swipe,
        [SwipeItem.name]:SwipeItem,
        [Dialog.name]:Dialog,
        AudioBox,
        SharePoster,
        LeaveMessage,
        reportCancel,
        Disclaimer
    },
    computed:{
        code_scene(){
            return JSON.stringify({
                reportId:this.reportId
            })
        },
        posterParams(){
            return {
                report_type:this.info.report_info.classify_name_first,
                // report_title:`【第${this.info.report_info.stage}期 | ${this.info.report_info.classify_name_second}】${this.info.report_info.title}`,
                report_title:this.title,
                report_abstract:this.info.report_info.content
            }
        }
    },
    data () {
        return {
            showDisclaimers:false,//显示免责声明
            reportId:0,
            info:null,
            title:'',//标题数据
            audioData:{},//音频数据
            chapterList:[],
            pupData:{
				show:false,
				content:'',//弹窗html字符串
			},
            loading:false,
            showToTop:false,

            totalContent:[],
            realContent:[],
            page_no: 0,
            pageSize: 20,//默认初始加载20个p标签
            total_page: 0,
            fromPage: '', // message定位到留言板

            hasPPt:false,//是否有ppt

            userInfo:null,
            shareData:{},//分享的数据传给ppt页

            collectIcon,
            collectIcons,

            showAttention:false,//是否显示配置播放清单提示
            isReportPublishCancel:false,//报告取消发布
            bannerDataList:[],

            headImgStyle:null,//版头style
            endImgStyle:null,//版尾style
            layoutBaseInfo:{
                研报标题:'',
                研报作者:'',
                创建时间:''
            },
            disclaimer:''//免责声明
        }
    },
    beforeCreate(){
        if(this.$route.query.token){
            localStorage.setItem('hzyb-token',this.$route.query.token)
            localStorage.setItem('hzyb-userId',this.$route.query.userId)
        }
    },
    created(options) {
        this.reportId=this.$route.query.reportId
        this.fromPage = this.$route.query.fromPage || ''
        this.getDetail()
        this.getUserInfo()
        this.getConfig()
        // this.getBannerList()
    },
    mounted(){
        $(document).on('click', '.rich-content img',function(event) {
            let imgArray = [];
            let curImageSrc = $(this).attr('src');
            let oParent = $(this).parent();
            if (curImageSrc && !oParent.attr('href')) {
                $('.rich-content img').each(function(index, el) {
                    let itemSrc = $(this).attr('src');
                    imgArray.push(itemSrc);
                });
                wx.previewImage({current:curImageSrc,urls:imgArray});
            }
        })
        window.addEventListener('scroll',this.loadMoreHandle)
    },
    destroyed () {
        window.removeEventListener('scroll',this.loadMoreHandle)
    },
    methods: {
        // banner 获取列表
        async getBannerList(){
            console.log(112233333);
            const res = await apiPublicBannerList()
            if(res.code ===200){
                this.bannerDataList = res.data
            }
        },

        getConfig() {
            apiBaseConfig().then(res => {
                if (res.code == 200) {
                this.disclaimer = res.data.disclaimer
                }
            })
        },
        // banner 点击事件
       async bannerSwiperHandler(item){
            const res = await apiPublicBannerMark({
                first_source: 1, //一级来源 1小程序移动 2小程序pc 3研报官网
                second_source: 2, //二级来源 1首页 2研报详情页
                id:item.id
            })
            if(res.code===200){
              wx.miniProgram.navigateTo({
                url:"/pages-report/disseminatePage/disseminatePage?imgHb="+item.jump_url_mobile+'&title='+item.remark
              })
            }
        },
        // 点击开始播放周报的列表中的音频
        handlePlayWeekAudio(e){
            const arr=[]
            this.chapterList.forEach(item=>{
                if(item.is_close==0){
                    arr.push({
                        url:item.video_url,
                        videoTime:item.video_play_seconds,
                        videoName:item.video_name,
                        videoImg:'https://hzstatic.hzinsights.com/static/yb_wx/report_list_zhou.png'
                    })
                }
            })
            console.log(arr);
            let index=0
            arr.forEach((_item,idx)=>{
                if(_item.url==e.video_url) index=idx
            })
            this.$store.commit('hzyb/addAudio',{
                list:arr,
                index:index
            })
        },

        // 设置周报的播放清单
        handleGoSetAudioList(){
            wx.miniProgram.navigateTo({
                url:`/pages-report/audioPlayListSet?reportId=${this.reportId}`,
            })
        },

        closeAttention(){
            if(this.info.report_info.classify_name_first=='晨报'&&!this.info.auth_ok) return
            localStorage.setItem('showAttention','true')
            this.showAttention=false
        },

        //背景音频播放报告音频
        handlePlayAudioBG(){
            wx.miniProgram.navigateTo({
                url:`/pages-report/reportBgAudio?chapterId=0&reportId=${this.reportId}&ctime=${parseInt(this.$store.state.hzyb.videoCtime)}`,
            })
        },

        async getUserInfo(){
            const res=await apiUserInfo()
            if(res.code===200){
                this.userInfo=res.data
                if(this.userInfo.is_bind===0){
                    Dialog.confirm({
                        title:'温馨提示',
                        message:'为了优化您的用户体验，\n 请登录后查看更多信息！',
                        confirmButtonText:'去登录',
                        confirmButtonColor:'#E6B77D',
                        cancelButtonColor:'#666'
                    }).then(res=>{
                        wx.miniProgram.reLaunch({url:'/pages/login'})
                    })
                }
            }
        },

        // 页面滚动
        // handelPageScroll(){
        //     const top=document.documentElement.scrollTop||document.body.scrollTop
        //     if(top>window.outerHeight){
        //         this.showToTop=true
        //     }else{
        //         this.showToTop=false
        //     }
        // },
        //跳转ppt预览页
        goPPtDetail(){
            wx.miniProgram.navigateTo({
                url:`/pages-report/previewImage?reportId=${this.reportId}&chapterId=0&shareImg=${this.shareData.shareImg}&shareTitle=${this.shareData.title}`,
            })
        },

        //获取报告对应的ppt图片
        async getReportPPtImg(){
            const res=await apiReportPPtImgs({
                report_id:Number(this.reportId),
                report_chapter_id:0
            })
            if(res.code===200&&res.data.length>0){
                this.hasPPt=true
            }
        },

        //跳转线上路演
        goVideoPage(){
          wx.miniProgram.navigateTo(
            {
              url:`/pages-roadShow/video/list?videoId=${this.info.road_video_id}&chart_permission_id=${-1}&fromPage=report`
            }
          )
        },
        
        //获取报告详情
        async getDetail(){
            const res=await apiReportDetail({report_id:Number(this.reportId)})
            if(res.code===200){
                this.info=res.data

                this.headImgStyle=res.data.report_info.head_style?JSON.parse(res.data.report_info.head_style):[]
                this.endImgStyle=res.data.report_info.end_style?JSON.parse(res.data.report_info.end_style):[]
                this.layoutBaseInfo['研报标题']=res.data.report_info.title
                this.layoutBaseInfo['研报作者']=res.data.report_info.author
                // 已发布已通过的报告才显示发布时间
                this.layoutBaseInfo['创建时间']=moment(res.data.report_info.publish_time).format('YYYY.MM.DD HH:mm')
                this.audioData={
                    auth_ok:res.data.auth_ok,
                    video_name:res.data.report_info.video_name||`${res.data.report_info.title}(${moment(res.data.report_info.publish_time).format('MMDD')})`,
                    video_play_seconds:res.data.report_info.video_play_seconds,
                    video_url:res.data.report_info.video_url,
                    video_img:res.data.report_info.video_img
                }
                this.chapterList=res.data.report_chapter_list
                document.title = res.data.report_info.classify_name_first||'';
                
                //非章节报告处理内容分页
                (!res.data.report_info.has_chapter) && this.splitContentHandle(this.info.report_info.content);
                
                //章节拼接报告拼接iframe token
                if(res.data.report_info.has_chapter&&res.data.report_detail_show_type===1) {
                    res.data.report_chapter_list.forEach(chapter => {
                        chapter.content = addTokenToIframe(chapter.content,this.reportId,chapter.report_chapter_id)
                    })
                }

                if(!res.data.auth_ok){
                    // 获取详情如果为联系销售根据判断条件是否主动申请一次
                    if(this.info.permission_check.type=='contact'&&!this.info.permission_check.customer_info.has_apply){
                        if(this.info.permission_check.customer_info.status=='冻结'||(this.info.permission_check.customer_info.status=='试用'&&this.info.permission_check.customer_info.is_suspend==1)){
                            apiApplyPermission({
                                company_name:this.info.permission_check.customer_info.company_name,
                                real_name:this.info.permission_check.customer_info.name,
                                source:4,
                                from_page:'报告详情'
                            }).then(res=>{
                                if(res.code===200){
                                    console.log('主动申请成功');
                                }
                            }) 
                        }
                    }
                }

                if(res.data.auth_ok){
                    this.getReportPPtImg()
                    this.$nextTick(()=>{
                        this.waterMark(res.data.permission_check.customer_info.mobile,this.$refs.richConBox)
                    })
                }

                // 处理报告标题数据
                // if(!this.info.report_info.has_chapter){
                    const  time=moment(res.data.report_info.publish_time).format('MMDD')
                    if(res.data.report_info.classify_name_second==res.data.report_info.title){
                        this.title=`【第${res.data.report_info.stage}期】${res.data.report_info.title}（${time}）`
                    }else{
                        this.title=`【第${res.data.report_info.stage}期｜${res.data.report_info.classify_name_second}】${res.data.report_info.title}（${time}）`
                    }
                // }

                //向小程序发送分享数据
                //处理分享标题
                let shareTitle=''
                let shareImg=''
                let imgText=''//分享图上需要显示的内容
                
                const shareTime=moment(res.data.report_info.publish_time).format('MMDD')
                if(res.data.report_info.abstract){
                    shareTitle=res.data.report_info.abstract
                    imgText=`<div style="font-size:78px">第${res.data.report_info.stage}期 | ${res.data.report_info.title}（${shareTime}）</div>`
                }else{
                    shareTitle=res.data.report_info.title
                    imgText=`<div style="font-size:78px">${moment(res.data.report_info.publish_time).format('YYYY/MM/DD')}</div><div style="font-size:78px">第${res.data.report_info.stage}期 | ${res.data.report_info.classify_name_second}</div>`
                    if(this.info.report_info.has_chapter){
                        imgText=`<div style="font-size:78px">${moment(res.data.report_info.publish_time).format('YYYY/MM/DD')}</div><div style="font-size:78px">第${res.data.report_info.stage}期 | ${res.data.report_info.classify_name_first} </div>`
                    }
                }
                const rddpImgRes=await apiRddpShareImg({
                    pars:JSON.stringify({
                        title:imgText,
                        time_format:moment(res.data.report_info.publish_time).format('YYYY/MM/DD'),
                        background_img:res.data.report_info.share_bg_img
                    })
                })
                if(rddpImgRes.code===200){
                    shareImg=rddpImgRes.data
                }
                this.shareData={
                    title:shareTitle,
                    reportId:this.reportId,
                    shareImg:shareImg
                }

                wx.miniProgram.postMessage({ 
                    data: {
                        title:shareTitle,
                        reportId:this.reportId,
                        shareImg:shareImg
                    } 
                });

                // 周报判断是否要显示提示
                if(res.data.report_info.classify_name_first=='周报'){
                    const showAtt=localStorage.getItem('showAttention')||""
                    if(showAtt){
                        this.showAttention=false
                    }else{
                        this.showAttention=true
                    }
                }
                
            }else if(res.code===4002){
                this.isReportPublishCancel=true

            }
        },

        //添加水印
        waterMark(text,target){
            if(!target) return
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");
            ctx.font = "18px Arial";
            ctx.rotate((-45 * Math.PI) / 200);
            ctx.fillStyle='#F1F1F1'
            ctx.fillText(text, 30, 200);
            ctx.fillText(text, -40, 100);

            // 将canvas的内容转换为base64编码
            const data = canvas.toDataURL("image/png");

            target.style.background = "url(" + data + ") repeat";
        },

        // 智能布局内容排版全部变成1个1行的顺排
        formatSmartStyle() {
            this.$nextTick(() =>{
                $('.report-drag-item-wrap_child-wrap').css({
                    'flex-wrap': 'wrap',
                });
                $('.report-drag-item-wrap_child-wrap').children().css({
                    'flex': 'none',
                    'width': '100%'
                });
            })
        },

        /*内容分割*/
        splitContentHandle(content) {
            content=addTokenToIframe(content,this.reportId,0)
            const arr = content.split('</p>');
            this.totalContent = arr.map(_ => _+'</p>');
            this.realContent = this.totalContent.slice(0,this.pageSize)
            this.total_page =  parseInt(this.totalContent.length / this.pageSize) + 1;
            this.formatSmartStyle()
        },

        /* 加载下一页内容 */
        loadContent() {
            this.realContent = this.realContent.concat(this.totalContent.slice(this.page_no*this.pageSize, (this.page_no + 1)*this.pageSize))
            this.formatSmartStyle()
        },

        loadMoreHandle: _.throttle(function() {

            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动的高度
            if(scrollTop>window.outerHeight){
                this.showToTop=true
            }else{
                this.showToTop=false
            }

            if(this.page_no >= this.total_page) return

            const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 可视高度
            const scrollHeight = document.body.scrollHeight; // 总高度
            const bufferHeight = 400;

            if((scrollHeight - scrollTop - clientHeight) < bufferHeight+100) {
            console.log('触底')
            this.page_no = this.page_no+1;
            this.loadContent();
            }
        },300),
        
        //返回顶部
        handleBackTop(){
            document.body.scrollTop=document.documentElement.scrollTop=0
        },

        //跳转章节详情
        goChapterDetail(item){
            // this.$router.push({
            //     path:'/hzyb/report/chapterdetail',
            //     query:{
            //         chapterId:item.report_chapter_id
            //     }
            // })
            wx.miniProgram.navigateTo({
                url:`/pages-report/chapterDetail?chapterId=${item.report_chapter_id}&fromPage=reportdetail`
            })
        },
        
        // 格式化时间
        formatTime(time){
            return moment(time).format('YYYY.MM.DD HH:mm:ss')
        },

        //格式化音频时间
        formatVoiceTime(e){
            let minus=parseInt(e/60)
            let sec=parseInt(e%60)
            return `${minus>9?minus:'0'+minus}分${sec>9?sec:'0'+sec}秒`
        },

        // 格式化章节列表时间
        formatChapterTime(time,type){
            if(type==='day'){
                return moment(time).format('DD')
            }
            if(type==='week'){
                return moment(time).format('dddd')
            }
            if(type==='year-month'){
                return moment(time).format('YYYY-MM')
            }
            if(type==='year-month-day'){
                return moment(time).format('YYYY-MM-DD')
            }
        },

        // 联系销售
        // handleContact(){
        //     uni.makePhoneCall({
        //         phoneNumber: this.info.permission_check.mobile
        //     });
        // },

        //点击申请
        async handleGoApply(){
            if(this.userInfo.is_bind===0){
                Dialog.confirm({
                    title:'温馨提示',
                    message:'为了优化您的用户体验，\n 请登录后查看更多信息！',
                    confirmButtonText:'去登录',
                    confirmButtonColor:'#E6B77D',
                    cancelButtonColor:'#666'
                }).then(res=>{
                    wx.miniProgram.reLaunch({url:'/pages/login'})
                })
                return
            }
            if(this.info.permission_check.type=='apply'){
                if(this.info.permission_check.customer_info.has_apply){// 已经申请过
                    this.pupData.show=true
					this.pupData.content=`<p>您已提交过申请，请耐心等待</p>`
                }else{
                    if(!this.info.permission_check.customer_info.status||this.info.permission_check.customer_info.status!='流失'||this.info.permission_check.customer_info.status!='关闭'){
                        wx.miniProgram.redirectTo({
                            url:"/pages-applyPermission/applyPermission?source=4&from_page=报告详情"
                        })
                    }else{//主动调一次申请权限接口 
                        const res=await apiApplyPermission({
                            company_name:this.info.permission_check.customer_info.company_name,
                            real_name:this.info.permission_check.customer_info.name,
                            source:4,
                            from_page:'报告详情'
                        })
                        if(res.code===200){
                            this.pupData.show=true
					        this.pupData.content=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
                            this.getDetail()
                        }
                    }
                }
                
            }
        },
        
        /* 点赞/取消点赞 */
        giveOrCancelLike({like_enabled,like_num}) {
            this.info.like_num = like_num;
            this.info.like_enabled = like_enabled;
        },

        onRefresh() {
            this.getDetail()
            setTimeout(() => {
                this.loading=false
            }, 1500);
        },

        // 设置tag颜色
        getTagColor(str){
            if( str.includes('多')||str.includes('强')||str.includes('反弹') ){
                return "#DF6051";
            }else if( str.includes('空')||str.includes('调整') ){
                return "#6FC5B4";
            }else{
                return "#009fe6";
            }
        },

        // 收藏
        handleCollect(){
            if(this.info.collection_id>0){
                apiCancelCollect({
                    collection_id:Number(this.info.collection_id)
                }).then(res=>{
                    if(res.code===200){
                        Toast('取消收藏!')
                        this.info.collection_id=0
                    }
                })
            }else{
                apiSetCollect({
                    collection_type:1,
                    primary_id:Number(this.reportId),
                    extend_id:0
                }).then(res=>{
                    if(res.code===200){
                        Toast('收藏成功!')
                        this.info.collection_id=res.data
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
/* 公共弹窗 */
.global-pup{
    background-color: #fff;
    width: 90vw;
    min-height: 200px;
    font-size: 32px;
    .content{
        padding: 34px;
        text-align: center;
        min-height: 250px;
        display: flex;
        align-items: center;
        text-align: center;
        line-height: 1.7;
        div{
            flex: 1;
        }
    }
    .bot{
        border-top: 1px solid #dedede;
        div{
            line-height: 96px;
            flex: 1;
            text-align: center;
            border-right: 1px solid #dedede;
            color:#E3B377;
        }
        div:last-child {
            border: none;
        }
    }
}
.flex{
    display: flex;
}
.report-detail-page{
    /* padding-bottom: 50px; */
    .main-box{
        padding: 34px;
        .title{
            display: inline;
            margin-left: -26px;
        }
    }
    .main-box-noauth{
        height: calc(100vh - 50px);
        overflow: hidden;
    }
    .title{
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 30px;
    }
    .time{
        justify-content: space-between;
        font-size: 30px;
        margin-top: 30px;
    }
    .audio-wrap{
        height: 160px;
        background: #FAF7EE;
        border-radius: 16px;
        margin-top: 20px;
        padding: 10px 31px;
        margin-bottom: 31px;
        align-items: center;
        img{
            width: 110px;
            height: 110px;
            display: block;
            margin-right: 16px;
        }
    }

    .tips{
        font-size: 34px;
        margin-bottom: 51px;
        position: relative;
        &::before{
            content: '';
            width: 10px;
            // height: 100%;
            display: inline-block;
            background-color: #E3B377;
            margin-right: 20px;
            // position: relative;
            // top: 10px;
        }
        .abstract{
            font-size: 34px;
            margin-bottom: 20px;
            line-height: 1.5;
        }
    }

    .disclaimers-box{
        width: 94vw;
        padding: 32px;
    }

    .rich-content{
        line-height: 1.8;
        font-size: 36px;
        :deep(img){
            width: 100% !important;
        }
        :deep(span){
            font-size: 36px !important;
            line-height: 1.8 !important;
            background-color: rgba(255, 255, 255, 0) !important;
        }
        :deep(p){
            font-size: 36px !important;
            line-height: 1.8 !important;
            background-color: rgba(255, 255, 255, 0) !important;
        }
         :deep(ul){
            font-size: 36px !important;
            line-height: 1.8 !important;
            background-color: rgba(255, 255, 255, 0) !important;
        }
         :deep(ol){
            font-size: 36px !important;
            line-height: 1.8 !important;
            background-color: rgba(255, 255, 255, 0) !important;
        }
        :deep(iframe){
            width: 100% !important;
        }
        :deep(li) {
            font-size: 36px !important;
            line-height: 1.8 !important;
            background-color: rgba(255, 255, 255, 0) !important;
            list-style: inherit !important;
            list-style-position: inside !important;
        }
        :deep(span.fr-emoticon) {
            width: 36px !important;
            height: 36px !important;
            background-repeat: no-repeat !important;
            background-size: cover !important;
            display: inline-block !important;
            vertical-align: middle !important;
        }
    }

    .no-auth-wrap{
      min-height: 200px;
      padding: 0 34px 50px 34px;
      background: linear-gradient(360deg, #FFFFFF 60%, rgba(255, 255, 255, 0) 88%);
    //   position: relative;
    //   top: -150px;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
      text-align: center;
      font-size: 32px;
      color: #E3B377;
      .apply-box{
        padding-top: 250px;
      }
      .btn{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        line-height: 80px;
        background-color: #E6B77D;
        border-radius: 4px;
        color: #fff;
        margin-top: 100px;
        display: block;
      }
    }

    .chapter-list-wrap{
        .top-box{
            height: 418px;
            background-color: rgba($color: #000000, $alpha: 0.7);
            background-size: cover;
            color: #fff;
            position: relative;
            .title{
                text-align: center;
                font-size: 34px;
                font-weight: 600;
                padding-top: 78px;
            }
            .sub-title{
                font-size: 32px;
                text-align: center;
                width: 70%;
                margin-left: auto;
                margin-right: auto;
            }
            .top-bot{
                position: absolute;
                bottom: 70px;
                left: 34px;
                right: 34px;
                justify-content: space-between;
                align-items: center;
                .time-box{
                    align-items: center;
                    font-size: 24px;
                    .day{
                        font-size: 32px;
                        border-right: 1px solid #fff;
                        padding-right: 15px;
                        margin-right: 15px;
                    }
                }
                .audio-play-list-box{
                    background-color: #E3B377;
                    color: #fff;
                    font-size: 24px;
                    width: 180px;
                    line-height: 52px;
                    border-radius: 25px;
                    text-align: center;
                }
                .attention-box{
                    position: absolute;
                    bottom: 110%;
                    background-color: #fff;
                    color: #333;
                    box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.16);
                    padding: 20px 54px 20px 20px;
                    border-radius: 8px;
                    .close-icon{
                        width: 24px;
                        height: 24px;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        right: 20px;
                    }
                    &::after{
                        content: '';
                        display:block;
                        width: 0;
                        height: 0;
                        border: 10px solid transparent;
                        border-top-color: #fff;
                        position: absolute;
                        bottom: -20px;
                        right: 20px;
                    }
                }
            }
            .stage-num{
                position: absolute;
                bottom: 350px;
                right: 34px;
            }
            .stage-num-day{
                bottom: 70px;
            }
            
        }
        .list-box{
            margin-top: -50px;
            border-top-left-radius: 40px;
            border-top-right-radius: 40px;
            min-height: 100px;
            background-color: #fff;
            position: relative;
            z-index: 2;
            .item{
                padding: 30px 34px;
                border-bottom: 1px solid #E5E5E5;
                .img-box{
                    width: 104px;
                    height: 104px;
                    box-sizing: border-box;
                    border-radius: 8px;
                    border: solid 2.5px #E5E5E5;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 20px;
                    .img{
                        width: 60px;
                        height: 60px;
                    }
                }
                // .img{
                //     width: 104px;
                //     height: 104px;
                //     // background-color: #f5f5f5;
                //     flex-shrink: 0;
                //     // margin-right: 20px;
                // }
                .con{
                    flex: 1;
                    position: relative;
                    .title{
                        font-size: 28px;
                        color: #57768D;
                        font-weight: bold;
                        margin-bottom: 5px;
                        .tag{
                            font-size: 20px;
                            color: #fff;
                            font-weight: normal;
                            display: inline-block;
                            background-color: #1E88E5;
                            line-height: 37px;
                            padding: 0 6px;
                            border-radius: 4px;
                            margin-left: 10px;
                        }
                    }
                    .sub-title{
                        color: #999;
                    }
                    .update-time{
                        color: #D4D4D4;
                        font-size: 24px;
                        margin-top: 5px;
                    }
                    .audio-icon-box{
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 44px;
                        height: 40px;
                        background-image: url('@/assets/hzyb/report/icon-1.png');
                        background-size: cover;
                    }
                    .audio-icon-box_active{
                        background-image: url('@/assets/hzyb/report/icon-2.png');
                    }
                }
            }
        }
        .no-auth-box{
            text-align: center;
            font-size: 32px;
            color: #E3B377;
            img{
                width: 100%;
                margin-bottom: 50px;
            }
            .btn{
                width: 90%;
                margin-left: auto;
                margin-right: auto;
                line-height: 80px;
                background-color: #E6B77D;
                border-radius: 4px;
                color: #fff;
                margin-top: 100px;
                display: block;
            }
        }
    }

    .right-fix-box{
        position: fixed;
        z-index: 99;
        right: 34px;
        bottom: 130px;
        .item{
            margin-top: 10px;
        }
        .back-top-img{
            width: 100px;
            height: 100px;
            display: block;
        }
        .share-icon{
            width: 100px;
            height: 100px;
            display: block;
        }
        .ppt-icon{
            width: 100px;
            height: 100px;
            display: block;
        }
        .collect-icon{
            width: 100px;
            height: 100px;
            display: block;
        }
    }
}
.content-swipe {
    width: 100%;
    padding: 30px 34px 0 34px;
    .my-swipe {
    width: 100%;
    .van-swipe-item {
     width: 100%;
     height: auto;
     overflow: hidden;
    }
    img {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  }
}

.html-head-img-box,.html-end-img-box{
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    .head-layout-item{
        position: absolute;
        overflow: hidden;
        box-sizing: border-box
    }
}
.chapter-concat-item {
    padding: 20px 0;
    .chapter-title {
        display: flex;
        align-items: center;
        font-size: 30px;
        .type {
            height: fit-content;
            display: inline-block;
            color: #fff;
            padding: 10px 20px;
            background-color: #E6A23C;
            border-radius: 8px; 
            margin-right: 20px;
        }
        .chapter-title-text {
            font-size: 30px;
        }
    }
}
</style>