|
|
@@ -1,269 +1,269 @@
|
|
|
<script setup>
|
|
|
-import { computed, ref,onMounted } from "vue";
|
|
|
+import { computed, ref, onMounted } from "vue";
|
|
|
import { apiGetReportDetail } from "@/api/hzsl/report.js";
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
const route = useRoute();
|
|
|
-const router=useRouter()
|
|
|
+const router = useRouter();
|
|
|
document.title = "报告详情";
|
|
|
|
|
|
let info = ref(null);
|
|
|
-let topBg=ref(null)
|
|
|
+let topBg = ref(null);
|
|
|
let noAuth = ref(false);
|
|
|
+sessionStorage.setItem("userInfo", JSON.stringify(route.query));
|
|
|
const getDetail = async () => {
|
|
|
- const res = await apiGetReportDetail({
|
|
|
- ...route.query
|
|
|
- });
|
|
|
- if (res.code === 200) {
|
|
|
- info.value = res.data;
|
|
|
- let temTopBg
|
|
|
- switch (res.data.research_report_info.type) {
|
|
|
- case 'day':
|
|
|
- temTopBg=await import('@/assets/hzyb/daybanner.jpg')
|
|
|
- break;
|
|
|
- case 'week':
|
|
|
- temTopBg=await import('@/assets/hzyb/weekbanner.jpg')
|
|
|
- break;
|
|
|
- case 'two_week':
|
|
|
- temTopBg=await import('@/assets/hzyb/twoweekbanner.jpg')
|
|
|
- break;
|
|
|
- case 'month':
|
|
|
- temTopBg=await import('@/assets/hzyb/monthbanner.jpg')
|
|
|
- break;
|
|
|
- case 'other':
|
|
|
- temTopBg=await import('@/assets/hzyb/otherbanner.jpg')
|
|
|
- break;
|
|
|
- default:
|
|
|
- temTopBg=await import('@/assets/hzyb/daybanner.jpg')
|
|
|
- break;
|
|
|
- }
|
|
|
- topBg.value=temTopBg.default
|
|
|
-
|
|
|
- noAuth.value = false;
|
|
|
- } else if (res.code == 400) {
|
|
|
- noAuth.value = true;
|
|
|
+ const res = await apiGetReportDetail({
|
|
|
+ ...route.query,
|
|
|
+ });
|
|
|
+ if (res.code === 200) {
|
|
|
+ info.value = res.data;
|
|
|
+ let temTopBg;
|
|
|
+ switch (res.data.research_report_info.type) {
|
|
|
+ case "day":
|
|
|
+ temTopBg = await import("@/assets/hzyb/daybanner.jpg");
|
|
|
+ break;
|
|
|
+ case "week":
|
|
|
+ temTopBg = await import("@/assets/hzyb/weekbanner.jpg");
|
|
|
+ break;
|
|
|
+ case "two_week":
|
|
|
+ temTopBg = await import("@/assets/hzyb/twoweekbanner.jpg");
|
|
|
+ break;
|
|
|
+ case "month":
|
|
|
+ temTopBg = await import("@/assets/hzyb/monthbanner.jpg");
|
|
|
+ break;
|
|
|
+ case "other":
|
|
|
+ temTopBg = await import("@/assets/hzyb/otherbanner.jpg");
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ temTopBg = await import("@/assets/hzyb/daybanner.jpg");
|
|
|
+ break;
|
|
|
}
|
|
|
+ topBg.value = temTopBg.default;
|
|
|
+
|
|
|
+ noAuth.value = false;
|
|
|
+ } else if (res.code == 400) {
|
|
|
+ noAuth.value = true;
|
|
|
+ }
|
|
|
};
|
|
|
getDetail();
|
|
|
|
|
|
-const subval=(val,l,r)=>{//时间格式化
|
|
|
- return val.substring(l,r);
|
|
|
-}
|
|
|
-
|
|
|
-const 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());
|
|
|
-}
|
|
|
+const subval = (val, l, r) => {
|
|
|
+ //时间格式化
|
|
|
+ return val.substring(l, r);
|
|
|
+};
|
|
|
|
|
|
-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')) {
|
|
|
- $('.content-wrap img').each(function(index, el) {
|
|
|
- let itemSrc = $(this).attr('src');
|
|
|
- imgArray.push(itemSrc);
|
|
|
- });
|
|
|
- wx.previewImage({current:curImageSrc,urls:imgArray});
|
|
|
- }
|
|
|
- })
|
|
|
-})
|
|
|
+const 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());
|
|
|
+};
|
|
|
|
|
|
+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")) {
|
|
|
+ $(".content-wrap img").each(function (index, el) {
|
|
|
+ let itemSrc = $(this).attr("src");
|
|
|
+ imgArray.push(itemSrc);
|
|
|
+ });
|
|
|
+ wx.previewImage({ current: curImageSrc, urls: imgArray });
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|
|
|
|
|
|
// 周度报告列表跳转详情
|
|
|
-const goDetail=(e)=>{
|
|
|
- router.push({
|
|
|
- path:"/hzyb/activity/report/week/detail",
|
|
|
- query:{
|
|
|
- token:route.query.token,
|
|
|
- report_type_id:e.ResearchReportTypeId,
|
|
|
- type:info.value.research_report_info.type
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
+const goDetail = (e) => {
|
|
|
+ let strs = e.http_url.split("?");
|
|
|
+ router.push(`/hzsl/report/WeekDetail?${strs[1]}`);
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="report-detail" v-if="info">
|
|
|
- <div class="top-wrap" :style="{backgroundImage:'url(' + topBg + ')'}">
|
|
|
- <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="num">{{subval(info.research_report_info.researchReportDate,8,10)}}</div>
|
|
|
- <div class="right">
|
|
|
- <div>{{getWeek(info.research_report_info.researchReportDate)}}</div>
|
|
|
- <div>{{subval(info.research_report_info.researchReportDate,0,7)}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="num-box">第{{info.research_report_info.periods}}期</div>
|
|
|
- </div>
|
|
|
- <div class="content-wrap list-content" v-if="['day','week'].includes(info.research_report_info.type)">
|
|
|
- <div class="flex list-item" v-for="item in info.research_report_type_list" :key="item.ResearchReportTypeId" @click="goDetail(item)">
|
|
|
- <div class="left-img">
|
|
|
- <img :src="item.BannerUrl" alt="">
|
|
|
- </div>
|
|
|
- <div class="right-con">
|
|
|
- <p style="color:#2E88EB">{{item.ReportChapterTypeName}}</p>
|
|
|
- <p class="van-multi-ellipsis--l2">{{item.ResearchReportTypeTitle}}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="report-detail" v-if="info">
|
|
|
+ <div class="top-wrap" :style="{ backgroundImage: 'url(' + topBg + ')' }">
|
|
|
+ <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="num">{{ subval(info.research_report_info.researchReportDate, 8, 10) }}</div>
|
|
|
+ <div class="right">
|
|
|
+ <div>{{ getWeek(info.research_report_info.researchReportDate) }}</div>
|
|
|
+ <div>{{ subval(info.research_report_info.researchReportDate, 0, 7) }}</div>
|
|
|
</div>
|
|
|
- <div class="content-wrap" v-else>
|
|
|
- <div 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"></div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="num-box">第{{ info.research_report_info.periods }}期</div>
|
|
|
+ </div>
|
|
|
+ <div class="content-wrap list-content" v-if="['day', 'week'].includes(info.research_report_info.type)">
|
|
|
+ <div class="flex list-item" v-for="item in info.research_report_type_list" :key="item.ResearchReportTypeId" @click="goDetail(item)">
|
|
|
+ <div class="left-img">
|
|
|
+ <img :src="item.BannerUrl" alt="" />
|
|
|
</div>
|
|
|
- <div class="footer-wrap">
|
|
|
- <img class="img" src="@/assets/hzyb/mzsm.png" alt="" />
|
|
|
- <div class="content">
|
|
|
- <p>1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。</p>
|
|
|
- <p>2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。</p>
|
|
|
- <p>3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。</p>
|
|
|
- <p>4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。</p>
|
|
|
- </div>
|
|
|
+ <div class="right-con">
|
|
|
+ <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 class="content-title">{{ item.content_type ? item.content_type : "核心观点" }}</h2>
|
|
|
+ <div v-html="item.content" class="content-text"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="footer-wrap">
|
|
|
+ <img class="img" src="@/assets/hzyb/mzsm.png" alt="" />
|
|
|
+ <div class="content">
|
|
|
+ <p>1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。</p>
|
|
|
+ <p>
|
|
|
+ 2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。
|
|
|
+ </p>
|
|
|
+ <p>4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.flex{
|
|
|
- display: flex;
|
|
|
+.flex {
|
|
|
+ display: flex;
|
|
|
}
|
|
|
.top-wrap {
|
|
|
- width: 100%;
|
|
|
- height: 412px;
|
|
|
- background-size: cover;
|
|
|
- background-repeat: no-repeat;
|
|
|
+ width: 100%;
|
|
|
+ height: 412px;
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ color: #fff;
|
|
|
+ padding-top: 60px;
|
|
|
+ position: relative;
|
|
|
+ h1,
|
|
|
+ h3 {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .title,
|
|
|
+ .sub-title {
|
|
|
+ text-align: center;
|
|
|
+ width: 80%;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 52px;
|
|
|
+ font-family: "方正行楷";
|
|
|
+ letter-spacing: 1px;
|
|
|
+ }
|
|
|
+ .sub-title {
|
|
|
+ font-size: 37px;
|
|
|
+ margin-top: 80px;
|
|
|
+ }
|
|
|
+ .time-box {
|
|
|
+ position: absolute;
|
|
|
+ left: 30px;
|
|
|
+ bottom: 24px;
|
|
|
+ display: flex;
|
|
|
color: #fff;
|
|
|
- padding-top: 60px;
|
|
|
- position: relative;
|
|
|
- h1,
|
|
|
- h3 {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- .title,
|
|
|
- .sub-title {
|
|
|
- text-align: center;
|
|
|
- width: 80%;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
+ align-items: center;
|
|
|
+ .num {
|
|
|
+ font-size: 40px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding-right: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ border-right: 1px solid #fff;
|
|
|
}
|
|
|
- .title{
|
|
|
- font-size: 52px;
|
|
|
- font-family: '方正行楷';
|
|
|
- letter-spacing: 1px;
|
|
|
- }
|
|
|
- .sub-title {
|
|
|
- font-size: 37px;
|
|
|
- margin-top: 80px;
|
|
|
- }
|
|
|
- .time-box{
|
|
|
- position: absolute;
|
|
|
- left: 30px;
|
|
|
- bottom: 24px;
|
|
|
- display: flex;
|
|
|
- color: #fff;
|
|
|
- align-items: center;
|
|
|
- .num{
|
|
|
- font-size: 40px;
|
|
|
- font-weight: bold;
|
|
|
- padding-right: 10px;
|
|
|
- margin-right: 10px;
|
|
|
- border-right: 1px solid #fff;
|
|
|
- }
|
|
|
- .right{
|
|
|
- font-size: 25px;
|
|
|
- }
|
|
|
- }
|
|
|
- .num-box{
|
|
|
- position: absolute;
|
|
|
- right: 30px;
|
|
|
- bottom: 36px;
|
|
|
- color: #fff;
|
|
|
- font-size: 27px;
|
|
|
+ .right {
|
|
|
+ font-size: 25px;
|
|
|
}
|
|
|
+ }
|
|
|
+ .num-box {
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ bottom: 36px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 27px;
|
|
|
+ }
|
|
|
}
|
|
|
.footer-wrap {
|
|
|
- background-color: rgb(236, 235, 235);
|
|
|
- padding: 40px 32px;
|
|
|
- .img {
|
|
|
- display: block;
|
|
|
- margin: auto;
|
|
|
- height: 32px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- p {
|
|
|
- margin-top: 0;
|
|
|
- margin-bottom: 30px;
|
|
|
- }
|
|
|
- .content {
|
|
|
- background-color: #fff;
|
|
|
- padding: 30px;
|
|
|
- border-radius: 8px;
|
|
|
- line-height: 1.7;
|
|
|
- color: rgb(102, 102, 102);
|
|
|
- }
|
|
|
-}
|
|
|
-.content-wrap {
|
|
|
+ background-color: rgb(236, 235, 235);
|
|
|
+ padding: 40px 32px;
|
|
|
+ .img {
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ height: 32px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
background-color: #fff;
|
|
|
- margin-top: -20px;
|
|
|
- border-top-left-radius: 20px;
|
|
|
- border-top-right-radius: 20px;
|
|
|
- min-height: 400px;
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- padding: 40px 30px;
|
|
|
+ padding: 30px;
|
|
|
+ border-radius: 8px;
|
|
|
line-height: 1.7;
|
|
|
- :deep(img){
|
|
|
- width: 100%;
|
|
|
- display: block;
|
|
|
- margin: 20px 0;
|
|
|
- }
|
|
|
- .content-title{
|
|
|
- font-size: 38px;
|
|
|
- font-family: '思源黑体';
|
|
|
- margin: 40px 0 15px 0;
|
|
|
- }
|
|
|
- .content-text{
|
|
|
- font-size: 38px;
|
|
|
- }
|
|
|
- :deep(p){
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
+ color: rgb(102, 102, 102);
|
|
|
+ }
|
|
|
}
|
|
|
-.list-content{
|
|
|
- padding: 40px 0;
|
|
|
- .list-item{
|
|
|
- padding: 30px 30px;
|
|
|
- border-bottom: 1px solid #f3f3f3;
|
|
|
- align-items: center;
|
|
|
- .left-img{
|
|
|
- flex-shrink: 0;
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- border-radius: 8px;
|
|
|
- border: 1px solid #f3f3f3;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- img{
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- }
|
|
|
- }
|
|
|
- .right-con{
|
|
|
- margin-left: 20px;
|
|
|
- font-size: 26px;
|
|
|
- }
|
|
|
+.content-wrap {
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: -20px;
|
|
|
+ border-top-left-radius: 20px;
|
|
|
+ border-top-right-radius: 20px;
|
|
|
+ min-height: 400px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ padding: 40px 30px;
|
|
|
+ line-height: 1.7;
|
|
|
+ :deep(img) {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+ .content-title {
|
|
|
+ font-size: 38px;
|
|
|
+ font-family: "思源黑体";
|
|
|
+ margin: 40px 0 15px 0;
|
|
|
+ }
|
|
|
+ .content-text {
|
|
|
+ font-size: 38px;
|
|
|
+ }
|
|
|
+ :deep(p) {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.list-content {
|
|
|
+ padding: 40px 0;
|
|
|
+ .list-item {
|
|
|
+ padding: 30px 30px;
|
|
|
+ border-bottom: 1px solid #f3f3f3;
|
|
|
+ align-items: center;
|
|
|
+ .left-img {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #f3f3f3;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-con {
|
|
|
+ margin-left: 20px;
|
|
|
+ font-size: 26px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
小彬