hongze_yb_pc/src/views/report/ChapterDetail.vue

<script setup>
import {ref,onMounted} from 'vue'
import {apiChapterDetail,apiChapterTickerValue} from '@/api/report'
import {apiApplyPermission} from '@/api/user'
import {apiGetWechatQRCode} from '@/api/common'
import { ElMessageBox } from 'element-plus'
import moment from 'moment';
import AudioBox from './components/AudioBox.vue'
import { useRoute, useRouter } from 'vue-router';

const route=useRoute()
const router=useRouter()

let chapterId=ref(route.query.chapterId||'') //章节id
let frompage=ref(route.query.frompage||'')//如果来自报告详情页 则展示底部章节列表

//获取晨报中指标数据
let tickerInfo=ref(null)
let tickerHead=ref([])
const getTickerValue=async ()=>{
    const res=await apiChapterTickerValue({report_chapter_id:Number(this.chapterId)})
    if(res.code===200){
        if(!res.data||!res.data.list) return
        tickerInfo.value=res.data
        if(res.data.ticker_title.report_chapter_type_id===17){
            tickerHead.value=[
                {
                    label:res.data.ticker_title.ticker_title,
                    key:'base_column_name'
                },
                {
                    label:'公布日期',
                    key:'date'
                },
                {
                    label:'最新值',
                    key:'ticker_value'
                },
                {
                    label:'上期值',
                    key:'last_value'
                }
            ]
        }else{
            tickerHead.value=[
                {
                    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'
                }
            ]
        }
    }
}

// 获取章节报告详情
let info=ref(null)
let audioData=ref(null)
const getChapterReportDetail=async ()=>{
    const res=await apiChapterDetail({
        report_chapter_id:Number(chapterId.value)
    })
    if(res.code===200){
        info.value=res.data
        audioData.value={
            auth_ok:res.data.auth_ok,
            video_name:res.data.report_chapter_item.video_name,
            video_size:res.data.report_chapter_item.video_size,
            video_play_seconds:res.data.report_chapter_item.video_play_seconds,
            video_url:res.data.report_chapter_item.video_url,
            reportId:res.data.report_chapter_item.report_chapter_id+res.data.report_chapter_item.report_id
        }
        document.title=res.data.report_chapter_item.classify_name_first
        if(res.data.auth_ok&&res.data.report_chapter_item.classify_name_first==='晨报'){
          getTickerValue()
        }
        
        // 获取详情如果为联系销售根据判断条件是否主动申请一次
        if(!res.data.auth_ok){
            if(info.value.permission_check.type=='contact'&&!info.value.permission_check.customer_info.has_apply){
                if(info.value.permission_check.customer_info.status=='冻结'||(info.value.permission_check.customer_info.status=='试用'&&info.value.permission_check.customer_info.is_suspend==1)){
                    apiApplyPermission({
                        company_name:info.value.permission_check.customer_info.company_name,
                        real_name:info.value.permission_check.customer_info.name,
                        source:4,
                        from_page:'报告详情'
                    }).then(res=>{
                        if(res.code===200){
                            console.log('主动申请成功');
                        }
                    }) 
                }
            }
        }
        //向小程序发送分享数据
        const postData={
            path:'/pages-report/chapterDetail',
            params:{
                chapterId:chapterId.value
            },
            title:`FICC【${res.data.report_chapter_item.classify_name_first}】`,
            shareImg:''
        }
        wx.miniProgram.postMessage({ data: postData })
    }
}
getChapterReportDetail()

//点击底部切换章节
const handleChangeChapter=(item)=>{
    chapterId.value=item.report_chapter_id
    document.body.scrollTop=document.documentElement.scrollTop=0
    getChapterReportDetail()
}

// 获取小程序码
let QRCodeImg=ref('')
const getQRCodeImg=async ()=>{
    const res=await apiGetWechatQRCode({
        CodeScene:JSON.stringify({chapterId:chapterId.value}),
        CodePage:'pages-report/chapterDetail'
    })
    if(res.code===200){
        QRCodeImg.value=res.data
    }
}
getQRCodeImg()


let preViewImgs=ref([])
let preViewImgIndex=ref(0)
let showPreViewImg=ref(false)

onMounted(()=>{
    $(document).on('click', '.rich-content img',function(event) {
	    let imgArray = [];
	    let curImageSrc = $(this).attr('src');
		let oParent = $(this).parent();
		if (curImageSrc && !oParent.attr('href')) {
            if(preViewImgs.value.length===0){
                $('.rich-content img').each(function(index, el) {
                    let itemSrc = $(this).attr('src');
                    imgArray.push(itemSrc);
                });
                preViewImgs.value=imgArray
            }
            preViewImgIndex.value=preViewImgs.value.indexOf(curImageSrc)||0
            showPreViewImg.value=true
	    }
    })
})

// 无权限点击申请
const handleGoApply=async ()=>{
    if(info.value.permission_check.type=='apply'){
        if(info.value.permission_check.customer_info.has_apply){// 已经申请过
		    const htmlStr=`<p>您已提交过申请，请耐心等待</p>`
            ElMessageBox({
                title:'温馨提醒',
                message:htmlStr,
                center: true,
                dangerouslyUseHTMLString: true,
                confirmButtonText:'知道了',
                confirmButtonClass:'self-elmessage-confirm-btn'
            })
        }else{
          if(!info.value.permission_check.customer_info.status||info.value.permission_check.customer_info.status!='流失'){
            router.push('/apply/permission?source=4&fromPage=报告详情')
          }else{//主动调一次申请权限接口 
            const res=await apiApplyPermission({
              company_name:info.value.permission_check.customer_info.company_name,
              real_name:info.value.permission_check.customer_info.name,
              source:4,
              from_page:'报告详情'
            })
            if(res.code===200){
                getChapterReportDetail()
			    const htmlStr=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
                ElMessageBox({
                    title:'温馨提醒',
                    message:htmlStr,
                    center: true,
                    dangerouslyUseHTMLString: true,
                    confirmButtonText:'知道了',
                    confirmButtonClass:'self-elmessage-confirm-btn'
                })
            }
          }
        }
                
    }
}

let showDisclaimers=ref(false)//显示免责声明

</script>

<template>
    <div class="report-chapter-detail-page" v-if="info">
        <div class="hasrightaside-box">
            <div class="content-box">
                <div class="report-box">
                    <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="time">
                        <span>FICC团队</span>
                        <span>{{moment(info.report_chapter_item.publish_time).format('YYYY.MM.DD HH:mm')}}</span>
                    </div>
                    <div class="tips">
                        <span>注：请务必阅读</span>
                        <span style="color:#F3A52F;margin-left:20px;cursor: pointer;" @click="showDisclaimers=true">免责声明</span>
                    </div>
                    <AudioBox :data="audioData" v-if="info.report_chapter_item.video_url&&info.report_chapter_item.video_play_seconds>0"></AudioBox>
                    <div class="abstract" v-if="info.report_chapter_item.abstract">摘要：{{info.report_chapter_item.abstract}}</div>
                    <div class="rich-content">
                        <div v-html="info.report_chapter_item.content" v-if="info.auth_ok"></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="global-main-btn btn" @click="handleGoApply">立即申请</div>
                        </div>
                        <div class="apply-box" v-else>
                            <div>您暂无权限查看报告 </div>
                            <div>若想查看请联系对口销售：{{info.permission_check.name}}--{{info.permission_check.mobile}}</div>
                        </div>
                    </div>
                </div>
                <!-- 章节列表 -->
                <div class="chapter-list-wrap" v-if="frompage=='reportdetail'">
                    <div class="top-name">更多</div>
                    <div class="flex list">
                        <div 
                            :class="['item',item.report_chapter_id==chapterId&&'active']" 
                            v-for="item in info.report_chapter_menu_list" 
                            :key="item.report_chapter_id"
                            @click="handleChangeChapter(item)"
                        >
                            <img :src="item.report_chapter_type_thumb" alt="">
                            <span>{{item.report_chapter_type_name}}</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="right-aside-box" v-if="info.auth_ok">
                <div class="fix-top">
                <div class="share-box">
                    <div class="label">分享</div>
                    <el-popover 
                        :width="200" 
                        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
                    >
                        <template #reference><div class="icon"></div></template>
                        <template #default>
                            <img :src="QRCodeImg" class="share-xcx-img" alt="" style="width: 150px;display: block;margin: 0 auto;">
                        </template>
                    </el-popover>
                </div>
                <div class="hot-box" style="margin-top: 60px;">
                    <div class="label">热门栏目</div>
                    <div class="img-con"></div>
                </div>
                <div class="recmd-box" style="margin-top: 60px;">
                    <div class="label">更多推荐</div>
                    <div class="recmd-item">
                        <div class="title">股债日评</div>
                        <div>178 | 关注中美领导交流</div>
                    </div>
                    <div class="recmd-item">
                        <div class="title">股债日评</div>
                        <div>178 | 关注中美领导交流</div>
                    </div>
                    <div class="recmd-item">
                        <div class="title">股债日评</div>
                        <div>178 | 关注中美领导交流</div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图片预览 -->
    <el-image-viewer
        v-if="showPreViewImg"
        :initial-index="preViewImgIndex"
        @close="showPreViewImg=false"
        :url-list="preViewImgs"
    />

    <!-- 免责申明 -->
    <el-dialog v-model="showDisclaimers" title="免责声明" center draggable width="40%">
        <div class="disclaimers-box">
            <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>
    </el-dialog>
</template>

<style lang="scss" scoped>
.report-chapter-detail-page{
    .content-box{
        flex: 1;
        padding-right: 30px;
    }
        
    .report-box{
        .title{
            display: inline;
            font-size: 24px;
            font-weight: bold;
            margin-left: -14px;
        }
        .time{
            color: #666;
            margin-top: 20px;
            margin-bottom: 30px;
            font-size: 16px;
            span:last-child{
                float: right;
            }
        }
        .tips{
            font-size: 18px;
            margin-bottom: 30px;
            &::before{
                content: '';
                width: 6px;
                height: 30px;
                display: inline-block;
                background-color: #F3A52F;
                margin-right: 10px;
                position: relative;
                top: 10px;
            }
        }
        .abstract{
            font-size: 18px;
            font-weight: bold;
            margin-top: 20px;
            &::before{
                content: '';
                width: 6px;
                height: 30px;
                display: inline-block;
                background-color: #F3A52F;
                margin-right: 10px;
                position: relative;
                top: 10px;
            }
        }
        .rich-content{
            margin-top: 30px;
            line-height: 1.8;
            font-size: 18px;
            :deep(img){
                width: 100% !important;
            }
            :deep(span){
                font-size: 18px !important;
                line-height: 1.8 !important;
            }
            :deep(p){
                font-size: 18px !important;
                line-height: 1.8 !important;
            }
        }
    }
    .no-auth-wrap{
        text-align: center;
        color: #F3A52F;
        margin-top: -140px;
        padding-top: 140px;
        min-height: 200px;
        position: relative;
        z-index: 5;
        background: linear-gradient(360deg, #FFFFFF 60%, rgba(255, 255, 255, 0) 88%);
        .btn{
            width: 218px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
        }
    }

    .chapter-list-wrap{
        .top-name{
            text-align: center;
            color: #F3A52F;
            font-size: 18px;
            margin-bottom: 50px;
            &::before,&::after{
                content: '';
                display: inline-block;
                width: 83px;
                height: 1px;
                background-color: #F3A52F;
                vertical-align: middle;
                margin: 0 22px;
            }
        }
        .list{
            flex-wrap: wrap;
            .item{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 148px;
                height: 36px;
                background-color: #F7F7F7;
                border-radius: 4px;
                margin-right: 20px;
                margin-bottom: 20px;
                cursor: pointer;
                img{
                    width: 20px;
                    height: 20px;
                }
            }
            .active{
                background-color: #F3A52F;
                color: #fff;
            }
        }
    }

}
</style>