feat:合并

2024-08-12 19:43:30 +08:00
parent 6095f2174f
commit b4de38fbb9
2 changed files with 205 additions and 0 deletions
--- a/Yi.Bbs.Vue3/src/views/money/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/money/Index.vue
@@ -0,0 +1,113 @@
+<script setup>
+import AwardPedestal from "./components/AwardPedestal.vue";
+import AvatarInfo from "@/components/AvatarInfo.vue";
+import { onMounted, reactive, ref, computed } from "vue";
+import {
+  getRankingPoints,
+} from "@/apis/analyseApi.js";
+const pointList = ref([]);
+const total = ref(0);
+const moneyQuery = reactive({ skipCount: 1, maxResultCount: 30 });
+
+const isFirstPage = computed(() => {
+  return moneyQuery.skipCount == 1;
+})
+
+const pointListFilter=computed(() => {
+  //如果是第一页，去掉前3个
+  if(moneyQuery.skipCount == 1)
+  {
+    return  pointList.value.slice(3);
+  }
+return pointList.value;
+})
+
+
+//初始化
+onMounted(async () => {
+  await initData();
+});
+
+const initData = async () => {
+  const { data: pointData } = await getRankingPoints(moneyQuery);
+  pointList.value = pointData.items;;
+  total.value = pointData.totalCount
+}
+//分页事件
+const changePage = async (currentPage) => {
+  await initData();
+}
+</script>
+
+<template>
+  <div class="content-body">
+    <AwardPedestal v-show="isFirstPage" :goldUserInfo="pointList[0]" :silverUserInfo="pointList[1]"
+      :bronzeUserInfo="pointList[2]" />
+    <div v-for="item in pointListFilter" :key="item.id" class="list-div">
+      <div class="list-left">
+        <span> {{ item.order }}</span>
+        <AvatarInfo :userInfo="item" :isSelf="false" />
+        <span class="money">
+          {{ item.money }}
+        </span>
+      </div>
+      <div class="list-right">
+        关注
+      </div>
+
+    </div>
+    <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
+      :page-sizes="[10, 30, 50, 100]" v-model:current-page="moneyQuery.skipCount"
+      v-model:page-size="moneyQuery.maxResultCount" @current-change="changePage" @size-change="changePage" />
+  </div>
+</template>
+<style scoped lang="scss">
+.el-pagination {
+
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+}
+
+.content-body {
+  margin-bottom: 40px;
+  margin-top: 20px;
+  padding: 20px;
+  background-color: #ffffff;
+}
+
+.list-div {
+  justify-content: space-between;
+  border-radius: 4px;
+  display: flex;
+  background-color: #ffffff;
+  height: 80px;
+  width: 850px;
+  cursor: pointer;
+  padding: 16px 12px;
+
+  .list-left {
+    display: flex;
+
+    span {
+      margin-right: 20px;
+      color: #515767;
+      font-size: 1.5rem;
+      font-weight: 600;
+      line-height: 2rem;
+      display: flex;
+      align-content: center;
+      flex-wrap: wrap;
+    }
+
+    .money {
+      font-size: 1.0rem;
+      color: #ff0000;
+    }
+  }
+}
+
+.list-div:hover {
+  background-color: #f7f8fa;
+}
+</style>