feat：pc文库搜索、收藏、我的文库分页调整

jydocs-pc/public/index.html

@@ -7,24 +7,24 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>剑鱼标讯</title>
     <% if (process.env.NODE_ENV === 'development') { %>
-      <link href="https://web2-jytest.jydev.jianyu360.com/css/bootstrap.min.css" rel="stylesheet">
-      <link href="https://web2-jytest.jydev.jianyu360.com/css/bootswatch.min.css" rel="stylesheet">
-      <link href="https://web2-jytest.jydev.jianyu360.com/css/font.css?v=6302" rel="stylesheet">
-      <link href="https://web2-jytest.jydev.jianyu360.com/css/jy.css?v=6302" rel="stylesheet">
-      <link href="https://web2-jytest.jydev.jianyu360.com/css/common.css?v=6302" rel="stylesheet">
-      <link href="https://web2-jytest.jydev.jianyu360.com/css/animate.css" rel="stylesheet">
-      <link href="https://web2-jytest.jydev.jianyu360.com/css/unicorn.main.css" rel="stylesheet" />
-      <link href="https://web2-jytest.jydev.jianyu360.com/css/unicorn.grey.css" rel="stylesheet" />
-      <script src="https://web2-jytest.jydev.jianyu360.com/js/jquery-3.2.1.min.js?v=6302"></script>
-      <script src="https://web2-jytest.jydev.jianyu360.com/js/jquery.cookie.js"></script>
-      <script src="https://web2-jytest.jydev.jianyu360.com/js/bootstrap.min.js"></script>
+      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/bootstrap.min.css" rel="stylesheet">
+      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/bootswatch.min.css" rel="stylesheet">
+      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/font.css?v=6302" rel="stylesheet">
+      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/jy.css?v=6302" rel="stylesheet">
+      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/common.css?v=6302" rel="stylesheet">
+      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/animate.css" rel="stylesheet">
+      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/unicorn.main.css" rel="stylesheet" />
+      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/unicorn.grey.css" rel="stylesheet" />
+      <script src="https://jybx2-webtest.jydev.jianyu360.com/js/jquery-3.2.1.min.js?v=6302"></script>
+      <script src="https://jybx2-webtest.jydev.jianyu360.com/js/jquery.cookie.js"></script>
+      <script src="https://jybx2-webtest.jydev.jianyu360.com/js/bootstrap.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.1.266/build/pdf.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.1.266/web/pdf_viewer.js"></script>
 
-      <link href='https://web2-jytest.jydev.jianyu360.com/css/reset.css?v=6302' rel="stylesheet" type="text/css"/>
-      <link href='https://web2-jytest.jydev.jianyu360.com/pccss/reset_pc.css' rel="stylesheet" type="text/css"/>
-      <link href='https://web2-jytest.jydev.jianyu360.com/css/pc.css?v=6302' rel="stylesheet"/>
-      <link href='https://web2-jytest.jydev.jianyu360.com/pccss/public-nav-1200.css?v=6302' rel="stylesheet" type="text/css"/>
+      <link href='https://jybx2-webtest.jydev.jianyu360.com/css/reset.css?v=6302' rel="stylesheet" type="text/css"/>
+      <link href='https://jybx2-webtest.jydev.jianyu360.com/pccss/reset_pc.css' rel="stylesheet" type="text/css"/>
+      <link href='https://jybx2-webtest.jydev.jianyu360.com/css/pc.css?v=6302' rel="stylesheet"/>
+      <link href='https://jybx2-webtest.jydev.jianyu360.com/pccss/public-nav-1200.css?v=6302' rel="stylesheet" type="text/css"/>
     <% } %>
   </head>
   <style>

jydocs-pc/src/assets/style/reset-ele.scss

@@ -1,15 +1,58 @@
 @import './_mixin';
 @import './_variables';
 
-.docs-app .el-pagination.is-background .el-pager {
-  li {
-    background-color: #fff;
-    border: 1px solid rgba($color: #000, $alpha: 0.05);
-  }
+// .docs-app .el-pagination.is-background .el-pager {
+//   li {
+//     background-color: #fff;
+//     border: 1px solid rgba($color: #000, $alpha: 0.05);
+//   }
 
-  li:not(.disabled).active,
-  li:not(.disabled):hover {
+//   li:not(.disabled).active,
+//   li:not(.disabled):hover {
+//     color: #fff;
+//     background-color: $color-text--highlight;
+//   }
+// }
+// 分页组件页码选择select下拉框样式
+.pagination-custom-select{
+  top: -138px!important;
+  left: 4px!important;
+  min-width: 100px!important;
+  margin-top: 0px!important;
+  border-radius: 2px!important;
+  .el-select-dropdown__list{
+    padding: 0;
+    max-width: 100px;
+  }
+  .el-select-dropdown__item{
+    width: 100%;
+    color: #1d1d1d;
+    text-align: center;
+    border-bottom: 1px solid #ECECEC;
+  }
+  .el-select-dropdown__item.selected{
+    color: #2cb7ca;
+  }
+  .el-select-dropdown__item.hover, 
+  .el-select-dropdown__item:hover{
+    background: #2cb7ca;
+    color: #fff;
+  }
+  .el-scrollbar__bar.is-horizontal{
+    height: 0;
+  }
+  .popper__arrow{
+    display: none!important;
+  }
+  .el-select-dropdown__item.selected{
+    color: #2cb7ca;
+  }
+  .el-select-dropdown__item.hover, 
+  .el-select-dropdown__item:hover{
+    background: #2cb7ca;
     color: #fff;
-    background-color: $color-text--highlight;
+  }
+  .el-select-dropdown__wrap{
+    margin-bottom: -18px!important;
   }
 }

jydocs-pc/src/views/Search.vue

@@ -27,15 +27,18 @@
         />
         <no-data v-if="listState.list.length === 0 && listState.loaded"></no-data>
       </div>
-      <div class="search-pagination">
+      <div class="search-pagination" v-if="listState.total > 0">
         <el-pagination
+          popper-class="pagination-custom-select"
           background
-          layout="prev, pager, next, ->, total"
-          :hide-on-single-page="true"
+          layout="prev, pager, next, sizes, jumper"
           :current-page="listState.pageNum"
           :page-size="listState.pageSize"
+          :page-sizes="[5, 10, 50, 100]"
           :total="listState.total"
+          :show-confirm-btn="true"
           @current-change="onPageChange"
+          @size-change="onSizeChange"
         >
         </el-pagination>
       </div>
@@ -212,6 +215,11 @@ export default {
       this.listState.pageNum = p
       this.getList()
     },
+    onSizeChange (size) {
+      this.listState.pageSize = size
+      this.listState.pageNum = 1
+      this.getList()
+    },
     calcSubInfo (item) {
       const { docFileSize: size, downTimes, uploadDate, docPageSize } = item
       const subInfoArr = []

jydocs-pc/src/views/UserCollections.vue

@@ -21,15 +21,18 @@
         </doc-card>
         <no-data v-if="listState.list.length === 0 && listState.loaded">暂无文库收藏</no-data>
       </div>
-      <div class="user-collections-pagination">
+      <div class="user-collections-pagination" v-if="listState.total > 0">
         <el-pagination
+          popper-class="pagination-custom-select"
           background
-          layout="prev, pager, next, ->, total"
-          :hide-on-single-page="true"
+          layout="prev, pager, next, sizes, jumper"
           :current-page="listState.pageNum"
           :page-size="listState.pageSize"
+          :page-sizes="[5, 10, 50, 100]"
           :total="listState.total"
+          :show-confirm-btn="true"
           @current-change="onPageChange"
+          @size-change="onSizeChange"
         >
         </el-pagination>
       </div>
@@ -103,6 +106,11 @@ export default {
       this.listState.pageNum = p
       this.getList()
     },
+    onSizeChange (size) {
+      this.listState.pageSize = size
+      this.listState.pageNum = 1
+      this.getList()
+    },
     calcSubInfo (item) {
       const { DocPageSize, DocFileSize } = item
       const subInfoArr = []

jydocs-pc/src/views/UserDocs.vue

@@ -23,15 +23,18 @@
         />
         <no-data v-if="listState.list.length === 0 && listState.loaded">暂无我的文库</no-data>
       </div>
-      <div class="user-docs-pagination">
+      <div class="user-docs-pagination" v-if="listState.total > 0">
         <el-pagination
+          popper-class="pagination-custom-select"
           background
-          layout="prev, pager, next, ->, total"
-          :hide-on-single-page="true"
+          layout="prev, pager, next, sizes, jumper"
           :current-page="listState.pageNum"
           :page-size="listState.pageSize"
+          :page-sizes="[5, 10, 50, 100]"
           :total="listState.total"
+          :show-confirm-btn="true"
           @current-change="onPageChange"
+          @size-change="onSizeChange"
         >
         </el-pagination>
       </div>
@@ -103,6 +106,11 @@ export default {
       this.listState.pageNum = p
       this.getList()
     },
+    onSizeChange (size) {
+      this.listState.pageSize = size
+      this.listState.pageNum = 1
+      this.getList()
+    },
     calcSubInfo (item) {
       const { UpdateAt, DocFileSize } = item
       const subInfoArr = []

jydocs-pc/vue.config.js

@@ -9,7 +9,7 @@ module.exports = {
     disableHostCheck: true,
     proxy: {
       '^/jydocs': {
-        target: 'http://web2-jytest.jydev.jianyu360.com',
+        target: 'https://jybx2-webtest.jydev.jianyu360.com',
         // target: 'http://192.168.20.180:821',
         changeOrigin: true,
         logLevel: 'debug',
@@ -18,7 +18,7 @@ module.exports = {
         }
       },
       '^/jyintegral': {
-        target: 'http://web2-jytest.jydev.jianyu360.com',
+        target: 'https://jybx2-webtest.jydev.jianyu360.com',
         // target: 'http://192.168.20.145:820',
         changeOrigin: true,
         logLevel: 'debug',