新增开放ficc报告详情嵌入思录

src/api/hzsl/report.js

@@ -11,3 +11,19 @@ export const apiGetWeekReportDetail=params=>{
     return get('/report/getReportChapterInfo',params)
 }
 
+/* v2 */
+
+/*报告详情 */
+export const apiGetNewReportDetail = params => {
+    return get('/report/getReportInfo/v2',params)
+}
+
+/* 章节详情 */
+export const apiGetNewChapterReport = params => {
+    return get('/report/getReportChapterInfo/v2',params)
+}
+
+/* 晨报中获取指标数据 */
+export const apiGetEdbData = params => {
+    return get('/report/getTickerData?'+params)
+}

src/router/hzsl/index.js

@@ -15,5 +15,23 @@ export const hzslRoutes=[
                 component: () => import("@/views/hzsl/report/WeekDetail.vue"),
             }
         ]
-    }
+    },
+    //要用音频
+    {
+        path:'/hzsl/report',
+        name:'hzsl',
+        component: () => import("@/views/hzyb/Index.vue"),
+        children:[
+            {
+                path:'new/detail',
+                name:"hzslNewReportDetail",
+                component: () => import("@/views/hzsl/report/newReport/Detail.vue"),
+            },
+            {
+                path:'new/chapter/detail',
+                name:"hzslNewChapterDetail",
+                component: () => import("@/views/hzsl/report/newReport/ChapterDetail.vue")           
+            }
+        ]
+    }    
 ]

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

@@ -0,0 +1,641 @@
+<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>FICC团队</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;
+      
+      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{
+          if(!this.info.permission_check.customer_info.status||this.info.permission_check.customer_info.status!='流失'){
+
+            this.pupData.show=true
+            this.pupData.content=`<p>若想查看请联系对口销售</p>`
+          }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()
+            }
+          }
+        }
+                
+      }
+    },
+
+  },
+};
+</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>

src/views/hzsl/report/newReport/Detail.vue

@@ -0,0 +1,628 @@
+<template>
+<van-pull-refresh v-model="loading" disabled style="min-height:100vh">
+    <div class="report-detail-page" v-if="info" :style="{paddingBottom:$store.state.hzyb.audioData.url&&'80px'}">
+        <!-- 晨报、周报章节 -->
+        <div class="chapter-list-wrap" v-if="['晨报','周报'].includes(info.report_info.classify_name_first)">
+            <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="num">第{{info.report_info.stage}}期</div>
+                </div>
+            </div>
+            <div class="list-box">
+                <div class="flex item" v-for="item in chapterList" :key="item.report_chapter_id" @click="goChapterDetail(item)">
+                    <van-image class="img" :src="item.report_chapter_type_thumb" mode="aspectFill" />
+                    <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>
+                </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 class="title">{{title}}</div>
+            <div class="flex time">
+                <span>FICC团队</span>
+                <span>{{formatTime(info.report_info.publish_time)}}</span>
+            </div>
+            <!-- 音频模块 -->
+            <AudioBox :audioData="audioData" v-if="info.report_info.video_url&&info.report_info.video_play_seconds>0"></AudioBox>
+            <div class="flex tips">
+                <div>
+                    <div class="abstract" v-if="info.report_info.abstract">摘要：{{info.report_info.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_info.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_info.content_sub" v-else></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>
+
+            <!-- 返回顶部 -->
+            <img v-if="showToTop&&info.auth_ok" @click="handleBackTop" class="back-top-img" src="@/assets/hzyb/report/back-top.png" mode="aspectFill"/>
+
+        </div>
+        
+        <!-- 免责声明 -->
+        <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:10px">1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。</div>
+                <div style="margin-bottom:10px">2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。</div>
+                <div style="margin-bottom:10px">3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。</div>
+                <div style="margin-bottom:10px">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 {apiGetNewReportDetail} from '@/api/hzsl/report'
+import {apiApplyPermission} from '@/api/hzyb/user'
+import {Popup,Image as VanImage,PullRefresh} from 'vant'
+import AudioBox from '@/views/hzyb/report/components/AudioBox.vue'
+import _ from 'lodash';
+import { useRoute, useRouter } from "vue-router";
+const router = useRouter();
+export default {
+    components:{
+        [Popup.name]:Popup,
+        [VanImage.name]:VanImage,
+        [PullRefresh.name]:PullRefresh,
+        AudioBox,
+    },
+    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定位到留言板
+        }
+    },
+    created() {
+        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 apiGetNewReportDetail(params)
+            if(res.code===200){
+                this.info=res.data
+                this.audioData={
+                    auth_ok:res.data.auth_ok,
+                    video_name:res.data.report_info.video_name,
+                    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
+
+                this.splitContentHandle(this.info.report_info.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(!['晨报','周报'].includes(res.data.report_info.classify_name_first)){
+                    //【第{{info.report_info.stage}}期｜{{info.report_info.classify_name_second}}】{{info.report_info.title}}
+                    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}）`
+                    }
+                }
+
+            }
+        },
+
+        /*内容分割*/
+        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),
+        
+        //返回顶部
+        handleBackTop(){
+            document.body.scrollTop=document.documentElement.scrollTop=0
+        },
+
+        //跳转章节详情
+        goChapterDetail({http_url}){
+            let params = http_url.split("?")[1];
+            // location.href = http_url;
+            location.href=`${location.origin}/xcx_h5/hzsl/report/new/chapter/detail?${params}&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')
+            }
+        },
+
+
+        //点击申请
+        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{
+                    if(!this.info.permission_check.customer_info.status||this.info.permission_check.customer_info.status!='流失'){
+                        this.pupData.show=true
+                        this.pupData.content=`<p>若想查看请联系对口销售</p>`
+                    }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()
+                        }
+                    }
+                }
+                
+            }
+        },
+
+        // 设置tag颜色
+        getTagColor(str){
+            if( str.includes('多')||str.includes('强')||str.includes('反弹') ){
+                return "#DF6051";
+            }else if( str.includes('空')||str.includes('调整') ){
+                return "#6FC5B4";
+            }else{
+                return "#009fe6";
+            }
+        }
+    }
+}
+</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;
+        &::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;
+        }
+        :deep(p){
+            font-size: 36px !important;
+            line-height: 1.8 !important;
+        }
+        :deep(iframe){
+            width: 100% !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;
+      }
+    }
+
+    .back-top-img{
+        position: fixed;
+        z-index: 99;
+        width: 76px;
+        height: 76px;
+        right: 34px;
+        bottom: 150px;
+    }
+
+    .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: flex-end;
+                .time-box{
+                    align-items: center;
+                    font-size: 24px;
+                    .day{
+                        font-size: 32px;
+                        border-right: 1px solid #fff;
+                        padding-right: 15px;
+                        margin-right: 15px;
+                    }
+                }
+                
+            }
+        }
+        .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{
+                    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{
+                        position: absolute;
+                        top: 0;
+                        right: 0;
+                        color: #D4D4D4;
+                        font-size: 20px;
+                    }
+                }
+            }
+        }
+        .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;
+            }
+        }
+    }
+}
+</style>