服务评价信息翻页组件

src/components/comments-list.vue

@@ -55,6 +55,7 @@ export default {
   flex-shrink: 0;
   padding-top: 5px;
   margin-right: 27px;
+  margin-left: 10px;
 }
 .comment-right {
   font-size: 16px;

src/components/comments-pagination.vue

+<template>
+  <div class="comments_pagination">
+    <div class="total_info">
+      <span>{{ `共${total}个条目` }}</span>
+    </div>
+    <div class="page_size_action">
+      <span>每页行数：</span>
+      <el-select :value="pageSize" @change="sizeChange">
+        <el-option
+          v-for="item in pageSizes"
+          :label="item"
+          :value="item"
+          :key="item"
+        ></el-option>
+      </el-select>
+    </div>
+    <div class="page_action">
+      <a :class="{ disabled: preDisabled }" @click.prevent="prePage">
+        <i class="el-icon-arrow-left"></i>
+      </a>
+      <span>{{ `第${currentPage}页 / 共${totalPages}页` }}</span>
+      <a :class="{ disabled: nextDisabled }" @click.prevent="nextPage">
+        <i class="el-icon-arrow-right"></i>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    total: {
+      type: Number,
+      required: true,
+    },
+    pageSizes: {
+      type: Array,
+      required: true,
+    },
+    pageSize: {
+      type: Number,
+      required: true,
+    },
+    currentPage: {
+      type: Number,
+      required: true,
+    },
+  },
+  data: () => ({}),
+  computed: {
+    totalPages() {
+      return Math.ceil(this.total / this.pageSize);
+    },
+    preDisabled() {
+      return this.currentPage === 1;
+    },
+    nextDisabled() {
+      return this.currentPage === this.totalPages;
+    },
+  },
+  methods: {
+    sizeChange(value) {
+      this.$emit("size-change", value);
+    },
+    prePage() {
+      if (this.preDisabled) {
+        return;
+      }
+      this.$emit("current-change", this.currentPage - 1);
+    },
+    nextPage() {
+      if (this.nextDisabled) {
+        return;
+      }
+      this.$emit("current-change", this.currentPage + 1);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.comments_pagination {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 14px;
+  line-height: 25px;
+  color: #333;
+}
+.total_info {
+  flex-grow: 1;
+}
+.page_size_action {
+  margin-left: 50px;
+}
+.page_size_action > .el-select {
+  width: 70px;
+}
+.page_action {
+  user-select: none;
+  margin-left: 50px;
+}
+.page_action > a {
+  cursor: pointer;
+}
+.page_action > a > i {
+  font-weight: bold;
+}
+.page_action > a.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>
+
+<style>
+.page_size_action > .el-select .el-input__inner,
+.page_size_action > .el-select .el-input.is-focus .el-input__inner {
+  border: 1px solid #fff;
+}
+</style>

src/components/service-tab-comments.vue

@@ -2,30 +2,27 @@
   <div class="service_tab-comments">
     <comments-score :data="data.baseInfo"></comments-score>
     <comments-list :data="data.ffpjxxList"></comments-list>
-
-    <div class="comments_pages">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :total="data.baseInfo.total"
-        :page-sizes="[10, 50, 100]"
-        :current-page="1"
-        :page-size="10"
-        layout="total, sizes, prev, pager, next, jumper"
-      >
-      </el-pagination>
-    </div>
+    <comments-pagination
+      :total="data.baseInfo.total"
+      :page-sizes="pageSizes"
+      :page-size="pageSize"
+      :current-page="currentPage"
+      @size-change="changePageSize"
+      @current-change="changeCurrentPage"
+    ></comments-pagination>
   </div>
 </template>
 
 <script>
 import commentsScore from "@/components/comments-score";
 import commentsList from "@/components/comments-list";
+import commentsPagination from "@/components/comments-pagination";
 
 export default {
   components: {
     commentsScore,
     commentsList,
+    commentsPagination,
   },
   props: {
     data: {
@@ -33,13 +30,18 @@ export default {
       required: true,
     },
   },
-  data: () => ({}),
+  data: () => ({
+    pageSizes: [10, 50, 100],
+    pageSize: 10,
+    currentPage: 1,
+  }),
   methods: {
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
+    changePageSize(value) {
+      this.pageSize = value;
+      this.currentPage = 1;
     },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
+    changeCurrentPage(value) {
+      this.currentPage = value;
     },
   },
   created() {},
@@ -47,8 +49,14 @@ export default {
 </script>
 
 <style scoped>
-.comments_pages {
-  text-align: center;
-  margin-top: 20px;
+.service_tab-comments {
+  padding: 35px 20px 20px;
+}
+.service_tab-comments > .comments_score,
+.service_tab-comments > .comments_list {
+  padding: 0 30px;
+}
+.service_tab-comments > .comments_pagination {
+  margin-top: 60px;
 }
 </style>