兼容智能布局，章节报告

src/views/hzyb/report/ChapterDetail.vue

@@ -10,51 +10,84 @@
   <div class="chapter-detail-page" v-if="info" :style="{paddingBottom:$store.state.hzyb.audioData.url&&'80px'}">
     <div :class="['main-box',!info.auth_ok&&'main-box-noauth']">
       <!-- <div class="title">【第{{info.report_chapter_item.stage}}期 | {{info.report_chapter_item.classify_name_first}}  | {{info.report_chapter_item.type_name}}】{{info.report_chapter_item.title}}</div> -->
-      <div class="title">{{title}}</div>
-      <div class="flex time">
-        <span>FICC团队</span>
-        <span>{{formatTime(info.report_chapter_item.publish_time)}}</span>
-      </div>
-      <!-- 音频模块 -->
-      <AudioBox :audioData="audioData" v-if="info.report_chapter_item.video_url&&info.report_chapter_item.video_play_seconds>0"></AudioBox>
-      <div class="flex tips">
-        <div style="flex:1">
-          <div class="abstract" v-if="info.report_chapter_item.abstract">摘要：{{info.report_chapter_item.abstract}}</div>
-          <div>
-            <span>注：请务必阅读</span>
-            <span style="color: #e3b377; margin-left: 20px" @click="showDisclaimers = true">免责声明</span>
-            <span 
-              v-if="info.report_chapter_item.video_url&&info.report_chapter_item.video_play_seconds>0" 
-              style="float:right;background:#E3B377;color:#fff;border-radius:30px;padding:0 10px;font-size:0.9em" @click="handlePlayAudioBG"
-            >背景播放</span>
+      <div :style="{backgroundColor:info.report_chapter_item.canvas_color||''}">
+        <!-- 无版头板尾显示标题 -->
+        <template v-if="(!info.report_chapter_item.head_img) && (!info.report_chapter_item.end_img)">
+          <div class="title">{{title}}</div>
+          <div class="flex time">
+            <span>FICC团队</span>
+            <span>{{formatTime(info.report_chapter_item.publish_time)}}</span>
           </div>
+        </template>
+
+        <!-- 拼接版头 -->
+        <div class="html-head-img-box" v-if="info.auth_ok&&info.report_chapter_item.head_img">
+            <img :src="info.report_chapter_item.head_img" alt="" style="display:block;width:100%">
+            <div class="head-layout-item" v-for="item in headImgStyle" :key="item.value"
+            :style="{fontFamily:item.family,fontSize:(item.size*2)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
+                width:item.width,height:item.height,left:item.left,top:item.top
+            }">
+                {{ layoutBaseInfo[item.value] }}
+            </div>
         </div>
-      </div>
-      <div id="report-rich-content" class="rich-content" ref="richConBox">
-        <div v-if="info.auth_ok">
-          <ul>
-              <li v-for="item in realContent" :key="item" v-html="item"></li>
-          </ul>
-        </div>
-        <div v-html="info.report_chapter_item.content_sub" v-else ></div>
-        <!-- 隐藏的水印 -->
-        <div class="hide-watermark-box" v-if="userInfo">
-          <div v-for="item in 20" :key="item">{{userInfo.mobile}}</div>
+
+        <template v-if="!info.report_chapter_item.report_video_url">
+          <!-- 音频模块 -->
+          <AudioBox :audioData="audioData" v-if="info.report_chapter_item.video_url&&info.report_chapter_item.video_play_seconds>0"></AudioBox>
+        </template>
+        
+        <div class="flex tips">
+          <div style="flex:1">
+            <div class="abstract" v-if="info.report_chapter_item.abstract">摘要：{{info.report_chapter_item.abstract}}</div>
+            <div>
+              <span>注：请务必阅读</span>
+              <span style="color: #e3b377; margin-left: 20px" @click="showDisclaimers = true">免责声明</span>
+              <span 
+                v-if="!info.report_chapter_item.report_video_url&&info.report_chapter_item.video_url&&info.report_chapter_item.video_play_seconds>0" 
+                style="float:right;background:#E3B377;color:#fff;border-radius:30px;padding:0 10px;font-size:0.9em" @click="handlePlayAudioBG"
+              >背景播放</span>
+            </div>
+          </div>
         </div>
-      </div>
-      <!-- 指标数据模块 -->
-      <div class="ticker-wrap" v-if="tickerInfo">
-        <div class="top-title">{{tickerInfo.ticker_title.report_chapter_type_name}}数据表</div>
-        <div class="table-box">
-          <div class="table-row table-head">
-            <div class="table-item" v-for="item in tickerHead" :key="item.key">{{item.label}}</div>
+        <div id="report-rich-content" class="rich-content" ref="richConBox">
+          <div v-if="info.auth_ok">
+            <ul>
+                <li v-for="item in realContent" :key="item" v-html="item"></li>
+            </ul>
           </div>
-          <div class="table-row table-body" v-for="(tr,index) in tickerInfo.list" :key="tr.base_column_name">
-            <div :class="['table-item',index%2==0?'grey':'',tr[td.key]<0?'minus':'']" v-for="td in tickerHead" :key="td.key">{{tr[td.key]}}</div>
+          <div v-html="info.report_chapter_item.content_sub" v-else ></div>
+          <!-- 隐藏的水印 -->
+          <div class="hide-watermark-box" v-if="userInfo">
+            <div v-for="item in 20" :key="item">{{userInfo.mobile}}</div>
           </div>
         </div>
-        <div v-if="tickerInfo.ticker_title.report_chapter_type_id ===26" style="text-align:center;font-weight:bold">注：与新加坡TSR20相关数据均取展示日期前一交易日数据</div>
+        <!-- 指标数据模块 -->
+        <div class="ticker-wrap" v-if="tickerInfo">
+          <div class="top-title">{{tickerInfo.ticker_title.report_chapter_type_name}}数据表</div>
+          <div class="table-box">
+            <div class="table-row table-head">
+              <div class="table-item" v-for="item in tickerHead" :key="item.key">{{item.label}}</div>
+            </div>
+            <div class="table-row table-body" v-for="(tr,index) in tickerInfo.list" :key="tr.base_column_name">
+              <div :class="['table-item',index%2==0?'grey':'',tr[td.key]<0?'minus':'']" v-for="td in tickerHead" :key="td.key">{{tr[td.key]}}</div>
+            </div>
+          </div>
+          <div v-if="tickerInfo.ticker_title.report_chapter_type_id ===26" style="text-align:center;font-weight:bold">注：与新加坡TSR20相关数据均取展示日期前一交易日数据</div>
+        </div>
+
+        <!-- 拼接版尾 -->
+        <div class="html-end-img-box" v-if="info.auth_ok&&info.report_chapter_item.end_img">
+            <img :src="info.report_chapter_item.end_img" alt="" style="display:block;width:100%">
+            <div class="head-layout-item" v-for="item in endImgStyle" :key="item.value"
+            :style="{fontFamily:item.family,fontSize:(item.size*2)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
+                width:item.width,height:item.height,left:item.left,top:item.top
+            }">
+                {{ layoutBaseInfo[item.value] }}
+            </div>
+        </div>
       </div>
+
+
       <!-- 无权限 -->
       <div class="no-auth-wrap" v-if="!info.auth_ok">
         <div class="apply-box" v-if="info.permission_check.type=='apply'">
@@ -231,7 +264,15 @@ export default {
       collectIcons,
 
       isReportPublishCancel:false,//报告取消发布
-      bannerDataList:[]
+      bannerDataList:[],
+
+      headImgStyle:null,//版头style
+      endImgStyle:null,//版尾style
+      layoutBaseInfo:{
+          研报标题:'',
+          研报作者:'',
+          创建时间:''
+      }
     };
   },
   beforeCreate(){
@@ -337,6 +378,14 @@ export default {
       const res=await apiChapterDetail({report_chapter_id:Number(this.chapterId)})
       if(res.code===200){
         this.info=res.data
+
+        this.headImgStyle=res.data.report_chapter_item.head_style?JSON.parse(res.data.report_chapter_item.head_style):[]
+        this.endImgStyle=res.data.report_chapter_item.end_style?JSON.parse(res.data.report_chapter_item.end_style):[]
+        this.layoutBaseInfo['研报标题']=res.data.report_chapter_item.title
+        this.layoutBaseInfo['研报作者']=res.data.report_chapter_item.author
+        // 已发布已通过的报告才显示发布时间
+        this.layoutBaseInfo['创建时间']=moment(res.data.report_chapter_item.publish_time).format('YYYY.MM.DD HH:mm')
+
         this.audioData={
           auth_ok:res.data.auth_ok,
           video_name:res.data.report_chapter_item.video_name,
@@ -431,6 +480,19 @@ export default {
       target.style.background = "url(" + data + ") repeat";
     },
 
+    // 智能布局内容排版全部变成1个1行的顺排
+    formatSmartStyle() {
+      this.$nextTick(() =>{
+          $('.report-drag-item-wrap_child-wrap').css({
+              'flex-wrap': 'wrap',
+          });
+          $('.report-drag-item-wrap_child-wrap').children().css({
+              'flex': 'none',
+              'width': '100%'
+          });
+        })
+    },
+
     /*内容分割*/
     splitContentHandle(content) {
         content=addTokenToIframe(content,this.info.report_chapter_item.report_id,this.info.report_chapter_item.report_chapter_id)
@@ -439,11 +501,14 @@ export default {
         this.realContent = this.totalContent.slice(0,this.pageSize)
         this.total_page =  parseInt(this.totalContent.length / this.pageSize) + 1;
         console.log( this.totalContent,this.realContent,this.total_page)
+        this.formatSmartStyle()
     },
 
     /* 加载下一页内容 */
     loadContent() {
         this.realContent = this.realContent.concat(this.totalContent.slice(this.page_no*this.pageSize, (this.page_no + 1)*this.pageSize))
+
+        this.formatSmartStyle()
     },
 
     loadMoreHandle: _.throttle(function() {
@@ -977,4 +1042,14 @@ export default {
   }
 }
 
+.html-head-img-box,.html-end-img-box{
+    margin-bottom: 10px;
+    position: relative;
+    overflow: hidden;
+    .head-layout-item{
+        position: absolute;
+        overflow: hidden;
+        box-sizing: border-box
+    }
+}
 </style>

src/views/hzyb/report/Detail.vue

@@ -9,7 +9,7 @@
     </div>
     <div class="report-detail-page" @click="closeAttention" v-if="info" :style="{paddingBottom:$store.state.hzyb.audioData.url&&'80px'}">
         <!-- 晨报、周报章节 -->
-        <div class="chapter-list-wrap" v-if="['晨报','周报'].includes(info.report_info.classify_name_first)">
+        <div class="chapter-list-wrap" v-if="info.report_info.has_chapter">
             <div class="top-box" :style="'background-image:url(' + info.report_info.banner_url + ')'">
                 <div class="title">{{info.report_info.classify_name_first}}</div>
                 <div class="sub-title">{{info.report_info.title}}</div>
@@ -67,37 +67,66 @@
         <!-- 报告详情 -->
         <div :class="['main-box',!info.auth_ok&&'main-box-noauth']" v-else>
             <!-- <div class="title">【第{{info.report_info.stage}}期｜{{info.report_info.classify_name_second}}】{{info.report_info.title}}</div> -->
-            <div class="title">{{title}}</div>
-            <div class="flex time">
-                <span>FICC团队</span>
-                <span>{{formatTime(info.report_info.publish_time)}}</span>
-            </div>
-            <!-- 音频模块 -->
-            <AudioBox :audioData="audioData" v-if="info.report_info.video_url&&info.report_info.video_play_seconds>0"></AudioBox>
-            <div class="flex tips">
-                <div style="flex:1">
-                    <div v-if="info.road_video_id">点击<span style="color: #e3b377;" @click="goVideoPage">查看视频</span></div>
-                    <div class="abstract" v-if="info.report_info.abstract">摘要：{{info.report_info.abstract}}</div>
-                    <div>
-                        <span>注：请务必阅读</span>
-                        <span style="color:#E3B377;margin-left:20px" @click="showDisclaimers=true">免责声明</span>
-                        <span 
-                            v-if="info.report_info.video_url&&info.report_info.video_play_seconds>0" 
-                            style="float:right;background:#E3B377;color:#fff;border-radius:30px;padding:0 10px;font-size:0.9em" @click="handlePlayAudioBG"
-                        >背景播放</span>
+            <div :style="{backgroundColor:info.report_info.canvas_color||''}">
+                <!-- 无版头板尾显示标题 -->
+                <template v-if="(!info.report_info.head_img) && (!info.report_info.end_img)">
+                    <div class="title">{{title}}</div>
+                    <div class="flex time">
+                        <span>FICC团队</span>
+                        <span>{{formatTime(info.report_info.publish_time)}}</span>
+                    </div>
+                </template>
+
+                <!-- 拼接版头 -->
+                <div class="html-head-img-box" v-if="info.auth_ok&&info.report_info.head_img">
+                    <img :src="info.report_info.head_img" alt="" style="display:block;width:100%">
+                    <div class="head-layout-item" v-for="item in headImgStyle" :key="item.value"
+                    :style="{fontFamily:item.family,fontSize:(item.size*2)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
+                        width:item.width,height:item.height,left:item.left,top:item.top
+                    }">
+                        {{ layoutBaseInfo[item.value] }}
                     </div>
                 </div>
-            </div>
-            <div id="report-rich-content" class="rich-content" style="position: relative;" ref="richConBox">
-                <div v-if="info.auth_ok">
-                    <ul>
-                        <li v-for="item in realContent" :key="item" v-html="item"></li>
-                    </ul>
+
+                
+                <!-- 音频模块 -->
+                <AudioBox :audioData="audioData" v-if="info.report_info.video_url&&info.report_info.video_play_seconds>0"></AudioBox>
+                <div class="flex tips">
+                    <div style="flex:1">
+                        <div v-if="info.road_video_id">点击<span style="color: #e3b377;" @click="goVideoPage">查看视频</span></div>
+                        <div class="abstract" v-if="info.report_info.abstract">摘要：{{info.report_info.abstract}}</div>
+                        <div>
+                            <span>注：请务必阅读</span>
+                            <span style="color:#E3B377;margin-left:20px" @click="showDisclaimers=true">免责声明</span>
+                            <span 
+                                v-if="info.report_info.video_url&&info.report_info.video_play_seconds>0" 
+                                style="float:right;background:#E3B377;color:#fff;border-radius:30px;padding:0 10px;font-size:0.9em" @click="handlePlayAudioBG"
+                            >背景播放</span>
+                        </div>
+                    </div>
                 </div>
-                <div v-html="info.report_info.content_sub" v-else></div>
-                <!-- 隐藏的水印 -->
-                <div class="hide-watermark-box" v-if="userInfo">
-                    <div v-for="item in 20" :key="item">{{userInfo.mobile}}</div>
+                <div id="report-rich-content" class="rich-content" style="position: relative;" ref="richConBox">
+                    <div v-if="info.auth_ok">
+                        <ul>
+                            <li v-for="item in realContent" :key="item" v-html="item"></li>
+                        </ul>
+                    </div>
+                    <div v-html="info.report_info.content_sub" v-else></div>
+                    <!-- 隐藏的水印 -->
+                    <div class="hide-watermark-box" v-if="userInfo">
+                        <div v-for="item in 20" :key="item">{{userInfo.mobile}}</div>
+                    </div>
+                </div>
+
+                <!-- 拼接版尾 -->
+                <div class="html-end-img-box" v-if="info.auth_ok&&info.report_info.end_img">
+                    <img :src="info.report_info.end_img" alt="" style="display:block;width:100%">
+                    <div class="head-layout-item" v-for="item in endImgStyle" :key="item.value"
+                    :style="{fontFamily:item.family,fontSize:(item.size*2)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
+                        width:item.width,height:item.height,left:item.left,top:item.top
+                    }">
+                        {{ layoutBaseInfo[item.value] }}
+                    </div>
                 </div>
             </div>
 
@@ -141,7 +170,7 @@
         </div>
         
         <!-- 留言点赞模块 -->
-        <div id="messgaeBoardCont" v-if="info.auth_ok && !['晨报','周报'].includes(info.report_info.classify_name_first)">
+        <div id="messgaeBoardCont" v-if="info.auth_ok && !info.report_info.has_chapter">
             <LeaveMessage
                 :info="info"
                 @like_change="giveOrCancelLike"
@@ -253,7 +282,15 @@ export default {
 
             showAttention:false,//是否显示配置播放清单提示
             isReportPublishCancel:false,//报告取消发布
-            bannerDataList:[]
+            bannerDataList:[],
+
+            headImgStyle:null,//版头style
+            endImgStyle:null,//版尾style
+            layoutBaseInfo:{
+                研报标题:'',
+                研报作者:'',
+                创建时间:''
+            }
         }
     },
     beforeCreate(){
@@ -402,6 +439,13 @@ export default {
             const res=await apiReportDetail({report_id:Number(this.reportId)})
             if(res.code===200){
                 this.info=res.data
+
+                this.headImgStyle=res.data.report_info.head_style?JSON.parse(res.data.report_info.head_style):[]
+                this.endImgStyle=res.data.report_info.end_style?JSON.parse(res.data.report_info.end_style):[]
+                this.layoutBaseInfo['研报标题']=res.data.report_info.title
+                this.layoutBaseInfo['研报作者']=res.data.report_info.author
+                // 已发布已通过的报告才显示发布时间
+                this.layoutBaseInfo['创建时间']=moment(res.data.report_info.publish_time).format('YYYY.MM.DD HH:mm')
                 this.audioData={
                     auth_ok:res.data.auth_ok,
                     video_name:res.data.report_info.video_name,
@@ -440,7 +484,7 @@ export default {
                 }
 
                 // 处理报告标题数据
-                if(!['晨报','周报'].includes(res.data.report_info.classify_name_first)){
+                if(!this.info.report_info.has_chapter){
                     //【第{{info.report_info.stage}}期｜{{info.report_info.classify_name_second}}】{{info.report_info.title}}
                     const  time=moment(res.data.report_info.publish_time).format('MMDD')
                     if(res.data.report_info.classify_name_second==res.data.report_info.title){
@@ -463,7 +507,7 @@ export default {
                 }else{
                     shareTitle=res.data.report_info.title
                     imgText=`<div style="font-size:78px">${moment(res.data.report_info.publish_time).format('YYYY/MM/DD')}</div><div style="font-size:78px">第${res.data.report_info.stage}期 | ${res.data.report_info.classify_name_second}</div>`
-                    if(['晨报','周报'].includes(res.data.report_info.classify_name_first)){
+                    if(this.info.report_info.has_chapter){
                         imgText=`<div style="font-size:78px">${moment(res.data.report_info.publish_time).format('YYYY/MM/DD')}</div><div style="font-size:78px">第${res.data.report_info.stage}期 | ${res.data.report_info.classify_name_first} </div>`
                     }
                 }
@@ -524,6 +568,19 @@ export default {
             target.style.background = "url(" + data + ") repeat";
         },
 
+        // 智能布局内容排版全部变成1个1行的顺排
+        formatSmartStyle() {
+            this.$nextTick(() =>{
+                $('.report-drag-item-wrap_child-wrap').css({
+                    'flex-wrap': 'wrap',
+                });
+                $('.report-drag-item-wrap_child-wrap').children().css({
+                    'flex': 'none',
+                    'width': '100%'
+                });
+            })
+        },
+
         /*内容分割*/
         splitContentHandle(content) {
             content=addTokenToIframe(content,this.reportId,0)
@@ -531,11 +588,13 @@ export default {
             this.totalContent = arr.map(_ => _+'</p>');
             this.realContent = this.totalContent.slice(0,this.pageSize)
             this.total_page =  parseInt(this.totalContent.length / this.pageSize) + 1;
+            this.formatSmartStyle()
         },
 
         /* 加载下一页内容 */
         loadContent() {
             this.realContent = this.realContent.concat(this.totalContent.slice(this.page_no*this.pageSize, (this.page_no + 1)*this.pageSize))
+            this.formatSmartStyle()
         },
 
         loadMoreHandle: _.throttle(function() {
@@ -1114,4 +1173,14 @@ export default {
   }
 }
 
+.html-head-img-box,.html-end-img-box{
+    margin-bottom: 10px;
+    position: relative;
+    overflow: hidden;
+    .head-layout-item{
+        position: absolute;
+        overflow: hidden;
+        box-sizing: border-box
+    }
+}
 </style>