hzsl

.env.development

@@ -3,4 +3,6 @@ VITE_APP_OUTDIR="dist"
 
 VITE_APP_CYGX_BASEAPIURL="http://8.136.199.33:8500/api"
 
-VITE_APP_HZYB_BASEAPIURL="http://8.136.199.33:8612"
+VITE_APP_HZYB_BASEAPIURL="http://8.136.199.33:8612"
+
+VITE_APP_HZSL_BASEAPIURL="http://8.136.199.33:8608/api"

.env.product

@@ -3,4 +3,6 @@ VITE_APP_OUTDIR="raiwechat_link_h5"
 
 VITE_APP_CYGX_BASEAPIURL="https://cygx.hzinsights.com/api"
 
-VITE_APP_HZYB_BASEAPIURL="https://yanbao.hzinsights.com"
+VITE_APP_HZYB_BASEAPIURL="https://yanbao.hzinsights.com"
+
+VITE_APP_HZSL_BASEAPIURL=""

.env.test

@@ -3,4 +3,6 @@ VITE_APP_OUTDIR="dist"
 
 VITE_APP_CYGX_BASEAPIURL="http://8.136.199.33:8500/api"
 
-VITE_APP_HZYB_BASEAPIURL="http://8.136.199.33:8612"
+VITE_APP_HZYB_BASEAPIURL="http://8.136.199.33:8612"
+
+VITE_APP_HZSL_BASEAPIURL="http://8.136.199.33:8608/api"

src/api/hzsl/http.js

@@ -0,0 +1,78 @@
+"use strict";
+import axios from "axios";
+import { Toast } from "vant";
+
+// Full config:  https://github.com/axios/axios#request-config
+// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
+// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+
+// 请求数
+let LOADINGCOUNT = 0;
+let LOADING;
+let config = {
+  baseURL: import.meta.env.VITE_APP_HZSL_BASEAPIURL,
+  timeout: 60 * 1000, // Timeout
+  // withCredentials: true, // Check cross-site Access-Control
+};
+
+const _axios = axios.create(config);
+
+_axios.interceptors.request.use(
+  function (config) {
+    // Do something before request is sent
+    // 设置loading
+    if (LOADINGCOUNT === 0) {
+      LOADING = Toast.loading({
+        message: "loading...",
+        duration: 0,
+        forbidClick: true,
+      });
+    }
+    LOADINGCOUNT++;
+    
+    return config;
+  },
+  function (error) {
+    // Do something with request error
+    return Promise.reject(error);
+  }
+);
+
+// Add a response interceptor
+_axios.interceptors.response.use(
+  function (response) {
+    // Do something with response data
+
+    //关闭loading
+    LOADINGCOUNT--;
+    if (LOADINGCOUNT === 0) {
+      LOADING.clear();
+    }
+    
+    return response.data;
+  },
+  function (error) {
+    LOADING.clear();
+    // Do something with response error
+    return Promise.reject(error);
+  }
+);
+
+/**
+ * 导出get请求方法
+ * @url 请求地址
+ * @params get请求参数
+ */
+export const get = (url, params) => {
+  return _axios.get(url, { params });
+};
+
+/**
+ * 导出post请求方法
+ * @url 请求地址
+ * @params post请求参数
+ */
+export const post = (url, params) => {
+  return _axios.post(url, params);
+};

src/api/hzsl/report.js

@@ -0,0 +1,13 @@
+// 报告接口
+import {get,post} from './http'
+
+// 获取报告详情
+export const apiGetReportDetail=(params)=>{
+    return get('/report/getReportInfo',params)
+}
+
+//获取周度报告详情
+export const apiGetWeekReportDetail=params=>{
+    return get('/report/getReportChapterInfo',params)
+}
+

src/router/hzsl/index.js

@@ -0,0 +1,19 @@
+export const hzslRoutes=[
+    {
+        path:'/hzsl/report',
+        name:"hzsl",
+        component: () => import("@/App.vue"),
+        children:[
+            {
+                path:"detail",
+                name:"hzslReportDetail",
+                component: () => import("@/views/hzsl/report/Detail.vue"),
+            },
+            {
+                path:"weekdetail",
+                name:"hzslReportWeekDetail",
+                component: () => import("@/views/hzsl/report/WeekDetail.vue"),
+            }
+        ]
+    }
+]

src/router/index.js

@@ -1,9 +1,11 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import {hzybRoutes} from './hzyb/index'// 弘则研报小程序路由
 import {cygxRoutes} from './cygx/index'// 查研观向小程序路由
+import {hzslRoutes} from './hzsl/index'// 弘则思路小程序路由
 const routes=[
     ...hzybRoutes,
     ...cygxRoutes,
+    ...hzslRoutes,
     //404
     {
         path: "/:pathMatch(.*)",

src/views/hzsl/report/Detail.vue

@@ -0,0 +1,269 @@
+<script setup>
+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()
+document.title = "报告详情";
+
+let info = ref(null);
+let topBg=ref(null)
+let noAuth = ref(false);
+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;
+    }
+};
+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());
+}
+
+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
+        }
+    })
+}
+</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>
+        <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;
+}
+.top-wrap {
+    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;
+        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;
+    }
+}
+.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: #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>

src/views/hzsl/report/WeekDetail.vue

@@ -0,0 +1,294 @@
+<script setup>
+import { computed, ref, onMounted,watch } from "vue";
+import { apiGetReportDetail, apiGetWeekReportDetail } from "@/api/hzsl/report.js";
+import { useRoute, useRouter,onBeforeRouteUpdate  } from "vue-router";
+const route = useRoute();
+const router=useRouter()
+document.title = "报告详情";
+
+let info = ref(null);
+let topBg = ref(null)
+let noAuth = ref(false);
+const getDetail = async () => {
+    const res = await apiGetWeekReportDetail({
+        ...route.query
+    });
+    console.log(res);
+    if (res.code === 200) {
+        info.value = res.data;
+        let temTopBg
+        if (route.query.type === 'week') {
+            temTopBg = await import('@/assets/hzyb/weektop.jpg')
+        } else {
+            temTopBg = await import('@/assets/hzyb/daytop.jpg')
+        }
+        topBg.value = temTopBg.default
+        getList(res.data.research_report_type_info.research_report_id)
+        noAuth.value = false;
+    } else if (res.code == 400) {
+        noAuth.value = true;
+    }
+};
+
+let list = ref([])
+let selectId = ref(null)
+const getList = async (id) => {
+    const res = await apiGetReportDetail({
+        Authorization: route.query.token,
+        research_report_id: id,
+    });
+    if (res.code === 200) {
+        list.value = res.data.research_report_type_list || []
+        selectId.value = route.query.report_type_id
+    }
+}
+getDetail();
+
+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 showTips = () => {
+    //免责声明显示
+    $("#tipsAlert").animate({ top: 0 });
+}
+const hideTips = () => {
+    //免责声明收起
+    $("#tipsAlert").animate({ top: "-120rem" });
+}
+
+const selectTag=(id)=>{
+    router.push({
+        query:{
+            report_type_id:id,
+            token:route.query.token,
+            type:route.query.type
+        }
+    })
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+
+}
+
+onBeforeRouteUpdate(to => {
+    getDetail()
+});
+</script>
+
+<template>
+    <div class="report-detail" v-if="info">
+        <div class="top-wrap">
+            <img :src="topBg" alt="" />
+            <div class="box" @click="showTips"></div>
+        </div>
+        <div class="content-wrap">
+            <div
+                v-for="item in info.research_report_type_content_list"
+                :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="more-img"
+                src="../../../assets/hzyb/moreother.png"
+                alt=""
+            />
+            <div class="list">
+                <div
+                    v-for="(item, index) in list"
+                    :key="index"
+                    @click="selectTag(item.ResearchReportTypeId)"
+                >
+                    <img
+                        v-show="item.ResearchReportTypeId == selectId"
+                        src="../../../assets/hzyb/selected.png"
+                        class="selectimg"
+                    />
+                    <img :src="item.BannerUrl" class="imgBg" />
+                    <p>{{ item.ReportChapterTypeName }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 弹窗 -->
+    <div class="tipsAlert" id="tipsAlert">
+        <img class="top-img" src="../../../assets/hzyb/lianzi.png" />
+        <div class="con">
+            <h1>免责声明</h1>
+            <p>
+                1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。
+            </p>
+            <p>
+                2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。
+            </p>
+            <p>
+                3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。
+            </p>
+            <p>
+                4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。
+            </p>
+            <img
+                class="bot-img"
+                src="../../../assets/hzyb/shou.png"
+                @click="hideTips"
+            />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.flex {
+    display: flex;
+}
+.top-wrap {
+    width: 100%;
+    height: 150px;
+    background-color: rgb(220, 222, 223);
+    color: #fff;
+    padding-top: 40px;
+    position: relative;
+    padding: 30px 30px 0 30px;
+    box-sizing: border-box;
+    img {
+        width: 100%;
+        border-top-right-radius: 8px;
+        border-top-left-radius: 8px;
+    }
+    .box {
+        position: absolute;
+        width: 200px;
+        height: 60px;
+        top: 40px;
+        right: 20px;
+    }
+}
+.footer-wrap {
+    background-color: rgb(236, 235, 235);
+    padding: 40px 0;
+    .more-img {
+        width: 262px;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .list {
+        width: 100%;
+        padding: 0 30px;
+        box-sizing: border-box;
+        font: 0.56rem "黑体";
+        color: #6184bc;
+        overflow: auto;
+        font-size: 28px;
+        div {
+            float: left;
+            width: 150px;
+            height: 150px;
+            padding: 20px 0;
+            box-sizing: border-box;
+            position: relative;
+            overflow: hidden;
+            background: #fff;
+            border: 1px solid #eaeaea;
+            text-align: center;
+            border-radius: 20px;
+            margin: 11px;
+        }
+        .imgBg {
+            width: 56px;
+            height: 56px;
+            margin: 5px auto 3px;
+        }
+        .selectimg {
+            width: 62px;
+            height: 62px;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
+}
+.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: 0px 0 15px 0;
+    }
+    .content-text {
+        font-size: 38px;
+    }
+    :deep(p) {
+        margin: 0;
+        padding: 0;
+    }
+}
+
+#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;
+    .top-img {
+        width: 28px;
+        position: absolute;
+        left: 50%;
+        z-index: 10;
+        transform: translateX(-50%);
+        top: -26px;
+    }
+    .con {
+        width: 100%;
+        height: 100%;
+        background-color: #fff;
+        border-radius: 8px;
+        padding: 40px 32px;
+        position: relative;
+        h1 {
+            font-size: 32px;
+            text-align: center;
+        }
+        font-size: 28px;
+        line-height: 1.7;
+    }
+    .bot-img {
+        width: 178px;
+        bottom: 0;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+</style>