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

Compare commits

base: pwfnlmjh2:ecd2700146c9cd581565cc86dd5fb777a2926936
Branches Tags
pwfnlmjh2:main
..
compare: pwfnlmjh2:ff800e4a0b78b70dbd3a4d7d13bd6620bddc609f
Branches Tags
pwfnlmjh2:main

No commits in common. 'ecd2700146c9cd581565cc86dd5fb777a2926936' and 'ff800e4a0b78b70dbd3a4d7d13bd6620bddc609f' have entirely different histories.
ecd2700146 ... ff800e4a0b

5 changed files with 141 additions and 315 deletions
Show Stats

29
src/assets/css/community/community.css
Unescape View File

@ -1,11 +1,34 @@
/* 设置进入和离开的过渡效果 */
.post-list .fade-leave-active { .post-list .fade-leave-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
} }
.post-list .fade-leave-to /* 离开完成后状态 */ .post-list .fade-enter-active {
{ transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
transform: translateX(100%) scale(0.5); /* 离开时从右边滑出并缩小 */ }
/* 元素进入时，缩放并渐变 */
.post-list .fade-leave-to /* .fade-leave-active in Vue 2.x */ {
opacity: 0;
transform: scale(0.5); /* 初始状态为缩小 */
}
.post-list .fade-enter{
opacity: 0;
transform: scale(0.5); /* 初始状态为缩小 */
}
/* 元素进入时恢复到原尺寸 */
.post-list .fade-enter-to {
opacity: 1;
transform: scale(1); /* 变大恢复正常尺寸 */
}
/* 元素离开时，继续保持缩小状态 */
.post-list .fade-leave-to {
opacity: 0;
transform: scale(0.5); /* 离开时缩小 */
} }

172
src/views/community/PostCard.vue
Unescape View File

@ -1,11 +1,11 @@
<template> <template>
<div class="post-card"> <div class="post-card">
<div class="post-header"> <div class="post-header">
<img :src="localAvatarUrl" alt="avatar" class="avatar" @click="goToUserProfile" /> <img :src="avatarUrl" alt="avatar" class="avatar" />
<div class="user-info"> <div class="user-info">
<strong>{{ localUsername }}</strong> <strong>{{ username }}</strong>
<button class="followsbutto followsbuttonani" @click="followsbutton" :class="{ active: followsbuttonActive }" > <button class="followsbutto followsbuttonani" @click="followsbutton" :class="{ active: followsbuttonActive }">
<div v-if="followsbuttonActive"> <div v-if="followsbuttonActive">
你关注了他 你关注了他
</div> </div>
@ -17,22 +17,9 @@
<span>{{ timestamp }}</span> <span>{{ timestamp }}</span>
</div>
<div style="right: -50%;position: relative;">
<button class="deletebutto" @click="openModal" v-if="this.userid===this.postuserid&&!showModal">
×
删除
</button>
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<div v-if="showModal">
<button @click="deletebutton" class="deletebutto">确定</button>
<button @click="cancelDelete" class="deletebutto">取消</button>
</div>
</transition>
</div> </div>
<div v-if="isfamilystory" class="ribbon-8"> <div v-if="isfamilystory" class="ribbon-8">
<span> <span>
家族故事 家族故事
@ -64,8 +51,7 @@
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave"> <transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<div v-if="isCommentsVisible" class="comments-section"> <div v-if="isCommentsVisible" class="comments-section">
<div v-for="(comment, index) in comments" :key="index" class="comment"> <div v-for="(comment, index) in comments" :key="index" class="comment">
<p><strong>{{ comment.userid}}:</strong> {{ comment.content }} <button v-if="comment.userid==this.userid" style="color:#FE4E96;" <p><strong>{{ comment.username}}:</strong> {{ comment.content }}</p>
@click="deletecomment(comment.commentid)">删除</button> </p>
</div> </div>
<!-- 发布评论 --> <!-- 发布评论 -->
@ -77,7 +63,7 @@
<script> <script>
import CommentInput from './CommentInput.vue'; import CommentInput from './CommentInput.vue';
import axios from '@/utils/axiosConfig'; import axios from 'axios';
export default { export default {
@ -116,8 +102,6 @@
this.followsbuttonActive = true; this.followsbuttonActive = true;
} }
}, },
@ -128,76 +112,14 @@
}, },
data() { data() {
return { return {
showModal: false,
isActive: false, isActive: false,
isLiked: false, isLiked: false,
isClicked: false, isClicked: false,
followsbuttonActive: false, followsbuttonActive: false
localUsername: this.username, // 将传入的 props 复制到 data 中
localAvatarUrl: this.avatarUrl // 将传入的 props 复制到 data 中
}; };
}, },
methods: { methods: {
async deletecomment(commentid) {
try {
const response = await axios.delete(`/comments/commentid=${commentid}`);
if (response === "删除评论成功!!") {
this.$message.success("删除评论成功!!可刷新后查看");
}
else {
this.$message.error(response);
}
} catch (error) {
this.$message.error("删除评论失败");
console.log(error);
}
},
cancelDelete() {
// 取消删除，隐藏弹窗
this.showModal = false;
},
openModal() {
this.showModal = true;
},
async deletebutton() {
try {
const response = await axios.delete(`/posts/postid=${this.postid}`);
if (response === "删除动态成功 ！！") {
this.$message.success("删除动态成功 ！！可刷新后查看");
}
else {
this.$message.error(response);
}
} catch (error) {
this.$message.error("删除动态失败");
console.log(error);
}
this.showModal = false;
},
async loadinfo(){
const userResponse = await axios.get(`/user/info/${this.postuserid}`);
this.localUsername = userResponse.username;
this.localAvatarUrl=userResponse.photo;
},
goToUserProfile() {
// 使用 this.$router.push 跳转到指定路由
this.$router.push({ name: 'UserProfile', params: { userId: this.postuserid } });
},
async followsbutton() {//关注按钮 async followsbutton() {//关注按钮
// 设置为 active，触发动画 // 设置为 active，触发动画
@ -323,80 +245,6 @@
</script> </script>
<style scoped> <style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease-in-out;
/* 渐变动画 */
}
.fade-enter,
.fade-leave-to {
opacity: 0;
/* 初始透明度 */
}
/* 可选：按钮在进入时的缩放效果 */
.fade-enter {
transform: scale(0.8);
}
.fade-enter-active {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.fade-leave-active {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.fade-leave-to {
opacity: 0;
transform: scale(0.8);
}
/* 控制显示时的定位变化 */
.fade-enter-to {
transform: translateY(0);
}
.fade-leave-to {
transform: translateY(-10px);
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.deletebutto {
margin-left: 10px;
margin-right: 10px;
position: relative;
width: 70px;
height: 30px;
line-height: 30px;
/* 修改 line-height 为与高度一致 */
border: none;
border-radius: 30px;
background: #FE4E96;
color: #fff;
text-align: center;
cursor: pointer;
font-size: 14px;
}
.postimage { .postimage {
max-width: 600px; max-width: 600px;
max-height: 600px; max-height: 600px;
@ -500,12 +348,12 @@
} }
.post-card { .post-card {
opacity: 0.9; opacity: 0.95;
margin: 20px; margin: 20px;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 15px; padding: 15px;
border-radius: 15px; border-radius: 8px;
background-color: #FFFBFB; background-color: #fff;
} }
.post-header { .post-header {

218
src/views/community/Postform.vue
Unescape View File

@ -22,37 +22,36 @@
<el-input v-model="form.content" type="textarea" placeholder="有什么新鲜事..." rows=4 /> <el-input v-model="form.content" type="textarea" placeholder="有什么新鲜事..." rows=4 />
</el-form-item> </el-form-item>
<div>
<el-upload action="#" list-type="picture" :auto-upload="false" :limit="1" :on-exceed="handleExceed" ref="postimage"
style="position: fixed; left: 12%;display: flex; align-items: center;" @change="handleFileChange" >
<!-- @success="handleUploadSuccess" -->
<el-icon size="30px">
<Picture />
</el-icon>图片
<br>
</el-upload>
</div>
<el-radio-group v-model="radio" fill="#FE4E96" size="small" >
<el-radio-button label="日常动态" ></el-radio-button>
<el-radio-button label="家族故事" ></el-radio-button>
</el-radio-group>
<div>
<el-upload action="#" list-type="picture" :auto-upload="false" :limit="1" :on-exceed="handleExceed"
ref="postimage" style="position: fixed; left: 12%;display: flex; align-items: center;"
@change="handleFileChange">
<!-- @success="handleUploadSuccess" -->
<el-icon size="30px">
<Picture />
</el-icon>图片
<br>
</el-upload>
</div>
<el-radio-group v-model="radio" fill="#FE4E96" size="small">
<el-radio-button label="日常动态"></el-radio-button>
<el-radio-button label="家族故事"></el-radio-button>
</el-radio-group>
<div class="button-container">
<el-button type="primary" @click="submitPost" :disabled="!form.content.trim()"
style="position:fixed; right:11% ;background-color:#FE4E96">发布</el-button>
</div>
<div class="button-container">
<el-button type="primary" @click="submitPost" :disabled="!form.content.trim()"
style="position:fixed; right:11% ;background-color:#FE4E96">发布</el-button>
</div>
</el-form> </el-form>
</div> </div>
@ -63,18 +62,18 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import axios from '@/utils/axiosConfig'; import axios from '@/utils/axiosConfig';
import {getUserId} from '@/token/auth'; import {getUserId} from '@/token/auth';
export default defineComponent({ export default defineComponent({
name: 'PostForm', name: 'PostForm',
components: { components: {
}, },
data() { data() {
return { return {
userid: getUserId(), userid:1,
showForm: false, // 控制表单是否显示 showForm: false, // 控制表单是否显示
radio: '日常动态', radio: '日常动态',
form: { form: {
@ -82,25 +81,20 @@
}, },
fileList: [], fileList: [],
imageUrl: '', imageUrl: '',
loadurl:'',
componentHeight: '3%' componentHeight: '3%'
}; };
}, },
methods: { methods: {
async handleFileChange(file) { handleFileChange(file) {
// 当文件被选中时触发 // 当文件被选中时触发
this.file = file; if (file.raw) {
if (file.raw) { // 创建预览图片的URL
// 创建预览图片的URL
this.imageUrl = URL.createObjectURL(file.raw);
if (file.raw.size / 1024 / 1024 > 2) {
this.$message.error('成本有限 只能上传1mb以内的照片')
}
} this.imageUrl = URL.createObjectURL(file.raw);
}, }
handleExceed() { },
handleExceed()
{
this.$message.error("目前仅支持添加一张图片"); this.$message.error("目前仅支持添加一张图片");
}, },
// 切换表单显示/隐藏 // 切换表单显示/隐藏
@ -118,11 +112,10 @@
} }
return isImage; return isImage;
}, },
async handleUploadSuccess(response, file, fileList) { handleUploadSuccess(response, file, fileList) {
this.imageUrl = URL.createObjectURL(file.raw); // 创建临时 URL 以预览图片 this.imageUrl = URL.createObjectURL(file.raw); // 创建临时 URL 以预览图片
this.$message("创建图片"+this.imageUrl);
this.$message("创建图片" + this.imageUrl);
this.fileList = fileList; this.fileList = fileList;
}, },
handleRemove(file, fileList) { handleRemove(file, fileList) {
@ -135,72 +128,49 @@
this.$message.error('内容不能为空'); this.$message.error('内容不能为空');
return; return;
} }
try {
const formData = new FormData();
formData.append('file', this.file.raw);
// 使用 axios 来发送请求
const response = await axios.post('/posts/addphoto', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});
this.loadurl=response;
} catch (error) {
this.$message.error("图片上传失败");
console.log(error);
return;
}
const newPost = { const newPost = {
userid: getUserId(), userid:getUserId(),
username: '用户', username: '用户',
avatarurl: 'https://via.placeholder.com/50', avatarurl: 'https://via.placeholder.com/50',
timestamp: new Date().toLocaleString(), timestamp: new Date().toLocaleString(),
content: this.form.content, content: this.form.content,
imageurl: this.loadurl, imageurl: this.imageUrl,
likecount: 0, likecount: 0,
commentcount: 0, commentcount: 0,
isfamilystory: this.radio === '家族故事' ? true : false, isfamilystory: this.radio === '家族故事' ? true : false,
postid: 999, postid:999,
}; };
try { try {
const response = await axios.post('/posts/addpost', newPost, { const response = await axios.post('/posts/addpost', newPost, {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Accept': 'application/json' 'Accept': 'application/json'
}
});
if (response.startsWith("增加动态成功！")) {
const postid = response.replace("增加动态成功！", '').trim();
this.$message.success("增加动态成功！");
newPost.postid = postid;
newPost.imageurl=this.imageUrl;
this.$emit('post-submitted', newPost);
this.form.content = '';
this.imageUrl = '';
this.fileList = [];
} }
else { });
console.error(response); if(response.startsWith("增加动态成功！"))
} {
const postid = response.replace("增加动态成功！", '').trim();
} catch (error) { this.$message.success("增加动态成功！");
console.error('发布动态失败:', error); newPost.postid=postid;
this.$message.error('发布动态失败，请刷新后再试'); this.$emit('post-submitted', newPost);
}
this.form.content = '';
this.imageUrl = '';
this.fileList = [];
}
else{
console.error(response);
}
} catch (error) {
console.error('发布动态失败:', error);
this.$message.error('发布动态失败，请刷新后再试');
}
@ -210,23 +180,22 @@
</script> </script>
<style scoped> <style scoped>
/* 覆盖选中时的颜色 */ /* 覆盖选中时的颜色 */
.el-radio.is-checked .el-radio__inner { .el-radio.is-checked .el-radio__inner {
border-color: #FE4E96 !important; border-color: #FE4E96 !important;
} }
.el-radio.is-checked .el-radio__label { .el-radio.is-checked .el-radio__label {
color: #FE4E96 !important; color: #FE4E96 !important;
} }
.el-radio .el-radio__inner { .el-radio .el-radio__inner {
border-color: #FE4E96 !important; border-color: #FE4E96 !important;
} }
.el-radio .el-radio__label { .el-radio .el-radio__label {
color: #FE4E96 !important; color: #FE4E96 !important;
} }
.form-container { .form-container {
width: 100%; width: 100%;
display: flex; display: flex;
@ -270,9 +239,8 @@
} }
.animate-card__layer { .animate-card__layer {
height: 16px; height: 5%;
width: 7%; width: 5%;
font-size: 14px;
background-color: #FE4E96; background-color: #FE4E96;
border: none; border: none;
} }

36
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%;" 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)" @mouseover="hoverIndex = index" @mouseleave="hoverIndex = -1" @click="fllowsClick(follow.myfollowid,index)"
:class="{'selected': selectedIndex === 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> <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%"> <el-tag v-if="follow.newpostnum" effect="plain" round style="position: absolute; right:0%">
{{follow.newpostnum}}条新动态 {{follow.newpostnum}}条新动态
@ -76,7 +76,7 @@
</div> </div>
<div class=heatlist style="margin-top:20px;display: flex;flex-direction:row;"> <div class=heatlist style="margin-top:20px;display: flex;flex-direction:row;">
<div <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">
<div class=Hotsearchnum style="background-color:red;">1</div> <div class=Hotsearchnum style="background-color:red;">1</div>
<div class=Hotsearchnum style="background-color:#ff8e51;">2</div> <div class=Hotsearchnum style="background-color:#ff8e51;">2</div>
<div class=Hotsearchnum style="background-color:#ffc74fd2;">3</div> <div class=Hotsearchnum style="background-color:#ffc74fd2;">3</div>
@ -85,16 +85,16 @@
</div> </div>
<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: 30px; display: flex; flex-direction: column; gap: 17px;width: 100%;">
<div <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%; 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)"> 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=" 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> <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" <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:7% ;top:20%;fill:red ">
<path <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" /> 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> </svg>
@ -124,7 +124,7 @@
</div> </div>
<div class="familystorelist" <div class="familystorelist"
style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;"> style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;">
<div v-for="(story, index) in checkfamilystories" :key="index" class="familystore" <div v-for="(story, index) in familystories" :key="index" class="familystore"
style="width: 95%; height: 70px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;cursor: pointer;" style="width: 95%; height: 70px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;cursor: pointer;"
@click="checkbypostid(story.postid)"> @click="checkbypostid(story.postid)">
<img class="touxiang" src="../../assets/pictures/touxiang.png" /> <img class="touxiang" src="../../assets/pictures/touxiang.png" />
@ -163,8 +163,6 @@
page: 1, page: 1,
userid: 1, userid: 1,
totalPages: 1, totalPages: 1,
familystoriespage:0,
checkfamilystories:[],
posts: [ posts: [
{ {
@ -254,13 +252,6 @@
}, },
submitPost(newpost) {//发布帖子后，本地显示帖子
this.checkPosts.unshift(newpost);
},
async load() {//加载帖子函数 async load() {//加载帖子函数
if (this.isloading) { if (this.isloading) {
try { try {
@ -274,7 +265,8 @@
const filteredPostsList = response.records; const filteredPostsList = response.records;
this.$message("动态加载中page" + this.page);
this.checkPosts.push(...filteredPostsList); this.checkPosts.push(...filteredPostsList);
this.page = this.page + 1; this.page = this.page + 1;
} catch (error) { } catch (error) {
@ -343,7 +335,7 @@
try { try {
const response = await axios.get(`/posts/topfamilystory`); const response = await axios.get(`/posts/topfamilystory`);
this.familystories.push(...response); this.familystories.push(...response);
this.checkfamilystories.push(...response.slice(0, 4));
} catch (error) { } catch (error) {
this.$message.error("热门家族故事获取失败"); this.$message.error("热门家族故事获取失败");
@ -384,7 +376,7 @@
}, },
async toggleCommentsVisibility(index, postid) {//展开评论以及获取评论列表 async toggleCommentsVisibility(index, postid) {//展开评论以及获取评论列表
this.$message("评论区展开" + index);
try { try {
const comments = await axios.get(`/comments/postid=${postid}`); const comments = await axios.get(`/comments/postid=${postid}`);
@ -461,13 +453,7 @@
}, },
refresh() {//热门家族故事刷新换一批按钮 refresh() {//热门家族故事刷新换一批按钮
// 点击后触发的刷新动作 // 点击后触发的刷新动作
console.log('Refreshing...');
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.triggerAnimation(); this.triggerAnimation();
}, },

1
src/views/space/space.vue
Unescape View File

@ -112,6 +112,7 @@
name:'spaceIndex', name:'spaceIndex',
data() { data() {
return { return {
userId: 1,
myId: 0, myId: 0,
userlikelist:[], userlikelist:[],
// myfollows: [], // myfollows: [],

Write Preview
Loading…
Cancel
Save