hongze_yb_pc/src/views/activity/ReportDetail.vue

<script setup>
import moment from 'moment'
import {ref,onMounted} from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex';
import useHZRouter from '@/hooks/useHZRouter'
const route=useRoute()
const HZRouter=useHZRouter()
const store=useStore()
moment.locale('zh-cn')

import {apiGetReportDetail} from '@/api/activity'
let info=ref(null)
const getInfo=async ()=>{
    const res=await apiGetReportDetail({research_report_id:Number(route.query.research_report_id)})
    if(res.code===200){
        info.value=res.data
        if(['day','week'].includes(res.data.research_report_info.type)){
            store.commit('modifyBreadCrumb',res.data.research_report_info.type=='day'?'晨报':'周报')
        }
    }
}
getInfo()

// 设置tag颜色
const getTagColor=(str)=>{
    if( str.includes('多')||str.includes('强')||str.includes('反弹') ){
		return "#DF6051";
	}else if( str.includes('空')||str.includes('调整') ){
		return "#6FC5B4";
	}else{
		return "#009fe6";
	}
}


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

onMounted(()=>{
    $(document).on('click', '.content-wrap img',function(event) {
	    let imgArray = [];
	    let curImageSrc = $(this).attr('src');
		let oParent = $(this).parent();
		if (curImageSrc && !oParent.attr('href')) {
            if(preViewImgs.value.length===0){
                $('.content-wrap 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 goChapterDetail=(item)=>{
    HZRouter.push({
        path:'/activity/chapterdetail',
        query:{
            research_report_type_id:item.ResearchReportTypeId,
            research_report_id:route.query.research_report_id
        }
    })
}

let showDisclaimers=ref(false)
</script>


<template>
    <div class="report-detail-page" v-if="info">
        <!-- 晨报、周报类型 -->
        <div class="list-type-wrap" v-if="['day','week'].includes(info.research_report_info.type)">
            <div :class="['section top-box',info.research_report_info.type=='day'?'top-box-day':'top-box-week']">
                <div class="title">{{info.research_report_info.type=='day'?'晨报':'周报'}}</div>
                <div class="sub-title">{{info.research_report_info.researchReportName.substring(info.research_report_info.researchReportName.indexOf('】')+1)}}</div>
                <div class="flex right-box">
                    <div class="day">{{moment(info.research_report_info.researchReportDate).format('DD')}}</div>
                    <div style="font-size:14px">
                        <div>{{moment(info.research_report_info.researchReportDate).format('ddd')}}</div>
                        <div>{{moment(info.research_report_info.researchReportDate).format('YYYY-MM')}}</div>
                    </div>
                </div>
            </div>
            <div class="section list-wrap">
                <ul class="list">
                    <li class="flex item" v-for="item in info.research_report_type_list" :key="item.ResearchReportTypeId" @click="goChapterDetail(item)">
                        <div class="flex img-box">
                            <el-image
                                class="img"
                                :src="item.BannerUrl"
                                fit="cover"
                            ></el-image>
                        </div>
                        <div class="content-box">
                            <div class="flex title">
                                <h2>{{item.ReportChapterTypeName}}</h2>
                                <div v-if="item.Trend" style="margin-left:10px">
                                    <span
                                        class="tag"
                                        v-for="tag in item.Trend.split('&')" 
                                        :key="tag"
                                        :style="{backgroundColor:getTagColor(tag)}"
                                    >{{tag}}</span>
                                </div>
                            </div>
                            <div class="sub-title">
                                <p>{{item.ResearchReportTypeTitle}}</p>
                            </div>
                            <div class="update-time">更新至：{{moment(item.LastUpdatedTime).format('YYYY-MM-DD')}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 其他类型 -->
        <div class="other-type-wrap" v-else>
            <div class="section top-box">
                <span class="title">【第{{info.research_report_info.periods}}期 | {{info.research_report_info.reportVariety}}】</span>
                <div class="flex author">
                    <span>FICC团队</span>
                    <span class="time">{{moment(info.research_report_info.researchReportDate).format('YYYY-MM-DD HH:mm:ss')}}</span>
                </div>
                <div class="tips">
                    <span>注：请务必阅读</span>
                    <span style="color:#F3A52F;margin-left:20px;cursor: pointer;" @click="showDisclaimers=true">免责声明</span>
                </div>
                <div class="sub-title">摘要：{{info.research_report_info.researchReportName.substring(info.research_report_info.researchReportName.indexOf('】')+1)}}</div>
            </div>
            <div class="section content-wrap">
                <div class="item" v-for="item in info.ResearchReportTypeContentList" :key="item.sort">
                    <h2 class="content-title">{{item.content_type?item.content_type:'核心观点'}}</h2>
                    <div v-html="item.content" class="content-text" @click="clickContent"></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-detail-page{
    .section{
        padding: 20px;
    }
}
.list-type-wrap{
    .top-box{
        height: 140px;
        background-size: cover;
        background-repeat: no-repeat;
        color: #fff;
        position: relative;
        margin-bottom: 20px;
        padding: 39px 34px 20px 34px;
        color: #fff;
        .title{
            font-size: 25px;
            font-weight: 600;
        }
        .sub-title{
            margin-top: 8px;
        }
        .right-box{
            position: absolute;
            right: 29px;
            bottom: 10px;
            align-items: center;
            .day{
                padding-right: 5px;
                font-size: 23px;
                font-weight: 600;
                border-right: 1px solid #fff;
                margin-right: 5px;
            }
        }
    }
    .top-box-day{
        background-image: url('https://hzstatic.hzinsights.com/static/yb_wx/report_banner_day.jpg');
    }
    .top-box-week{
        background-image: url('https://hzstatic.hzinsights.com/static/yb_wx/report_banner_week.jpg');
    }
    .list-wrap{
        padding-left: 0;
        padding-right: 0;
        .item{
            margin-bottom: 20px;
            .img-box{
                width: 55px;
                height: 55px;
                border: 1px solid #EBEBEB;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                margin-right: 20px;
                flex-shrink: 0;
                .img{
                    width: 32px;
                    height: 32px;
                }
            }
            .content-box{
                flex: 1;
                position: relative;
                .title{
                    h2{
                        margin: 0;
                        font-size: 16px;
                        cursor: pointer;
                    }
                    .tag{
                        display: inline-block;
                        background-color: #009fe6;
                        color: #fff;
                        font-size: 12px;
                        padding: 4px 8px;
                        line-height: 1;
                        border-radius: 4px;
                        margin-right: 5px;
                    }
                }
                .sub-title{
                    margin-bottom: 0;
                    margin-top: 8px;
                }
                .update-time{
                    position: absolute;
                    top: 0;
                    right: 0;
                    color: #999;
                    font-size: 14px;
                }
            }
        }
    }
}
.other-type-wrap{
    .top-box{
        .title{
            font-size: 24px;
            font-weight: bold;
            margin-left: -13px;
        }
        .author{
            margin-top: 20px;
            color: #666;
            justify-content: space-between;
        }
        .tips{
            margin-top: 20px;
            font-size: 18px;
            margin-bottom: 30px;
            &::before{
                content: '';
                width: 6px;
                height: 28px;
                display: inline-block;
                background-color: #F3A52F;
                margin-right: 10px;
                position: relative;
                top: 8px;
            }
        }
        .sub-title{
            margin-top: 30px;
            font-size: 18px;
                &::before{
                    content: '';
                    display: inline-block;
                    width: 6px;
                    height: 28px;
                    background: #F3A52F;
                    margin-right: 6px;
                    position: relative;
                    top: 8px;
                }
            
        }
    }
    .content-wrap{
        .item{
            .content-title{
                font-size: 20px;
                color: #000;
                &::before{
                    content: '';
                    display: inline-block;
                    margin-right: 5px;
                    position: relative;
                    top: 7px;
                    width: 6px;
                    height: 28px;
                    background: #F3A52F;
                }
            }
            .content-text{
                font-size: 18px;
                line-height: 1.8;
                :deep(img){
                    max-width: 100%;
                    margin-left: auto;
                    margin-right: auto;
                    display: block;
                }
            }
        }

    }
}
.disclaimers-wrap{
    border-top: 1px dashed #EBEBEB;
    padding: 20px;
    h2{
        margin: 0;
        text-align: center;
        font-size: 16px;
    }
}
</style>