pwfnlmjh2
/
frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

热门家族故事头像接口

Browse Source
main
QMZ 1 month ago
parent 4e9f643ab2
commit 0504222892
1 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File

59
src/views/community/trends.vue
Unescape View File

@ -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();
},

Write Preview
Loading…
Cancel
Save