fix:点播模块重构

src/pages/course-detail/components/AnswerQuestions.vue

@@ -0,0 +1,461 @@
+<!-- 答疑 -->
+<template>
+  <div class="answer-question">
+    <div class="answer-question__header clearfix">
+      <div class="textarea-wrap">
+        <el-input
+          class="textarea"
+          resize="none"
+          v-model="textarea"
+          rows="3"
+          type="textarea"
+          placeholder="请输入"
+          maxlength="1000"
+          show-word-limit
+        ></el-input>
+      </div>
+      <el-button type="primary" class="submit" @click="addAnswer"
+        >提出疑问</el-button
+      >
+    </div>
+    <div class="answer-question__body">
+      <div class="question-list">
+        <div
+          v-if="answerList.length == 0"
+          style="text-align: center; color: #cccccc; margin-top: 14px"
+        >
+          暂无记录
+        </div>
+        <div
+          class="question-list__item"
+          v-for="(item, index) in answerList"
+          :key="index"
+        >
+          <div class="question-list__item__avatar">
+            <img
+              v-if="item.assignRealname"
+              :src="$tools.splitImgHost(item.assignAvatar)"
+              alt=""
+            />
+            <img v-else :src="$tools.splitImgHost(item.avatar)" alt="" />
+          </div>
+          <div class="question-list__item__content">
+            <div class="nickname">
+              {{ item.realname }}
+            </div>
+            <div class="desc">
+              {{ item.answerText }}
+            </div>
+            <div class="time">
+              {{ $tools.timestampToTime(item.createTime, false) }}
+
+              <div
+                class="del"
+                v-if="item.userId !== userInfo.userId"
+                @click="answerBack(item)"
+              >
+                <el-button type="text">回复</el-button>
+              </div>
+              <div
+                class="del"
+                style="color: red"
+                @click="del(item)"
+                v-if="item.userId === userInfo.userId"
+              >
+                删除
+              </div>
+            </div>
+            <div
+              class="reply-list"
+              v-if="item.newArraysAnswerList && item.newArraysAnswerList.length"
+            >
+              <div
+                class="reply-list__item"
+                v-for="(items, indexs) in item.newArraysAnswerList"
+                :key="indexs"
+              >
+                <div class="reply-list__item__avatar">
+                  <img :src="$tools.splitImgHost(items.avatar)" alt="" />
+                </div>
+                <div class="reply-list__item__content">
+                  <div class="nickname">
+                    {{ items.realname }}
+                  </div>
+                  <div class="desc">
+                    回复
+                    <span style="margin: 0px 4px; color: #409eff"
+                      >@{{ items.assignRealname }}</span
+                    >
+                    <span style="color: #ccc">{{ items.answerText }}</span>
+                  </div>
+                  <div class="time">
+                    {{ $tools.timestampToTime(items.createTime, false) }}
+                    <div
+                      class="del"
+                      style="color: red"
+                      @click="del(items)"
+                      v-if="items.userId === userInfo.userId"
+                    >
+                      删除
+                    </div>
+                    <div
+                      class="reply"
+                      v-if="items.userId !== userInfo.userId"
+                      @click="answerBack(items)"
+                    >
+                      回复
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+  props: ["courseId", "goodsId", "orderGoodsId"],
+  data() {
+    return {
+      textarea: "",
+      answerList: [],
+    };
+  },
+  computed: {
+    ...mapGetters(["userInfo"]),
+  },
+  created() {
+    console.log("子组件");
+  },
+  methods: {
+    /**提出答疑 */
+    addAnswer() {
+      if (!this.textarea) {
+        this.$message.warning("请输入疑问内容");
+        return;
+      }
+      let data = {
+        courseId: this.courseId,
+        goodsId: this.goodsId,
+        orderGoodsId: this.orderGoodsId,
+        answerText: this.textarea,
+      };
+      this.$request.addAnswer(data).then((res) => {
+        this.textarea = "";
+        this.getAnswerList();
+      });
+    },
+
+    /**
+     * 获取答疑列表
+     */
+    getAnswerList() {
+      let self = this;
+      // /app/answer/list 查询答疑列表
+      this.$request
+        .answerList({ courseId: this.courseId, goodsId: this.goodsId })
+        .then((res) => {
+          let data1 = [];
+          let data2 = [];
+          let copydata2 = [];
+          res.rows.forEach((item) => {
+            if (!item.assignAnswerId) {
+              data1.push(item);
+            } else {
+              data2.push(item);
+              copydata2.push(item);
+            }
+          });
+          data2.forEach((item, index) => {
+            //回复层
+            data1.forEach((items) => {
+              //提问层
+              if (items.answerId === item.assignAnswerId) {
+                if (
+                  items.newArraysAnswerList &&
+                  items.newArraysAnswerList.length
+                ) {
+                  items.newArraysAnswerList.push(item);
+                } else {
+                  items.newArraysAnswerList = [item];
+                }
+                let indexInd = copydata2.findIndex((itemsxs) => {
+                  return itemsxs.answerId === item.answerId;
+                });
+                if (indexInd !== -1) {
+                  copydata2.splice(indexInd, 1);
+                }
+              }
+            });
+          });
+          copydata2.forEach((it) => {
+            for (let i = 0; i < data1.length; i++) {
+              let STATUS = null;
+              if (data1[i].newArraysAnswerList) {
+                STATUS = data1[i].newArraysAnswerList.some((items) => {
+                  return items.answerId === it.assignAnswerId;
+                });
+              }
+              if (STATUS) {
+                data1[i].newArraysAnswerList.push(it);
+                break;
+              }
+            }
+          });
+          self.answerList = data1.reverse();
+        });
+    },
+    /**回复 */
+    answerBack(row) {
+      this.$prompt(`${row.realname}：${row.answerText}`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputErrorMessage: "输入不能为空",
+        inputValidator: (value) => {
+          let str = value.replace(/^ +| +$/g, "");
+          // 点击按钮时，对文本框里面的值进行验证
+          if (!str) {
+            return "输入不能为空";
+          }
+        },
+      })
+        .then(({ value }) => {
+          let data = {
+            assignUserId: row.userId,
+            assignAnswerId: row.answerId,
+            courseId: this.courseId,
+            goodsId: this.goodsId,
+            orderGoodsId: this.orderGoodsId,
+            answerText: value,
+            assignAnswerText: row.assignAnswerText,
+          };
+          this.$request.addAnswer(data).then((res) => {
+            this.getAnswerList();
+          });
+        })
+        .catch(() => {});
+    },
+    //删除回复
+    del(item) {
+      console.log(item);
+      let data = { answerId: item.answerId, status: -1 };
+      this.$request.delAnswer(data).then((res) => {
+        this.$message({
+          message: "删除成功",
+          type: "success",
+        });
+        this.getAnswerList();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.answer-question {
+  max-height: 416px;
+  overflow-y: auto;
+  padding: 16px;
+  background: rgb(63, 68, 73);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__header {
+    border-bottom: 1px solid #555;
+
+    .textarea-wrap {
+      // background: #65696D;
+      border: 1px solid #555;
+      border-radius: 8px;
+
+      .textarea {
+        height: 100%;
+
+        &::placeholder {
+          color: red;
+        }
+      }
+    }
+
+    .submit {
+      padding: 10px 20px;
+      border-radius: 2px;
+      text-align: center;
+      font-size: 16px;
+      margin: 10px 0;
+      float: right;
+    }
+  }
+
+  &__body {
+    .question-list {
+      &__item {
+        padding: 20px 0;
+        display: flex;
+
+        &__avatar {
+          width: 40px;
+          height: 40px;
+          display: table-cell;
+          border-radius: 50%;
+          text-align: center;
+          overflow: hidden;
+
+          img {
+            display: inline-block;
+            vertical-align: middle;
+            max-width: 100%;
+            max-height: 100%;
+          }
+        }
+
+        &__content {
+          flex: 1;
+          border-bottom: 1px solid #555555;
+          margin-left: 10px;
+
+          .nickname {
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #f5f5f5;
+            line-height: 24px;
+          }
+
+          .desc {
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #cccccc;
+            line-height: 24px;
+          }
+
+          .time {
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #999999;
+            line-height: 24px;
+
+            .replay {
+              float: right;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #3f8dfd;
+              line-height: 24px;
+              margin-right: 20px;
+            }
+
+            .del {
+              float: right;
+              cursor: pointer;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #fa8c16;
+              line-height: 24px;
+              margin-right: 20px;
+            }
+          }
+
+          .reply-list {
+            margin: 20px 0;
+            width: 100%;
+            background-color: #2f3236;
+            border-radius: 8px;
+            padding: 0 0 0 20px;
+
+            &__item {
+              padding: 20px 0;
+              display: flex;
+              border-bottom: 1px solid #555555;
+
+              &:nth-last-of-type(1) {
+                border: 0;
+              }
+
+              &__avatar {
+                width: 40px;
+                height: 40px;
+                display: table-cell;
+                border-radius: 50%;
+                text-align: center;
+                border-radius: 50%;
+                overflow: hidden;
+
+                img {
+                  display: inline-block;
+                  vertical-align: middle;
+                  max-width: 100%;
+                  max-height: 100%;
+                }
+              }
+
+              &__content {
+                border-radius: 8px;
+                flex: 1;
+                margin-left: 10px;
+
+                .nickname {
+                  font-size: 14px;
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  color: #f5f5f5;
+                  line-height: 24px;
+                }
+
+                .desc {
+                  font-size: 14px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #666666;
+                  line-height: 24px;
+                }
+
+                .time {
+                  font-size: 14px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #999999;
+                  line-height: 24px;
+
+                  .reply {
+                    float: right;
+                    font-size: 14px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #3f8dfd;
+                    line-height: 24px;
+                    margin-right: 20px;
+                    cursor: pointer;
+                    user-select: none;
+                  }
+
+                  .del {
+                    cursor: pointer;
+                    margin-right: 20px;
+                    float: right;
+                    font-size: 14px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #ff3b30;
+                    line-height: 24px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/courseTree/CourseTree.vue → src/pages/course-detail/components/CourseTree.vue

@@ -115,7 +115,7 @@
                         </template>
 
                         <div class="lear-state" v-if="isActive(section)">
-                          <img src="../../assets/learing.gif" alt="" />
+                          <img src="@/assets/learing.gif" alt="" />
                         </div>
                         <template v-if="section.durationTime > 0">
                           <div class="during">
@@ -330,7 +330,7 @@
                           </div>
                         </div>
                         <div class="lear-state" v-if="isActive(section)">
-                          <img src="../../assets/learing.gif" alt="" />
+                          <img src="@/assets/learing.gif" alt="" />
                         </div>
                         <template v-if="section.durationTime > 0">
                           <div class="during">
@@ -483,7 +483,7 @@
                     </div>
                   </template>
                   <div class="lear-state" v-if="isActive(menu)">
-                    <img src="../../assets/learing.gif" alt="" />
+                    <img src="@/assets/learing.gif" alt="" />
                   </div>
                   <template v-if="menu.durationTime > 0">
                     <div class="during">

src/pages/course-detail/components/Notes.vue

@@ -0,0 +1,374 @@
+<template>
+  <div class="lecture-notes">
+    <div class="lecture-notes__content clearfix">
+      <div class="left-boxs">
+        <div class="textarea clearfix" v-if="!(isPlayRebuild > 0) && !vidzb">
+          <el-input
+            resize="none"
+            rows="3"
+            v-model="textareaNote"
+            type="textarea"
+            maxlength="1000"
+            show-word-limit
+            placeholder="觉得重要的就记下来吧~"
+          ></el-input>
+          <el-button type="primary" class="submit" @click="noteSubmit">
+            提交笔记
+          </el-button>
+        </div>
+
+        <div class="note-list">
+          <div
+            v-if="noteList.length == 0"
+            style="text-align: center; color: #cccccc; margin-top: 14px"
+          >
+            暂无笔记
+          </div>
+
+          <div
+            class="note-list__content"
+            v-for="(item, index) in noteList"
+            :key="index"
+          >
+            <div
+              v-for="(note, index) in item.userNotes"
+              :key="index"
+              class="user_notes"
+            >
+              <p class="p1">
+                <i class="el-icon-video-camera" style="margin-right: 8px"></i
+                >{{ $tools.secondToDate(note.noteSecond) }}
+                <span>{{
+                  $tools.timestampToTime(note.createTime, false, false)
+                }}</span>
+              </p>
+              <p class="p2">{{ note.noteText }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    "courseId",
+    "gradeId",
+    "goodsId",
+    "moduleId",
+    "chapterId",
+    "isPlayRebuild",
+    "vidzb",
+    "playSectionId",
+    "player",
+  ],
+  data() {
+    return {
+      textareaNote: "",
+      noteList:[],
+    };
+  },
+  methods: {
+    /**
+     * 获取笔记列表
+     */
+    getNoteList() {
+      let self = this;
+      self.noteList = [];
+      let data = {
+        courseId: this.courseId,
+        gradeId: this.gradeId,
+        goodsId: this.goodsId,
+      };
+      if (this.playSectionId > 0) {
+        data.sectionId = this.playSectionId;
+      }
+      this.$request.noteList(data).then((res) => {
+        self.noteList = res.rows;
+        self.noteTotal = res.total;
+      });
+    },
+    noteSubmit() {
+      let self = this;
+      if (!(this.playSectionId > 0)) {
+        this.$message({
+          message: "目前无播放视频",
+          type: "warning",
+        });
+        return;
+      }
+      if (!this.textareaNote) {
+        this.$message({
+          message: "请输入内容",
+          type: "warning",
+        });
+        return;
+      }
+      if (!this.gradeId) {
+        this.$message({
+          message: "暂无班级数据",
+          type: "warning",
+        });
+        return;
+      }
+      var polyvPlayerContext = this.player;
+      let noteDate = this.$tools.getZeroTime();
+      let noteSecond = polyvPlayerContext.j2s_getCurrentTime();
+      if (!noteSecond) {
+        if (noteSecond == 0) {
+          //播放结束
+          noteSecond = polyvPlayerContext.j2s_getCurrentTime();
+        }
+        if (!noteSecond) {
+          this.$message({
+            message: "视频暂未开始",
+            type: "warning",
+          });
+          return;
+        }
+      }
+      let data = {
+        gradeId: this.gradeId,
+        goodsId: this.goodsId,
+        sectionId: this.playSectionId,
+        courseId: this.courseId,
+        noteText: this.textareaNote,
+        noteDate: noteDate,
+        noteSecond: noteSecond,
+        moduleId: this.moduleId,
+        chapterId: this.chapterId,
+      };
+      this.$request.postNote(data).then((res) => {
+        this.$message({
+          message: "发布成功",
+          type: "success",
+        });
+        self.getNoteList();
+        this.textareaNote = "";
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.lecture-notes {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  max-height: 416px;
+  overflow-y: auto;
+  padding: 16px;
+  background: rgb(63, 68, 73);
+
+  &__content {
+    .left-boxs {
+      // float: left;
+      // width: 462px;
+
+      .textarea {
+        border-bottom: 1px solid #555555;
+
+        .submit {
+          padding: 10px 20px;
+          border-radius: 2px;
+          text-align: center;
+          font-size: 16px;
+          margin: 10px 0;
+          float: right;
+        }
+      }
+
+      .note-list {
+        &__content {
+          border-bottom: 1px solid #555555;
+
+          &__title {
+            width: 216px;
+            height: 24px;
+            background: #ccc;
+            border-radius: 24px;
+            font-size: 14px;
+            color: #666666;
+            text-align: center;
+            line-height: 24px;
+            margin: 20px 0;
+          }
+        }
+
+        &__item {
+          display: flex;
+          padding: 15px;
+
+          .el-icon-video-play {
+            cursor: pointer;
+            font-size: 20px;
+            color: #3f8dfd;
+          }
+
+          &__content {
+            flex: 1;
+            margin-left: 10px;
+
+            .title {
+              cursor: pointer;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              color: #3f8dfd;
+              line-height: 24px;
+            }
+
+            .desc {
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #666666;
+              line-height: 24px;
+            }
+
+            .time {
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #999999;
+              line-height: 24px;
+            }
+          }
+        }
+      }
+
+      .pagination {
+        margin-top: 30px;
+        text-align: center;
+      }
+    }
+
+    .right-box {
+      width: 786px;
+      float: right;
+
+      .lecture-list {
+        background: #f5f7fa;
+        border-radius: 8px;
+
+        &__header {
+          padding: 0 16px;
+          height: 40px;
+          line-height: 40px;
+          font-size: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #333333;
+
+          .slide-btn {
+            cursor: pointer;
+            float: right;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #999999;
+          }
+        }
+
+        &__body {
+          .list {
+            &__item {
+              border-top: 1px solid #fff;
+              padding: 0 8px 0 16px;
+              height: 56px;
+              line-height: 55px;
+              display: flex;
+              align-items: center;
+
+              .title {
+                flex: 1;
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+              }
+
+              .btns {
+                .btn {
+                  cursor: pointer;
+                  display: inline-block;
+                  vertical-align: middle;
+                  width: 80px;
+                  height: 32px;
+                  background: #ffffff;
+                  border: 1px solid #3f8dfd;
+                  border-radius: 16px;
+                  text-align: center;
+                  line-height: 30px;
+                  color: #3f8dfd;
+                  margin: 0 8px;
+                }
+              }
+            }
+          }
+        }
+
+        &__footer {
+          margin-top: 24px;
+
+          .lecture-scan {
+            background: #f5f7fa;
+            border-radius: 8px;
+            overflow: hidden;
+
+            &__header {
+              height: 40px;
+              line-height: 40px;
+              padding: 0 16px;
+              font-size: 16px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              color: #333333;
+            }
+
+            &__body {
+              height: 800px;
+              text-align: center;
+              overflow-y: scroll;
+
+              .iframe {
+                width: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+/deep/ textarea {
+  background: #65696d;
+  color: #c7c7c7;
+  border-color: transparent;
+}
+.user_notes {
+  border-bottom: 1px solid #555;
+
+  .p1 {
+    margin: 8px 0px;
+    color: #3f8dfd;
+    font-size: 14px;
+
+    span {
+      float: right;
+      color: #999;
+      font-size: 12px;
+    }
+  }
+
+  .p2 {
+    margin-bottom: 8px;
+    font-size: 14px;
+    color: #ccc;
+  }
+}
+</style>

src/pages/course-detail/index.vue

@@ -93,254 +93,26 @@
                             </Course-tree>
                           </template>
                           <template v-if="tab.name == '3'">
-                            <div class="answer-question">
-                              <div class="answer-question__header clearfix">
-                                <div class="textarea-wrap">
-                                  <el-input
-                                    class="textarea"
-                                    resize="none"
-                                    v-model="textarea"
-                                    rows="3"
-                                    type="textarea"
-                                    placeholder="请输入"
-                                    maxlength="1000"
-                                    show-word-limit
-                                  ></el-input>
-                                </div>
-                                <el-button
-                                  type="primary"
-                                  class="submit"
-                                  @click="addAnswer"
-                                  >提出疑问</el-button
-                                >
-                              </div>
-                              <div class="answer-question__body">
-                                <div class="question-list">
-                                  <div
-                                    v-if="answerList.length == 0"
-                                    style="
-                                      text-align: center;
-                                      color: #cccccc;
-                                      margin-top: 14px;
-                                    "
-                                  >
-                                    暂无记录
-                                  </div>
-                                  <div
-                                    class="question-list__item"
-                                    v-for="(item, index) in answerList"
-                                    :key="index"
-                                  >
-                                    <div class="question-list__item__avatar">
-                                      <img
-                                        v-if="item.assignRealname"
-                                        :src="
-                                          $tools.splitImgHost(item.assignAvatar)
-                                        "
-                                        alt=""
-                                      />
-                                      <img
-                                        v-else
-                                        :src="$tools.splitImgHost(item.avatar)"
-                                        alt=""
-                                      />
-                                    </div>
-                                    <div class="question-list__item__content">
-                                      <div class="nickname">
-                                        {{ item.realname }}
-                                      </div>
-                                      <div class="desc">
-                                        {{ item.answerText }}
-                                      </div>
-                                      <div class="time">
-                                        {{
-                                          $tools.timestampToTime(
-                                            item.createTime,
-                                            false
-                                          )
-                                        }}
-
-                                        <div
-                                          class="del"
-                                          v-if="item.userId !== userInfo.userId"
-                                          @click="answerBack(item)"
-                                        >
-                                          <el-button type="text"
-                                            >回复</el-button
-                                          >
-                                        </div>
-                                        <div
-                                          class="del"
-                                          style="color: red"
-                                          @click="del(item)"
-                                          v-if="item.userId === userInfo.userId"
-                                        >
-                                          删除
-                                        </div>
-                                      </div>
-                                      <div
-                                        class="reply-list"
-                                        v-if="
-                                          item.newArraysAnswerList &&
-                                          item.newArraysAnswerList.length
-                                        "
-                                      >
-                                        <div
-                                          class="reply-list__item"
-                                          v-for="(
-                                            items, indexs
-                                          ) in item.newArraysAnswerList"
-                                          :key="indexs"
-                                        >
-                                          <div class="reply-list__item__avatar">
-                                            <img
-                                              :src="
-                                                $tools.splitImgHost(
-                                                  items.avatar
-                                                )
-                                              "
-                                              alt=""
-                                            />
-                                          </div>
-                                          <div
-                                            class="reply-list__item__content"
-                                          >
-                                            <div class="nickname">
-                                              {{ items.realname }}
-                                            </div>
-                                            <div class="desc">
-                                              回复
-                                              <span
-                                                style="
-                                                  margin: 0px 4px;
-                                                  color: #409eff;
-                                                "
-                                                >@{{
-                                                  items.assignRealname
-                                                }}</span
-                                              >
-                                              <span style="color: #ccc">{{
-                                                items.answerText
-                                              }}</span>
-                                            </div>
-                                            <div class="time">
-                                              {{
-                                                $tools.timestampToTime(
-                                                  items.createTime,
-                                                  false
-                                                )
-                                              }}
-                                              <div
-                                                class="del"
-                                                style="color: red"
-                                                @click="del(items)"
-                                                v-if="
-                                                  items.userId ===
-                                                  userInfo.userId
-                                                "
-                                              >
-                                                删除
-                                              </div>
-                                              <div
-                                                class="reply"
-                                                v-if="
-                                                  items.userId !==
-                                                  userInfo.userId
-                                                "
-                                                @click="answerBack(items)"
-                                              >
-                                                回复
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
+                            <Answer-questions
+                              ref="answerQuestions"
+                              :goodsId="goodsId"
+                              :courseId="courseId"
+                              :orderGoodsId="orderGoodsId"
+                            ></Answer-questions>
                           </template>
                           <template v-if="tab.name == '4'">
-                            <div class="lecture-notes">
-                              <div class="lecture-notes__content clearfix">
-                                <div class="left-boxs">
-                                  <div
-                                    class="textarea clearfix"
-                                    v-if="!(isPlayRebuild > 0) && !vidzb"
-                                  >
-                                    <el-input
-                                      resize="none"
-                                      rows="3"
-                                      v-model="textareaNote"
-                                      type="textarea"
-                                      maxlength="1000"
-                                      show-word-limit
-                                      placeholder="觉得重要的就记下来吧~"
-                                    ></el-input>
-                                    <el-button
-                                      type="primary"
-                                      class="submit"
-                                      @click="noteSubmit"
-                                    >
-                                      提交笔记
-                                    </el-button>
-                                  </div>
-
-                                  <div class="note-list">
-                                    <div
-                                      v-if="noteList.length == 0"
-                                      style="
-                                        text-align: center;
-                                        color: #cccccc;
-                                        margin-top: 14px;
-                                      "
-                                    >
-                                      暂无笔记
-                                    </div>
-
-                                    <div
-                                      class="note-list__content"
-                                      v-for="(item, index) in noteList"
-                                      :key="index"
-                                    >
-                                      <div
-                                        v-for="(note, index) in item.userNotes"
-                                        :key="index"
-                                        class="user_notes"
-                                      >
-                                        <p class="p1">
-                                          <i
-                                            class="el-icon-video-camera"
-                                            style="margin-right: 8px"
-                                          ></i
-                                          >{{
-                                            $tools.secondToDate(note.noteSecond)
-                                          }}
-                                          <span>{{
-                                            $tools.timestampToTime(
-                                              note.createTime,
-                                              false,
-                                              false
-                                            )
-                                          }}</span>
-                                        </p>
-                                        <p class="p2">{{ note.noteText }}</p>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <!-- <div class="pagination">
-                                    <el-pagination
-                                      background
-                                      layout="prev, pager, next"
-                                      :total="noteTotal"
-                                      :page-size="noteParams.pageSize"
-                                    >
-                                    </el-pagination>
-                                  </div> -->
-                                </div>
-                              </div>
-                            </div>
+                            <Notes
+                              ref="notes"
+                              :gradeId="gradeId"
+                              :goodsId="goodsId"
+                              :courseId="courseId"
+                              :moduleId="moduleId"
+                              :chapterId="chapterId"
+                              :isPlayRebuild="isPlayRebuild"
+                              :playSectionId="playSectionId"
+                              :vidzb="vidzb"
+                              :player="player"
+                            ></Notes>
                           </template>
                           <template v-if="tab.name == '5'">
                             <div class="lecture-notesjy">
@@ -1493,7 +1265,9 @@ import GoodsItem from "@/components/goodsItem/index";
 import * as imageConversion from "image-conversion";
 import { mapGetters, mapMutations, mapActions } from "vuex";
 import pdf from "vue-pdf";
-import CourseTree from "@/components/courseTree/CourseTree.vue";
+import CourseTree from "./components/CourseTree.vue";
+import AnswerQuestions from "./components/AnswerQuestions.vue";
+import Notes from "./components/Notes.vue";
 export default {
   name: "CourseDetail",
   components: {
@@ -1503,6 +1277,8 @@ export default {
     pdf,
     GoodsItem,
     CourseTree,
+    AnswerQuestions,
+    Notes,
   },
   data() {
     return {
@@ -1546,6 +1322,7 @@ export default {
       courseId: "",
       courseTabIndex: "1",
       goodsId: "",
+      orderGoodsId: "",
       gradeId: "",
       livingTimer: null,
       sectionItem: {},
@@ -1973,7 +1750,7 @@ export default {
     },
     handleClick(tab) {
       if (tab.name == "3") {
-        this.getAnswerList(); //答疑列表
+        this.$refs.answerQuestions[0].getAnswerList(); //答疑列表
       }
     },
     /**
@@ -3648,8 +3425,8 @@ export default {
         this.playerzb = "";
         this.vidzb = "";
         this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
-        this.getAnswerList(); //答疑列表
-        this.getNoteList(); //获取节笔记
+        this.$refs.answerQuestions[0].getAnswerList(); //答疑列表
+        this.$refs.notes[0].getNoteList(); //获取节笔记
         resolve();
       });
     },
@@ -3894,7 +3671,7 @@ export default {
         this.playSectionId = option.sectionId || option.menuId;
         await this.getPhotoLastRecord();
         this.recordObj = await this.getRecordLast();
-        this.getNoteList();
+        this.$refs.notes[0].getNoteList();
         await this.clears();
 
         this.vid = option.recordingUrl;
@@ -3929,7 +3706,7 @@ export default {
         // console.log(this.moduleId, this.chapterId, this.playSectionId);
         await this.getPhotoLastRecord();
         this.recordObj = await this.getRecordLast();
-        this.getNoteList();
+        this.$refs.notes[0].getNoteList();
         //设置播放的节ID
         await this.clears();
         this.vidzb = option.liveUrl;
@@ -4828,27 +4605,6 @@ export default {
         });
       });
     },
-    /**
-     * 获取笔记列表
-     */
-    getNoteList() {
-      let self = this;
-      self.noteList = [];
-      let data = {
-        courseId: this.courseId,
-        gradeId: this.gradeId,
-        goodsId: this.goodsId,
-        // pageNum: this.noteParams.pageNum,
-        // pageSize: this.noteParams.pageSize,
-      };
-      if (this.playSectionId > 0) {
-        data.sectionId = this.playSectionId;
-      }
-      this.$request.noteList(data).then((res) => {
-        self.noteList = res.rows;
-        self.noteTotal = res.total;
-      });
-    },
 
     noteClick(note) {
       if (this.vid) {
@@ -4923,109 +4679,6 @@ export default {
         this.businessData = res.data;
       });
     },
-    /**提出答疑 */
-    addAnswer() {
-      if (!this.textarea) {
-        this.$message.warning("请输入疑问内容");
-        return;
-      }
-      let data = {
-        courseId: this.courseId,
-        goodsId: this.goodsId,
-        orderGoodsId: this.orderGoodsId,
-        answerText: this.textarea,
-      };
-      this.$request.addAnswer(data).then((res) => {
-        this.textarea = "";
-        this.getAnswerList();
-      });
-    },
-    /**回复 */
-    answerBack(row) {
-      this.$prompt(`${row.realname}：${row.answerText}`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        inputErrorMessage: "输入不能为空",
-        inputValidator: (value) => {
-          let str = value.replace(/^ +| +$/g, "");
-          // 点击按钮时，对文本框里面的值进行验证
-          if (!str) {
-            return "输入不能为空";
-          }
-        },
-      })
-        .then(({ value }) => {
-          let data = {
-            assignUserId: row.userId,
-            assignAnswerId: row.answerId,
-            courseId: this.courseId,
-            goodsId: this.goodsId,
-            orderGoodsId: this.orderGoodsId,
-            answerText: value,
-            assignAnswerText: row.assignAnswerText,
-          };
-          this.$request.addAnswer(data).then((res) => {
-            this.getAnswerList();
-          });
-        })
-        .catch(() => {});
-    },
-    getAnswerList() {
-      let self = this;
-      // /app/answer/list 查询答疑列表
-      this.$request
-        .answerList({ courseId: this.courseId, goodsId: this.goodsId })
-        .then((res) => {
-          let data1 = [];
-          let data2 = [];
-          let copydata2 = [];
-          res.rows.forEach((item) => {
-            if (!item.assignAnswerId) {
-              data1.push(item);
-            } else {
-              data2.push(item);
-              copydata2.push(item);
-            }
-          });
-          data2.forEach((item, index) => {
-            //回复层
-            data1.forEach((items) => {
-              //提问层
-              if (items.answerId === item.assignAnswerId) {
-                if (
-                  items.newArraysAnswerList &&
-                  items.newArraysAnswerList.length
-                ) {
-                  items.newArraysAnswerList.push(item);
-                } else {
-                  items.newArraysAnswerList = [item];
-                }
-                let indexInd = copydata2.findIndex((itemsxs) => {
-                  return itemsxs.answerId === item.answerId;
-                });
-                if (indexInd !== -1) {
-                  copydata2.splice(indexInd, 1);
-                }
-              }
-            });
-          });
-          copydata2.forEach((it) => {
-            for (let i = 0; i < data1.length; i++) {
-              let STATUS = null;
-              if (data1[i].newArraysAnswerList) {
-                STATUS = data1[i].newArraysAnswerList.some((items) => {
-                  return items.answerId === it.assignAnswerId;
-                });
-              }
-              if (STATUS) {
-                data1[i].newArraysAnswerList.push(it);
-                break;
-              }
-            }
-          });
-          self.answerList = data1.reverse();
-        });
-    },
     courseCourseList() {
       return new Promise((resolve) => {
         this.$request
@@ -5139,22 +4792,10 @@ export default {
           message: "发布成功",
           type: "success",
         });
-        self.getNoteList();
+        self.$refs.notes[0].getNoteList();
         this.textareaNote = "";
       });
     },
-
-    del(item) {
-      console.log(item);
-      let data = { answerId: item.answerId, status: -1 };
-      this.$request.delAnswer(data).then((res) => {
-        this.$message({
-          message: "删除成功",
-          type: "success",
-        });
-        this.getAnswerList();
-      });
-    },
     /**
      * 打印
      */