|
|
@@ -0,0 +1,306 @@
|
|
|
+<script setup>
|
|
|
+import moment from 'moment'
|
|
|
+import {ref,onMounted} from 'vue'
|
|
|
+import { useRoute, useRouter } from 'vue-router'
|
|
|
+const route=useRoute()
|
|
|
+const router=useRouter()
|
|
|
+
|
|
|
+import {apiGetReportDetail} from '@/api/report'
|
|
|
+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
|
|
|
+ }
|
|
|
+}
|
|
|
+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)=>{
|
|
|
+ router.push({
|
|
|
+ path:'/report/chapterdetail',
|
|
|
+ query:{
|
|
|
+ research_report_type_id:item.ResearchReportTypeId,
|
|
|
+ research_report_id:route.query.research_report_id
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+</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">
|
|
|
+ <h1 class="type-text">{{info.research_report_info.type=='day'?'晨报':'周报'}}</h1>
|
|
|
+ <div class="flex title-box">
|
|
|
+ <div class="left">
|
|
|
+ <span style="font-size:16px;margin-right:20px">{{info.research_report_info.researchReportName.substring(info.research_report_info.researchReportName.indexOf('】')+1)}}</span>
|
|
|
+ <span>第{{info.research_report_info.periods}}期</span>
|
|
|
+ </div>
|
|
|
+ <div class="time">{{moment(info.research_report_info.researchReportDate).format('YYYY-MM-DD')}}</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" v-if="info.research_report_info.type=='day'">更新至：{{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">
|
|
|
+ <h1 class="title">【第{{info.research_report_info.periods}}期 | {{info.research_report_info.reportVariety}}】</h1>
|
|
|
+ <div class="flex sub-title">
|
|
|
+ <div class="left">{{info.research_report_info.researchReportName.substring(info.research_report_info.researchReportName.indexOf('】')+1)}}</div>
|
|
|
+ <span class="time">{{moment(info.research_report_info.researchReportDate).format('YYYY-MM-DD')}}</span>
|
|
|
+ </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 class="disclaimers-wrap">
|
|
|
+ <h2>免责声明</h2>
|
|
|
+ <p>
|
|
|
+ 1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-image-viewer
|
|
|
+ v-if="showPreViewImg"
|
|
|
+ :initial-index="preViewImgIndex"
|
|
|
+ @close="showPreViewImg=false"
|
|
|
+ :url-list="preViewImgs"
|
|
|
+ />
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.report-detail-page{
|
|
|
+ border: 1px solid #EBEBEB;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 30px;
|
|
|
+ .section{
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.list-type-wrap{
|
|
|
+ .top-box{
|
|
|
+ border-bottom: 1px dashed #EBEBEB;
|
|
|
+ .type-text{
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .title-box{
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 12px;
|
|
|
+ .left{
|
|
|
+ &::before{
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ width: 6px;
|
|
|
+ height: 20px;
|
|
|
+ background: #DAB37C;
|
|
|
+ margin-right: 6px;
|
|
|
+ position: relative;
|
|
|
+ top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ color: #B6B6B6;
|
|
|
+ margin-left: 20px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ position: relative;
|
|
|
+ top: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-wrap{
|
|
|
+ .item{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .img-box{
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ 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;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .update-time{
|
|
|
+ float: right;
|
|
|
+ color: #B6B6B6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.other-type-wrap{
|
|
|
+ .top-box{
|
|
|
+ border-bottom: 1px dashed #EBEBEB;
|
|
|
+ .title{
|
|
|
+ font-size: 20px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .sub-title{
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 20px;
|
|
|
+ .left{
|
|
|
+ font-size: 16px;
|
|
|
+ &::before{
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ width: 6px;
|
|
|
+ height: 20px;
|
|
|
+ background: #DAB37C;
|
|
|
+ margin-right: 6px;
|
|
|
+ position: relative;
|
|
|
+ top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ color: #B6B6B6;
|
|
|
+ margin-left: 20px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ position: relative;
|
|
|
+ top: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-wrap{
|
|
|
+ .item{
|
|
|
+ .content-title{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ &::before{
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 5px;
|
|
|
+ position: relative;
|
|
|
+ top: 4px;
|
|
|
+ width: 6px;
|
|
|
+ height: 20px;
|
|
|
+ background: #DAB37C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-text{
|
|
|
+ font-size: 14px;
|
|
|
+ :deep(img){
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+.disclaimers-wrap{
|
|
|
+ border-top: 1px dashed #EBEBEB;
|
|
|
+ padding: 20px;
|
|
|
+ h2{
|
|
|
+ margin: 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
