feat:修改面授评论

src/components/CommentReply.vue

@@ -0,0 +1,770 @@
+<template>
+  <div class="CommentReply">
+    <div class="reshead">
+      <div
+        style="
+          opacity: relative;
+          width: 100%;
+          height: 50px;
+          display: flex;
+          justify-content: center;
+        "
+      >
+        <div
+          class="reply"
+          :style="{
+            opacity: reply1Show ? 0 : 1,
+            zIndex: reply1Show ? 0 : 100,
+          }"
+        >
+          <UploadPostImg
+            :max="3"
+            v-model="commentSubmitFileList"
+            @fileUploadValue="uploadBack"
+          >
+            <img
+              style="width: 28px; height: 28px; margin-right: 5px"
+              src="@/assets/image/uploadImg2.png"
+            />
+          </UploadPostImg>
+          <el-input
+            type="text"
+            v-model="disComment.content"
+            resize="none"
+            maxlength="200"
+            placeholder="写评论~"
+            style="width: calc(100% - 40px)"
+          />
+        </div>
+
+        <div
+          class="reply"
+          :style="{
+            opacity: reply1Show ? 1 : 0,
+            zIndex: reply1Show ? 100 : 0,
+          }"
+        >
+          <el-input
+            type="text"
+            v-model="replayComment.content"
+            resize="none"
+            maxlength="200"
+            :placeholder="replayComment.placeholder"
+            style="width: calc(100% - 40px)"
+            class="replyInp"
+          />
+          <UploadPostImg
+            :max="3"
+            v-model="fileListCommentRelpay"
+            @fileUploadValue="uploadReplyBack"
+          >
+            <img
+              style="width: 28px; height: 28px; margin-left: 5px"
+              src="@/assets/image/uploadImg2.png"
+            />
+          </UploadPostImg>
+        </div>
+      </div>
+
+      <div class="imgbtns">
+        <div style="display: flex">
+          <div
+            v-for="(v, i) in reply1Show
+              ? fileListCommentRelpay
+              : fileListComment"
+            :key="i"
+            style="position: relative"
+          >
+            <img
+              :src="v.url"
+              style="width: 66px; height: 66px; margin-left: 5px"
+            />
+            <div
+              class="cha"
+              @click="reply1Show ? removeImg(i) : removeCommentImg(i)"
+            ></div>
+          </div>
+        </div>
+        <div class="btns">
+          <div class="btns1" @click="reply1Blur">取消</div>
+          <div class="btns2" @click="send">发布</div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="linee"></div> -->
+
+    <div class="restorebox" v-for="(item, index) in commontList" :key="index">
+      <div class="restoremani">
+        <div class="rescon clearfix">
+          <div class="head">
+            <div>
+              <img class="headavator" :src="item.studentAvatar" />
+            </div>
+            <div class="namehead">
+              {{ item.createName }}
+            </div>
+          </div>
+          <div class="inner">
+            <div class="recon">{{ item.content }}</div>
+            <div
+              style="display: flex; margin-top: 6px; margin-bottom: 6px"
+              v-if="item.img"
+            >
+              <div
+                v-for="(rowimg, i) in item.img.split(',')"
+                :key="i"
+                style="width: 55px; height: 55px; margin-right: 5px"
+              >
+                <img
+                  class="image"
+                  style="width: 55px; height: 55px; border-radius: 4px"
+                  :src="rowimg"
+                />
+              </div>
+            </div>
+            <div class="botto">
+              <div class="time">{{ item.createTime }}</div>
+              <div class="re" @click="commentComment(item)">回复</div>
+              <div class="right" @click="commentLike(item)">
+                <div class="good">
+                  <img
+                    v-if="item.praised"
+                    src="../../assets/image/discuss/elsedianzan1.png"
+                  />
+                  <img
+                    v-else
+                    src="../../assets/image/discuss/elsedianzan.png"
+                  />
+                </div>
+                <div class="gocount">{{ item.praiseNum || 0 }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="newre" v-if="item.children && item.children.length !== 0">
+          <div class="tri"></div>
+          <div class="reccon">
+            <div class="rec clearfix">
+              <div
+                class="it"
+                v-for="(itemc, key) in item.children"
+                :key="key"
+                :style="{
+                  display:
+                    spreadReply !== index && key == 0
+                      ? 'block'
+                      : spreadReply == index
+                      ? 'block'
+                      : 'none',
+                }"
+              >
+                <div class="ava">
+                  <img class="avainner" :src="itemc.studentAvatar" />
+                  <div class="rename">{{ itemc.studentName }}</div>
+                </div>
+                <div class="redetail">
+                  <div class="rein">{{ itemc.content }}</div>
+                  <div
+                    style="display: flex; margin-top: 6px; margin-bottom: 6px"
+                    v-if="itemc.img"
+                  >
+                    <div
+                      v-for="(rowimg, i) in itemc.img.split(',')"
+                      :key="i"
+                      style="width: 55px; height: 55px; margin-right: 5px"
+                    >
+                      <img
+                        class="image"
+                        style="width: 55px; height: 55px; border-radius: 4px"
+                        :src="rowimg"
+                      />
+                    </div>
+                  </div>
+                  <div class="detre">
+                    <div class="day">{{ itemc.createTime }}</div>
+                    <!-- <div class="huifu" @click="commentComment(itemc)">
+                        回复
+                      </div> -->
+                    <div class="good" @click="commentLike(itemc)">
+                      <img
+                        v-if="itemc.praised"
+                        class="gimg"
+                        src="../../assets/image/discuss/elsedianzan1.png"
+                      />
+                      <img
+                        v-else
+                        class="gimg"
+                        src="../../assets/image/discuss/elsedianzan.png"
+                      />
+                      <div class="gcou">
+                        {{ itemc.praiseNum || 0 }}
+                      </div>
+                    </div>
+                  </div>
+                  <!-- <div class="line"></div> -->
+                  <!-- <div
+                      :class="index === newrestore.length - 1 ? null : 'line'"
+                    ></div> -->
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 查看更多 -->
+          <div
+            style="
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              cursor: pointer;
+              width: 100%;
+              margin-top: 10px;
+            "
+            v-if="item.children && item.children.length > 1"
+          >
+            <span
+              @click="lookMore(index)"
+              style="font-size: 14px; color: #2478ff"
+              >{{
+                index == spreadReply
+                  ? "收起"
+                  : "查看全部" + item.children.length + "条评论"
+              }}</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="btncon clearfix">
+      <button
+        class="btnn"
+        v-if="!noMorePost && hfPage.total > 10"
+        @click="handleCurrentChange"
+      >
+        点击加载更多~
+      </button>
+      <button class="btnn" v-else style="color: rgba(95, 109, 117, 1)">
+        已经到底啦~
+      </button>
+    </div>
+  </div>
+</template>
+<script setup>
+import { reactive, ref, computed, defineProps } from "vue";
+import ReturnHead from "@/components/ReturnHead.vue";
+import px from "@/assets/image/discuss/px.jpg";
+import { request, useRequest } from "@/api/request";
+import {
+  PostDetails,
+  COMMENT_LIST,
+  DISCUSS_LIST,
+  COMMENT_PRAISE,
+  COMMENT_ADD,
+} from "@/api/api";
+import { useRoute, useRouter } from "vue-router/dist/vue-router";
+import UploadPostImg from "@/components/img/UploadPostImg.vue";
+import { ElMessage } from "element-plus";
+import store from "@/store";
+const props = defineProps({
+  type: {
+    type: Number,
+    default: null,
+  },
+  faceId: {
+    type: Number,
+    default: null,
+  },
+});
+const userInfo = computed(() => store.state.userInfo);
+
+const disDetail = ref({});
+const commontList = ref([]);
+const spreadReply = ref(-1);
+const hfPage = ref({
+  currentPage: 1,
+  pageNo: 1,
+  pageSize: 10,
+  total: 0,
+});
+
+const noMorePost = ref(false);
+// 获取数据
+const getData = () => {
+  // 获取帖子下的评论
+  request(COMMENT_LIST, {
+    id: props.faceId,
+    type: 3,
+    pageNo: hfPage.value.currentPage,
+    pageSize: 10,
+  })
+    .then((res) => {
+      console.log("我是获取当前帖子的评论", res);
+      commontList.value = commontList.value.concat(res.data.records);
+      hfPage.value.total = Number(res.data.total);
+      clearText();
+      if (res.data.records.length === 0 || res.data.records.length < 10) {
+        noMorePost.value = true;
+      }
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+getData();
+
+// 查看更多-展开回复列表
+function lookMore(i) {
+  i == spreadReply.value ? (spreadReply.value = -1) : (spreadReply.value = i);
+}
+// 清空回复及评论输入框
+const clearText = () => {
+  disComment.value.content = "";
+  fileListComment.value = [];
+  fileListCommentRelpay.value = [];
+  replayComment.value.content = "";
+};
+
+// 评论分页
+function handleCurrentChange(e, k) {
+  console.log("分页打印", e, k);
+  hfPage.value.currentPage = hfPage.value.currentPage + 1;
+  hfPage.value.pageNo = hfPage.value.pageNo + 1;
+  getData();
+}
+const commentSubmitFileList = ref([]);
+
+const disComment = ref({
+  content: "",
+});
+const replayComment = ref({
+  placeholder: "",
+  content: "",
+  pid: "",
+});
+
+// 评论图片展示数组
+const fileListComment = ref([]);
+// 回复图片展示数组
+const fileListCommentRelpay = ref([]);
+
+// 上传图片成功返回的URL
+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 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 });
+}
+
+const reply1Show = ref(false);
+const autofocus = ref(false);
+function commentComment(obj) {
+  reply1Show.value = true;
+  // autofocus.value = true;
+  replayComment.value.placeholder = "@ " + obj.createName;
+  replayComment.value.pid = obj.id;
+  if (document.getElementsByClassName("replyInp")[0]) {
+    document
+      .getElementsByClassName("replyInp")[0]
+      .querySelector("input")
+      .focus();
+  }
+
+  console.log("获得焦点", document.getElementsByClassName("replyInp")[0]);
+}
+function reply1Blur() {
+  reply1Show.value = false;
+  console.log("失去焦点");
+}
+// function reply1Focus() {
+//   reply1Show.value = true;
+//   autofocus.value = true;
+// }
+
+// 提交评论
+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() : "",
+  });
+  if (!disComment.value.content && imgFileUrl.length === 0)
+    return ElMessage.success("请输入评论内容");
+  request(COMMENT_ADD, {
+    targetId: disDetail.value.id,
+    content: disComment.value.content,
+    type: 1,
+    img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
+  })
+    .then((res) => {
+      console.log("评论发表成功", res);
+      ElMessage.success("发布成功");
+      hfPage.value.pageNo = 1;
+      hfPage.value.currentPage = 1;
+      commontList.value = [];
+      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() : "",
+  });
+  if (!replayComment.value.content && imgFileUrl.length === 0)
+    return ElMessage.success("请输入回复内容");
+  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();
+      ElMessage.success("回复成功");
+      for (let i = 0; i < commontList.value.length; i++) {
+        if (commontList.value[i].id === replayComment.value.pid) {
+          let obj = {
+            studentAvatar: userInfo.value.avatar,
+            studentName: userInfo.value.realName,
+            content: replayComment.value.content,
+          };
+          commontList.value[i].children.push(obj);
+        }
+      }
+      clearText();
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+//发布
+function send() {
+  if (reply1Show.value) {
+    console.log("回复--------");
+    submitReplayComment();
+  } else {
+    console.log("评论--------");
+    submitComment();
+  }
+}
+</script>
+<style lang="scss">
+.CommentReply {
+  width: 100%;
+  // display: flex;
+  // justify-content: center;
+  margin-top: 10px;
+  background: #fff;
+  .reshead {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    margin-bottom: 10px;
+    .headn {
+      width: 90%;
+      display: flex;
+      justify-content: space-between;
+      .pl {
+        color: #0d233a;
+        font-size: 16px;
+        line-height: 50px;
+      }
+      .ts {
+        color: #6e7b84;
+        font-size: 13px;
+        line-height: 50px;
+      }
+    }
+    .reply {
+      display: flex;
+      align-items: center;
+      width: 90%;
+      position: absolute;
+    }
+    .imgbtns {
+      width: 90%;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      // margin-top: 10px;
+      .cha {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        // right: 0;
+        width: 18px;
+        height: 18px;
+        border-radius: 4px;
+        background-image: url(../../assets/image/discuss/close.png);
+        background-size: 100%;
+      }
+      .btns {
+        display: flex;
+      }
+      .btns1 {
+        width: 50px;
+        height: 25px;
+        border: 1px solid #999999;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-weight: 400;
+        color: #999999;
+        margin-right: 16px;
+      }
+      .btns2 {
+        width: 50px;
+        height: 25px;
+        background: #2478ff;
+        border: 1px solid #2478ff;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-weight: 400;
+        color: #ffffff;
+      }
+    }
+  }
+  .linee {
+    height: 0;
+    width: 100%;
+    border-top: 1px solid #f1f2f3;
+  }
+  .restorebox {
+    width: 100%;
+    // height: 200px;
+    border-top: 1px solid #f1f2f3;
+    border-radius: 4px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    .restoremani {
+      width: 90%;
+      margin-top: 17px;
+      position: relative;
+      .rescon {
+        position: relative;
+        width: 100%;
+        // height: 100px;
+        // background-color: #bfa;
+        .head {
+          display: flex;
+          width: 100%;
+          .headavator {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+          }
+          .namehead {
+            margin-left: 5px;
+            color: #02172a;
+            font-size: 14px;
+            line-height: 36px;
+          }
+        }
+        .inner {
+          margin-top: 8px;
+          margin-left: 36px;
+
+          .recon {
+            margin-top: 7px;
+            color: #5f6d75;
+            font-size: 14px;
+            line-height: 18px;
+          }
+          .botto {
+            display: flex;
+            margin-top: 20px;
+            position: relative;
+            .time {
+              color: #5f6d75;
+              font-size: 14px;
+              margin-right: 16.5px;
+            }
+            .re {
+              color: #00152a;
+              font-size: 14px;
+              margin-top: -2px;
+            }
+            .right {
+              display: flex;
+              position: absolute;
+              right: 0;
+              .good {
+                margin-top: -2px;
+              }
+              .gocount {
+                color: #4e5e67;
+                font-size: 13px;
+                margin-left: 6.5px;
+              }
+            }
+          }
+        }
+      }
+
+      .newre {
+        margin-top: 7.5px;
+        padding-bottom: 20px;
+        .tri {
+          margin-left: 80px;
+          height: 0px;
+          width: 0px;
+          border-bottom: 10px solid #f0f3f6;
+          border-left: 10px solid transparent;
+          border-right: 10px solid transparent;
+        }
+        .reccon {
+          width: 100%;
+          display: flex;
+          justify-content: right;
+          // padding-bottom: 20px;
+          .rec {
+            background-color: #f0f3f6;
+            border-radius: 13px;
+            width: 90%;
+            .it {
+              margin-left: 12.5px;
+              width: 92%;
+              // display: flex;
+              margin-top: 20px;
+              // margin-bottom: 20px;
+              .ava {
+                // margin-top: 20px;
+                display: flex;
+                align-items: center;
+                .avainner {
+                  width: 36px;
+                  height: 36px;
+                  border-radius: 50%;
+                }
+                .rename {
+                  color: #02172a;
+                  font-size: 14px;
+                  margin-left: 5px;
+                }
+              }
+              .redetail {
+                width: 100%;
+                margin-left: 12.5px;
+
+                .rein {
+                  color: #5f6d75;
+                  font-size: 14px;
+                  margin-top: 16.5px;
+                }
+                .detre {
+                  margin-top: 10px;
+                  display: flex;
+                  position: relative;
+                  margin-bottom: 20px;
+                  .day {
+                    color: #5f6d75;
+                    font-size: 14px;
+                    margin-right: 14px;
+                  }
+                  .huifu {
+                    color: #00152a;
+                    font-size: 14px;
+                  }
+                  .good {
+                    position: absolute;
+                    right: 2px;
+                    display: flex;
+                    .gimg {
+                      width: 14px;
+                      height: 15px;
+                    }
+                    .gcou {
+                      color: #4e5e67;
+                      font-size: 13px;
+                      margin-top: 2px;
+                      margin-left: 7px;
+                    }
+                  }
+                }
+                .line {
+                  // margin-top: 24.5px;
+                  margin-left: -45px;
+                  height: 0;
+                  width: 117%;
+                  border-top: 1px solid #dcdedf;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .btncon {
+    width: 100%;
+    height: 60px;
+    position: relative;
+    .btnn {
+      margin-top: 30px;
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, 0);
+      border: 0;
+      background-color: #fff;
+      color: #2478ff;
+    }
+  }
+  .reply1 {
+    display: flex;
+    align-items: center;
+    width: 90%;
+    margin-left: 5%;
+    position: absolute;
+    bottom: 100px;
+  }
+}
+</style>

src/views/discuss/DiscussDetail.vue

@@ -284,6 +284,13 @@
         </button>
       </div>
     </div>
+    <!-- <div
+      class="restore"
+      v-else v-if="discussSettings"
+      style="height: 60px; font-size: 14px; padding-top: 10px"
+    >
+      <div style="margin-left: 20px">暂不支持评论</div>
+    </div> -->
     <!-- 回复框 -->
     <!-- <div class="reply1" v-if="reply1Show">
       <el-input
@@ -322,7 +329,7 @@ import { ElMessage } from "element-plus";
 import store from "@/store";
 const userInfo = computed(() => store.state.userInfo);
 const {
-  query: { id, type, postID, targetId },
+  query: { id, type, postID, targetId, discussSettings },
 } = useRoute();
 const restore = ref([
   {
@@ -350,7 +357,6 @@ const hfPage = ref({
   pageSize: 10,
   total: 0,
 });
-length;
 //获取讨论详情
 const discussInfo = ref("");
 request(DISCUSS_LIST, {
@@ -564,7 +570,7 @@ function submitReplayComment() {
     img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
   })
     .then((res) => {
-      console.log(res);
+      console.log("回复成功", res);
       // getData();
       ElMessage.success("回复成功");
       for (let i = 0; i < commontList.value.length; i++) {

src/views/discuss/DiscussPage.vue

@@ -218,7 +218,7 @@ function hotPost(discussId) {
 
 //跳转到讨论详情
 const goDetails = (item) => {
-  console.log("item", item);
+  console.log("item", item, state.info);
   router.push({
     path: "/discussdetail",
     query: {
@@ -227,6 +227,7 @@ const goDetails = (item) => {
       type,
       postID: item.id,
       postName: state.info.discussDtoList[0].discussName,
+      discussSettings: state.info.discussDtoList[0].discussSettings,
     },
   });
 };
@@ -404,7 +405,6 @@ function handleCurrentChange(e, k) {
                   font-size: 13px;
                   line-height: 24px;
                   max-height: 103px;
-                  overflow: hidden;
                   text-overflow: ellipsis;
                   overflow: hidden;
                   display: -webkit-box;

src/views/faceteach/FaceTeachNoCommon.vue

@@ -80,7 +80,9 @@
                 </div>
               </div>
             </el-tab-pane>
-            <el-tab-pane label="课程评论" name="fourth"> </el-tab-pane>
+            <!-- <el-tab-pane label="课程评论" name="fourth">
+              <CommentReply :faceId="data.offcourseDto?.id" :type="3" />
+            </el-tab-pane> -->
             <el-tab-pane label="材料下载" name="third">
               <div
                 v-if="!data.offcourseDto?.attach"
@@ -141,6 +143,8 @@ import { useRoute, useRouter } from "vue-router";
 import { useUserInfo } from "@/api/utils";
 import { ElMessage, messageConfig } from "element-plus";
 import dayjs from "dayjs";
+import UploadPostImg from "@/components/img/UploadPostImg.vue";
+import CommentReply from "@/components/CommentReply.vue";
 const router = useRouter();
 const returnclick = () => {
   router.back();

src/views/faceteach/FaceTeachNoCourse.vue

@@ -85,7 +85,7 @@
                 </div>
               </div>
             </el-tab-pane>
-            <el-tab-pane label="课程评论" name="fourth"> </el-tab-pane>
+            <!-- <el-tab-pane label="课程评论" name="fourth"> </el-tab-pane> -->
             <el-tab-pane label="材料下载" name="third">
               <div
                 v-if="!data.offcourseDto?.attach"

src/views/faceteach/FaceTeachSignUp.vue

@@ -95,7 +95,7 @@
                 </div>
               </div>
             </el-tab-pane>
-            <el-tab-pane label="课程评论" name="fourth"> </el-tab-pane>
+            <!-- <el-tab-pane label="课程评论" name="fourth"> </el-tab-pane> -->
             <el-tab-pane label="材料下载" name="third">
               <div
                 v-if="!data.offcourseDto?.attach"