|
|
|
|
@ -7,7 +7,7 @@
|
|
|
|
|
<div class="avatar-container">
|
|
|
|
|
<img :src="userInfo.avatar || defaultAvatar" alt="Avatar" class="avatar">
|
|
|
|
|
<!-- 更多信息按钮 -->
|
|
|
|
|
<button @click="editProfile" class="showFamilytree-btn" v-if="!this.userId">
|
|
|
|
|
<button @click="editProfile" class="showFamilytree-btn" v-if="!userId">
|
|
|
|
|
<img src="../../assets/pictures/space/more.png" alt="" style="width: 80px;">
|
|
|
|
|
</button>
|
|
|
|
|
<!-- 族谱树按钮 -->
|
|
|
|
|
@ -19,15 +19,15 @@
|
|
|
|
|
|
|
|
|
|
<!-- 基本信息 -->
|
|
|
|
|
<div class="user-info">
|
|
|
|
|
<h2 style="margin-bottom: 30px;">{{ userInfo.name || "加载中..." }}</h2>
|
|
|
|
|
<h2 style="margin-bottom: 30px;">{{ userInfo.name || "用户" }}</h2>
|
|
|
|
|
<div class="info-container">
|
|
|
|
|
<p style="margin-right: 20px;">
|
|
|
|
|
<img src="../../assets/pictures/space/map.png" style="width: 19px; margin-right: 5px;">
|
|
|
|
|
{{ userInfo.location || "加载中..." }}
|
|
|
|
|
{{ userInfo.location || "San Jose,California,USA" }}
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<img src="../../assets/pictures/space/calendar.png" style="width: 17px; margin-right: 5px">
|
|
|
|
|
{{ userInfo.joinedDate || "加载中..." }}
|
|
|
|
|
{{ userInfo.joinedDate || "1990/01/25" }}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -38,29 +38,29 @@
|
|
|
|
|
<img src="../../assets/pictures/space/interest.png" alt="">
|
|
|
|
|
<span class="in-text">
|
|
|
|
|
<span class="title">兴趣爱好:</span>
|
|
|
|
|
<span class="text-content" id="interest">{{ userInfo.interests || "加载中..." }}</span>
|
|
|
|
|
<span class="text-content" id="interest">{{ userInfo.interests || "gali建帅 马思唯最好" }}</span>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<img src="../../assets/pictures/space/double.png" alt="">
|
|
|
|
|
<span class="in-text">
|
|
|
|
|
<span class="title">择偶期望:</span>
|
|
|
|
|
<span class="text-content" id="expectation">{{ userInfo.expectation || "加载中..." }}</span>
|
|
|
|
|
<span class="text-content" id="expectation">{{ userInfo.expectation || "长期关系" }}</span>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<img src="../../assets/pictures/space/career.png" alt="">
|
|
|
|
|
<span class="in-text">
|
|
|
|
|
<span class="title">职业:</span>
|
|
|
|
|
<span class="text-content" id="career">{{ userInfo.career || "加载中..." }}</span>
|
|
|
|
|
<span class="text-content" id="career">{{ userInfo.career || "程序员" }}</span>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 操作按钮 -->
|
|
|
|
|
<div class="actions">
|
|
|
|
|
<button @click="logout" v-if="!this.userId">退出登录</button>
|
|
|
|
|
<button @click="privateChat" v-if="this.userId">私聊</button>
|
|
|
|
|
<button @click="logout" v-if="!userId">退出登录</button>
|
|
|
|
|
<button @click="privateChat" v-if="userId">私聊</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@ -112,10 +112,8 @@
|
|
|
|
|
name:'spaceIndex',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
|
|
myId: 0,
|
|
|
|
|
userlikelist:[],
|
|
|
|
|
// myfollows: [],
|
|
|
|
|
userInfo: {
|
|
|
|
|
name: "", // 用户姓名
|
|
|
|
|
avatar:"",
|
|
|
|
|
@ -160,14 +158,14 @@
|
|
|
|
|
isLiked:false,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
defaultAvatar: "https://via.placeholder.com/150", // 默认头像占位符
|
|
|
|
|
defaultAvatar: require("../../assets/pictures/space/avatar.png"), // 默认头像占位符
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async loaduserlikes() {//加载user点赞列表 并会传入每个帖子做是否已经点赞的判断
|
|
|
|
|
const userid = this.userId;//获取用户id
|
|
|
|
|
const requestId = this.userId || this.myId;//获取用户id
|
|
|
|
|
try {
|
|
|
|
|
const response = await axios.get(`/likes/userid=${userid}`);
|
|
|
|
|
const response = await axios.get(`/likes/userid=${requestId}`);
|
|
|
|
|
this.userlikelist = response; // Store the liked post IDs
|
|
|
|
|
|
|
|
|
|
// Update isLiked status for all posts
|
|
|
|
|
@ -180,9 +178,8 @@
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
axios.get(`/likes/userid=${userid}`)
|
|
|
|
|
axios.get(`/likes/userid=${requestId}`)
|
|
|
|
|
.then(response => {
|
|
|
|
|
// this.userlikelist.splice(0, this.myfollows.length);
|
|
|
|
|
this.userlikelist.push(...response);
|
|
|
|
|
return response;
|
|
|
|
|
})
|
|
|
|
|
@ -194,12 +191,11 @@
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async handleLike(post) {//点赞按钮
|
|
|
|
|
const requestId = this.userId || this.myId;
|
|
|
|
|
if (!post.isLiked) {//假如没点赞
|
|
|
|
|
try {
|
|
|
|
|
const response = await axios.post(`/likes/userid=${this.userId}/postid=${post.id}`);
|
|
|
|
|
const response = await axios.post(`/likes/userid=${requestId}/postid=${post.id}`);
|
|
|
|
|
if (response === "点赞成功！") {
|
|
|
|
|
// this.$message.success(response);
|
|
|
|
|
// this.$emit('updateLikeCount', this.likeCount + 1);
|
|
|
|
|
post.isLiked = !post.isLiked;
|
|
|
|
|
post.likeCount = post.likeCount + 1 ;
|
|
|
|
|
}
|
|
|
|
|
@ -213,10 +209,8 @@
|
|
|
|
|
}
|
|
|
|
|
else {//假如已经点赞
|
|
|
|
|
try {
|
|
|
|
|
const response = await axios.delete(`/likes/userid=${this.userId}/postid=${post.id}`);
|
|
|
|
|
const response = await axios.delete(`/likes/userid=${requestId}/postid=${post.id}`);
|
|
|
|
|
if (response === "取消点赞成功！") {
|
|
|
|
|
// this.$message.success("取消点赞成功");
|
|
|
|
|
// this.$emit('updateLikeCount', this.likeCount - 1);
|
|
|
|
|
post.isLiked = !post.isLiked;
|
|
|
|
|
post.likeCount = post.likeCount - 1;
|
|
|
|
|
}
|
|
|
|
|
@ -233,24 +227,14 @@
|
|
|
|
|
async fetchUserInfo() {
|
|
|
|
|
await this.loaduserlikes();
|
|
|
|
|
try {
|
|
|
|
|
const requestId = this.userId || this.myId;
|
|
|
|
|
// 调用后端接口获取用户信息
|
|
|
|
|
const response = await axios.get("/api/getUserInfo", {
|
|
|
|
|
const response = await axios.get("/getUserInfo", {
|
|
|
|
|
params: {
|
|
|
|
|
userId: this.userId, // 假设传递用户 ID，需根据实际情况调整
|
|
|
|
|
userId: requestId,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 假设返回的数据结构如下：
|
|
|
|
|
// {
|
|
|
|
|
// avatar: "https://example.com/avatar.jpg",
|
|
|
|
|
// name: "John Doe",
|
|
|
|
|
// location: "San Jose, California",
|
|
|
|
|
// joinedDate: "2021-01-01",
|
|
|
|
|
// interests: "阅读, 旅行, 编程",
|
|
|
|
|
// expectation: "有趣的灵魂",
|
|
|
|
|
// career: "软件工程师"
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// 更新数据
|
|
|
|
|
this.userInfo.avatar = response.data.avatar;
|
|
|
|
|
this.userInfo.name = response.data.name;
|
|
|
|
|
@ -261,17 +245,12 @@
|
|
|
|
|
this.userInfo.career = response.data.career;
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error("获取用户信息失败:", error);
|
|
|
|
|
// alert("无法加载用户信息，请稍后重试！");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async fetchPostInfo() {
|
|
|
|
|
try {
|
|
|
|
|
// const userId = this.userId; // 需要从用户状态或其他地方获取
|
|
|
|
|
const postResponse = await axios.get(`/posts/userid=${this.userId}`, {
|
|
|
|
|
// params: {
|
|
|
|
|
// userId: userId
|
|
|
|
|
// }
|
|
|
|
|
});
|
|
|
|
|
const requestId = this.userId || this.myId;
|
|
|
|
|
const postResponse = await axios.get(`/posts/userid=${requestId}`);
|
|
|
|
|
// 假设后端返回的数据中包含了用户是否对每个帖子点赞的信息
|
|
|
|
|
this.posts = postResponse.map(post => ({
|
|
|
|
|
id: post.postid,
|
|
|
|
|
@ -300,13 +279,14 @@
|
|
|
|
|
},
|
|
|
|
|
logout() {
|
|
|
|
|
this.$router.push('/')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// 获取当前登录用户的ID
|
|
|
|
|
this.myId = getUserId();
|
|
|
|
|
// 加载用户信息
|
|
|
|
|
this.fetchUserInfo();
|
|
|
|
|
this.fetchPostInfo();
|
|
|
|
|
this.myId = getUserId();
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
