研报活动详情增加周报类型

src/router/router.js

@@ -28,6 +28,10 @@ const routes = [
   {
     path:"/ficcReportDetail",
     component:()=> import('@/view/ficc_yb/reportDetail.vue')
+  },
+  {
+    path:"/hzybReportWeekDetail",
+    component:()=> import('@/view/ficc_yb/weekDetail.vue')
   }
 ];
 export default routes;

src/view/ficc_yb/reportDetail.vue

@@ -13,7 +13,18 @@
 			</div>
             <div class="num">第{{info.research_report_info.periods}}期</div>
       </div>
-      <div class="content-wrap">
+      <div class="list-wrap" v-if="['day','week'].includes(info.research_report_info.type)">
+          <div class="item-card" v-for="item in info.research_report_type_list" :key="item.ResearchReportTypeId" @click="goDetail(item)">
+              <div class="img-box">
+                  <img :src="item.ReportChapterTypeThumb" alt="">
+              </div>
+              <div style="margin-left:15px;font-size: 0.52rem;">
+                  <p style="color:#2E88EB">{{item.ReportChapterTypeName}}</p>
+                  <p class="van-multi-ellipsis--l2">{{item.ResearchReportTypeTitle}}</p>
+              </div>
+          </div>
+      </div>
+      <div class="content-wrap" v-else>
           <div v-for="item in info.ResearchReportTypeContentList" :key="item.sort">
               <h2 style="font:600 0.76rem/1.2rem '思源黑体' !important; color:#000;margin:5px 0">{{item.content_type?item.content_type:'核心观点'}}</h2>
               <div v-html="item.content" style="font:400 0.70rem/1.2rem '思源黑体'; color:#333;"></div>
@@ -36,11 +47,11 @@
         description="暂无权限"
     />
   </div>
-  </div>
+</div>
 </template>
 
 <script>
-// import CryptoJS from './utils/crypto'
+// import CryptoJS from './utils/crypto' 
 import {apiReportDetail} from '@/api/ficc_yb/api.js'
 export default {
     computed: {
@@ -75,7 +86,6 @@ export default {
         // console.log(res);
         document.title='报告详情'
         this.getDetail()
-        console.log('测试');
     },
     mounted () {
         $(document).on('click', '.content-wrap img',function(event) {
@@ -119,7 +129,16 @@ export default {
             }else if(res.code==400){
                 this.noAuth=true
             }
-        }
+        },
+
+        goDetail(item){//晨报、周报类型跳转详情
+            this.$router.push({
+                path:"/hzybReportWeekDetail",
+                query:{
+                    
+                }
+            })
+        },
     }
 }
 </script>
@@ -202,4 +221,37 @@ export default {
     font-size: 14px;
     line-height: 1.7;
 }
+.list-wrap{
+    background-color: #fff;
+    margin-top: -20px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    min-height: 200px;
+    font-size: 14px;
+    padding: 20px 0;
+    position: relative;
+    .item-card{
+        border-bottom: 1px solid #f3f3f3;
+        padding: 15px 20px;
+        display: flex;
+        align-items: center;
+        .img-box{
+            width:2rem; 
+            height:2rem; 
+            border-radius:0.2rem; 
+            overflow:hidden; 
+            background:#fff; 
+            border:1px solid #f3f3f3;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            img{
+                width:1.2rem; 
+                height:1.2rem;
+            }
+        }
+        
+    }
+}
 </style>

src/view/ficc_yb/weekDetail.vue

@@ -0,0 +1,205 @@
+<template>
+<div>
+  <div class="report-detail" v-if="info">
+      <div class="top-wrap" :style="'backgroundImage:url('+topBgUrl+')'">
+          <h1 class="title">{{info.research_report_info.reportVariety}}</h1>
+          <h3 class="sub-title">{{info.research_report_info.researchReportName.substring(info.research_report_info.researchReportName.indexOf('】')+1)}}</h3>
+          <div class="time-box">
+				<div class="time-num">{{subval(info.research_report_info.researchReportDate,8,10)}}</div>
+                <div>
+                    <div>{{getWeek(info.research_report_info.researchReportDate)}}</div>
+				    <div>{{subval(info.research_report_info.researchReportDate,0,7)}}</div>
+                </div>
+			</div>
+            <div class="num">第{{info.research_report_info.periods}}期</div>
+      </div>
+      <div class="content-wrap">
+          <div v-for="item in info.ResearchReportTypeContentList" :key="item.sort">
+              <h2 style="font:600 0.76rem/1.2rem '思源黑体' !important; color:#000;margin:5px 0">{{item.content_type?item.content_type:'核心观点'}}</h2>
+              <div v-html="item.content" style="font:400 0.70rem/1.2rem '思源黑体'; color:#333;"></div>
+          </div>
+      </div>
+      <div class="footer-wrap">
+          <img class="img" style="font:0.66rem/1.6rem '思源黑体'; color:#000; text-align:center;" src="@/assets/img/ficc_yb/mzsm.png" alt="">
+          <div class="content" style="width:100%; height:100%; padding:0.5rem 0.8rem 1.4rem; box-sizing:border-box; font:0.46rem/0.8rem '思源黑体'; color:#666; background:#fff; overflow:scroll; position:relative;">
+            <p>1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。</p>
+			<p>2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。</p>
+			<p>3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。</p>
+			<p>4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。</p>
+          </div>
+      </div>
+  </div>
+  <div v-if="noAuth" style="background:#fff;padding-top:100px;box-size:border-box">
+    <van-empty
+        class="custom-image"
+        :image="require('../../assets/img/ficc_yb/noauth.png')"
+        description="暂无权限"
+    />
+  </div>
+</div>
+</template>
+
+<script>
+// import CryptoJS from './utils/crypto' 
+import {apiReportDetail} from '@/api/ficc_yb/api.js'
+export default {
+    computed: {
+        topBgUrl(){
+            if(this.info){
+                if( this.info.research_report_info.type=='day' ){
+                    return require('@/assets/img/ficc_yb/daybanner.jpg');
+                }else if( this.info.research_report_info.type=='week' ){
+                    return require('@/assets/img/ficc_yb/weekbanner.jpg');
+                }else if( this.info.research_report_info.type=='two_week' ){
+                    return require('@/assets/img/ficc_yb/twoweekbanner.jpg');
+                }else if( this.info.research_report_info.type=='month' ){
+                    return require('@/assets/img/ficc_yb/monthbanner.jpg');
+                }else if( this.info.research_report_info.type=='other' ){
+                    return require('@/assets/img/ficc_yb/otherbanner.jpg');
+                }else{
+                    return require('@/assets/img/ficc_yb/daybanner.jpg');
+                }
+            }
+            
+        }        
+    },
+    data () {
+        return {
+            info:null,
+            noAuth:false
+        }
+    },
+    created(){
+        // let str='wB7f0x+1Ar4='
+        // let res=CryptoJS.Des3Decrypt(str);
+        // console.log(res);
+        document.title='报告详情'
+        this.getDetail()
+    },
+    mounted () {
+        $(document).on('click', '.content-wrap img',function(event) {
+			let imgArray = [];
+			let curImageSrc = $(this).attr('src');
+			let oParent = $(this).parent();
+			if (curImageSrc && !oParent.attr('href')) {
+                $('.content-wrap img').each(function(index, el) {
+                    let itemSrc = $(this).attr('src');
+                    imgArray.push(itemSrc);
+                });
+                wx.previewImage({current:curImageSrc,urls:imgArray});
+			}
+		});  
+    },
+    updated () {
+      $('.content-wrap').find('img').css({display:'block',width:'100%',margin:'0 auto'});  
+    },
+    methods: {
+        subval(val,l,r){  //时间格式处理
+			return val.substring(l,r);
+		},
+        getWeek(dateString){  //日期星期转换
+			let date;
+			if( dateString == null || typeof dateString == "undefined" ){
+				date = new Date();
+			}else{
+				let dateArray = dateString.split("-");
+				date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
+			}
+			return "周" + "日一二三四五六".charAt(date.getDay());
+		},
+        async getDetail(){
+            const res=await apiReportDetail({
+                Authorization:this.$route.query.token,
+                research_report_id:this.$route.query.research_report_id
+            })
+            if(res.code===200){
+                this.info=res.data
+                this.noAuth=false
+            }else if(res.code==400){
+                this.noAuth=true
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.top-wrap{
+    width: 100%;
+    height: 200px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    color: #fff;
+    padding-top: 20px;
+    position: relative;
+    h1,h3{
+        margin: 0;
+        padding: 0;
+    }
+    .title,.sub-title{
+        text-align: center;
+        width: 80%;
+        margin-left: auto;
+        margin-right: auto;
+        font-size: 26px;
+    }
+    .sub-title{
+        font-size: 18px;
+        margin-top: 40px;
+    }
+    .time-box{
+        display: flex;
+        position: absolute;
+        left: 20px;
+        bottom: 30px;
+        font-size: 12px;
+        .time-num{
+            font-size: 22px;
+            font-weight: bold;
+            border-right: 1px solid #fff;
+            margin-right: 5px;
+            padding-right: 3px;
+            line-height: 40px;
+        }
+    }
+    .num{
+        position: absolute;
+        bottom: 30px;
+        right: 20px;
+        font-size: 14px;
+    }
+}
+.footer-wrap{
+    background-color: rgb(236, 235, 235);
+    padding: 20px 16px;
+    .img{
+        display: block;
+        margin: auto;
+        height: 16px;
+        margin-bottom: 10px;
+    }
+    p{
+        margin-top: 0;
+        margin-bottom: 15px;
+    }
+    .content{
+        background-color: #fff;
+        padding: 15px;
+        border-radius: 4px;
+        line-height: 1.7;
+        color: rgb(102, 102, 102);
+    }
+}
+.content-wrap{
+    background-color: #fff;
+    margin-top: -20px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    min-height: 200px;
+    position: relative;
+    padding: 20px 16px;
+    font-size: 14px;
+    line-height: 1.7;
+}
+
+</style>