feat: 完成积分、价值排行榜

Yi.Bbs.Vue3/src/apis/analyseApi.js

@@ -27,11 +27,11 @@ export function getRecommendedFriend(data) {
 }
 
 /**
- * 获取积分排行
+ * 获取钱钱排行
  * @param {*} data
  * @returns
  */
-export function getRankingPoints(data) {
+export function getMoneyTop(data) {
   return request({
     url: "/analyse/bbs-user/money-top",
     method: "get",
@@ -39,6 +39,35 @@ export function getRankingPoints(data) {
   });
 }
 
+
+/**
+ * 获取价值排行
+ * @param {*} data
+ * @returns
+ */
+export function getValueTop(data) {
+  return request({
+    url: "/analyse/dc-user/value-top",
+    method: "get",
+    params: data
+  });
+}
+
+/**
+ * 获取积分排行
+ * @param {*} data
+ * @returns
+ */
+export function getPointsTop(data) {
+  return request({
+    url: "/analyse/dc-user/points-top",
+    method: "get",
+    params: data
+  });
+}
+
+
+
 /**
  * 获取用户分析
  * @param {*} data

Yi.Bbs.Vue3/src/views/home/Index.vue

@@ -261,7 +261,7 @@ import {getWeek} from "@/apis/accessApi.js";
 import {
   getRecommendedTopic,
   getRecommendedFriend,
-  getRankingPoints,
+  getMoneyTop,
   getUserAnalyse,
   getRegisterAnalyse
 } from "@/apis/analyseApi.js";
@@ -345,7 +345,7 @@ const init = async () => {
       weekList.value = weekData;
     })(),
     (async () => {
-      const {data: pointData, config: pointConfig} = await getRankingPoints();
+      const {data: pointData, config: pointConfig} = await getMoneyTop();
       pointList.value = pointData.items;
       isPointFinished.value = pointConfig.isFinish;
     })(),

Yi.Bbs.Vue3/src/views/money/Index.vue

@@ -3,19 +3,21 @@ import AwardPedestal from "./components/AwardPedestal.vue";
 import AvatarInfo from "@/components/AvatarInfo.vue";
 import { onMounted, reactive, ref, computed } from "vue";
 import {
-  getRankingPoints,
+  getMoneyTop,
+  getValueTop,
+  getPointsTop
 } from "@/apis/analyseApi.js";
 const pointList = ref([]);
 const total = ref(0);
 const moneyQuery = reactive({ skipCount: 1, maxResultCount: 30 });
-
+const tabSelect=ref("money");
 const isFirstPage = computed(() => {
-  return moneyQuery.skipCount == 1;
+  return moneyQuery.skipCount === 1;
 })
 
 const pointListFilter=computed(() => {
   //如果是第一页，去掉前3个
-  if(moneyQuery.skipCount == 1)
+  if(moneyQuery.skipCount === 1)
   {
     return  pointList.value.slice(3);
   }
@@ -29,18 +31,49 @@ onMounted(async () => {
 });
 
 const initData = async () => {
-  const { data: pointData } = await getRankingPoints(moneyQuery);
-  pointList.value = pointData.items;;
-  total.value = pointData.totalCount
+  switch (tabSelect.value)
+  {
+    case "money":
+      const { data: pointData } = await getMoneyTop(moneyQuery);
+      pointList.value = pointData.items;
+      total.value = pointData.totalCount
+      break;
+    case "value":
+      const { data: pointData2 } = await getValueTop(moneyQuery);
+      pointData2.items.forEach(item => {item.money=item.value})
+      pointList.value = pointData2.items;
+      total.value = pointData2.totalCount
+      break;
+    case "points":
+      const { data: pointData3 } = await getPointsTop(moneyQuery);
+      pointData3.items.forEach(item => {item.money=item.points})
+      pointList.value = pointData3.items;
+      total.value = pointData3.totalCount
+      break;
+  }
+ 
 }
 //分页事件
 const changePage = async (currentPage) => {
   await initData();
 }
+
+//切换tab
+const handleClickTabs=async (pane) => {
+
+  tabSelect.value=pane.paneName;
+  moneyQuery.skipCount = 1;
+  await initData();
+}
 </script>
 
 <template>
   <div class="content-body">
+    <el-tabs v-model="tabSelect"  @tab-click="handleClickTabs" class="tabs">
+      <el-tab-pane label="钱钱" name="money"><p class="tab-title">钱钱排行榜</p></el-tab-pane>
+      <el-tab-pane label="价值" name="value"><p class="tab-title">价值排行榜</p></el-tab-pane>
+      <el-tab-pane label="积分" name="points"><p class="tab-title">积分排行榜</p></el-tab-pane>
+    </el-tabs>
     <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">
@@ -110,4 +143,15 @@ const changePage = async (currentPage) => {
 .list-div:hover {
   background-color: #f7f8fa;
 }
+.tabs :deep(.el-tabs__nav-wrap)
+{
+  display: flex;
+  justify-content: center !important;
+}
+.tab-title
+{
+  text-align: center;
+  font-size: 30px;
+  margin-bottom: 20px;
+}
 </style>

Yi.Bbs.Vue3/src/views/money/components/AwardPedestal.vue

@@ -68,7 +68,7 @@ h3{
 }
 
 .gold:hover {
-            box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0.7); /* 金色光辉效果 */
+            box-shadow: 0 0 40px 20px rgba(255, 215, 0, 0.7); /* 金色光辉效果 */
         }
 
 .gold {
@@ -76,13 +76,18 @@ h3{
     height: 250px;
     box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
 }
+.silver:hover {
+  box-shadow: 0 0 20px 10px rgba(192, 192, 192, 0.7); /* 金色光辉效果 */
+}
 
 .silver {
     background: linear-gradient(to bottom, #c0c0c0 0%, #d3d3d3 100%);
     height: 200px;
     box-shadow: 0 6px 18px rgba(192, 192, 192, 0.5);
 }
-
+.bronze:hover {
+  box-shadow: 0 0 20px 10px rgba(205, 127, 50, 0.7); /* 金色光辉效果 */
+}
 .bronze {
     background: linear-gradient(to bottom, #cd7f32 0%, #a0522d 100%);
     height: 170px;