From 0504222892a7bd2f26b79b022055d45dcadf99fd Mon Sep 17 00:00:00 2001
From: QMZ <1164250597@qq.com>
Date: Sun, 22 Dec 2024 00:11:32 +0800
Subject: [PATCH] =?UTF-8?q?=E7=83=AD=E9=97=A8=E5=AE=B6=E6=97=8F=E6=95=85?=
 =?UTF-8?q?=E4=BA=8B=E5=A4=B4=E5=83=8F=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/community/trends.vue | 59 ++++++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/views/community/trends.vue b/src/views/community/trends.vue
index a8fba1f2..0382d938 100644
--- a/src/views/community/trends.vue
+++ b/src/views/community/trends.vue
@@ -28,7 +28,7 @@
             style="display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;height: 120%;gap:3%;width: 100%;"
             @mouseover="hoverIndex = index" @mouseleave="hoverIndex = -1" @click="fllowsClick(follow.myfollowid,index)"
             :class="{'selected': selectedIndex === index}">
-            <img class="touxiang" :src="follow.photo"  style="left:20%;width: 15%; height: auto;" />
+            <img class="touxiang" :src="follow.photo" style="left:20%;width: 15%; height: auto;" />
             <div style="margin-left: 40px; font-weight: bold; font-size: 16px;">{{ follow.username }}</div>
             <el-tag v-if="follow.newpostnum" effect="plain" round style="position: absolute; right:0%">
               {{follow.newpostnum}}条新动态
@@ -76,7 +76,7 @@
       </div>
       <div class=heatlist style="margin-top:20px;display: flex;flex-direction:row;">
         <div
-        style="position:relative; display: flex;flex-direction:column;  color: white; font-weight: bold;margin-left: 20px ;gap:51px;margin-top:10px">
+          style="position:relative; display: flex;flex-direction:column;  color: white; font-weight: bold;margin-left: 20px ;gap:51px;margin-top:10px">
           <div class=Hotsearchnum style="background-color:red;">1</div>
           <div class=Hotsearchnum style="background-color:#ff8e51;">2</div>
           <div class=Hotsearchnum style="background-color:#ffc74fd2;">3</div>
@@ -85,16 +85,16 @@
 
         </div>
         <div
-        style="font-size: 14px; font-weight: 500; margin-left: 20px; display: flex; flex-direction: column; gap: 17px;width: 100%; ">
+          style="font-size: 14px; font-weight: 500; margin-left: 20px; display: flex; flex-direction: column; gap: 17px;width: 100%; ">
           <div
-          style="overflow: hidden; list-style-type: none; width: 90%; height: 20%;max-height: 60px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative; cursor: pointer;"
+            style="overflow: hidden; list-style-type: none; width: 90%; height: 20%;max-height: 60px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative; cursor: pointer;"
             v-for="(Hotsearch, index) in HotsearchList" :key="index" @click="checkbypostid(Hotsearch.postid)">
 
             <div style=" font-weight: bold; margin-left: 10%; margin-top: 1%; ">{{ Hotsearch.username }}:</div>
             <div style="left:10%;width: 70%; font-size: 12px;position: relative;">{{ Hotsearch.content}}</div>
 
             <svg width="20" height="20" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" id="fire-station"
-            style="position: absolute;right:5.8% ;top:20%;fill:red ">
+              style="position: absolute;right:5.8% ;top:20%;fill:red ">
               <path
                 d="M7.5 14C11.0899 14 14 11 14 7.50003C14 4.5 11.5 2 11.5 2L10.5 5.5L7.5 1L4.5 5.5L3.5 2C3.5 2 1 4.5 1 7.50003C1 11 3.91015 14 7.5 14ZM7.5 12.5C6.11929 12.5 5 11.3807 5 10C5 8.61929 7.5 5.5 7.5 5.5C7.5 5.5 10 8.61929 10 10C10 11.3807 8.88071 12.5 7.5 12.5Z" />
             </svg>
@@ -127,7 +127,7 @@
         <div v-for="(story, index) in checkfamilystories" :key="index" class="familystore"
           style="width: 95%; height: 70px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;cursor: pointer;"
           @click="checkbypostid(story.postid)">
-          <img class="touxiang" src="../../assets/pictures/touxiang.png" />
+          <img class="touxiang" src="story.photo" />
           <div class="familytitle">{{ story.username }}</div>
           <div class="familycontent">{{ story.content }}</div>
         </div>
@@ -163,8 +163,8 @@
         page: 1,
         userid: 1,
         totalPages: 1,
-        familystoriespage:0,
-        checkfamilystories:[],
+        familystoriespage: 0,
+        checkfamilystories: [],
         posts: [
           {
 
@@ -257,7 +257,7 @@
 
       submitPost(newpost) {//发布帖子后，本地显示帖子
 
-        this.checkPosts.unshift(newpost); 
+        this.checkPosts.unshift(newpost);
 
       },
 
@@ -274,7 +274,7 @@
             const filteredPostsList = response.records;
 
 
-           
+
             this.checkPosts.push(...filteredPostsList);
             this.page = this.page + 1;
           } catch (error) {
@@ -343,7 +343,32 @@
         try {
           const response = await axios.get(`/posts/topfamilystory`);
           this.familystories.push(...response);
-          this.checkfamilystories.push(...response.slice(0, 4));
+          // 获取每个家庭故事帖子的用户信息（头像和用户名）
+          const familystoriesWithUserInfo = await Promise.all(
+            this.familystories.map(async (story) => {
+              const { userId } = story; // 假设每个帖子有一个 userId 字段
+              try {
+                // 获取每个帖子的用户信息
+                const userResponse = await axios.get(`/user/info/${userId}`);
+                const {  photo } = userResponse.data; // 假设 `data` 中包含 `username` 和 `photo`
+
+                // 返回包含用户信息的帖子对象
+                return {
+                  ...story,  
+                  photo
+                };
+              } catch (error) {
+                console.error(`获取用户信息失败: ${error.message}`);
+                return {
+                  ...story,
+                  photo: null
+                }; // 如果获取用户信息失败，可以设置为 null 或默认值
+              }
+            })
+          );
+          this.familystories = familystoriesWithUserInfo;
+
+          this.checkfamilystories.push(...this.familystories.slice(0, 4));
 
         } catch (error) {
           this.$message.error("热门家族故事获取失败");
@@ -384,7 +409,7 @@
       },
 
       async toggleCommentsVisibility(index, postid) {//展开评论以及获取评论列表
-      
+
         try {
           const comments = await axios.get(`/comments/postid=${postid}`);
 
@@ -461,13 +486,13 @@
       },
       refresh() {//热门家族故事刷新换一批按钮
         // 点击后触发的刷新动作
-        
-        this.familystoriespage+=4;
-        if(this.familystoriespage>12){
-          this.familystoriespage=0;
+
+        this.familystoriespage += 4;
+        if (this.familystoriespage > 12) {
+          this.familystoriespage = 0;
         }
         this.checkfamilystories.splice(0, this.checkfamilystories.length);
-        this.checkfamilystories.push(...this.familystories.slice(this.familystoriespage, this.familystoriespage+4));
+        this.checkfamilystories.push(...this.familystories.slice(this.familystoriespage, this.familystoriespage + 4));
         this.triggerAnimation();
       },