提交代码p

jydocs-pc/src/components/recommend.vue

@@ -1,27 +1,26 @@
 <template>
-  <div class="c-recommend">
-    <div class="r-bott">
-        <h3>相关推荐</h3>
-        <div class="docs" v-for="item in recomes" :key="item.docId">
-            <div class="imgs" @click="detailClick(item.docId)">
-                <img :src="item.previewImgId" alt="">
-                <i class="el-icon-jy-word"></i>
-            </div>
-            <div class="conts">
-                <h5 @click="detailClick(item.docId)">{{item.docName}}</h5>
-                <div class="d-tip">
-                    <p>{{item.downTimes}}次下载</p>
-                    <div class="d-page">
-                      <p>共{{item.docPageSize}}页</p>
-                      <el-divider direction="vertical"></el-divider>
-                      <p>{{item.docFileSize}}</p>
-                    </div>
+<div class="r-rec" id="recTop" :class="{'rec-active': fixedRec}">
+<!-- <div class="r-rec" id="recTop"> -->
+    <h3>相关推荐</h3>
+    <div class="docs" v-for="item in recomes" :key="item.docId">
+        <div class="imgs" @click="detailClick(item.docId)">
+            <img :src="item.previewImgId" alt="">
+            <i class="el-icon-jy-word"></i>
+        </div>
+        <div class="conts">
+            <h5 @click="detailClick(item.docId)">{{item.docName}}</h5>
+            <div class="d-tip">
+                <p>{{item.downTimes}}次下载</p>
+                <div class="d-page">
+                  <p>共{{item.docPageSize}}页</p>
+                  <el-divider direction="vertical"></el-divider>
+                  <p>{{item.docFileSize}}</p>
                 </div>
-                <div class="r-coin"><i class="el-icon-jy-iconJianYu"></i><span>{{item.price}}</span></div>
             </div>
+            <div class="r-coin"><i class="el-icon-jy-iconJianYu"></i><span>{{item.price}}</span></div>
         </div>
     </div>
-  </div>
+</div>
 </template>
 
 <script>
@@ -30,10 +29,37 @@ export default {
   props: {
     recomes: {}
   },
+  data () {
+    return {
+      fixedRec: false
+    }
+  },
   components: {
     [Divider.name]: Divider
   },
+  mounted () {
+    // 监听滚轮
+    window.addEventListener('scroll', this.initH)
+  },
+  destroyed () { // 移除监听
+    window.removeEventListener('scroll', this.initH)
+  },
   methods: {
+    initH () {
+      this.$nextTick(() => {
+        const heights = document.getElementById('recTop')
+        this.offsetTop = heights.offsetTop
+        const scrollTops = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+        if (scrollTops >= this.offsetTop) {
+          this.fixedRec = true
+          if (scrollTops <= 583) {
+            this.fixedRec = false
+          }
+        } else {
+          this.fixedRec = false
+        }
+      })
+    },
     detailClick (ids) {
       const routeUrl = this.$router.resolve({
         name: 'content',
@@ -47,95 +73,98 @@ export default {
 
 <style lang="scss" scoped>
 @include diy-icon('iconJianYu', 18, 18);
-.c-recommend {
-  .r-bott {
-      min-height: 448px;
-      border-radius: 4px;
-      background: #fff;
-      margin-top: 16px;
-      padding: 15px 12px;
-      h3 {
-          color: #686868;
-          font-size: 16px;
-          line-height: 24px;
-          font-weight: 500;
-          margin-top: 0;
-          margin-bottom: 13px;
-      }
-      .docs {
-          display: flex;
-          .imgs {
-              height: 110px;
-              display: table;
-              position: relative;
-              border-radius: 4px;
-              border: 1px solid #ECECEC;
-              cursor: pointer;
-              img {
-                  width: 78px;
-                  // height: 112px;
-                  border: 0;
-              }
-              i {
-                  position: absolute;
-                  right: 0;
-                  bottom: 0;
-              }
-          }
-          .conts {
-              margin-left: 8px;
-              h5 {
-                  margin: 0;
-                  font-size: 14px;
-                  line-height: 24px;
-                  font-weight: 500;
-                  display: -webkit-box;
-                  -webkit-line-clamp:2;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  -webkit-box-orient: vertical;
-                  cursor: pointer;
-              }
-              p {
-                  margin: 0;
-                  color: #999999;
-                  font-size: 12px;
-                  line-height: 20px;
-              }
-              .d-tip {
-                  display: flex;
-                  flex-direction: column;
-                  .el-divider--vertical {
-                      height: 0.8em;
-                      margin: 0 2px;
-                  }
-                  .d-page {
-                    display: flex;
-                    flex-direction: initial;
-                    align-items: center;
-                  }
-                  p {
-                      padding: 0 2px;
-                  }
-              }
-              .r-coin {
+.rec-active {
+  position: fixed;
+  top: 0;
+}
+.r-rec {
+    width: 264px;
+    min-height: 448px;
+    border-radius: 4px;
+    background: #fff;
+    margin-top: 16px;
+    padding: 15px 12px;
+    h3 {
+        color: #686868;
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 500;
+        margin-top: 0;
+        margin-bottom: 13px;
+    }
+    .docs {
+        display: flex;
+        .imgs {
+            height: 110px;
+            display: table;
+            position: relative;
+            border-radius: 4px;
+            border: 1px solid #ECECEC;
+            cursor: pointer;
+            img {
+                width: 78px;
+                // height: 112px;
+                border: 0;
+            }
+            i {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+            }
+        }
+        .conts {
+            margin-left: 8px;
+            h5 {
+                margin: 0;
+                font-size: 14px;
+                line-height: 24px;
+                font-weight: 500;
+                display: -webkit-box;
+                -webkit-line-clamp:2;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                -webkit-box-orient: vertical;
+                cursor: pointer;
+            }
+            p {
+                margin: 0;
+                color: #999999;
+                font-size: 12px;
+                line-height: 20px;
+            }
+            .d-tip {
+                display: flex;
+                flex-direction: column;
+                .el-divider--vertical {
+                    height: 0.8em;
+                    margin: 0 2px;
+                }
+                .d-page {
                   display: flex;
+                  flex-direction: initial;
                   align-items: center;
-                  margin-top: 2px;
-                  i {
-                    width:18px;
-                    height:18px;
-                  }
-                  span {
-                      font-size: 14px;
-                      color: #FF3A20;
-                  }
-              }
-          }
-      }
-      .docs:not(:last-child) {
-        margin-bottom: 16px;
-      }
-  }
+                }
+                p {
+                    padding: 0 2px;
+                }
+            }
+            .r-coin {
+                display: flex;
+                align-items: center;
+                margin-top: 2px;
+                i {
+                  width:18px;
+                  height:18px;
+                }
+                span {
+                    font-size: 14px;
+                    color: #FF3A20;
+                }
+            }
+        }
+    }
+    .docs:not(:last-child) {
+      margin-bottom: 16px;
+    }
 }
 </style>

jydocs-pc/src/views/Content.vue

@@ -49,7 +49,7 @@
               <i :class="'el-icon-jy-' + fileType(datas.docFileType)"></i>
               <span>{{datas.docName}}</span>
               </h3>
-              <span class="pages"><i id="page_num"></i> / <i id="page_count"></i></span>
+              <span class="pages"><i>{{page_num}}</i> / <i>{{page_count}}</i></span>
         </div>
         <div class="bottoms" id="colWidth" v-show="buyed == 1">
             <div class="page">
@@ -114,6 +114,8 @@ export default {
       offsetTop: 0,
       offsetWidth: 0,
       colWidth: 0,
+      page_num: 0,
+      page_count: 0,
       redShow: false,
       lineShow: false,
       fixed: false,
@@ -146,6 +148,14 @@ export default {
     window.removeEventListener('scroll', this.initHeight)
   },
   methods: {
+    setTop () {
+      this.$nextTick(() => {
+        // 获取到达页面顶端的值
+        const heights = document.getElementById('fixedTop')
+        // this.offsetTop = heights.offsetTop
+        this.offsetTop = heights.getBoundingClientRect().top
+      })
+    },
     initHeight () {
       // 获取页面滚动距离
       const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
@@ -162,11 +172,11 @@ export default {
     updateText ({ type, value = '' }) {
       switch (type) {
         case 'count': {
-          document.querySelector('#page_count').textContent = value
+          this.page_count = value
           break
         }
         case 'num': {
-          document.querySelector('#page_num').textContent = value
+          this.page_num = value
           break
         }
       }
@@ -188,8 +198,6 @@ export default {
       })
     },
     init () {
-      console.log(this.conts.data)
-      // Loading document.
       pdfjsLib.GlobalWorkerOptions.workerSrc = this.config.workerSrc
       const loadingTask = pdfjsLib.getDocument({
         url: this.conts.data,
@@ -198,7 +206,6 @@ export default {
       })
       loadingTask.promise.then((pdfDocument) => {
         this.pdfDocument = pdfDocument
-        console.log(this.pdfDocument.numPages)
         this.updateText({ type: 'count', value: this.pdfDocument.numPages })
         this.updateText({ type: 'num', value: 1 })
         for (let i = 0; i < this.pdfDocument.numPages; i++) {
@@ -259,7 +266,7 @@ export default {
         if (res.data.error_code === 0) {
           this.datas = res.data.data.detail
           this.datas.docFileSize = formatSize(this.datas.docFileSize)
-          this.datas.uploadDate = dateFormatter(this.datas.uploadDate, 'yyyy-MM-dd')
+          this.datas.uploadDate = dateFormatter(this.datas.uploadDate, 'yyyy/MM/dd')
           this.datas.docSummary = this.datas.docSummary.split('').length >= 500 ? this.datas.docSummary + '...' : this.datas.docSummary
           this.datas.tags = this.datas.tags.split(',').slice(0, 3)
           this.buyed = res.data.data.status
@@ -285,15 +292,6 @@ export default {
         this.adsUrl = res.data.data
       })
     },
-    setTop () {
-      this.$nextTick(() => {
-        // 获取到达页面顶端的值
-        const heights = document.getElementById('fixedTop')
-        // this.offsetTop = heights.offsetTop
-        this.offsetTop = heights.getBoundingClientRect().top
-        console.log(this.offsetTop)
-      })
-    },
     shoucang () {
       console.log(this.collectd)
       if (this.collectd === 0) {

jydocs-pc/src/views/purchase/purchase.vue

@@ -116,7 +116,7 @@ export default {
     docTypeIcon () {
       const t = docTypeConvert(this.response.docFileType)
       return `el-icon-jy-${t}`
-    },
+    }
   },
   methods: {
     // 文档信息

jydocs-pc/vue.config.js

@@ -9,8 +9,8 @@ module.exports = {
     disableHostCheck: true,
     proxy: {
       '^/jydocs': {
-        // target: 'http://web2-jytest.jydev.jianyu360.com',
-        target: 'http://192.168.20.180:821',
+        target: 'http://web2-jytest.jydev.jianyu360.com',
+        // target: 'http://192.168.20.180:821',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {