添加评论

src/components/course/course-comment.vue

+<template>
+  <div class="course-comment">
+    <div class="item" v-for="item in list" :key="item.qaId">
+      <img class="img" :src="item.imageUrl" alt="头像" />
+      <div class="info-box">
+        <div class="info-user">
+          <div class="name">{{ item.doctorName }}</div>
+          <div class="date">{{ item.createTime }}</div>
+        </div>
+        <div class="message">{{ item.message }}</div>
+        <div class="reply-box" v-if="item.aList && item.aList.length">
+          <div class="reply-item" v-for="child in item.aList" :key="child.qaId">
+            <div class="reply-user">
+              <div class="name">{{ child.doctorName }}</div>
+              <div class="date">{{ child.createTime }}</div>
+            </div>
+            <div class="message">{{ child.message }}</div>
+          </div>
+          <div class=""></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    btnClick() {
+      if (this.type == "disabled") return;
+      this.$emit("btnClick");
+    }
+  }
+};
+</script>
+
+<style  lang="scss" scoped>
+@import "../../style/mixin";
+.course-comment {
+  padding: 0 px2rem(15px);
+  .item{
+    position: relative;
+    display: flex;
+    font-size: px2rem(14px);
+    padding: px2rem(20px) 0;
+    &::after{
+      position: absolute;
+      content: "";
+      left: 0;
+      bottom: 0;
+      width: 200%;
+      height: 0;
+      transform: scale(0.5);
+      transform-origin: left center;
+      border-bottom: 1px solid #F0F0F0;
+    }
+  }
+  .img{
+    display: block;
+    width: px2rem(32px);
+    height: px2rem(32px);
+    margin-right: px2rem(10px);
+  }
+  .info-box{
+    flex: 1;
+    width: 100px;
+  }
+  .info-user, .reply-user{
+    display: flex;
+    padding-bottom: px2rem(10px);
+    .name{
+      color: #676869;
+      flex: 1;
+      width: 80px;
+    }
+    .date{
+      color: #979899;
+      font-size: px2rem(12px);
+    }
+  }
+  .message{
+    line-height: px2rem(22px);
+    text-align: justify;
+  }
+  .reply-box{
+    margin-top: px2rem(15px);
+    padding: 12px;
+    background-color: #F8F9FA;
+  }
+  .reply-item{
+    padding-bottom: px2rem(20px);
+  }
+}
+</style>

src/views/course-detail.vue

@@ -20,27 +20,44 @@
       <div class="btn-download">下载</div>
       <div class="btn-open">打开</div>
     </div>
+
+    <Loading v-if="showLoading" />
   </div>
 </template>
 
 <script>
 import PicaVideo from '@/components/course/pica-video';
+import Loading from "@/components/common/common-loading";
 
 export default {
   components: {
-    PicaVideo
+    PicaVideo,
+    Loading
   },
   data() {
     return {
-      isShowDialog: true,
+      showLoading: false,
     };
   },
   mounted() {
+    this.getCourseInfo();
     this.$refs.picaVideo.switchUrl({
       url: 'https://video.yunqueyi.com/TNB/002/01_01_APP_SD.mp4',
     });
   },
   methods: {
+    getCourseInfo() {
+      const { projectId = 797, courseId = 2 } = this.$route.query;
+      this.showLoading = true;
+      this.GET(`/contents/courses/${courseId}/pcCourseInfo`, { projectId }).then(res => {
+        this.showLoading = false;
+        if (res.code == "000000") {
+
+        } else {
+          this.$toast(res.message);
+        }
+      });
+    },
     // 视频播放结束
     onVideoEnd() {
 

src/views/index.vue

@@ -263,7 +263,7 @@ export default {
             this.currentModelIndex = len;
           }
         } else {
-          this.message.error(res.message);
+          this.$toast(res.message);
         }
       });
     },