铸造者

src/main/pc-space/src/mixins/pageableTable.js

@@ -158,23 +158,16 @@ export default {
         }
     },
     watch: {
-        sort() {
-            let sortStr = [];
-            for (let [key, value] of Object.entries(this.sort)) {
-                if (value) {
-                    sortStr.push(key + ',' + value);
-                }
-            }
-            sortStr = sortStr.join(';');
+        sortStr() {
             this.$router
                 .replace({
                     query: {
                         ...this.$route.query,
-                        sort: sortStr
+                        sort: this.sortStr
                     }
                 })
                 .catch(() => {});
-            this.sortStr = sortStr;
+            this.page = 1;
             this.getData();
         }
     }

src/main/pc-space/src/views/Casting.vue

@@ -12,7 +12,7 @@
                 {{ item }}
             </div>
         </div> -->
-        <el-radio-group v-model="sort" size="normal">
+        <el-radio-group class="menu" v-model="sortStr" size="normal">
             <el-radio-button v-for="(item, index) in sortList" :key="index" :label="item.value">
                 <div class="radio-item">
                     <i class="font_family" :class="[item.icon]"></i>
@@ -22,7 +22,13 @@
         </el-radio-group>
 
         <div class="border" style="margin-top: 30px"></div>
-        <el-input prefix-icon="el-icon-search" placeholder="请输入您想找到的作者名称…" v-model="search" clearable>
+        <el-input
+            class="search"
+            prefix-icon="el-icon-search"
+            placeholder="请输入您想找到的作者名称…"
+            v-model="search"
+            clearable
+        >
         </el-input>
         <div class="content">
             <img class="imgBox" src="../assets/img/888.jpg" alt="" />
@@ -47,6 +53,19 @@
                 <div class="follow">关注</div>
             </div>
         </div>
+
+        <div class="pagination-wrapper">
+            <el-pagination
+                @size-change="onSizeChange"
+                @current-change="onCurrentChange"
+                :current-page="page"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="pageSize"
+                layout="total, prev, pager, next"
+                :total="totalElements"
+            >
+            </el-pagination>
+        </div>
     </div>
 </template>
 <script>
@@ -77,7 +96,8 @@ export default {
                 }
             ],
             search: '',
-            url: '/user/all',
+            sortStr: 'id,desc',
+            url: '/user/all'
         };
     },
     mixins: [pageableTable],
@@ -96,14 +116,14 @@ export default {
     padding: 0 200px;
 
     background: #1a1a1a;
-    /deep/.el-input {
+    .search {
         background: #1a1a1a;
         width: 280px;
         height: 42px;
         border-radius: 8px;
         margin: 30px 0 50px;
 
-        .el-input__inner {
+        /deep/.el-input__inner {
             border: 1px solid #898989;
             background-color: transparent;
             color: #fff;
@@ -242,7 +262,7 @@ export default {
     }
 }
 
-/deep/.el-radio-group {
+/deep/.menu {
     .el-radio-button__inner {
         border-color: #949699;
         background-color: transparent;
@@ -278,4 +298,30 @@ export default {
         margin-right: 6px;
     }
 }
+
+.pagination-wrapper {
+    display: flex;
+    justify-content: center;
+    margin: 80px auto;
+
+    /deep/.el-pagination {
+        button:disabled {
+            background-color: transparent;
+            color: #939599;
+        }
+
+        .btn-next,
+        .btn-prev {
+            background: transparent;
+            color: #939599;
+        }
+        .el-pager li {
+            background-color: transparent;
+            color: #939599;
+            &.active {
+                color: @prim;
+            }
+        }
+    }
+}
 </style>