raiwechat_link_h5/src/views/hzsl/report/newReport/ChapterDetail.vue

<template>
<van-pull-refresh v-model="loading" disabled style="min-height:100vh">
  <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 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>
      <!-- 音频模块 -->
      <AudioBox :audioData="audioData" v-if="info.report_chapter_item.video_url&&info.report_chapter_item.video_play_seconds>0"></AudioBox>
      <div class="flex tips">
        <div>
          <div class="abstract" v-if="info.report_chapter_item.abstract">摘要：{{info.report_chapter_item.abstract}}</div>
          <div>
            <span>注：请务必阅读</span>
            <span style="color: #e3b377; margin-left: 20px" @click="showDisclaimers = true">免责声明</span>
          </div>
        </div>
        
      </div>
      <div class="rich-content">
        <!-- <div v-html="info.report_chapter_item.content" v-if="info.auth_ok"></div> -->
        <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>
      <!-- 指标数据模块 -->
      <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="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>
    <!-- 章节详情底部快速切换 -->
    <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>

    <!-- 返回顶部 -->
    <img v-if="showToTop&&info.auth_ok" @click="handleBackTop" class="back-top-img" src="@/assets/hzyb/report/back-top.png" mode="aspectFill"/>

    <!-- 免责声明 -->
    <van-popup :show="showDisclaimers" @close="showDisclaimers = false" round closeable>
      <div class="disclaimers-box">
        <div style="text-align: center; font-size: 16px; font-weight: bold; margin-bottom: 20px">免责声明</div>
        <div style="margin-bottom: 10rpx">1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。</div>
        <div style="margin-bottom: 10rpx"
          >2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。</div
        >
        <div style="margin-bottom: 10rpx"
          >3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。</div
        >
        <div style="margin-bottom: 10rpx">4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。</div>
      </div>
    </van-popup>

    <!-- 申请提示弹窗 -->
    <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>
</van-pull-refresh>
</template>

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

import { apiGetNewChapterReport,apiGetEdbData } from '@/api/hzsl/report'
import {apiApplyPermission} from '@/api/hzyb/user'
import {Popup,Image as VanImage,PullRefresh,Col, Row} from 'vant'
import AudioBox from '@/views/hzyb/report/components/AudioBox.vue'
import _ from 'lodash';
export default {
  components:{
    [Popup.name]:Popup,
    [VanImage.name]:VanImage,
    [PullRefresh.name]:PullRefresh,
    [Col.name]:Col,
    [Row.name]:Row,
    [PullRefresh.name]:PullRefresh,
    AudioBox,
  },
  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,

    };
  },
  created(options) {
    this.fromPage = this.$route.query.fromPage || ''
    this.getDetail()
  },
  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: {

    async getDetail(){
      const params = this.$route.query;
      const res=await apiGetNewChapterReport(params)
      if(res.code===200){
        this.info=res.data
        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('主动申请成功');
                      }
                  }) 
              }
          }
        }

        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')}）`
      }
    },

    /*内容分割*/
    splitContentHandle(content) {
        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;
    },

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

    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(){
      let params = this.info.ticker_data_param
      const res=await apiGetEdbData(params)

      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({http_url}){

      let params = http_url.split("?")[1];

      location.href = `${http_url}&fromPage=reportdetail`;
      
      // location.href=`${location.origin}/xcx_h5/hzsl/report/new/chapter/detail?${params}&fromPage=reportdetail`
    },


    //点击申请
    async handleGoApply(){
      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{
          this.pupData.show=true
          this.pupData.content=`<p>若想查看请联系对口销售</p>`
        }
      }
    },

  },
};
</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;
        &::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;
        }
        :deep(p){
            font-size: 36px !important;
            line-height: 1.8 !important;
        }
        :deep(iframe){
            width: 100% !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;
      }
    }

    .back-top-img{
        position: fixed;
        z-index: 99;
        width: 76px;
        height: 76px;
        right: 34px;
        bottom: 150px;
    }
    .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;
        }
      }
    }
  }

}
</style>