周报类型详情页修改

src/view/ficc_yb/weekDetail.vue

@@ -1,123 +1,302 @@
 <template>
-<div>
-  <div class="report-detail" v-if="info">
-      <div class="top-wrap">
-          <img :src="topBgUrl" alt="">
-      </div>
-      <div class="content-wrap">
-          <div class="top-box">
-            <h2 style="font-size:0.8rem;font-weight:700;line-height:1.4;letter-spacing:1px;color:#000">{{info.research_report_type_info.research_report_type_title}}</h2>
-            <div style="margin-top:0.4rem; overflow:auto;">
-				<h1 style="float:left; display:inline-block; border:1px solid #6184bc; padding:0.1rem 0.4rem; border-radius:0.5rem; overflow:hidden;">
-					<img :src="info.research_report_type_info.banner_url" style="float:left; height:0.7rem; max-width:0.7rem; border-radius:100%; margin-right:0.2rem;" />
-					<b style="float:left; font:0.56rem/0.7rem '黑体'; color:#6184bc;">{{info.research_report_type_info.report_chapter_type_name}}</b>
-				</h1>
-                <p style="float:left; display:inline-block; height:1rem; font:0.56rem/1rem 'PingFangSC-Regular'; color:#C3C3C3; margin-left:0.4rem;">弘则研究</p>
-			</div>
-          </div>
-          <div v-for="item in info.research_report_type_content_list" :key="item.sort">
-              <p style="width:100%; min-height:1.2rem; padding-left:0.5rem; box-sizing:border-box; border-bottom:1px solid #fff; margin:0.8rem auto 0.3rem; position:relative;">
-					<span style="display:inline-block; width:0.2rem; height:0.8rem; background:#cf441f; position:absolute; top:0.2rem; left:0;"></span>
-					<span style="font:600 0.76rem/1.2rem '思源黑体' !important; color:#000;">{{item.content_type?item.content_type:'核心观点'}}</span>
-				</p>
-              <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>
+    <div>
+        <div class="report-detail" v-if="info">
+            <div class="top-wrap">
+                <img :src="topBgUrl" alt="" />
+                <div class="box" @click="showTips"></div>
+            </div>
+            <div class="content-wrap">
+                <div class="top-box">
+                    <h2
+                        style="
+                            font-size: 0.8rem;
+                            font-weight: 700;
+                            line-height: 1.4;
+                            letter-spacing: 1px;
+                            color: #000;
+                        "
+                    >
+                        {{
+                            info.research_report_type_info
+                                .research_report_type_title
+                        }}
+                    </h2>
+                    <div style="margin-top: 0.4rem; overflow: auto">
+                        <h1
+                            style="
+                                float: left;
+                                display: inline-block;
+                                border: 1px solid #6184bc;
+                                padding: 0.1rem 0.4rem;
+                                border-radius: 0.5rem;
+                                overflow: hidden;
+                            "
+                        >
+                            <img
+                                :src="info.research_report_type_info.banner_url"
+                                style="
+                                    float: left;
+                                    height: 0.7rem;
+                                    max-width: 0.7rem;
+                                    border-radius: 100%;
+                                    margin-right: 0.2rem;
+                                "
+                            />
+                            <b
+                                style="
+                                    float: left;
+                                    font: 0.56rem/0.7rem '黑体';
+                                    color: #6184bc;
+                                "
+                                >{{
+                                    info.research_report_type_info
+                                        .report_chapter_type_name
+                                }}</b
+                            >
+                        </h1>
+                        <p
+                            style="
+                                float: left;
+                                display: inline-block;
+                                height: 1rem;
+                                font: 0.56rem/1rem 'PingFangSC-Regular';
+                                color: #c3c3c3;
+                                margin-left: 0.4rem;
+                            "
+                        >
+                            弘则研究
+                        </p>
+                    </div>
+                </div>
+                <div
+                    v-for="item in info.research_report_type_content_list"
+                    :key="item.sort"
+                >
+                    <p
+                        style="
+                            width: 100%;
+                            min-height: 1.2rem;
+                            padding-left: 0.5rem;
+                            box-sizing: border-box;
+                            border-bottom: 1px solid #fff;
+                            margin: 0.8rem auto 0.3rem;
+                            position: relative;
+                        "
+                    >
+                        <span
+                            style="
+                                display: inline-block;
+                                width: 0.2rem;
+                                height: 0.8rem;
+                                background: #cf441f;
+                                position: absolute;
+                                top: 0.2rem;
+                                left: 0;
+                            "
+                        ></span>
+                        <span
+                            style="
+                                font: 600 0.76rem/1.2rem '思源黑体' !important;
+                                color: #000;
+                            "
+                            >{{
+                                item.content_type
+                                    ? item.content_type
+                                    : "核心观点"
+                            }}</span
+                        >
+                    </p>
+                    <div
+                        v-html="item.content"
+                        style="font: 400 0.7rem/1.2rem '思源黑体'; color: #333"
+                    ></div>
+                </div>
+            </div>
+            <div class="footer-wrap">
+                <div id="grid">
+                    <div v-for="(item,index) in list" :key="index" @click="selectTag(item.ResearchReportTypeId)">
+                        <img v-show="item.ResearchReportTypeId==selectId" src="~@/assets/img/ficc_yb/selected.png" class="selectimg" />
+                        <img :src="item.BannerUrl" class="imgBg" />
+                        <p>{{item.ReportChapterTypeName}}</p>
+                    </div>
+                </div>
+            </div>
+
+            <div id="tipsAlert">
+                <img
+                    src="~@/assets/img/ficc_yb/lianzi.png"
+                    style="
+                        width: 0.56rem;
+                        position: absolute;
+                        left: 50%;
+                        margin-left: -0.28rem;
+                        top: -0.5rem;
+                        z-index: 10;
+                    "
+                />
+                <div
+                    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;
+                    "
+                >
+                    <h1
+                        style="
+                            font: 0.66rem/1.6rem '思源黑体';
+                            color: #000;
+                            text-align: center;
+                        "
+                    >
+                        免责声明
+                    </h1>
+                    <p>
+                        1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。
+                    </p>
+                    <p>
+                        2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。
+                    </p>
+                    <p>
+                        3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。
+                    </p>
+                    <p>
+                        4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。
+                    </p>
+                    <img
+                        src="~@/assets/img/ficc_yb/shou.png"
+                        @click="hideTips"
+                        style="
+                            width: 3.12rem;
+                            padding: 0.5rem 2rem 0;
+                            position: absolute;
+                            bottom: 0;
+                            left: 50%;
+                            margin-left: -3.56rem;
+                        "
+                    />
+                </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 {apiReportDetailWeek} from '@/api/ficc_yb/api.js'
+// import CryptoJS from './utils/crypto'
+import { apiReportDetailWeek,apiReportDetail } from "@/api/ficc_yb/api.js";
 export default {
     computed: {
-        topBgUrl(){
-            if( this.$route.query.type=='week' ){
-                return require('@/assets/img/ficc_yb/weektop.jpg');
-            }else if( this.info.research_report_info.type=='week' ){
-                return require('@/assets/img/ficc_yb/daytop.jpg');
+        topBgUrl() {
+            if (this.$route.query.type == "week") {
+                return require("@/assets/img/ficc_yb/weektop.jpg");
+            } else if (this.info.research_report_info.type == "week") {
+                return require("@/assets/img/ficc_yb/daytop.jpg");
             }
-        }        
+        }
     },
-    data () {
+    data() {
         return {
-            info:null,
-            noAuth:false
-        }
+            info: null,
+            noAuth: false,
+            list:[],
+            selectId:this.$route.query.report_type_id,
+        };
     },
-    created(){
+    created() {
         // let str='wB7f0x+1Ar4='
         // let res=CryptoJS.Des3Decrypt(str);
         // console.log(res);
-        document.title='报告详情'
-        this.getDetail()
+        document.body.scrollTop = document.documentElement.scrollTop = 0;
+        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');
+    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});
-			}
-		});  
+                wx.previewImage({ current: curImageSrc, urls: imgArray });
+            }
+        });
     },
-    updated () {
-      $('.content-wrap').find('img').css({display:'block',width:'100%',margin:'0 auto'});  
+    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 apiReportDetailWeek({
+        
+        async getDetail() {
+            const res = await apiReportDetailWeek({
+                Authorization: this.$route.query.token,
+                research_report_type_id: this.$route.query.report_type_id
+            });
+            if (res.code === 200) {
+                this.info = res.data;
+                this.noAuth = false;
+                this.getReportList(res.data.research_report_type_info.research_report_id)
+            } else if (res.code == 400) {
+                this.noAuth = true;
+            }
+        },
+
+        async getReportList(id){
+            const res=await apiReportDetail({
                 Authorization:this.$route.query.token,
-                research_report_type_id:this.$route.query.report_type_id,
+                research_report_id:id
             })
             if(res.code===200){
-                this.info=res.data
-                this.noAuth=false
-            }else if(res.code==400){
-                this.noAuth=true
+                this.list=res.data.research_report_type_list||[]
             }
-        }
+        },
+
+        showTips() {
+            //免责声明显示
+            $("#tipsAlert").animate({ top: 0 });
+        },
+        hideTips() {
+            //免责声明收起
+            $("#tipsAlert").animate({ top: "-120rem" });
+        },
+        selectTag(id) {  //底部章节跳转
+				 this.$router.push({
+                path:"/hzybReportWeekDetail",
+                    query:{
+                        report_type_id:id,
+                        token:this.$route.query.token,
+                        type:this.$route.query.type
+                    }
+                })
+//				window.location.href=process.env.linkurl + '#/dayweekdtls/'+this.bid+'/'+id+'/'+this.reporttype;
+				document.body.scrollTop = document.documentElement.scrollTop = 0;
+				window.location.reload();
+			},
     }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-.top-wrap{
+.top-wrap {
     width: 100%;
     height: 75px;
     background-color: rgb(220, 222, 223);
@@ -126,34 +305,24 @@ export default {
     position: relative;
     padding: 15px 15px 0 15px;
     box-sizing: border-box;
-    img{
+    img {
         width: 100%;
         border-top-right-radius: 4px;
         border-top-left-radius: 4px;
     }
+    .box{
+        position: absolute;
+        width: 100px;
+        height: 30px;
+        top: 20px;
+        right: 10px;
+    }
 }
-.footer-wrap{
+.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);
-    }
+    padding: 20px 0;
 }
-.content-wrap{
+.content-wrap {
     background-color: #fff;
     margin-top: -20px;
     border-top-left-radius: 10px;
@@ -165,4 +334,21 @@ export default {
     line-height: 1.7;
 }
 
-</style>
+#tipsAlert {
+    width: 100%;
+    height: 100%;
+    padding: 13% 0.8rem;
+    box-sizing: border-box;
+    position: fixed;
+    top: -120rem;
+    left: 0;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 200;
+}
+
+#grid{ width:100%; padding:0 0.6rem; box-sizing:border-box; font:0.56rem '黑体'; color:#6184bc; overflow:auto;
+		>div{ float:left; width:3rem; height:3rem; padding:0.4rem 0; box-sizing:border-box; position:relative; overflow:hidden; background:#fff; border:1px solid #eaeaea; text-align:center; border-radius:0.4rem; margin:0.225rem; }
+		.imgBg{ width:1.1rem; height:1.1rem; margin:0.1rem auto 0.05rem; }
+		.selectimg{ width:1.26rem; height:1.26rem; position:absolute; top:0; left:0; }
+	 }
+</style>