feat:增加加载更多

2025-12-07 09:56:45 +08:00 · 2023-02-22 14:46:25 +08:00
parent e168bedd6b
commit b31af085d5
8 changed files with 287 additions and 74 deletions
--- a/.env
+++ b/.env
@@ -1,5 +1,5 @@
 VITE_BASE=/fe-student-h5
-VITE_BASE_API=
+VITE_BASE_API=/
 VITE_OUTPUT_DIR=./dist
 VITE_BASE_LOGIN_URL=//u-pre.boe.com/web?returnUrl=
 VITE_PROXY_URL=http://43.143.139.204/manageApi
@@ -16,4 +16,6 @@ VITE_BOE_API_URL=https://u-pre.boe.com

 VITE_TASK_WHITE_TYPE=-8-,-12-,-13-
 # boe域名
-VUE_APP_BOE_API_URL=//u-pre.boe.com
+VUE_APP_BOE_API_URL=//u-pre.boe.com
+#评论上传图片
+VITE_IMG=/manageApi
--- a/.env.boe
+++ b/.env.boe
@@ -8,4 +8,6 @@ VITE_BOE_TEST_OUT_DETAIL_URL=//u-pre.boe.com/api/b1/tale/do-quiz?quizKid=
 VITE_BOE_EXAM_DETAIL_URL=//u-pre.boe.com/mobile/pages/exam/exam?id=

 VITE_BOE_API_URL=https://u-pre.boe.com
-VUE_APP_BOE_API_URL=//u-pre.boe.com
+VUE_APP_BOE_API_URL=//u-pre.boe.com
+
+VITE_IMG=/manageApi
--- a/.env.prod
+++ b/.env.prod
@@ -13,4 +13,6 @@ VITE_BOE_PATH_DETAIL_URL=//u.boe.com/pc/forward?to=/student-h5
 VITE_BOE_API_URL=https://u.boe.com

 VITE_TASK_WHITE_TYPE=-8-,-12-,-13-
-VUE_APP_BOE_API_URL=//u.boe.com
+VUE_APP_BOE_API_URL=//u.boe.com
+
+VITE_IMG=/manageApi
--- a/.env.release
+++ b/.env.release
@@ -10,4 +10,6 @@ VITE_BOE_EXAM_DETAIL_URL=//u.boe.com/pc-release/mobile/pages/exam/exam?id=
 VITE_BOE_PATH_DETAIL_URL=//u.boe.com/pc-release/forward?to=/student-h5-release

 VITE_BOE_API_URL=https://u.boe.com
-VUE_APP_BOE_API_URL=//u.boe.com
+VUE_APP_BOE_API_URL=//u.boe.com
+
+VITE_IMG=/manageApi-release
--- a/src/api/api.js
+++ b/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-20 17:57:40
+ * @LastEditTime: 2023-02-22 14:17:37
 * @FilePath: /stu_h5/src/api/api.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
@@ -66,6 +66,7 @@ export const PostDetails = `/statement/info`

 export const COMMENT_LIST = '/comment/list'
 export const COMMENT_PRAISE = '/comment/praise'
+export const COMMENT_ADD = '/comment/add post'

 // 外部考试详情接口
 export const EXTERNALEXAM = `/external/exam/queryExternalExam`
@@ -79,4 +80,5 @@ export const FACETEACH_SIGNUP = `/stu/project/stuFaceTeachSignUp`
 export const SubmitExternalExam = `/stu/externalExam/submitExternalExam post`
 export const UPDATE_CURRENT_TASK = `/admin/student/updateCurrentTask post`
 // 测评任务去学习
-export const EvaluationToLearn = '/evaluation/evaluationToLearn post'
+export const EvaluationToLearn = '/evaluation/evaluationToLearn post'
+export const FILE_UPLOAD_IMG = import.meta.env.VITE_IMG + '/file/img'
--- a/src/components/img/UploadPostImg.vue
+++ b/src/components/img/UploadPostImg.vue
@@ -0,0 +1,101 @@
+<!--
+ * @Author: lixg lixg@dongwu-inc.com
+ * @Date: 2023-02-22 10:53:52
+ * @LastEditors: lixg lixg@dongwu-inc.com
+ * @LastEditTime: 2023-02-22 10:54:01
+ * @FilePath: /stu_h5/src/components/img/UploadPostImg.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<!-- 上传评论图片 -->
+<template>
+  <el-upload
+    :file-list="files"
+    :action="FILE_UPLOAD_IMG"
+    method="POST"
+    :show-file-list="false"
+    :on-change="handleChange"
+    :limit="max"
+    ref="imageRef"
+    :on-exceed="exceed"
+  >
+    <template #trigger>
+      <div>
+        <slot></slot>
+      </div>
+    </template>
+  </el-upload>
+</template>
+<script setup>
+import { FILE_UPLOAD_IMG } from "@/api/api";
+import { defineProps, ref, watch } from "vue";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  value: [],
+  max: {
+    type: Number,
+    default: 10,
+  },
+});
+
+const emit = defineEmits();
+
+const files = ref([]);
+const imageRef = ref();
+
+watch(props.value, () => {
+  props.value.length || (files.value = props.value);
+});
+
+function exceed() {
+  ElMessage.error(`只能上传${props.max}个附件`);
+}
+
+function handleChange(e) {
+  if (e.response && e.response.code === 200) {
+    e.url = e.response.data;
+    // console.log(e)
+    emit("fileUploadValue", e);
+  }
+
+  const index = files.value.findIndex((f) => f.uid === e.uid);
+  if (index === -1) {
+    files.value.unshift(e);
+  } else {
+    files.value[index] = e;
+  }
+  emit("update:value", files.value);
+}
+
+function remove(i) {
+  files.value.splice(i, 1);
+  console.log(imageRef);
+}
+
+function clearFiles() {
+  imageRef.value.clearFiles();
+}
+
+function reUpload(i) {
+  console.log(i);
+  if (
+    files.value[i].status === "ready" ||
+    files.value[i].status === "uploading"
+  ) {
+    imageRef.value.abort(files.value[i].raw);
+    files.value[i].status = "abort";
+  } else if (
+    files.value[i].status === "fail" ||
+    files.value[i].status === "abort"
+  ) {
+    imageRef.value.handleStart(files.value[i].raw);
+    imageRef.value.submit();
+  }
+}
+
+function abort(i) {
+  imageRef.value.abort(files.value[i].raw);
+}
+
+defineExpose({ reUpload, remove, clearFiles });
+</script>
--- a/src/views/discuss/DiscussDetail.vue
+++ b/src/views/discuss/DiscussDetail.vue
@@ -39,35 +39,75 @@
          <div class="pl">评论</div>
          <div class="ts">{{ hfPage?.total }}条</div>
        </div>
-        <div class="reply" :style="{ opacity: reply1Show ? 0 : 1 }">
-          <img
-            style="width: 28px; height: 28px; margin-right: 5px"
-            src="../../assets/image/uploadImg2.png"
-          />
-          <el-input
-            type="text"
-            v-model="disComment.content"
-            resize="none"
-            maxlength="100"
-            placeholder="写评论~"
-            style="width: calc(100% - 40px)"
-          />
+        <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="reply" :style="{ opacity: reply1Show ? 1 : 0 }">
-          <el-input
-            type="text"
-            v-model="replayComment.content"
-            resize="none"
-            maxlength="100"
-            :placeholder="replayComment.placeholder"
-            style="width: calc(100% - 40px)"
-            @blur="reply1Blur"
-            class="replyInp"
-          />
-          <img
-            style="width: 28px; height: 28px; margin-left: 5px"
-            src="../../assets/image/uploadImg2.png"
-          />
+        <div class="imgbtns">
+          <img style="" />
+          <div class="btns">
+            <div class="btns1" @click="reply1Blur">取消</div>
+            <div class="btns2" @click="send">发布</div>
+          </div>
        </div>
      </div>
      <!-- <div class="linee"></div> -->
@@ -116,15 +156,15 @@
                >
                  <div class="ava">
                    <img class="avainner" :src="itemc.studentAvatar" />
+                    <div class="rename">{{ itemc.studentName }}</div>
                  </div>
                  <div class="redetail">
-                    <div class="rename">{{ itemc.createName }}</div>
                    <div class="rein">{{ itemc.content }}</div>
                    <div class="detre">
                      <div class="day">{{ itemc.createTime }}</div>
-                      <div class="huifu" @click="commentComment(itemc)">
+                      <!-- <div class="huifu" @click="commentComment(itemc)">
                        回复
-                      </div>
+                      </div> -->
                      <div class="good" @click="commentLike(itemc)">
                        <img
                          v-if="itemc.praised"
@@ -148,12 +188,20 @@
              </div>
            </div>
          </div>
-
-          <div class="btncon clearfix">
-            <button class="btnn">查看全部14条评论</button>
-          </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>
    <!-- 回复框 -->
    <!-- <div class="reply1" v-if="reply1Show">
@@ -185,8 +233,11 @@ import {
  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";
 const {
  query: { id, type, postID, targetId },
 } = useRoute();
@@ -229,7 +280,7 @@ request(DISCUSS_LIST, {
  .catch((err) => {
    console.log(err);
  });
-
+const noMorePost = ref(false);
 // 获取数据
 const getData = () => {
  useRequest(PostDetails, { id: postID }, (e) => {
@@ -249,9 +300,12 @@ const getData = () => {
    })
      .then((res) => {
        console.log("我是获取当前帖子的评论", res);
-        commontList.value = res.data.records;
+        commontList.value = commontList.value.concat(res.data.records);
        hfPage.value.total = Number(res.data.total);
        clearText();
+        if (e.data.records.length === 0 || e.data.records.length < 10) {
+          noMorePost.value = true;
+        }
      })
      .catch((err) => {
        console.log(err);
@@ -275,8 +329,8 @@ const clearText = () => {
 // 回复分页
 function handleCurrentChange(e, k) {
  console.log("分页打印", e, k);
-  hfPage.value.currentPage = e;
-  hfPage.value.pageNo = e;
+  hfPage.value.currentPage = hfPage.value.currentPage + 1;
+  hfPage.value.pageNo = hfPage.value.pageNo + 1;
  getData();
 }
 const commentSubmitFileList = ref([]);
@@ -359,9 +413,7 @@ function commentComment(obj) {
 }
 function reply1Blur() {
  reply1Show.value = false;
-  // autofocus.value = false;
  console.log("失去焦点");
-  // document.getElementsByClassName("replyInp")[0].querySelector("input").blur();
 }
 // function reply1Focus() {
 //   reply1Show.value = true;
@@ -382,15 +434,17 @@ function submitComment() {
    type: 1,
    img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
  });
-
+  if (!disComment.value.content && imgFileUrl.length === 0)
+    return ElMessage.success("请输入评论内容");
  request(COMMENT_ADD, {
+    id: disDetail.value.id,
    targetId: disDetail.value.id,
    content: disComment.value.content,
    type: 1,
    img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
  })
    .then((res) => {
-      console.log(res);
+      console.log("评论发表失败", res);
      getData();
    })
    .catch((err) => {
@@ -413,7 +467,8 @@ function submitReplayComment() {
    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,
@@ -429,6 +484,16 @@ function submitReplayComment() {
      console.log(err);
    });
 }
+//发布
+function send() {
+  if (reply1Show.value) {
+    console.log("回复--------");
+    submitReplayComment();
+  } else {
+    console.log("评论--------");
+    submitComment();
+  }
+}
 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -592,7 +657,7 @@ function submitReplayComment() {
      flex-direction: column;
      align-items: center;
      position: relative;
-      height: 100px;
+      margin-bottom: 10px;
      .headn {
        width: 90%;
        display: flex;
@@ -613,7 +678,41 @@ function submitReplayComment() {
        align-items: center;
        width: 90%;
        position: absolute;
-        bottom: 15px;
+      }
+      .imgbtns {
+        width: 90%;
+        display: flex;
+        justify-content: space-between;
+        // margin-top: 10px;
+        .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 {
@@ -715,24 +814,28 @@ function submitReplayComment() {
              .it {
                margin-left: 12.5px;
                width: 92%;
-                display: flex;
+                // 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;
-                  .rename {
-                    color: #02172a;
-                    font-size: 14px;
-                  }
+
                  .rein {
                    color: #5f6d75;
                    font-size: 14px;
@@ -780,24 +883,23 @@ function submitReplayComment() {
            }
          }
        }
-
-        .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;
-          }
-        }
      }
    }
  }
+  .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;
--- a/src/views/discuss/DiscussPage.vue
+++ b/src/views/discuss/DiscussPage.vue
@@ -184,7 +184,7 @@ function getPostList(discussId) {
      console.log("我是当前讨论下的帖子", e);
      state.postList = state.postList.concat(e.data.records);
      state.total = Number(e.data.total);
-      if (e.data.records.length === 0) {
+      if (e.data.records.length === 0 || e.data.records.length < 10) {
        state.noMore = true;
      }
    })