feat:增加帖子评论及回复

src/api/api.js

@@ -56,7 +56,7 @@ export const VOTE_DETAIL2 = `/voteSubmit/queryVoteTaskDetailById post`
 export const VOTE_DETAIL_SUBMIT = `/voteSubmit/vote/commit post`
 
 export const COMMENT_ADD = '/comment/add post'
-export const COMMENT_PRAISE = '/comment/praise post'
+export const COMMENT_PRAISE = '/comment/praise'
 export const COMMENT_COLLECTION = '/comment/collection post'
 
 export const ASSESSMENT_SUBMIT_QUERY = assessmentId => `/assessmentSubmit/queryAssessmentSubmitDetailById?assessmentSubmitId=${assessmentId} post`

src/views/discussdetail/DiscussDetail.vue

@@ -79,7 +79,7 @@
             <span
               class="iconfont icon-shoucang"
               :style="{
-                color: disDetail.collected ? 'red' : '#b3bdc4',
+                color: disDetail.collectionInfo ? 'red' : '#b3bdc4',
                 marginLeft: '19px',
               }"
             ></span>
@@ -143,9 +143,9 @@
           <div v-for="(row, i) in commontList" :key="i">
             <div class="header">
               <div class="avator"></div>
-              <div class="id">{{ row.userName }}</div>
-              <div class="showCareer">(显示事业)</div>
-              <div class="idThink">理性思考，崇尚科学</div>
+              <div class="id">{{ row.createName }}</div>
+              <div class="showCareer">{{row.studentJobName}}</div>
+              <div class="idThink"></div>
             </div>
             <div class="discuss clearfix">
               <div class="discussmain clearfix">
@@ -153,6 +153,11 @@
                   {{ row.content }}
                 </div>
               </div>
+              <div style="display:flex;margin-top: 12px;margin-bottom: 12px;">
+                <div v-if="row.img" v-for="(rowimg, index) in row.img.split(',')" :key="index" style="width:55px;height:55px;margin-right: 12px;">
+                  <img class="image" style="width:55px;height:55px;border-radius: 4px;" :src="rowimg"  />
+                </div>
+              </div>
               <div class="intime">{{ row.ctime }}</div>
               <div class="likeYou">
                 <div
@@ -170,61 +175,74 @@
                   style="display: flex;cursor: pointer;align-items: baseline;margin-left: 19px;">
                   <span
                     class="iconfont icon-dianzan"
-                    :style="{ color: row.praised ? 'red' : '#b3bdc4' }"
-                  ></span>
+                    :style="{ color: row.praised ? 'red' : '#b3bdc4' }"></span>
                   <div class="count">{{ row.praiseNum || 0 }}</div>
                 </div>
               </div>
-              <div v-for="(replay, j) in row.children" :key="j">
-                <div class="reply">
-                  <div class="sameava avaone"></div>
-                  <div class="sameuser">{{ replay.userName }}</div>
-                  <div class="centerreply">回复</div>
-                  <div class="sameava avatwo"></div>
-                  <div class="sameuser">{{ row.userName }}</div>
-                  <div class="replytime">{{ replay.ctime }}</div>
-                </div>
-                <div class="allreplyimg">
-                  <div class="singleimg"></div>
-                </div>
-                <div class="mainreply">
-                  <div class="replydetail">
-                    {{ replay.content }}
+              <!-- 评论下的回复  -->
+              <div v-if="row.children.length!==0" :style="{height:spreadReply==i ? 'auto' : 200 +'px',overflow:'hidden',position: 'relative'}">
+                <div v-for="(replay, j) in row.children" :key="j">
+                  <div class="reply">
+                    <div class="sameava avaone"></div>
+                    <div class="sameuser">{{ replay.studentName }}</div>
+                    <div class="centerreply">回复</div>
+                    <div class="sameava avatwo"></div>
+                    <div class="sameuser">{{ replay.targetStudentName }}</div>
+                    <div class="replytime">{{ replay.createTime }}</div>
                   </div>
-                  <!-- <div class="talk"></div> -->
-                </div>
-                <div class="likeYou">
-                  <div
-                    @click="commentComment(replay)"
-                    style="
-                      display: flex;
-                      cursor: pointer;
-                      align-items: baseline;
-                    "
-                  >
-                    <span
-                      class="iconfont icon-pinglun"
-                      :style="{ color: '#b3bdc4' }"
-                    ></span>
-                    <!--                    <div class="count"> {{ replay.commentNum }}</div>-->
+                  <div style="display:flex;margin-top: 12px;margin-bottom: 12px;">
+                    <div v-if="row.img" v-for="(rowimg, index) in row.img.split(',')" :key="index" style="width:55px;height:55px;margin-right: 12px;">
+                      <img class="image" style="width:55px;height:55px;border-radius: 4px;" :src="rowimg"  />
+                    </div>
                   </div>
-                  <div
-                    @click="commentLike(replay)"
-                    style="
-                      display: flex;
-                      cursor: pointer;
-                      align-items: baseline;
-                      margin-left: 19px;">
-                    <span
-                      class="iconfont icon-dianzan"
-                      :style="{ color: replay.praised ? 'red' : '#b3bdc4' }"
-                    ></span>
-                    <div class="count">{{ replay.praiseNum || 0 }}</div>
+                  <div class="mainreply">
+                    <div class="replydetail">
+                      {{ replay.content }}
+                    </div>
+                    <!-- <div class="talk"></div> -->
+                  </div>
+                  <div class="likeYou">
+                    <div
+                      @click="commentComment(replay)"
+                      style="display: flex;cursor: pointer;align-items: baseline;">
+                      <span
+                        class="iconfont icon-pinglun"
+                        :style="{ color: '#b3bdc4' }"></span>
+                      <!--                    <div class="count"> {{ replay.commentNum }}</div>-->
+                    </div>
+                    <div
+                      style="display: flex; cursor: pointer; align-items: baseline;margin-left: 19px;"
+                      @click="commentLike(replay)">
+                      <span
+                        class="iconfont icon-dianzan"
+                        :style="{ color: replay.praised ? 'red' : '#b3bdc4' }"></span>
+                      <div class="count">{{ replay.praiseNum || 0 }}</div>
+                    </div>
                   </div>
                 </div>
+                <!-- 查看更多 -->
+                <div style="display: flex;justify-content: center;align-items: center;position:absolute;bottom:5px;cursor: pointer;width:100%">
+                    <span 
+                      @click="lookMore(i)"
+                      style="font-size: 14px;color: #2478ff;">{{ i==spreadReply ? '收起' : '查看更多' }}</span>
+                  </div>
               </div>
             </div>
           </div>
+
+          <!-- 回复分页 -->
+          <div style="display:flex;justify-content:center;align-items:center;margin-top:36px;margin-bottom:36px;">
+            <!-- 分页 -->
+            <el-pagination
+              v-model:current-page="hfPage.currentPage"
+              :page-size="hfPage.pageSize"
+              :small="small"
+              layout="prev, pager, next, jumper"
+              :total="hfPage.total"
+              @current-change="handleCurrentChange"
+            />
+          </div>
+
           <div
             class="discuss clearfix"
             v-if="commontList && commontList.length">
@@ -240,7 +258,7 @@
               <div class="words">{{ replayComment.content.length }}/100</div>
               <div class="upload">
                 <div style="display: flex">
-                  <div class="allimg" v-for="(img, i) in fileList" :key="i">
+                  <div class="allimg" v-for="(img, i) in fileListCommentRelpay" :key="i">
                     <div
                       class="imgone"
                       :style="{
@@ -252,7 +270,7 @@
                   </div>
                 </div>
                 <datagrid class="uploadAnd">
-                  <UploadPostImg v-model="fileList" @fileUploadValue="uploadBack">
+                  <UploadPostImg v-model="fileListCommentRelpay" @fileUploadValue="uploadReplyBack">
                     <button class="btnone clearfix">
                       <img
                         class="image"
@@ -269,6 +287,8 @@
             </div>
           </div>
         </div>
+
+        
       </div>
     </div>
     <!-- 详细内容 -->
@@ -297,9 +317,11 @@ import {
   PostCollection,
 
   GetComments,
-  PostDetails
+  PostDetails,
+  GetMoreComments
 } from "@/api/api";
 import UploadPostImg from "@/components/img/UploadPostImg.vue";
+import { height } from "dom7";
 
 const router = useRouter();
 const refInput =ref()
@@ -314,10 +336,10 @@ const {
   query: { id, discussSubmitId, type, pName, sName, postID, postName },
 } = useRoute();
 
-const { data: commontList, fetchData: commonFetch } = usePage(COMMENT_LIST, {
-  id,
-  type: 1,
-});
+// const { data: commontList, fetchData: commonFetch } = usePage(COMMENT_LIST, {
+//   id,
+//   type: 1,
+// });
 
 // const { data: disDetail } = useRequest(DISCUSS_DETAIL, { id, type });
 
@@ -353,30 +375,71 @@ const handleCreated = (editor) => {
 
 
 const disDetail = ref({});
+const commontList = ref([]);
+const spreadReply = ref(-1);
 
-useRequest(PostDetails, {id:postID}, (e)=>{
-  console.log(e)
-  disDetail.value = e.data
-  console.log('查询帖子下的评论参数',{
-    statementId:e.data.discussId,
-    pageNo:10,
-    pageSize:1
-  })
-  // 获取帖子下的评论
-  request(GetComments,{
-    statementId:e.data.id,
-    pageNo:10,
-    pageSize:1
-  }).then(res=>{
-    console.log('我是获取当前帖子的评论', res)
-  }).catch(err=>{
-    console.log(err)
-  })
+// 查看更多
+function lookMore(i) {
+  i == spreadReply.value  ? spreadReply.value  = -1 : spreadReply.value  = i;
+}
 
+// 清空回复输入框
+const clearText = () => {
+  disComment.value.content = "";
+  fileListComment.value = [];
+  fileListCommentRelpay.value = []; 
+  replayComment.value.content = "";
+}
+
+const hfPage = ref({
+  currentPage: 1,
+  pageNo: 1,
+  pageSize: 10,
+  total: 0
 })
 
+// 回复分页
+function handleCurrentChange(e, k) {
+  console.log('分页打印', e, k)
+  hfPage.value.currentPage = e;
+  hfPage.value.pageNo = e;
+  getData();
+}
+
+// 清空评论回复输入框
+const clearApplyText = () => {
+  
+}
+
+// 获取数据
+const getData = () => {
+  useRequest(PostDetails, {id:postID}, (e)=>{
+    console.log(e)
+    disDetail.value = e.data
+    console.log('查询帖子下的评论参数',{
+      statementId:e.data.discussId,
+      pageNo:10,
+      pageSize:1
+    })
+    // 获取帖子下的评论
+    request(COMMENT_LIST, {
+      id: e.data.id,
+      type: 1,
+      pageNo:hfPage.value.currentPage,
+      pageSize:10
+    }).then(res=>{
+      console.log('我是获取当前帖子的评论', res)
+      commontList.value = res.data.records;
+      hfPage.value.total = Number(res.data.total);
+      clearText()
+    }).catch(err=>{
+      console.log(err)
+    })
+  })
+}
+
+getData()
 
-const fileList = ref([]);
 const commentSubmitFileList = ref([]);
 
 const disComment = ref({
@@ -388,79 +451,6 @@ const replayComment = ref({
   pid: "",
 });
 
-function removeImg(i) {
-  fileList.value.splice(i, 1);
-}
-
-function removeCommentImg(i) {
-  fileListComment.value.splice(i, 1);
-}
-
-function like() {
-  disDetail.value.praised
-    ? (disDetail.value.praiseNum -= 1)
-    : (disDetail.value.praiseNum += 1);
-  disDetail.value.praised = !disDetail.value.praised;
-  request(COMMENT_PRAISE, { targetId: disDetail.value.discussId, type: 5 });
-}
-
-function collection() {
-  disDetail.value.collected
-    ? (disDetail.value.collectionNum -= 1)
-    : (disDetail.value.collectionNum += 1);
-  disDetail.value.collected = !disDetail.value.collected;
-  request(COMMENT_COLLECTION, { targetId: disDetail.value.discussId, type: 6 });
-}
-
-function commentLike(obj) {
-  obj.praised ? (obj.praiseNum -= 1) : (obj.praiseNum += 1);
-  obj.praised = !obj.praised;
-  request(COMMENT_PRAISE, { targetId: obj.id, type: 5 });
-}
-
-function commentComment(obj) {
-  replayComment.value.placeholder = "@ " + obj.userName;
-  replayComment.value.pid = obj.id;
-}
-
-function submitComment() {
-  console.log(disDetail.value)
-  console.log('帖子评论参数',{
-    targetId: disDetail.value.id,
-    content: disComment.value.content,
-    type: 1,
-  })
-  request(COMMENT_ADD, {
-    targetId: disDetail.value.id,
-    content: disComment.value.content,
-    type: 1,
-  }).then((res) => {
-    console.log(res)
-    commonFetch();
-  }).catch(err=>{
-    console.log(err)
-  });
-}
-
-function submitReplayComment() {
-  console.log('帖子回复评论参数',{
-    targetId: disDetail.value.discussId,
-    content: disComment.value.content,
-    type: 2,
-  })
-  request(COMMENT_ADD, {
-    targetId: disDetail.value.discussId,
-    content: replayComment.value.content,
-    type: 2,
-    pid: replayComment.value.pid,
-  }).then((res) => {
-    console.log(res)
-    commonFetch();
-  }).catch(err=>{
-    console.log(err)
-  });
-}
-
 // 评论图片展示数组
 const fileListComment = ref([]);
 // 回复图片展示数组
@@ -471,6 +461,108 @@ const uploadBack = (e) => {
   console.log('--------->', e)
   fileListComment.value.push(e)
 }
+
+const uploadReplyBack = (e) => {
+  console.log('--------->', e)
+  fileListCommentRelpay.value.push(e)
+}
+
+function removeImg(i) {
+  fileListCommentRelpay.value.splice(i, 1);
+}
+
+function removeCommentImg(i) {
+  fileListComment.value.splice(i, 1);
+}
+
+function like() {
+  console.log(disDetail.value)
+  disDetail.value.praised
+    ? (disDetail.value.praiseNum = Number(disDetail.value.praiseNum) - 1)
+    : (disDetail.value.praiseNum = Number(disDetail.value.praiseNum) + 1);
+  disDetail.value.praised = !disDetail.value.praised;
+  request(COMMENT_PRAISE, { targetId: disDetail.value.id, type: 1 });
+}
+
+function collection() {
+  disDetail.value.collectionInfo
+    ? (disDetail.value.collectionNum = Number(disDetail.value.collectionNum) - 1)
+    : (disDetail.value.collectionNum = Number(disDetail.value.collectionNum) + 1);
+  disDetail.value.collectionInfo = !disDetail.value.collectionInfo;
+  request(COMMENT_PRAISE, { targetId: disDetail.value.id, type: 2 });
+}
+
+function commentLike(obj) {
+  obj.praised ? (obj.praiseNum = Number(obj.praiseNum) - 1) : (obj.praiseNum =  Number(obj.praiseNum) + 1);
+  obj.praised = !obj.praised;
+  request(COMMENT_PRAISE, { targetId: obj.id, type: 1 });
+}
+
+function commentComment(obj) {
+  console.log(obj)
+  replayComment.value.placeholder = "@ " + obj.createName;
+  replayComment.value.pid = obj.id;
+}
+
+// 提交评论
+function submitComment() {
+  console.log(disDetail.value, fileListComment.value)
+  let imgFileUrl = []
+  for(let i=0;i<fileListComment.value.length;i++){
+    imgFileUrl.push(fileListComment.value[i].url)
+  }
+  console.table('帖子评论参数',{
+    id: disDetail.value.id,
+    targetId: disDetail.value.id,
+    content: disComment.value.content,
+    type: 1,
+    img: imgFileUrl.length!==0 ? imgFileUrl.toString() : ''
+  })
+  
+  request(COMMENT_ADD, {
+    targetId: disDetail.value.id,
+    content: disComment.value.content,
+    type: 1,
+    img: imgFileUrl.length!==0 ? imgFileUrl.toString() : ''
+  }).then((res) => {
+    console.log(res)
+    getData();
+  }).catch(err=>{
+    console.log(err)
+  });
+}
+
+// 回复评论
+function submitReplayComment() {
+  let imgFileUrl = []
+  for(let i=0;i<fileListCommentRelpay.value.length;i++){
+    imgFileUrl.push(fileListCommentRelpay.value[i].url)
+  }
+
+  console.table('帖子回复评论参数',{
+    id: disDetail.value.id,
+    targetId: disDetail.value.id,
+    content: replayComment.value.content,
+    type: 1,
+    pid: replayComment.value.pid,
+    img: imgFileUrl.length!==0 ? imgFileUrl.toString() : ''
+  })
+  
+  request(COMMENT_ADD, {
+    targetId: disDetail.value.id,
+    content: replayComment.value.content,
+    type: 1,
+    pid: replayComment.value.pid,
+    img: imgFileUrl.length!==0 ? imgFileUrl.toString() : ''
+  }).then((res) => {
+    console.log(res)
+    getData();
+  }).catch(err=>{
+    console.log(err)
+  });
+}
+
+
 </script>
 
 <style lang="scss">