From 1998d41c506793bbad19577f5d548b35efc9a390 Mon Sep 17 00:00:00 2001
From: QMZ <1164250597@qq.com>
Date: Sat, 21 Dec 2024 23:38:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BF=83=E7=A2=8E=E4=B9=8B=E6=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/community/community.css |  29 +---
 src/views/community/PostCard.vue       | 172 +++++++++++++++++--
 src/views/community/Postform.vue       | 218 ++++++++++++++-----------
 src/views/community/trends.vue         |  36 ++--
 4 files changed, 315 insertions(+), 140 deletions(-)

diff --git a/src/assets/css/community/community.css b/src/assets/css/community/community.css
index 9cb0a82d..1c08a2b7 100644
--- a/src/assets/css/community/community.css
+++ b/src/assets/css/community/community.css
@@ -1,34 +1,11 @@
 
-/* 设置进入和离开的过渡效果 */
-
 .post-list .fade-leave-active {
   transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
 }
 
-.post-list .fade-enter-active {
-  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
-}
-
-/* 元素进入时，缩放并渐变 */
-.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); /* 离开时缩小 */
+.post-list .fade-leave-to /* 离开完成后状态 */
+{ 
+  transform: translateX(100%) scale(0.5); /* 离开时从右边滑出并缩小 */
 }
 
 
diff --git a/src/views/community/PostCard.vue b/src/views/community/PostCard.vue
index 7846c84b..0432b027 100644
--- a/src/views/community/PostCard.vue
+++ b/src/views/community/PostCard.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="post-card">
     <div class="post-header">
-      <img :src="avatarUrl" alt="avatar" class="avatar" />
+      <img :src="localAvatarUrl" alt="avatar" class="avatar"  @click="goToUserProfile" />
       <div class="user-info">
-        <strong>{{ username }}</strong>
+        <strong>{{ localUsername }}</strong>
 
-        <button class="followsbutto followsbuttonani" @click="followsbutton" :class="{ active: followsbuttonActive }">
+        <button class="followsbutto followsbuttonani" @click="followsbutton" :class="{ active: followsbuttonActive }" >
           <div v-if="followsbuttonActive">
             你关注了他
           </div>
@@ -17,9 +17,22 @@
 
         <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 v-if="isfamilystory" class="ribbon-8">
         <span>
           家族故事
@@ -51,7 +64,8 @@
     <transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
       <div v-if="isCommentsVisible" class="comments-section">
         <div v-for="(comment, index) in comments" :key="index" class="comment">
-          <p><strong>{{ comment.username}}:</strong> {{ comment.content }}</p>
+            <p><strong>{{ comment.userid}}:</strong> {{ comment.content }} <button v-if="comment.userid==this.userid" style="color:#FE4E96;"
+              @click="deletecomment(comment.commentid)">删除</button> </p>
         </div>
 
         <!-- 发布评论 -->
@@ -63,7 +77,7 @@
 
 <script>
   import CommentInput from './CommentInput.vue';
-  import axios from 'axios';
+  import axios from '@/utils/axiosConfig';
 
   export default {
 
@@ -102,6 +116,8 @@
         this.followsbuttonActive = true;
       }
 
+     
+
     },
 
 
@@ -112,14 +128,76 @@
     },
     data() {
       return {
+        showModal: false,
         isActive: false,
         isLiked: false,
         isClicked: false,
-        followsbuttonActive: false
-
+        followsbuttonActive: false,
+        localUsername: this.username,  // 将传入的 props 复制到 data 中
+        localAvatarUrl: this.avatarUrl // 将传入的 props 复制到 data 中
       };
     },
     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() {//关注按钮
         // 设置为 active，触发动画
@@ -245,6 +323,80 @@
 </script>
 
 <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 {
     max-width: 600px;
     max-height: 600px;
@@ -348,12 +500,12 @@
   }
 
   .post-card {
-    opacity: 0.95;
+    opacity: 0.9;
     margin: 20px;
     border: 1px solid #ddd;
     padding: 15px;
-    border-radius: 8px;
-    background-color: #fff;
+    border-radius: 15px;
+    background-color: #FFFBFB;
   }
 
   .post-header {
diff --git a/src/views/community/Postform.vue b/src/views/community/Postform.vue
index 5613265d..070a77ee 100644
--- a/src/views/community/Postform.vue
+++ b/src/views/community/Postform.vue
@@ -22,36 +22,37 @@
           <el-input v-model="form.content" type="textarea" placeholder="有什么新鲜事..." rows=4 />
         </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>
     </div>
 
@@ -62,18 +63,18 @@
   import { defineComponent } from 'vue';
   import axios from '@/utils/axiosConfig';
   import {getUserId} from '@/token/auth';
-  
 
-  
+
+
   export default defineComponent({
     name: 'PostForm',
     components: {
-  
-      
+
+
     },
     data() {
       return {
-        userid:1,
+        userid: getUserId(),
         showForm: false,  // 控制表单是否显示
         radio: '日常动态',
         form: {
@@ -81,20 +82,25 @@
         },
         fileList: [],
         imageUrl: '',
+        loadurl:'',
         componentHeight: '3%'
       };
     },
     methods: {
-      handleFileChange(file) {
-      // 当文件被选中时触发
-      if (file.raw) {
-        // 创建预览图片的URL
+      async handleFileChange(file) {
+        // 当文件被选中时触发
+        this.file = file;
+        if (file.raw) {
+          // 创建预览图片的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("目前仅支持添加一张图片");
       },
       // 切换表单显示/隐藏
@@ -112,10 +118,11 @@
         }
         return isImage;
       },
-      handleUploadSuccess(response, file, fileList) {
-    
+      async handleUploadSuccess(response, file, fileList) {
+
         this.imageUrl = URL.createObjectURL(file.raw); // 创建临时 URL 以预览图片
-        this.$message("创建图片"+this.imageUrl);
+
+        this.$message("创建图片" + this.imageUrl);
         this.fileList = fileList;
       },
       handleRemove(file, fileList) {
@@ -128,49 +135,72 @@
           this.$message.error('内容不能为空');
           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 = {
-          userid:getUserId(),
+          userid: getUserId(),
           username: '用户',
           avatarurl: 'https://via.placeholder.com/50',
           timestamp: new Date().toLocaleString(),
           content: this.form.content,
-          imageurl: this.imageUrl,
+          imageurl: this.loadurl,
           likecount: 0,
           commentcount: 0,
           isfamilystory: this.radio === '家族故事' ? true : false,
-          postid:999,
+          postid: 999,
         };
+
        
-     
+        
+
+
 
         try {
-        const response = await axios.post('/posts/addpost', newPost, {
-          headers: {
-            'Content-Type': 'application/json',
-            'Accept': 'application/json'
+          const response = await axios.post('/posts/addpost', newPost, {
+            headers: {
+              'Content-Type': '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();
-          this.$message.success("增加动态成功！");
-          newPost.postid=postid;
-          this.$emit('post-submitted', newPost);
-          
-        this.form.content = '';
-        this.imageUrl = '';
-        this.fileList = [];
-  
-      }
-      else{
-        console.error(response);
-      }
-        
-      } catch (error) {
-        console.error('发布动态失败:', error);
-        this.$message.error('发布动态失败，请刷新后再试');
-      }
+
+        } catch (error) {
+          console.error('发布动态失败:', error);
+          this.$message.error('发布动态失败，请刷新后再试');
+        }
 
 
 
@@ -180,22 +210,23 @@
 </script>
 
 <style scoped>
-/* 覆盖选中时的颜色 */
-.el-radio.is-checked .el-radio__inner {
-  border-color: #FE4E96 !important;
-}
-
-.el-radio.is-checked .el-radio__label {
-  color: #FE4E96 !important;
-}
-
-.el-radio .el-radio__inner {
-  border-color: #FE4E96 !important;
-}
-
-.el-radio .el-radio__label {
-  color: #FE4E96 !important;
-}
+  /* 覆盖选中时的颜色 */
+  .el-radio.is-checked .el-radio__inner {
+    border-color: #FE4E96 !important;
+  }
+
+  .el-radio.is-checked .el-radio__label {
+    color: #FE4E96 !important;
+  }
+
+  .el-radio .el-radio__inner {
+    border-color: #FE4E96 !important;
+  }
+
+  .el-radio .el-radio__label {
+    color: #FE4E96 !important;
+  }
+
   .form-container {
     width: 100%;
     display: flex;
@@ -239,8 +270,9 @@
   }
 
   .animate-card__layer {
-    height: 5%;
-    width: 5%;
+     height: 16px;
+    width: 7%;
+    font-size: 14px;
     background-color: #FE4E96;
     border: none;
   }
diff --git a/src/views/community/trends.vue b/src/views/community/trends.vue
index d975fa19..a8fba1f2 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">
+        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: 30px; 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%; 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:7% ;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>
@@ -124,7 +124,7 @@
       </div>
       <div class="familystorelist"
         style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;">
-        <div v-for="(story, index) in familystories" :key="index" class="familystore"
+        <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" />
@@ -163,6 +163,8 @@
         page: 1,
         userid: 1,
         totalPages: 1,
+        familystoriespage:0,
+        checkfamilystories:[],
         posts: [
           {
 
@@ -252,6 +254,13 @@
 
 
       },
+
+      submitPost(newpost) {//发布帖子后，本地显示帖子
+
+        this.checkPosts.unshift(newpost); 
+
+      },
+
       async load() {//加载帖子函数
         if (this.isloading) {
           try {
@@ -265,8 +274,7 @@
             const filteredPostsList = response.records;
 
 
-            this.$message("动态加载中page" + this.page);
-
+           
             this.checkPosts.push(...filteredPostsList);
             this.page = this.page + 1;
           } catch (error) {
@@ -335,7 +343,7 @@
         try {
           const response = await axios.get(`/posts/topfamilystory`);
           this.familystories.push(...response);
-
+          this.checkfamilystories.push(...response.slice(0, 4));
 
         } catch (error) {
           this.$message.error("热门家族故事获取失败");
@@ -376,7 +384,7 @@
       },
 
       async toggleCommentsVisibility(index, postid) {//展开评论以及获取评论列表
-        this.$message("评论区展开" + index);
+      
         try {
           const comments = await axios.get(`/comments/postid=${postid}`);
 
@@ -453,7 +461,13 @@
       },
       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();
       },