详情布局 over

src/styles/vars.css

@@ -9,6 +9,7 @@
   --bg-color: #ffffff;
   --bg-grey-color: #f8f8fa;
   --bg-index-page: #f6f9ff;
+  --bg-disabled-color:#F5F5F5;
 
   --border-color: #dcdfe6;
 

src/views/report/Detail.vue

@@ -1,7 +1,7 @@
 <script setup>
 import apiReport from '@/api/modules/report'
 import { useRoute } from 'vue-router'
-import { Message } from 'tdesign-mobile-vue';
+import { Message,Toast  } from 'tdesign-mobile-vue';
 import apiCommon from '@/api/modules/common'
 import apiUser from '@/api/modules/user'
 import { useThrottleFn } from '@vueuse/core'
@@ -29,7 +29,7 @@ async function getUserInfo() {
   }
 }
 
-
+const defaultImg = new URL(`@/assets/imgs/default-author.png`,import.meta.url).href
 
 const reportId = route.query.reportid
 const reportInfo = ref(null)
@@ -64,6 +64,7 @@ function handleLoadContent(){
 const mockReportInfo = {
     Author:'咸鱼研究员',
     AuthorId:1, 
+    AuthorImg:'',
     PublishTime:'2023-02-02 12:12:30',
     Abstract:'我是摘要',
     IsFollowed:false,
@@ -77,6 +78,7 @@ const mockReportInfo = {
 const mockSmartReportInfo = {
     Author:'咸鱼研究员',
     AuthorId:1, 
+    AuthorImg:'',
     PublishTime:'2023-02-02 12:12:30',
     Abstract:'我是摘要',
     IsFollowed:false,
@@ -95,7 +97,7 @@ const mockSmartReportInfo = {
 async function getReportInfo() {
     //获取研报详情
     //根据AuthorId获取研究员详情 及关注状态
-    reportInfo.value = mockSmartReportInfo
+    reportInfo.value = mockReportInfo
     reportInfo.value.IsFollowed = false
     headImgStyle.value=[]
     endImgStyle.value=[]
@@ -150,6 +152,15 @@ async function getReportInfo() {
 }
 getReportInfo()
 
+function changeFollowState(){
+    reportInfo.value.IsFollowed = !reportInfo.value.IsFollowed
+    Toast({
+        theme: 'success',
+        direction: 'row',
+        message: reportInfo.value.IsFollowed?'关注成功':'取消关注成功',
+    })
+}
+
 // 修改报告中嵌入的图表地址
 function modifyReportContentIframeData(str){
   let temStr=str.replace(/http:\/\/eta.dwfutures.com:8001/g,'https://dwresearch.dwfutures.com')
@@ -247,9 +258,21 @@ onUnmounted(() => {
 
     <template v-if="!reportInfo.HeadResource.ImgUrl&&!reportInfo.EndResource.ImgUrl">
         <div class="title-box">{{ reportInfo.Title }}</div>
-        <div class="author-box">{{ reportInfo.Author }}</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 }}</span>
+                <span class="time">{{ reportInfo.PublishTime }}</span>
+            </div>
+            <div 
+                @click="changeFollowState"
+                :class="['opt-btn',reportInfo.IsFollowed?'followed':'']">
+                {{ reportInfo.IsFollowed?'取消关注':'关注研究员' }}
+            </div>
+        </div>
         <div class="time-box">
-            <span>{{ reportInfo.PublishTime }}</span>
             <span class="btn" @click="isShowMZSM = true">免责声明</span>
         </div>
    </template>
@@ -339,12 +362,50 @@ onUnmounted(() => {
     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 {
-    margin-top: 10px;
     font-size: var(--font-size-small);
-    color: var(--text-color-grey);
+    text-align: right;
     .btn {
-      float: right;
       color: var(--primary-color);
     }
   }