实现排行榜页面

2023-03-10 23:50:10 +08:00
parent baf5f897b3
commit cb8d9f4e3e
4 changed files with 198 additions and 2 deletions
@@ -1,15 +1,133 @@
 <template>
-  <ContentBase>排行榜</ContentBase>
+  <ContentBase>
+    <table class="table table-striped" style="text-align:center">
+      <!-- <table class="table table-success table-striped" style="text-align:center"> -->
+      <!-- <table class="table table-sm" style="text-align:center"> -->
+      <!-- 创建表头: th 表示列 -->
+      <thead>
+        <th>玩家头像</th>
+        <th>玩家名称</th>
+        <th>积分</th>
+      </thead>
+      <!-- 创建表身: tr 表示行; &nbsp 表示一个空格 -->
+      <tbody class="table-group-divider">
+        <tr v-for="user in users" :key="user.id" style="text-align:center">
+          <td>
+            <img :src="user.photo" alt="" class="user-photo">
+          </td>
+          <td>
+            <span class="user-username"> {{ user.username }}</span>
+          </td>
+          <td>
+            {{ user.rating }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <!-- Pagination 分页 -->
+    <nav aria-label="Page navigation example">
+      <ul class="pagination justify-content-center">
+        <li class="page-item" @click="click_page(-2)">
+          <a class="page-link" href="#" aria-label="Previous">
+            <span aria-hidden="true">&laquo;</span>
+          </a>
+        </li>
+        <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number"
+          @click="click_page(page.number)">
+          <a class="page-link" href="#">{{ page.number }}</a>
+        </li>
+        <li class="page-item" @click="click_page(-1)">
+          <a class="page-link" href="#" aria-label="Next">
+            <span aria-hidden="true">&raquo;</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </ContentBase>
 </template>

 <script>
 import ContentBase from "../../components/ContentBase.vue";
+import $ from "jquery";
+import { ref } from "vue";
+import { useStore } from "vuex";

 export default {
  components: {
    ContentBase,
  },
+  setup() {
+    const store = useStore();
+    let users = ref([]);
+    let total_user = 0;
+    let current_page = 1;
+    let pages = ref([]);  // 页面
+
+    const click_page = page => {
+      if (page === -2) page = current_page - 1; // 前一页
+      else if (page === -1) page = current_page + 1;  // 后一页
+      // 判断 page 合法性
+      let max_pages = parseInt(Math.ceil(total_user / 10));
+
+      if (page >= 1 && page <= max_pages) {
+        pull_ranklist_page(page);
+      }
+    }
+
+    const update_pages = () => {  // 更新页面
+      let max_pages = parseInt(Math.ceil(total_user / 10));  // ceil 上取整
+      let new_pages = [];
+      for (let i = current_page - 2; i <= current_page + 2; i++) {  // 分 5 页: current_page 分别向上向下 -2
+        if (i >= 1 && i <= max_pages) {
+          new_pages.push({
+            number: i,
+            is_active: i === current_page ? "active" : "",  // 页面序号标签是否被激活:如果选中页是当前页,则激活(active)
+          });
+        }
+      }
+      pages.value = new_pages;
+    }
+
+    const pull_ranklist_page = (page) => {
+      current_page = page;
+      $.ajax({
+        url: "http://127.0.0.1:3000/ranklist/getranklist/",
+        data: {
+          page_index:page,
+        },
+        type: "GET",
+        headers: {
+          Authorization: "Bearer " + store.state.user.token,
+        },
+        success(resp) {
+          users.value = resp.users;
+          total_user = resp.user_count;
+          update_pages(); // 更新分页
+          console.log(resp);
+          console.log(total_user);
+        },
+        error(resp) {
+          console.log(resp);
+        }
+      });
+    }
+
+    pull_ranklist_page(current_page);
+
+    return {
+      users,
+      pages,
+      click_page,
+    }
+  }
 };
 </script>

-<style scoped></style>
+<style scoped>
+.user-photo {
+  border-radius: 50%;
+  width: 5vh;
+}
+
+.user-username {}
+</style>