raiwechat_link_h5/src/views/hzyb/report/ChapterDetail.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="chapter-detail-page" v-if="info" :style="{paddingBottom:$store.state.hzyb.audioData.url&&'80px'}">
    <div :class="['main-box',!info.auth_ok&&'main-box-noauth']">
      <!-- <div class="title">【第{{info.report_chapter_item.stage}}期 | {{info.report_chapter_item.classify_name_first}}  | {{info.report_chapter_item.type_name}}】{{info.report_chapter_item.title}}</div> -->
      <div :style="{backgroundColor:info.report_chapter_item.canvas_color||''}">
        <!-- 无版头板尾显示标题 -->
        <template v-if="(!info.report_chapter_item.head_img) && (!info.report_chapter_item.end_img)">
          <div class="title">{{title}}</div>
          <div class="flex time">
            <span>{{info.report_chapter_item.author}}</span>
            <span>{{formatTime(info.report_chapter_item.publish_time)}}</span>
          </div>
        </template>

        <!-- 拼接版头 -->
        <div class="html-head-img-box" v-if="info.auth_ok&&info.report_chapter_item.head_img">
            <img :src="info.report_chapter_item.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>

        <template v-if="!info.report_chapter_item.report_video_url">
          <!-- 音频模块 -->
          <AudioBox :audioData="audioData" v-if="info.report_chapter_item.video_url&&info.report_chapter_item.video_play_seconds>0"></AudioBox>
        </template>
        
        <div class="flex tips">
          <div style="flex:1">
            <div class="abstract" v-if="info.report_chapter_item.abstract">摘要：{{info.report_chapter_item.abstract}}</div>
            <div v-if="disclaimer">
              <span>注：请务必阅读</span>
              <span style="color: #e3b377; margin-left: 20px" @click="showDisclaimers = true">免责声明</span>
            </div>
          </div>
          <span 
            v-if="!info.report_chapter_item.report_video_url&&info.report_chapter_item.video_url&&info.report_chapter_item.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 id="report-rich-content" class="rich-content" ref="richConBox">
          <div v-if="info.auth_ok">
            <ul>
                <li v-for="item in realContent" :key="item" v-html="item"></li>
            </ul>
          </div>
          <div v-html="info.report_chapter_item.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="ticker-wrap" v-if="tickerInfo">
          <div class="top-title">{{tickerInfo.ticker_title.report_chapter_type_name}}数据表</div>
          <div class="table-box">
            <div class="table-row table-head">
              <div class="table-item" v-for="item in tickerHead" :key="item.key">{{item.label}}</div>
            </div>
            <div class="table-row table-body" v-for="(tr,index) in tickerInfo.list" :key="tr.base_column_name">
              <div :class="['table-item',index%2==0?'grey':'',tr[td.key]<0?'minus':'']" v-for="td in tickerHead" :key="td.key">{{tr[td.key]}}</div>
            </div>
          </div>
          <div v-if="tickerInfo.ticker_title.report_chapter_type_id ===26" style="text-align:center;font-weight:bold">注：与新加坡TSR20相关数据均取展示日期前一交易日数据</div>
        </div>

        <!-- 拼接版尾 -->
        <div class="html-end-img-box" v-if="info.auth_ok&&info.report_chapter_item.end_img">
            <img :src="info.report_chapter_item.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="userInfo?.is_bind==0">
        <div class="apply-box">
          <div>您尚未登录，请登录后查看更多信息</div>
          <div class="btn" @click="handleGoLogin">立即登录</div>
        </div>
      </div>
      <template v-else>
        <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>
      </template>
    </div>
    <!-- 章节详情底部快速切换 -->
    <div class="chapter-list-wrap" v-if="fromPage=='reportdetail'">
      <div class="top-text">更多</div>
      <van-row gutter="10">
        <van-col span="6" v-for="item in info.report_chapter_menu_list" :key="item.report_chapter_id">
          <div :class="['item',item.report_chapter_id==chapterId&&'active']" @click="handleChapterChange(item)">
            <img :src="item.report_chapter_type_thumb+'?t='+new Date().getTime()" mode="aspectFill"/>
            <!-- <text>{{item.report_chapter_type_name}}</text> -->
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 留言点赞模块 -->
    <div id="messgaeBoardCont" v-if="info.auth_ok">
      <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 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/chapterDetail',
          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-if="showToTop&&info.auth_ok" @click="handleBackTop" class="back-top-img" src="@/assets/hzyb/report/back-top.png" mode="aspectFill"/>
      </div>
    </div>

  </div>
</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 {apiChapterDetail,apiChapterTickerValue,apiRddpShareImg,apiReportPPtImgs,apiPublicBannerMark,apiPublicBannerList} from '@/api/hzyb/report'
import {apiApplyPermission,apiUserInfo,apiSetCollect,apiCancelCollect} from '@/api/hzyb/user'
import {Popup,Image as VanImage,PullRefresh,Col, Row,Dialog,Toast,Swipe, SwipeItem} from 'vant'
import AudioBox from './components/AudioBox.vue'
import SharePoster from '../components/SharePoster.vue'
import LeaveMessage from '../components/leaveMessage/index.vue'
import _ from 'lodash';
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'
import { apiBaseConfig } from '@/api/hzyb/common'
export default {
  components:{
    [Popup.name]:Popup,
    [VanImage.name]:VanImage,
    [PullRefresh.name]:PullRefresh,
    [Col.name]:Col,
    [Row.name]:Row,
    [Swipe.name]:Swipe,
    [SwipeItem.name]:SwipeItem,
    [PullRefresh.name]:PullRefresh,
    [Dialog.name]:Dialog,
    AudioBox,
    SharePoster,
    LeaveMessage,
    reportCancel,
    Disclaimer
  },
  computed:{
    code_scene(){
      return JSON.stringify({
        chapterId:this.chapterId
      })
    },
    posterParams(){
      let time=moment(this.info.report_chapter_item.publish_time).format('MMDD')
      return {
        report_type:this.info.report_chapter_item.classify_name_first,
        // report_title:`【第${this.info.report_chapter_item.stage}期 | ${this.info.report_chapter_item.classify_name_first} | ${this.info.report_chapter_item.type_name}】${this.info.report_chapter_item.title}（${time}）`,
        report_title:this.title,
        report_abstract:this.info.report_chapter_item.content,
      }
    }
  },
  data() {
    return {
      showDisclaimers: false, //显示免责声明
      chapterId:0,
      fromPage:'',//如果是从首页(home)来的则隐藏底部切换 message定位到留言板
      info:null,
      title:'',
      audioData:{},//音频数据

      tickerInfo:null,
      tickerHead:[],

      pupData:{
				show:false,
				content:'',//弹窗html字符串
			},

      loading:false,

      showToTop:false,

      totalContent:[],
      realContent:[],
      page_no: 0,
      pageSize: 20,//默认初始加载20个p标签
      total_page: 0,

      hasPPt:false,

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

      collectIcon,
      collectIcons,

      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.chapterId=this.$route.query.chapterId
    this.fromPage=this.$route.query.fromPage||''
    this.getDetail()
    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(){
      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
           })
         }
    },
    //背景音频播放报告音频
    handlePlayAudioBG(){
      wx.miniProgram.navigateTo({
        url:`/pages-report/reportBgAudio?chapterId=${this.chapterId}&reportId=${this.info.report_chapter_item.report_id}&ctime=${parseInt(this.$store.state.hzyb.videoCtime)}`,
      })
    },

    async getUserInfo(iswatermark){
      const res=await apiUserInfo()
      if(res.code===200){
        this.userInfo=res.data
        if(!iswatermark) return
        this.$nextTick(()=>{
          this.waterMark(res.data.mobile,this.$refs.richConBox)
        })
      }
    },
    // handelPageScroll(){
    //   const top=document.documentElement.scrollTop||document.body.scrollTop
    //   if(top>window.outerHeight){
    //     this.showToTop=true
    //   }else{
    //     this.showToTop=false
    //   }
    // },
    //跳转ppt预览页
    goPPtDetail(){
        const report_id=this.info.report_chapter_item.report_id
        const chapterId=this.info.report_chapter_item.report_chapter_id
        const shareImg=this.shareData.shareImg
        const shareTitle=this.shareData.title
        wx.miniProgram.navigateTo({
            url:`/pages-report/previewImage?reportId=${report_id}&chapterId=${chapterId}&shareImg=${shareImg}&shareTitle=${shareTitle}`
        })
    },

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


    async getDetail(){
      const res=await apiChapterDetail({report_chapter_id:Number(this.chapterId)})
      if(res.code===200){
        this.info=res.data

        this.headImgStyle=res.data.report_chapter_item.head_style?JSON.parse(res.data.report_chapter_item.head_style):[]
        this.endImgStyle=res.data.report_chapter_item.end_style?JSON.parse(res.data.report_chapter_item.end_style):[]
        this.layoutBaseInfo['研报标题']=res.data.report_chapter_item.title
        this.layoutBaseInfo['研报作者']=res.data.report_chapter_item.author
        // 已发布已通过的报告才显示发布时间
        this.layoutBaseInfo['创建时间']=moment(res.data.report_chapter_item.publish_time).format('YYYY.MM.DD HH:mm')

        this.audioData={
          auth_ok:res.data.auth_ok,
          video_name:res.data.report_chapter_item.video_name,
          video_play_seconds:res.data.report_chapter_item.video_play_seconds,
          video_url:res.data.report_chapter_item.video_url,
          video_img:res.data.report_chapter_item.video_img
        }
        document.title=res.data.report_chapter_item.classify_name_first
        if(res.data.auth_ok&&res.data.report_chapter_item.classify_name_first==='晨报'){
          this.getTickerValue()
        }

        this.splitContentHandle(this.info.report_chapter_item.content)

        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.getUserInfo(res.data.auth_ok)

        // 处理标题数据
        //【第{{info.report_chapter_item.stage}}期 | {{info.report_chapter_item.classify_name_first}}  | {{info.report_chapter_item.type_name}}】{{info.report_chapter_item.title}}（{{moment(info.report_chapter_item.publish_time).format('MMDD')}}）
        this.title=`【第${res.data.report_chapter_item.stage}期 | ${res.data.report_chapter_item.classify_name_first} | ${res.data.report_chapter_item.type_name}】${res.data.report_chapter_item.title}（${moment(res.data.report_chapter_item.publish_time).format('MMDD')}）`

        //向小程序发送分享数据
        let shareTitle='',shareImg='',imgText='';
        const shareTime=moment(res.data.report_chapter_item.publish_time).format('MMDD')
        if(res.data.report_chapter_item.abstract){
          shareTitle=res.data.report_chapter_item.abstract
          imgText=`<div style="font-size:78px">第${res.data.report_chapter_item.stage}期 | ${res.data.report_chapter_item.title}（${shareTime}）</div>`
        }else{
          shareTitle=res.data.report_chapter_item.title
          imgText=`<div style="font-size:78px">${moment(res.data.report_chapter_item.publish_time).format('YYYY/MM/DD')}</div><div style="font-size:78px">第${res.data.report_chapter_item.stage}期 | ${res.data.report_chapter_item.classify_name_first} | ${res.data.report_chapter_item.type_name} </div>`
        }
        const rddpImgRes=await apiRddpShareImg({
            pars:JSON.stringify({
                title:imgText,
                time_format:moment(res.data.report_chapter_item.publish_time).format('YYYY/MM/DD'),
                background_img:res.data.report_chapter_item.share_bg_img,
            }),
            report_id:Number(res.data.report_chapter_item.report_id),
            report_chapter_id:Number(this.chapterId)
        })
        if(rddpImgRes.code===200){
            shareImg=rddpImgRes.data
        }
        this.shareData={
          title:shareTitle,
          chapterId:this.chapterId,
          shareImg:shareImg
        }
        wx.miniProgram.postMessage({ 
          data: {
            title:shareTitle,
            chapterId:this.chapterId,
            shareImg:shareImg
          } 
        });
      }
    },

    //添加水印
    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.info.report_chapter_item.report_id,this.info.report_chapter_item.report_chapter_id)
        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;
        console.log( this.totalContent,this.realContent,this.total_page)
        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),

    //获取晨报中指标数据
    async getTickerValue(){
      const res=await apiChapterTickerValue({report_chapter_id:Number(this.chapterId)})
      if(res.code===200){
        if(!res.data||!res.data.list) return
        this.tickerInfo=res.data
        if(res.data.ticker_title.report_chapter_type_id===17){
          this.tickerHead=[
            {
              label:res.data.ticker_title.ticker_title,
              key:'base_column_name'
            },
            {
              label:'公布日期',
              key:'date'
            },
            {
              label:'最新值',
              key:'ticker_value'
            },
            {
              label:'上期值',
              key:'last_value'
            }
          ]
        }else{
          this.tickerHead=[
            {
              label:res.data.ticker_title.ticker_title,
              key:'base_column_name'
            },
            {
              label:res.data.list[0].date,
              key:'ticker_value'
            },
            {
              label:'当日涨跌',
              key:'dd_value'
            },
            {
              label:'一周涨跌',
              key:'ww_value'
            },
            {
              label:'一月涨跌',
              key:'mm_value'
            }
          ]
        }
      }
    },

    handleBackTop() {
      document.body.scrollTop=document.documentElement.scrollTop=0
    },

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

    formatTime(time){
      return moment(time).format('YYYY.MM.DD HH:mm:ss')
    },

    handleChapterChange(item){
      this.chapterId=item.report_chapter_id
      this.info=null
      this.page_no=0
      this.total_page=0
      this.getDetail()
      this.handleBackTop()
    },

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

    //登录
    handleGoLogin(){
      wx.miniProgram.navigateTo({url:'/pages/login?from=tologin'})
    },

    //点击申请
    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);
    },

    // 收藏
    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.info.report_chapter_item.report_id),
                    extend_id:Number(this.chapterId)
                }).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;
}
.chapter-detail-page {
    // padding-bottom: 50px;
    .main-box{
        padding: 34px;
    }
    .main-box-noauth{
        height: 100vh;
        overflow: hidden;
    }
    .title{
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 30px;
        display: inline;
        margin-left: -26px;
    }
    .time{
        justify-content: space-between;
        font-size: 30px;
        margin-top: 30px;
    }

    .tips{
        font-size: 34px;
        margin-bottom: 51px;
        position: relative;
        &::before{
            content: '';
            width: 10px;
            // height: 50px;
            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;
            width: 100% !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;
      background: linear-gradient(360deg, #FFFFFF 60%, rgba(255, 255, 255, 0) 88%);
      // position: relative;
      // top: -150px;
      padding: 0 34px 50px 34px;
      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 {
    background-color: #f5f6fa;
    padding: 34px;
    min-height: 300px;
    .top-text {
      text-align: center;
      color: #666666;
      margin-bottom: 30px;
      &::before {
        content: "";
        width: 90px;
        height: 1px;
        background-color: #999;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
      }
      &::after {
        content: "";
        width: 90px;
        height: 1px;
        background-color: #999;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
      }
    }
    .item {
      background-color: #fff;
      height: 156px;
      margin-bottom: 20px;
      text-align: center;
      color: #C0CFDA;
      font-size: 24px;
      // padding-top: 20px;
      border-radius: 8px;
      overflow: hidden;
      img{
        width: 156px;
        height: 156px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        object-fit: cover;
      }
    }
    .active{
      border: 1px solid #E3B377;
      position: relative;
      &::before{
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
        border-top: 46px solid #E3B377;
        border-right: 46px solid transparent;
      } 
    }
    }

  .ticker-wrap{
    margin-top: 30px;
    .top-title{
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      vertical-align: middle;
      &::before,&::after{
        content: '';
        display: inline-block;
        width: 100px;
        height: 4px;
        background-color:rgb(204, 204, 204);
        vertical-align: middle;
        margin: 0 20px;
      }

    }
    .table-box{
      margin: 20px 0;
      &::-webkit-scrollbar{
        width: 0;
      }
      overflow: auto hidden;
      .table-row{
        display: flex;
        width: 100%;
      }
      .table-item{
        padding: 10px;
        min-width: 200px;
        max-width: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .table-head{
        color: #fff;
        background-color: rgb(58, 76, 115);
        .table-item{
          &:first-child{
            position: sticky;
            left: 0;
            z-index: 5;
            border-right-color: rgb(58, 76, 115);
          }
          background-color: rgb(58, 76, 115);
        }
      }
      .table-body{
        .table-item{
          background-color: #fff;
          &:first-child{
            position: sticky;
            left: 0;
            z-index: 5;
          }
        }
        .grey{
          background-color: #ddd;
        }
        .minus{
          color: #006600;
        }
      }
    }
  }

  .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
    }
}
</style>