From 5c6bbd27938f39fca9dc2836ec5d1709b5cb7081 Mon Sep 17 00:00:00 2001
From: Xwen <929716663@qq.com>
Date: Mon, 25 Dec 2023 22:50:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=8E=A5=E5=85=A5=E6=8E=A8=E8=8D=90?=
 =?UTF-8?q?=E5=A5=BD=E5=8F=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Bbs.Vue3/src/views/home/Index.vue          |  11 +-
 .../home/components/PointsRanking/index.vue   |  10 +-
 .../home/components/RecommendFriend/index.vue | 131 ++++++++++++++++++
 3 files changed, 144 insertions(+), 8 deletions(-)
 create mode 100644 Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue

diff --git a/Yi.Bbs.Vue3/src/views/home/Index.vue b/Yi.Bbs.Vue3/src/views/home/Index.vue
index 831a8efa..6d515fcf 100644
--- a/Yi.Bbs.Vue3/src/views/home/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/Index.vue
@@ -75,18 +75,15 @@
           <el-col :span="24">
             <InfoCard :items="pointList" header="本月排行" text="更多">
               <template #item="temp">
-                <!-- <AvatarInfo>
-                  <template #bottom> 本月积分：290 </template>
-                </AvatarInfo> -->
                 <PointsRanking :pointsData="temp" />
               </template>
             </InfoCard>
           </el-col>
 
           <el-col :span="24">
-            <InfoCard :items="items" header="推荐好友" text="更多">
+            <InfoCard :items="friendList" header="推荐好友" text="更多">
               <template #item="temp">
-                <AvatarInfo />
+                <RecommendFriend :friendData="temp" />
               </template>
             </InfoCard>
           </el-col>
@@ -116,12 +113,14 @@ 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";
+import RecommendFriend from "./components/RecommendFriend/index.vue";
 
 const plateList = ref([]);
 const discussList = ref([]);
 const bannerList = ref([]);
 const weekList = ref([]);
 const pointList = ref([]);
+const friendList = ref([]);
 
 const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
 //主题查询参数
@@ -144,6 +143,8 @@ onMounted(async () => {
   weekList.value = weekData;
   const { data: pointData } = await getRankingPoints();
   pointList.value = pointData;
+  const { data: friendData } = await getRecommendedFriend();
+  friendList.value = friendData;
 });
 
 const weekXAxis = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
diff --git a/Yi.Bbs.Vue3/src/views/home/components/PointsRanking/index.vue b/Yi.Bbs.Vue3/src/views/home/components/PointsRanking/index.vue
index 79398bcc..0787a030 100644
--- a/Yi.Bbs.Vue3/src/views/home/components/PointsRanking/index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/components/PointsRanking/index.vue
@@ -56,9 +56,13 @@ const getStatusInfo = (type) => {
 };
 
 const userLimit = computed(() => getStatusInfo(props.pointsData.userLimit));
-const userImageSrc = computed(
-  () => import.meta.env.VITE_APP_BASEAPI + "/file/" + props.pointsData.icon
-);
+const userImageSrc = computed(() => {
+  if (props.pointsData.icon) {
+    return import.meta.env.VITE_APP_BASEAPI + "/file/" + props.pointsData.icon;
+  } else {
+    return "favicon.ico";
+  }
+});
 </script>
 
 <style lang="scss">
diff --git a/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue b/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue
new file mode 100644
index 00000000..22d04c19
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/views/home/components/RecommendFriend/index.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="friend-box">
+    <div class="left">
+      <div class="icon"><img :src="userImageSrc" alt="" /></div>
+    </div>
+    <div class="center">
+      <div class="top">
+        <div class="name">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="friendData.userName"
+            placement="top"
+          >
+            {{ friendData.userName }}
+          </el-tooltip>
+        </div>
+        <el-tag effect="light" :type="userLimit.type">
+          {{ userLimit.label }}
+        </el-tag>
+        <el-tag effect="light" type="success">{{ friendData.level }}</el-tag>
+      </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="RecommendFriend">
+import { defineProps, computed } from "vue";
+
+const props = defineProps({
+  friendData: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+console.log(props.friendData, "friendData");
+
+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.friendData.userLimit));
+const userImageSrc = computed(() => {
+  if (props.friendData.icon) {
+    return import.meta.env.VITE_APP_BASEAPI + "/file/" + props.friendData.icon;
+  } else {
+    return "favicon.ico";
+  }
+});
+</script>
+
+<style lang="scss">
+.friend-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 {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      .name {
+        width: 50px;
+        color: #252933;
+        margin-left: 5px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      > .el-tag {
+        margin: 0 10px;
+      }
+    }
+  }
+  .right {
+    flex: 2;
+    display: flex;
+    align-items: center;
+    .follow {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-size: 16px;
+      color: #1171ee;
+    }
+  }
+}
+</style>