修改评课以及下拉刷新

src/api/course.js

@@ -49,6 +49,16 @@ export function addPz2(data) {
   })
 }
 
+// 添加回复
+export function repHf(data) {
+  return request({
+    url: '/addHf',
+    method: 'post',
+    data,
+    hideloading: false
+  })
+}
+
 // 删除批注
 export function deletePz(data) {
   return request({

src/views/course/components/ImageComponent.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="imgBox">
-    <div @click="addImg($event)" class="imgCss">
-      <img src="../../../assets/images/course/imageUpload.png" alt="" />
-      <input type="file" accept="image/*" style="display: none" @change="beforeUpload($event)" />
-    </div>
     <div class="imgList">
+      <div @click="addImg($event)" class="imgCss">
+        <img src="../../../assets/images/course/imageUpload.png" alt="" />
+        <input type="file" accept="image/*" style="display: none" @change="beforeUpload($event)" />
+      </div>
       <div v-for="(item, index) in imgList" :key="index" class="imgItem">
         <div class="itemImg" @click="previewImg(item)">
           <img :src="item" alt="" />
@@ -64,7 +64,7 @@ export default {
       } // 秘钥形式的登录上传
       window.AWS.config.update(credentials)
       window.AWS.config.region = 'cn-northwest-1' // 设置区域
-      var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' }}) // 选择桶
+      var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' } }) // 选择桶
       var _this = this
       _this.progress = 0
       _this.proVisible = true
@@ -122,7 +122,7 @@ export default {
 
 <style lang="scss" scoped>
 .imgBox {
-  margin: 10px;
+  // margin: 10px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -130,7 +130,9 @@ export default {
   .imgCss {
     width: 50px;
     height: 50px;
-    margin-left: 0 0.3rem;
+    margin: 0 10px 10px 0;
+
+    // margin-left: 0 0.3rem;
     > img {
       width: 100%;
       height: 100%;
@@ -138,9 +140,10 @@ export default {
   }
   .imgList {
     display: flex;
-    flex-direction: row;
+    // flex-direction: row;
     flex-wrap: wrap;
-    align-items: center;
+    justify-content: space-between;
+    // align-items: center;
     .imgItem {
       position: relative;
       width: 50px;

src/views/course/components/commentBox.vue

@@ -30,7 +30,28 @@
           />
         </div>
         <div class="time">
-          {{ pz.time }}
+          <div>{{ pz.time }}</div>
+          <div @click="addHf(pz)">回复</div>
+        </div>
+
+        <!-- 回复区域 -->
+        <div v-for="(rep, repIndex) in replyList" :key="rep.id">
+          <div v-if="rep.pid == pz.id" class="replyCss">
+            <div class="replyTop">
+              <div>{{ rep.username }} <van-icon name="play" /> {{ pz.username }}</div>
+            </div>
+            <div class="pzContent cont navAndImg" @click="checkImg(getImgList(rep.content))" v-html="rep.content"></div>
+            <div class="time" style="padding: 0 0 10px 0;">
+              <div>{{ rep.time }}</div>
+              <div class="pzDelete" @click="deletePz(rep.id)" v-if="rep.userid == userId">
+                <img
+                  style="height: 20px;"
+                  src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/删除1716449608309.png"
+                  alt=""
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -38,9 +59,21 @@
       <img src="@/assets/images/course/noPz.png" alt="" />
     </div>
 
-    <!-- <div class="commentInput" @click="setPanelVisible(true)">
-      <div class="input">点击发一条评课内容</div>
-    </div> -->
+    <!-- 回复弹出框 -->
+    <van-popup v-model="show" @close="closeRep" closeable round class="repPopup">
+      <div style="font-size: 18px;">回复</div>
+      <div class="cp-box">
+        <div class="cp-conent">
+          <!-- <div style="height: 120px;"> -->
+            <van-field v-model="repText" rows="5" type="textarea" placeholder="请输入..." />
+          <!-- </div> -->
+          <div style="margin-top: 10px;">
+            <image-component @getImage="getImage" :imgList.sync="imgList"></image-component>
+          </div>
+        </div>
+      </div>
+      <van-button size="small" type="info" @click="repAddHf">确定</van-button>
+    </van-popup>
     <commentPanel
       @setPanelVisible="setPanelVisible"
       :panelVisible="panelVisible"
@@ -52,8 +85,10 @@
 </template>
 
 <script>
+import ImageComponent from './ImageComponent.vue'
+import AudioComponent from './AudioComponent.vue'
 import commentPanel from './commentPanel.vue'
-import { getCoursePz, deletePz } from '@/api/course'
+import { getCoursePz, deletePz, repHf } from '@/api/course'
 import { mapGetters } from 'vuex'
 export default {
   props: {
@@ -64,6 +99,9 @@ export default {
     panelVisible: {
       type: Boolean
     },
+    repCon: {
+      type: Boolean
+    },
     courseType: {
       type: Number,
       default: 0
@@ -74,11 +112,20 @@ export default {
     }
   },
   components: {
-    commentPanel
+    commentPanel,
+    AudioComponent,
+    ImageComponent
   },
   data() {
     return {
-      pzList: []
+      pzList: [],
+      replyList: [],
+      show: false,
+      repText: '',
+      info: [],
+      userId: this.$store.state.user.userinfo.userid,
+      type: 1,
+      imgList: []
     }
   },
   computed: {
@@ -104,9 +151,70 @@ export default {
     },
     panelVisible(newValue, oldValue) {
       this.getData()
+    },
+    show(newValue, oldValue) {
+      this.$emit('update:repCon', newValue)
     }
   },
   methods: {
+    closeRep() {
+      this.repText = ''
+      this.imgList = []
+    },
+    // setType(type) {
+    //   this.type = type
+    // },
+    getImage(imgList) {
+      this.imgList = imgList
+      this.$forceUpdate()
+    },
+    repAddHf() {
+      let a = ''
+      if (this.repText == '' && this.imgList.length == 0) {
+        this.$message.error('回复不能为空！')
+        return
+      }
+      if (this.imgList.length) {
+        var img = ''
+        for (var i = 0; i < this.imgList.length; i++) {
+          img += "<img src='" + this.imgList[i] + "' />"
+        }
+        a = this.repText.replaceAll(/%/g, '%25') + img
+        // console.log('a', a)
+      }
+      // return
+      let params = [
+        {
+          cid: this.info.courseId,
+          uid: this.userId,
+          s: this.info.stage, //阶段
+          t: this.info.task, //任务
+          type: '1', //1文本 2录音 3 图片
+          ct: 2, //1批注2评论
+          pid: this.info.id, //回复的哪条评论的id
+          c: !!a ? a : this.repText //回复内容
+        }
+      ]
+      // return console.log('params', params)
+      repHf(params)
+        .then(res => {
+          console.log('发评论', res)
+          this.show = false
+          this.repText = ''
+          this.imgList = []
+          this.getData()
+          // this.pzList = res[0]
+          // this.replyList = res[1]
+          // console.log(' this.pzList', res)
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    addHf(val) {
+      this.show = true
+      this.info = val
+    },
     setPanelVisible(bool) {
       this.$emit('update:panelVisible', bool)
     },
@@ -156,12 +264,14 @@ export default {
     getData() {
       const params = {
         cid: this.courseid,
-        s: this.courseType,
-        t: this.taskCount
+        s: this.courseType, //阶段
+        t: this.taskCount //任务
       }
       getCoursePz(params)
         .then(res => {
           this.pzList = res[0]
+          this.replyList = res[1]
+          console.log(' this.pzList', res)
         })
         .catch(err => {
           console.log(err)
@@ -178,6 +288,82 @@ export default {
 .cb-container {
   width: 100%;
   padding-bottom: 1.6rem;
+  .cp-box {
+    width: 100%;
+    height: calc(100% - 1.5rem);
+    /deep/ .van-cell {
+      box-sizing: border-box;
+      padding: 10px 0;
+    }
+    .type-nav {
+      height: 60px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      padding: 10px 0.3rem;
+      box-sizing: border-box;
+
+      .type-nav-box {
+        height: 100%;
+        opacity: 0.5;
+        transition: all 0.5s;
+
+        + .type-nav-box {
+          margin-left: 0.3rem;
+        }
+
+        &.active {
+          opacity: 1;
+        }
+        > img {
+          height: 100%;
+        }
+      }
+    }
+    .cp-conent {
+      height: calc(100% - 60px);
+      overflow: auto;
+      font-size: 14px;
+      width: 100%;
+      // /deep/ .van-field__control {
+      //   // height: 60px !important;
+      // }
+    }
+    .cp-audio {
+      height: calc(100% - 60px);
+      position: relative;
+      width: 100%;
+    }
+  }
+  .replyCss {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    justify-content: space-between;
+    padding: 10px 16px;
+    min-height: 100px;
+    .replyTop {
+      display: flex;
+      font-size: 14px;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .replyCon {
+      font-size: 14px;
+    }
+  }
+  .repPopup {
+    width: 60%;
+    padding: 20px;
+    padding-top: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  /deep/ .van-overlay {
+    z-index: 20 !important;
+  }
   .commentInput {
     background: #fff;
     box-shadow: 0 -1px 3px 1px #dedede82;
@@ -271,7 +457,8 @@ export default {
   }
 
   /deep/.navAndImg img {
-    width: 100%;
+    min-width: auto;
+    max-width: 60%;
   }
 
   .pzContent audio {
@@ -304,9 +491,13 @@ export default {
   .pzList .time {
     text-align: right;
     box-sizing: border-box;
-    padding: 0 10px 10px 0px;
+    padding: 0 10px 10px 10px;
     color: #949494;
     font-size: 14px;
+    display: flex;
+    border-bottom: 1px #ccc solid;
+    justify-content: space-between;
+    align-items: center;
   }
 }
 </style>

src/views/course/components/commentPanel.vue

@@ -16,7 +16,7 @@
       </div>
       <div class="cp-conent" v-if="type == 1">
         <van-field v-model="message" rows="20" autosize type="textarea" placeholder="请输入..." />
-        <div>
+        <div style="margin: 0 10px;margin-top: 10px;">
           <image-component @getImage="getImage" :imgList.sync="imgList"></image-component>
         </div>
       </div>

src/views/course/index.vue

@@ -15,7 +15,7 @@
       <van-pull-refresh
         v-model="isLoading"
         @refresh="onRefresh"
-        :disabled="panelVisible || answerPanelVisible || askPanelVisible"
+        :disabled="repCon || panelVisible || answerPanelVisible || askPanelVisible"
       >
         <course-title :chapInfo="chapInfo" :courseType="courseType" :taskCount="taskCount"></course-title>
         <course-content-list v-if="false"></course-content-list>
@@ -49,6 +49,7 @@
           <comment-box
             v-show="type == 2"
             :panelVisible.sync="panelVisible"
+            :repCon.sync="repCon"
             :courseid="courseid"
             :courseType="courseType"
             :taskCount="taskCount"
@@ -123,7 +124,8 @@ export default {
       panelVisible: false,
       answerPanelVisible: false,
       askPanelVisible: false,
-      choosePanelVisible: false
+      choosePanelVisible: false,
+      repCon: false //控制评课回复弹出框
     }
   },
   methods: {
@@ -187,6 +189,7 @@ export default {
     },
     onRefresh() {
       this.getCourse()
+      this.$refs.comment.getData()
     }
   },
   created() {