feat：剑鱼币明细分页调整

jypoints-pc/public/index.html

@@ -7,26 +7,26 @@
     <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>
-    <script src="https://web2-jytest.jydev.jianyu360.com/js/coupon/coupon.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://jybx2-webtest.jydev.jianyu360.com/js/coupon/coupon.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://web2-jytest.jydev.jianyu360.com/css/coupon/coupon.css' 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"/>
+    <link href='https://jybx2-webtest.jydev.jianyu360.com/css/coupon/coupon.css' rel="stylesheet" type="text/css"/>
 
     <script src="http://localhost/js/coupon/coupon.js"></script>
     <% } %>

jypoints-pc/src/App.vue

@@ -29,10 +29,11 @@
   }
 </script>
 <style lang="scss">
-    .home{
-      height: 100%;
-      .link-item {
-        margin: 0 10px;
-    }
-    }
+@import "~@/assets/style/reset-ele.scss";
+.home{
+  height: 100%;
+  .link-item {
+    margin: 0 10px;
+  }
+}
 </style>

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

@@ -0,0 +1,144 @@
+@import './_mixin';
+@import './_variables';
+
+.big-member-page {
+  // 分页样式重置
+  .el-pagination-container {
+    position: relative;
+    margin-top: 32px;
+    margin-right: 16px;
+    padding-bottom: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .el-pagination {
+      position: absolute;
+      right: 0;
+    }
+  }
+  .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 {
+      color: #fff;
+      background-color: $color-text--highlight;
+    }
+  }
+
+  // 修改输入框默认focus边框颜色
+  .el-input.is-active .el-input__inner,
+  .el-input__inner:focus {
+    border-color: $color-text--highlight;
+  }
+
+  .el-checkbox__inner {
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
+    &::after {
+      border-width: 2px;
+      left: 5px;
+      top: 1px;
+    }
+  }
+
+
+
+  .el-button--main {
+    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+    border-color: $color-text--highlight;
+    background: $color-text--highlight;
+    border-radius: 6px;
+    padding: 8px 16px;
+    box-sizing: border-box;
+    font-size: 14px;
+    font-weight: 400;
+    color: #fff;
+    line-height: 24px;
+    &:hover, &:focus {
+      border-color: $color-text--highlight;
+      background: $color-text--highlight;
+      color: #fff;
+    }
+  }
+
+  .el-link {
+    &.el-link--default{
+      &:hover {
+        color: $color-text--highlight;
+      }
+    }
+  }
+}
+.custom-message-box {
+  width: 380px!important;
+  border-radius: 8px;
+  .custom-confirm-btn{
+    margin-top: 12px;
+    width: 132px;
+    height: 36px;
+    background: #2cb7ca;
+    border-radius: 6px;
+    border: 0;
+    font-size: 16px;
+    &:hover {
+      background: #2cb7ca;
+    }
+  }
+  .el-message-box__message,
+  .message-text{
+    font-size: 14px;
+    color: #686868;
+    line-height: 24px;
+  }
+}
+.el-popper {
+  li{
+    float: none;
+  }
+}
+
+// 分页组件页码选择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;
+  }
+  .el-select-dropdown__item{
+    color: #1d1d1d;
+    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;
+  }
+  .el-select-dropdown__wrap{
+    margin-bottom: -18px!important;
+  }
+}

jypoints-pc/src/views/Detail.vue

@@ -13,14 +13,19 @@
           </el-tab-pane>
         </el-tabs>
     </div>
-    <div class="pageBox" v-if="pageData.detailed.count>10">
+    <div class="pageBox" v-if="pageData.detailed.count > 0">
       <el-pagination
+        popper-class="pagination-custom-select"
         background
-        layout="prev, pager, next"
+        layout="prev, pager, next, sizes, jumper"
         :page-size="pageObj.pageSize"
+        :page-sizes="[5, 10, 50, 100]"
         :current-page="pageObj.page"
+        :total="pageData.detailed.count"
+        :show-confirm-btn="true"
         @current-change="changePage"
-        :total="pageData.detailed.count">
+        @size-change="onSizeChange"
+      >
       </el-pagination>
     </div>
   </div>
@@ -48,7 +53,7 @@ export default {
       flag:'0',
       pageObj:{
         page:0,
-        pageSize:10,
+        pageSize: 10,
       },
       pageData:{
         detailed:{
@@ -68,12 +73,14 @@ export default {
       ajaxGetPoints({L:1,searchType:this.flag,page:this.pageObj.page,pageSize:this.pageObj.pageSize}).then(res =>{
         this.loading = false;
         this.pageData = res.data.data;
-        this.pageData.detailed.data.forEach(v =>{
-          if(v.abstract){
-            v.msgData = JSON.parse(v.abstract)
-          }
-        })
-        console.log(this.pageData)
+        this.pageData.detailed.count = res.data.data.detailed.count
+        if (this.pageData.detailed.data && this.pageData.detailed.data.length > 0) {
+          this.pageData.detailed.data.forEach(v =>{
+            if(v.abstract){
+              v.msgData = JSON.parse(v.abstract)
+            }
+          })
+        }
       })
     },
     handleClick() {
@@ -82,7 +89,7 @@ export default {
       this.pageData = { 
         detailed:{
           data:[],
-          count:20
+          count:0
         }
       }
       if(this.activeName == 'first'){
@@ -97,8 +104,12 @@ export default {
       }
     },
     changePage(val){
-      console.log(val)
-      this.pageObj.page = val;
+      this.pageObj.page = val
+      this.getData()
+    },
+    onSizeChange (size) {
+      this.pageObj.pageSize = size
+      this.pageObj.page = 1
       this.getData()
     }
   }