|
|
@@ -0,0 +1,253 @@
|
|
|
+<script setup>
|
|
|
+import apiReport from '@/api/modules/report'
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+import { Message,Toast } from 'tdesign-mobile-vue';
|
|
|
+import apiUser from '@/api/modules/user'
|
|
|
+import { useThrottleFn } from '@vueuse/core'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+
|
|
|
+const route = useRoute()
|
|
|
+
|
|
|
+
|
|
|
+// 获取用户信息
|
|
|
+let userInfo = null
|
|
|
+async function getUserInfo() {
|
|
|
+ const res = await apiUser.userInfo()
|
|
|
+ if (res.Ret === 200&&res.ErrCode===0) {
|
|
|
+ userInfo = res.data
|
|
|
+ }
|
|
|
+}
|
|
|
+getUserInfo()
|
|
|
+const defaultImg = new URL(`@/assets/imgs/default-author.png`,import.meta.url).href
|
|
|
+
|
|
|
+const reportId = route.query.reportid
|
|
|
+const reportInfo = ref(null)
|
|
|
+async function getReportInfo() {
|
|
|
+ //获取研报详情
|
|
|
+ if (!reportId) return
|
|
|
+ const res = await apiReport.getReportDetail({
|
|
|
+ reportId: reportId
|
|
|
+ })
|
|
|
+ if (res.Ret === 200&&res.ErrCode===0) {
|
|
|
+ const {author,publishedTime,pdfUrl,title,abstract} = res.data
|
|
|
+ reportInfo.value = {
|
|
|
+ Author:author,
|
|
|
+ AuthorImg:'',
|
|
|
+ IsFollowed:false,
|
|
|
+ PublishTime:publishedTime,
|
|
|
+ Abstract:abstract,
|
|
|
+ Title:title,
|
|
|
+ PdfUrl:pdfUrl,
|
|
|
+ }
|
|
|
+
|
|
|
+ getAuthorFollowState()
|
|
|
+
|
|
|
+ // 设置分享文案
|
|
|
+ wx.miniProgram.postMessage({
|
|
|
+ data: {
|
|
|
+ title: reportInfo.value.Title
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+getReportInfo()
|
|
|
+function getAuthorFollowState(){
|
|
|
+ apiUser.getFollowState({
|
|
|
+ names:reportInfo.value.Author
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.Ret === 200&&res.ErrCode===0){
|
|
|
+ reportInfo.value.IsFollowed = res.data.followStatus==='following'
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+function changeFollowState(){
|
|
|
+ apiUser.followAuthor({
|
|
|
+ analystNames:reportInfo.value.Author,
|
|
|
+ followType:reportInfo.value.IsFollowed?'unfollowed':'following',
|
|
|
+ mobile:userInfo?.mobile||''
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.Ret === 200&&res.ErrCode===0){
|
|
|
+ reportInfo.value.IsFollowed = !reportInfo.value.IsFollowed
|
|
|
+ Toast({
|
|
|
+ theme: 'success',
|
|
|
+ direction: 'row',
|
|
|
+ message: reportInfo.value.IsFollowed?'关注成功':'取消关注成功',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 显示免责声明
|
|
|
+const isShowMZSM = ref(false)
|
|
|
+// 显示返回顶部
|
|
|
+const showToTop = ref(false)
|
|
|
+const handlePageScroll=useThrottleFn(()=>{
|
|
|
+ const top = document.documentElement.scrollTop || document.body.scrollTop
|
|
|
+ if (top > window.outerHeight) {
|
|
|
+ showToTop.value = true
|
|
|
+ } else {
|
|
|
+ showToTop.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ if(page >= endPageNum) return
|
|
|
+ const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 可视高度
|
|
|
+ const scrollHeight = document.body.scrollHeight; // 总高度
|
|
|
+ const bufferHeight = 400;
|
|
|
+ if((scrollHeight - top - clientHeight) < bufferHeight+100) {
|
|
|
+ console.log('触底')
|
|
|
+ page++
|
|
|
+ handleLoadContent();
|
|
|
+ }
|
|
|
+},300)
|
|
|
+
|
|
|
+function handleBackTop() {
|
|
|
+ document.body.scrollTop = document.documentElement.scrollTop = 0
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ window.addEventListener('scroll', handlePageScroll)
|
|
|
+})
|
|
|
+onUnmounted(() => {
|
|
|
+ window.removeEventListener('scroll', handlePageScroll)
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="report-ht_pdf-wrap" v-if="reportInfo">
|
|
|
+ <div class="report-top-box">
|
|
|
+ <div class="title-box">{{ reportInfo.Title }}</div>
|
|
|
+ <div class="author-box">
|
|
|
+ <div class="img-box">
|
|
|
+ <img :src="reportInfo.AuthorImg?reportInfo.AuthorImg:defaultImg">
|
|
|
+ </div>
|
|
|
+ <div class="author-info">
|
|
|
+ <span class="name">{{ reportInfo.Author.split(',').join('、') }}</span>
|
|
|
+ <span class="time">{{ dayjs(reportInfo.PublishTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="changeFollowState"
|
|
|
+ :class="['opt-btn',reportInfo.IsFollowed?'followed':'']">
|
|
|
+ {{ reportInfo.IsFollowed?'取消关注':'关注研究员' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="time-box">
|
|
|
+ <span class="btn" @click="isShowMZSM = true">免责声明</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="des-box" v-if="reportInfo.Abstract">
|
|
|
+ <svg-icon name="icon01"></svg-icon>
|
|
|
+ <div>{{ reportInfo.Abstract }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="report-content">
|
|
|
+ <preview-PDF :url="reportInfo.PdfUrl"/>
|
|
|
+ </div>
|
|
|
+ <!-- 右侧悬浮操作栏 -->
|
|
|
+ <div class="right-fix-box">
|
|
|
+ <!-- 返回顶部 -->
|
|
|
+ <div class="item back-top-img">
|
|
|
+ <svg-icon
|
|
|
+ name="backtop"
|
|
|
+ v-show="showToTop"
|
|
|
+ @click="handleBackTop"
|
|
|
+ class="back-top-img"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 免责声明 -->
|
|
|
+ <disclaimers-wrap v-model:show="isShowMZSM" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.report-ht_pdf-wrap{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: var(--page-padding);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow-y: auto;
|
|
|
+ .title-box {
|
|
|
+ font-size: 36px;
|
|
|
+ line-height: 44px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .author-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .img-box{
|
|
|
+ width:78px;
|
|
|
+ height:78px;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .author-info{
|
|
|
+ margin-left: 30px;
|
|
|
+ .name{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: var(--font-size-small);
|
|
|
+ color: var(--text-color-grey);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .opt-btn{
|
|
|
+ margin-left: auto;
|
|
|
+ align-self: flex-start;
|
|
|
+ min-width: 140px;
|
|
|
+ height: 40px;
|
|
|
+ padding:5px 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: var(--primary-color);
|
|
|
+ color:var(--text-color-inverse);
|
|
|
+ text-align: center;
|
|
|
+ &.followed{
|
|
|
+ background-color:var(--bg-disabled-color);
|
|
|
+ color:var(--text-color-grey);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time-box {
|
|
|
+ font-size: var(--font-size-small);
|
|
|
+ text-align: right;
|
|
|
+ .btn {
|
|
|
+ color: var(--primary-color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .des-box {
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ padding: 20px;
|
|
|
+ margin: 20px 0;
|
|
|
+ display: flex;
|
|
|
+ gap: 0 10px;
|
|
|
+ color: var(--text-color-sub);
|
|
|
+ font-size: var(--font-size-small);
|
|
|
+ line-height: 36px;
|
|
|
+ }
|
|
|
+ .right-fix-box {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99;
|
|
|
+ right: 34px;
|
|
|
+ bottom: 130px;
|
|
|
+ .item {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .back-top-img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .collect-icon {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .report-content{
|
|
|
+ flex: 1;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
cxmo