hongze_yb_xcx/pages-report/chapterDetail.vue

<template>
  <view class="chapter-detail-page" v-if="info">
    <view class="main-box">
      <view 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}}</view>
      <view class="flex time">
        <text>FICC团队</text>
        <text>{{formatTime(info.report_chapter_item.publish_time)}}</text>
      </view>
      <view class="flex audio-wrap">
        <image style="opacity:0.3" src="./static/audio-pause.png" mode="aspectFill" v-if="!info.auth_ok"/>
        <image src="./static/audio-pause.png" mode="aspectFill" v-else/>
        <view>
          <view>{{info.report_chapter_item.video_name}}</view>
          <view style="color: #999999">{{info.report_chapter_item.video_play_seconds|formatVoiceTime}}</view>
        </view>
      </view>
      <view class="tips">
        <text>注：请务必阅读</text>
        <text style="color: #e3b377; margin-left: 20rpx" @click="showDisclaimers = true">免责声明</text>
      </view>
      <view class="rich-content">
        <mp-html :content="info.report_chapter_item.content" v-if="info.auth_ok" />
        <mp-html :content="info.report_chapter_item.content_sub" v-else />
      </view>
      <!-- 无权限 -->
      <view class="no-auth-wrap" v-if="!info.auth_ok">
        <view class="apply-box" v-if="info.permission_check.type=='apply'">
          <view>您暂无权限查看报告，若想查看请申请开通</view>
          <view class="btn" @click="handleGoApply">立即申请</view>
        </view>
        <view class="apply-box" v-else>
          <view>您暂无权限查看报告 </view>
          <view>若想查看请联系对口销售：{{info.permission_check.name}}</view>
          <view class="btn" @click="handleContact">立即联系</view>
        </view>
      </view>
      <!-- 指标数据模块 -->
      <view class="ticker-wrap" v-if="tickerInfo">
        <view class="top-title">{{tickerInfo.ticker_title.report_chapter_type_name}}数据表</view>
        <view class="table-box">
          <view class="table-row table-head">
            <view class="table-item" v-for="item in tickerHead" :key="item.key">{{item.label}}</view>
          </view>
          <view class="table-row table-body" v-for="(tr,index) in tickerInfo.list" :key="tr.base_column_name">
            <view :class="['table-item',index%2==0?'grey':'',tr[td.key]<0?'minus':'']" v-for="td in tickerHead" :key="td.key">{{tr[td.key]}}</view>
          </view>
        </view>
        <view v-if="tickerInfo.ticker_title.report_chapter_type_id ===26" style="text-align:center;font-weight:bold">注：与新加坡TSR20相关数据均取展示日期前一交易日数据</view>
        <view></view>
      </view>
    </view>
    <!-- 章节详情底部快速切换 -->
    <view class="chapter-list-wrap" v-if="formPage!='home'">
      <view class="top-text">更多</view>
      <van-row gutter="10">
        <van-col span="6" v-for="item in info.report_chapter_menu_list" :key="item.report_chapter_id">
          <view :class="['item',item.report_chapter_id==chapterId&&'active']" @click="handleChapterChange(item)">
            <image :src="item.report_chapter_type_thumb" mode="aspectFill"/>
            <text>{{item.report_chapter_type_name}}</text>
          </view>
        </van-col>
      </van-row>
    </view>

    <!-- 返回顶部 -->
    <image @click="handleBackTop" class="back-top-img" src="./static/back-top.png" mode="aspectFill" />

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

    <!-- 申请提示弹窗 -->
    <van-popup :show="pupData.show" @close="pupData.show=false" :close-on-click-overlay="false">
        <view class="global-pup">
            <view class="content">
                <rich-text :nodes="pupData.content"></rich-text>
            </view>
            <view class="flex bot">
                <view @click="pupData.show=false">知道了</view>
            </view>
        </view>
    </van-popup>
  </view>
</template>

<script>
const moment=require('@/utils/moment-with-locales.min')
moment.locale('zh-cn');
import {apiChapterDetail,apiChapterTickerValue} from '@/api/report'
export default {
  data() {
    return {
      showDisclaimers: false, //显示免责声明
      html: "<h1>Hello World!</h1>",
      chapterId:0,
      formPage:'',//如果是从首页(home)来的则隐藏底部切换
      info:null,

      tickerInfo:null,
      tickerHead:[],

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

    };
  },
  onLoad(options) {
    this.chapterId=options.chapterId
    this.formPage=options.formPage||''
    this.getDetail()
  },
  methods: {
    async getDetail(){
      const res=await apiChapterDetail({report_chapter_id:Number(this.chapterId)})
      if(res.code===200){
        this.info=res.data
        uni.setNavigationBarTitle({ title: res.data.report_chapter_item.classify_name_first })
        if(res.data.report_chapter_item.classify_name_first==='晨报'){
          this.getTickerValue()
        }
      }
    },

    //获取晨报中指标数据
    async getTickerValue(){
      const res=await apiChapterTickerValue({report_chapter_id:Number(this.chapterId)})
      if(res.code===200){
        if(!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() {
      uni.pageScrollTo({ scrollTop: 0 });
    },

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

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

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

    //点击申请
    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!='流失'){
            uni.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>`
            }
          }
        }
                
      }
    },

  },
};
</script>

<style>
page{
  padding-bottom: 0;
}
</style>

<style lang="scss" scoped>
.chapter-detail-page {
    .main-box{
        padding: 34rpx;
    }
    .title{
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
    }
    .time{
        justify-content: space-between;
        font-size: 28rpx;
    }
    .audio-wrap{
        height: 160rpx;
        background: #FAF7EE;
        border-radius: 16rpx;
        margin-top: 20rpx;
        padding: 10rpx 31rpx;
        margin-bottom: 31rpx;
        align-items: center;
        image{
            width: 110rpx;
            height: 110rpx;
            display: block;
            margin-right: 16rpx;
        }
    }

    .tips{
        font-size: 34rpx;
        margin-bottom: 51rpx;
        &::before{
            content: '';
            width: 10rpx;
            height: 50rpx;
            display: inline-block;
            background-color: #E3B377;
            margin-right: 20rpx;
            position: relative;
            top: 10rpx;
        }
    }

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

    .rich-content{
        line-height: 1.7;
        font-size: 32rpx;
    }

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

    .back-top-img{
        position: fixed;
        z-index: 99;
        width: 76rpx;
        height: 76rpx;
        right: 34rpx;
        bottom: 100rpx;
    }
    .chapter-list-wrap {
    background-color: #f5f6fa;
    padding: 34rpx;
    min-height: 300px;
    .top-text {
      text-align: center;
      color: #666666;
      margin-bottom: 30rpx;
      &::before {
        content: "";
        width: 90rpx;
        height: 1px;
        background-color: #999;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10rpx;
      }
      &::after {
        content: "";
        width: 90rpx;
        height: 1px;
        background-color: #999;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10rpx;
      }
    }
    .item {
      background-color: #fff;
      height: 160rpx;
      margin-bottom: 20rpx;
      text-align: center;
      color: #C0CFDA;
      font-size: 24rpx;
      padding-top: 20rpx;
      border-radius: 8rpx;
      overflow: hidden;
      image{
        width: 88rpx;
        height: 88rpx;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    }
    .active{
      border: 1px solid #E3B377;
      position: relative;
      &::before{
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
        border-top: 46rpx solid #E3B377;
        border-right: 46rpx solid transparent;
      } 
    }
    }

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

    }
    .table-box{
      margin: 20rpx 0;
      &::-webkit-scrollbar{
        width: 0;
      }
      overflow: auto hidden;
      .table-row{
        display: flex;
        width: 100%;
      }
      .table-item{
        padding: 10rpx;
        min-width: 200rpx;
        max-width: 280rpx;
        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>