提交

src/components/PdfPreview/view.vue

@@ -33,11 +33,16 @@
       <el-button @click="nextPage('footer')" :disabled="loadedRatio !== 1" icon="el-icon-arrow-right"></el-button> -->
       <el-button type="primary" @click="clickMore()"  v-if="moreState == 1">加载更多</el-button>
     </div>
-
-    <div v-if="moreState == 1" class=" xcontent postfixt-bot">
-     <interactBar  :data="data" :type="3" :comments="false" :shares="true"></interactBar>
-      <el-button>返回顶部</el-button>
-    </div>
+    <!-- <div v-if="likeBox" class="xcontent postfixt-bot">
+      <div class="postfixt-bot-box">
+        <div style="display:inline-block">
+           <interactBar  :data="data" :type="3" :comments="false" :shares="true"></interactBar>
+        </div>
+        <div style="display:inline-block;margin: 0 20px;">
+          <el-button type="primary" @click="goTop()">返回顶部</el-button>
+        </div>
+      </div>
+    </div> -->
   </div>
 </template>
 
@@ -60,11 +65,16 @@ export default {
       default: false,
     },
     data:{
-      type:Array,
+      type:Object,
+    },
+    boxShow:{
+      type: Boolean,
+      default: true,
     }
   },
   data() {
     return {
+      likeBox:false,
       src: "",
       showPages: undefined,
       totalPages:0,
@@ -96,6 +106,13 @@ export default {
        this.loadInitPdf(newVal);
       }
     },
+    boxShow(newVal){
+      if(newVal){
+       this.likeBox = true;
+      } else {
+       this.likeBox = false;
+      }
+    },
     loadedRatio(newVal){
       // 直接使用loadedRatio控制进度条没有加载效果
       if(newVal == 1){
@@ -107,13 +124,15 @@ export default {
     }
   },
   methods: {
+    goTop() {
+     document.documentElement.scrollTop = 0;
+     this.likeBox = false;
+    },
     loadProgress(e){
        console.log(e,'loadProgress');
     },
     loadedPageHandle(e){
-       console.log(e,'loadedPageHandle');
        this.pdfpage = e;
-
     },
     loadPdfHandle(e){
        console.log(e,'loadPdfHandle');
@@ -123,33 +142,24 @@ export default {
           this.showPages++;
        }
       this.isscroll = true;
-     
-    },     
+      this.likeBox = true;
+    },
     //加载页面
     loadInitPdf(url) {
-     
       if(url && url.indexOf('.pdf')>-1){
         let loadingTask = pdf.createLoadingTask(url);
         this.src=loadingTask;
-        
         loadingTask.promise.then((pdf) =>{
-           console.log(pdf)
             this.totalPages=pdf.numPages;
-          
-
             if(pdf.numPages>this.initNum){
               this.showPages = this.initNum;
-             
             } else{
               this.showPages =pdf.numPages;
-            
             }
-            
-            
           }).catch((err) =>{
             this.$message.error("加载内容失败,请联系管理员");
           });
-         
+
       }
     },
 
@@ -158,19 +168,17 @@ export default {
       let innerHeight = document.querySelector('#pdf-perView').clientHeight
       let outerHeight = document.documentElement.clientHeight
       let scrollTop = document.documentElement.scrollTop
-     
         if(this.isscroll){
           this.showPages++;
           this.moreState = 2;
           this.debounce(this.loadInitPdf(),5000);
-          
       }
-    //  console.log(this.pdfpage,'000')
-    // console.log(this.totalPages,this.pdfpage)
      if(this.pdfpage >= this.totalPages){
         this.isscroll = false;
         this.moreState = 3;
-        // console.log('hcuewhf')
+     }
+     if(this.pdfpage < 4){
+       this.likeBox = false;
      }
         //  if(scrollTop > 400) {
         //   document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:242.5px";
@@ -178,8 +186,8 @@ export default {
         //   document.querySelector('#articleAnking').style.cssText = "position: static";
         // }
   },
-   
-    
+
+
     debounce(func, wait) {// 非立即执行
     let timeout;
     return function () {
@@ -234,14 +242,19 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.postfixt-bot{
-  height: 100px;
-  width: 100%;
-  position: fixed;
-  bottom: 0;
-  background-color: #666;
-  z-index: 999;
-}
+// .postfixt-bot{
+//   height: 60px;
+//   line-height: 60px;
+//   width: 750px;
+//   position: fixed;
+//   bottom: 0;
+//   background-color: #fff;
+//   border: 1px solid #eee;
+//   z-index: 999;
+//   .postfixt-bot-box{
+//     text-align: right;
+//   }
+// }
 .pdf-perView {
   .pdf-box {
     min-height: 300px;

src/components/Portal/interactBar.vue

@@ -48,7 +48,7 @@
         <span class="interact-bar-value"> {{ data.views}}</span>
       </div>
     </div>
-    <el-dialog title="分享" :visible.sync="shareShow" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
+    <el-dialog title="分享" :visible.sync="shareShow" :close-on-click-modal="false" :modal-append-to-body="false" width="500px" custom-class="g-dialog">
         <div style="height: 200px;padding-right: 30px;">
             <el-form  label-width="100px"  @submit.native.prevent >
               <el-form-item label="姓名或工号">
@@ -505,6 +505,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .g-dialog .el-dialog__header{
+  text-align: left !important;
+}
+::v-deep .g-dialog .el-dialog__body{
+  text-align: left !important;
+}
+
 .interact-bar{
   // height: 30px;
   .interact-bar-btns {

src/views/portal/case/Detail.vue

@@ -7,7 +7,7 @@
         <el-breadcrumb-item>案例详情</el-breadcrumb-item>
       </el-breadcrumb>
        <div class="xrow" style="display: flex;justify-content: space-between;">
-          <div style="flex: 1;" class="xcol content-div">
+          <div style="flex: 1;" class="xcol content-div" id="content-div">
       <el-row :gutter="10">
         <el-col :span="24">
           <el-card :body-style="{ padding: '0px' }" class="detail">
@@ -17,11 +17,13 @@
               <span>作者：{{ authorInfo.name }}</span>
               <span>工号：{{ authorInfo.code }}</span>
               <span>部门：{{ authorInfo.orgInfo }}</span>
-              <!-- <span>案例编号：{{ caseDetail.id }}</span> -->
               <span style="text-align: right;" v-if="caseDetail.sysCreateTime">{{ caseDetail.sysCreateTime.substring(0,10) }}</span>
-              
-
             </div>
+            <!-- <div class="label">
+               <span style="margin-left:0px;" v-if="caseDetail.sysCreateTime">{{ caseDetail.sysCreateTime.substring(0,10) }}</span>
+              <interactBar  :data="caseDetail" :type="3" :comments="false" :shares="true"></interactBar>
+            </div> -->
+            <!-- <div class="case-summary"><span>{{ caseDetail.summary }}</span></div> -->
             <div class="btn-div" >
               <span v-if="caseDetail.orgDomain" class="item">{{ caseDetail.orgDomain }}</span>
               <span v-if="caseDetail.majorType" class="item">{{ caseDetail.majorType }}</span>
@@ -35,20 +37,31 @@
                 <span v-if="caseDetail.caseType2" class="item">{{ caseDetail.caseType2 }}</span> -->
             </div>
             <div class="case-summary"><span>{{ caseDetail.summary }}</span></div>
-           
-             <div>
+            <div class="label">
+               <!-- <span style="margin-left:0px;" v-if="caseDetail.sysCreateTime">{{ caseDetail.sysCreateTime.substring(0,10) }}</span> -->
               <interactBar  :data="caseDetail" :type="3" :comments="false" :shares="true"></interactBar>
-             </div>
+            </div>
           </el-card>
-          
-          <el-card :body-style="{ padding: '0px' }" class="jianjie">
+          <el-card :body-style="{ padding: '0px' }" class="jianjie" id="pdfPreview">
             <!-- <div class="content">
               {{ caseDetail.content }}
             </div> -->
             <pdfPreview v-if="pdfPath" :filePath="pdfPath" :data="caseDetail"></pdfPreview>
           </el-card>
+          <div class="postfixt-bot">
+            <div class="postfixt-bot-box" id="pdfTopBox">
+              <div style="display:inline-block;">
+                <interactBar  :data="caseDetail" :type="3" :comments="false" :shares="false"></interactBar>
+              </div>
+              <div style="display:inline-block;margin: 0 20px;">
+                <el-button type="primary" @click="goTop()">返回顶部</el-button>
+              </div>
+            </div>
+          </div>
           <!-- :authorId="articleDetailData.sysCreateAid" -->
-          <el-row><comments @success="success" v-if="resolveId != ''" :obj-type="3" :obj-id="resolveId" :authorId="caseDetail.authorId" :toUsers="toUsers"></comments></el-row>
+          <div id="comments-box">
+            <el-row><comments @success="success" v-if="resolveId != ''" :obj-type="3" :obj-id="resolveId" :authorId="caseDetail.authorId" :toUsers="toUsers"></comments></el-row>
+          </div>
         </el-col>
       </el-row>
           </div>
@@ -159,6 +172,7 @@ export default {
   },
   data() {
     return {
+      isTopBoxShow:true,
       toUsers:[],
       ankingList:[],
       Popularity:[],
@@ -177,23 +191,27 @@ export default {
   mounted() {
     //this.pdfPath=this.basePath+'/case/demo1.pdf';
     this.resolveId = this.$route.query.id;
+    this.$watermark.set(this.userInfo.name+this.userInfo.loginName);
     if (this.resolveId) {
       this.getCaseData();
     }
     this.getAnkingData();
     this.getPopularity();
-     this.getPositive();
-     window.addEventListener(
+    this.getPositive();
+    window.addEventListener(
       "scroll",
       this.handleScroll
     );
   },
   methods: {
-     jumpRouter(item) {
+    jumpRouter(item) {
       //   console.log(item)
         location.href =`${this.webBaseUrl}/case/detail?id=${item.id}`
       // this.$router.push(`/case/detail?id=${item.id}`);
     },
+    goTop() {
+     document.documentElement.scrollTop = 0;
+    },
     createPlayUrl(u){
       let nowDate=new Date();
       let ctime=parseInt(nowDate.getTime()/1000);
@@ -201,16 +219,17 @@ export default {
       let urlSign=encodeURIComponent(encrypt(beforeUrl));
       cookies.set('CASE_TIME', ctime);//写客户端的cookie保存
       //以下判断是为了区分本地环境和服务器环境
-      //console.log(process.env,'process.env');
       if(process.env.NODE_ENV == 'development'){
         this.pdfPath=process.env.VUE_APP_FILE_BASE_URL+u;
       }else{
         this.pdfPath=process.env.VUE_APP_BASE_API+'/xboe/m/case/content/resource?sign='+urlSign;
       }
-      //console.log(this.pdfPath,'this.blobUrl');
     },
     handleScroll() {
         let innerHeight = document.querySelector('#case-list-content').clientHeight
+        let pdfTopBox = document.querySelector('#comments-box')
+        let pdfPreview = document.querySelector('#pdfPreview') //pdf盒子距离顶部的高度
+        let contentDiv = document.querySelector('#content-div').clientWidth;
         let outerHeight = document.documentElement.clientHeight
         let scrollTop = document.documentElement.scrollTop
         if ((outerHeight + scrollTop + 350) >= innerHeight) {
@@ -218,7 +237,15 @@ export default {
               this.loadMore();
           }
         }
+        // console.log(pdfPreview.getBoundingClientRect().top,'pdfPreview.getBoundingClientRect().top');
+        if(pdfPreview.getBoundingClientRect().top < 0) {
+          document.querySelector('#pdfTopBox').style.cssText = `position: fixed;bottom:0;width:${contentDiv-9}px`;
+        }
+        if(pdfTopBox.getBoundingClientRect().top < 1000) {
+          document.querySelector('#pdfTopBox').style.cssText = "position:static";
+        }
         if(scrollTop > 630) {
+          this.isTopBoxShow = true;
           document.querySelector('#fixd-box').style.cssText = "position: fixed;top: -500px;width:245.5px";
         } else {
           document.querySelector('#fixd-box').style.cssText = "position: static";
@@ -305,6 +332,18 @@ export default {
   margin-left:0px!important;
   margin-right:15px!important;
 }
+.postfixt-bot{
+  height: 60px;
+  line-height: 60px;
+  // background-color: #fff;
+  // border: 1px solid #eee;
+  // z-index: 999;
+  .postfixt-bot-box{
+    text-align: right;
+    background-color: #fff;
+    border: 1px solid #eee;
+  }
+}
 .el-card{
   border:none;
 }
@@ -389,9 +428,8 @@ export default {
       border: 1px solid #9e9e9e;
       padding: 3px 10px;
       border-radius: 8px;
-      font-size: 14px;
+       font-size: 14px;
       color: #9c9c9c;
-
     }
     .item-right {
       float: right;