feat:添加回复加载更多

src/api/api.js

@@ -2,7 +2,7 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2023-01-13 11:42:48
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-02-22 14:17:37
+ * @LastEditTime: 2023-02-22 14:51:53
  * @FilePath: /stu_h5/src/api/api.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -81,4 +81,4 @@ export const SubmitExternalExam = `/stu/externalExam/submitExternalExam post`
 export const UPDATE_CURRENT_TASK = `/admin/student/updateCurrentTask post`
 // 测评任务去学习
 export const EvaluationToLearn = '/evaluation/evaluationToLearn post'
-export const FILE_UPLOAD_IMG = import.meta.env.VITE_IMG + '/file/img'
+export const FILE_UPLOAD_IMG = import.meta.env.VITE_BASE_API + 'file/img'

src/views/discuss/DiscussDetail.vue

@@ -9,7 +9,7 @@
         </div>
         <div class="vaainfo">
           <div class="vaana">{{ disDetail?.userName }}</div>
-          <div class="vaanato">认识事物的本质。</div>
+          <!-- <div class="vaanato">认识事物的本质。</div> -->
         </div>
       </div>
     </div>
@@ -74,6 +74,7 @@
               style="width: calc(100% - 40px)"
             />
           </div>
+
           <div
             class="reply"
             :style="{
@@ -102,8 +103,21 @@
             </UploadPostImg>
           </div>
         </div>
+
         <div class="imgbtns">
-          <img style="" />
+          <div>
+            <div
+              v-for="(v, i) in fileListComment"
+              :key="i"
+              style="position: relative"
+            >
+              <img
+                :src="v.url"
+                style="width: 66px; height: 66px; margin-left: 5px"
+              />
+              <div class="cha" @click="removeCommentImg(i)"></div>
+            </div>
+          </div>
           <div class="btns">
             <div class="btns1" @click="reply1Blur">取消</div>
             <div class="btns2" @click="send">发布</div>
@@ -153,6 +167,14 @@
                   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" />
@@ -180,13 +202,35 @@
                       </div>
                     </div>
                     <!-- <div class="line"></div> -->
-                    <div
+                    <!-- <div
                       :class="index === newrestore.length - 1 ? null : 'line'"
-                    ></div>
+                    ></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.length > 1"
+            >
+              <span
+                @click="lookMore(index)"
+                style="font-size: 14px; color: #2478ff"
+                >{{
+                  index == spreadReply
+                    ? "收起"
+                    : "查看全部" + item.children.length + "条评论"
+                }}</span
+              >
+            </div>
           </div>
         </div>
       </div>
@@ -224,7 +268,7 @@
 </template>
 
 <script setup>
-import { reactive, ref } from "vue";
+import { reactive, ref, computed } from "vue";
 import ReturnHead from "@/components/ReturnHead.vue";
 import px from "@/assets/image/discuss/px.jpg";
 import { request, useRequest } from "@/api/request";
@@ -238,6 +282,8 @@ import {
 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 userInfo = computed(() => store.state.userInfo);
 const {
   query: { id, type, postID, targetId },
 } = useRoute();
@@ -326,7 +372,7 @@ const clearText = () => {
   replayComment.value.content = "";
 };
 
-// 回复分页
+// 评论分页
 function handleCurrentChange(e, k) {
   console.log("分页打印", e, k);
   hfPage.value.currentPage = hfPage.value.currentPage + 1;
@@ -444,11 +490,15 @@ function submitComment() {
     img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
   })
     .then((res) => {
-      console.log("评论发表失败", res);
+      console.log("评论发表成功", res);
+      ElMessage.success("发布成功");
+      hfPage.value.pageNo = 1;
+      hfPage.value.currentPage = 1;
+      commontList.value = [];
       getData();
     })
     .catch((err) => {
-      console.log(err);
+      console.log("评论发表失败", err);
     });
 }
 
@@ -478,7 +528,19 @@ function submitReplayComment() {
   })
     .then((res) => {
       console.log(res);
-      getData();
+      // 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);
@@ -684,6 +746,17 @@ function send() {
         display: flex;
         justify-content: space-between;
         // margin-top: 10px;
+        .cha {
+          position: absolute;
+          top: 15px;
+          right: -9px;
+          // right: 0;
+          width: 18px;
+          height: 18px;
+          border-radius: 50%;
+          background-image: url(../../assets/image/discuss/close.png);
+          background-size: 100%;
+        }
         .btns {
           display: flex;
         }
@@ -795,6 +868,7 @@ function send() {
 
         .newre {
           margin-top: 7.5px;
+          padding-bottom: 20px;
           .tri {
             margin-left: 80px;
             height: 0px;
@@ -807,6 +881,7 @@ function send() {
             width: 100%;
             display: flex;
             justify-content: right;
+            // padding-bottom: 20px;
             .rec {
               background-color: #f0f3f6;
               border-radius: 13px;

vite.config.js

@@ -2,7 +2,7 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2023-01-13 11:42:48
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2023-02-20 11:20:13
+ * @LastEditTime: 2023-02-22 14:53:41
  * @FilePath: /stu_h5/vite.config.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -45,6 +45,10 @@ export default defineConfig(({ command, mode }) =>
                 target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
                 changeOrigin: true,
             },
+            '/file/img': {
+                target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
+                changeOrigin: true,
+            },
             '/stu': {
                 target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
                 changeOrigin: true,