feat:接入积分排行

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

@@ -0,0 +1,40 @@
+import request from "@/config/axios/service";
+
+/**
+ * 获取推荐主题
+ * @param {*} data
+ * @returns
+ */
+export function getRecommendedTopic(data) {
+  return request({
+    url: "/analyse/bbs-discuss/random",
+    method: "get",
+    data,
+  });
+}
+
+/**
+ * 获取推荐好友
+ * @param {*} data
+ * @returns
+ */
+export function getRecommendedFriend(data) {
+  return request({
+    url: "/analyse/bbs-user/random",
+    method: "get",
+    data,
+  });
+}
+
+/**
+ * 获取积分排行
+ * @param {*} data
+ * @returns
+ */
+export function getRankingPoints(data) {
+  return request({
+    url: "/analyse/bbs-user/integral-top",
+    method: "get",
+    data,
+  });
+}

Yi.Bbs.Vue3/src/components/InfoCard.vue

@@ -1,55 +1,51 @@
 <script setup>
-import { ref } from 'vue'
-
-const props = defineProps(['items','header','text','hideDivider'])
+import { ref } from "vue";
 
+const props = defineProps(["items", "header", "text", "hideDivider"]);
 </script>
 
 <template>
-    <el-card class="box-card" shadow="never">
-      <template #header>
-        <div class="card-header">
-            <span>{{props.header}}</span>
-            <el-link :underline="false" type="primary">{{props.text}}</el-link>
-        </div>
-      </template>
+  <el-card class="box-card" shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span>{{ props.header }}</span>
+        <el-link :underline="false" type="primary">{{ props.text }}</el-link>
+      </div>
+    </template>
 
-      <slot name="content" />
+    <slot name="content" />
 
-
-      <div  v-for="(item,i) in props.items " >
+    <div v-for="(item, i) in props.items">
       <div class="text item">
-        <slot name="item" v-bind="item"/>
+        <slot name="item" v-bind="item" />
+      </div>
+      <el-divider
+        v-if="i != props.items.length - 1 && hideDivider == undefined"
+      />
     </div>
-        <el-divider v-if="i!=props.items.length-1&&hideDivider==undefined"  />
-  </div>
-   
-    </el-card>
-  </template>
-  
-  <style scoped>
+  </el-card>
+</template>
 
+<style scoped>
+.el-divider {
+  margin: 0.2rem 0;
+}
 
-  .el-divider
-  {
-margin: 0.2rem 0;
-  }
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
-  .text {
-    font-size: 14px;
-  }
-  
-  .item {
-margin: 0.5rem 0;
-  }
-  
-  .box-card {
-    width: 100%;
-  }
-  </style>
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin: 0.5rem 0;
+}
+
+.box-card {
+  width: 100%;
+}
+</style>

Yi.Bbs.Vue3/src/components/PlateCard.vue

@@ -26,7 +26,7 @@ import { onMounted } from "vue";
 const props = defineProps(["name", "introduction", "id", "isPublish"]);
 </script>
 
-<style>
+<style scoped>
 .remarks {
   font-size: 12px;
   color: #999;

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

@@ -73,11 +73,12 @@
           </el-col>
 
           <el-col :span="24">
-            <InfoCard :items="items" header="本月排行" text="更多">
+            <InfoCard :items="pointList" header="本月排行" text="更多">
               <template #item="temp">
-                <AvatarInfo>
+                <!-- <AvatarInfo>
                   <template #bottom> 本月积分：290 </template>
-                </AvatarInfo>
+                </AvatarInfo> -->
+                <PointsRanking :pointsData="temp" />
               </template>
             </InfoCard>
           </el-col>
@@ -107,18 +108,20 @@ import PlateCard from "@/components/PlateCard.vue";
 import ScrollbarInfo from "@/components/ScrollbarInfo.vue";
 import AvatarInfo from "@/components/AvatarInfo.vue";
 import BottomInfo from "@/components/BottomInfo.vue";
-import VisitsLineChart from "./components/VisitsLineChart.vue";
-
+import VisitsLineChart from "./components/VisitsLineChart/index.vue";
 import { access } from "@/apis/accessApi.js";
 import { getList } from "@/apis/plateApi.js";
 import { getList as bannerGetList } from "@/apis/bannerApi.js";
 import { getHomeDiscuss } from "@/apis/discussApi.js";
 import { getWeek } from "@/apis/accessApi.js";
+import { getRecommendedFriend, getRankingPoints } from "@/apis/analyseApi.js";
+import PointsRanking from "./components/PointsRanking/index.vue";
 
-var plateList = ref([]);
-var discussList = ref([]);
-var bannerList = ref([]);
+const plateList = ref([]);
+const discussList = ref([]);
+const bannerList = ref([]);
 const weekList = ref([]);
+const pointList = ref([]);
 
 const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
 //主题查询参数
@@ -139,6 +142,8 @@ onMounted(async () => {
   bannerList.value = bannerData.items;
   const { data: weekData } = await getWeek();
   weekList.value = weekData;
+  const { data: pointData } = await getRankingPoints();
+  pointList.value = pointData;
 });
 
 const weekXAxis = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];

Yi.Bbs.Vue3/src/views/home/components/PointsRanking/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="point-box">
+    <div class="left">
+      <div class="icon"><img :src="userImageSrc" alt="" /></div>
+    </div>
+    <div class="center">
+      <div class="top">
+        <el-tag effect="light" :type="userLimit.type">
+          {{ userLimit.label }}
+        </el-tag>
+        <el-tag effect="light" type="success">{{ pointsData.level }}</el-tag>
+      </div>
+      <div class="bottom">
+        {{ pointsData.userName }}
+      </div>
+    </div>
+    <div class="right">
+      <div class="follow">
+        <el-icon class="el-icon--right"><Plus /></el-icon>
+        <div class="text">关注</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="PointsRanking">
+import { defineProps, computed } from "vue";
+
+const props = defineProps({
+  pointsData: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const statusTypeList = [
+  {
+    label: "正常",
+    value: 0,
+    type: "success",
+  },
+  {
+    label: "危险",
+    value: 1,
+    type: "warning",
+  },
+  {
+    label: "已禁止",
+    value: 2,
+    type: "danger",
+  },
+];
+
+const getStatusInfo = (type) => {
+  return statusTypeList.filter((item) => item.value === type)[0];
+};
+
+const userLimit = computed(() => getStatusInfo(props.pointsData.userLimit));
+const userImageSrc = computed(
+  () => import.meta.env.VITE_APP_BASEAPI + "/file/" + props.pointsData.icon
+);
+</script>
+
+<style lang="scss">
+.point-box {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: space-around;
+  .left {
+    flex: 1;
+    .icon {
+      width: 40px;
+      height: 40px;
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+      }
+    }
+  }
+  .center {
+    flex: 4;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 0 10px;
+    .top {
+      > .el-tag {
+        margin-right: 10px;
+      }
+    }
+    .bottom {
+      width: 200px;
+      color: #252933;
+      margin-left: 5px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .right {
+    flex: 2;
+    display: flex;
+    align-items: center;
+    .follow {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-size: 16px;
+      color: #1171ee;
+    }
+  }
+}
+</style>

Yi.Bbs.Vue3/src/views/home/components/VisitsLineChart/index.vue

@@ -5,7 +5,7 @@
 <script setup name="VisitsLineChart">
 import { ref, defineEmits, defineProps, defineExpose } from "vue";
 import useEcharts from "@/hooks/useEcharts";
-import { statisticsEcharts } from "../hooks/echartsConfig";
+import { statisticsEcharts } from "../../hooks/echartsConfig";
 const props = defineProps({
   option: {
     type: Object,