新增功能及build

src/views/course/components/ImageComponent.vue

@@ -0,0 +1,135 @@
+<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 v-for="(item, index) in imgList" :key="index" class="imgItem">
+        <div class="itemImg" @click="previewImg(pptImgUrl1)">
+          <img :src="item" alt="" />
+        </div>
+        <div class="deleteImg" @click="deleteItem(item)">
+          <img src="../../../assets/images/course/delete.png" alt="" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imgList: []
+    }
+  },
+  methods: {
+    previewImg(url) {
+      this.$hevueImgPreview(url)
+    },
+    addImg(e) {
+      var el = e.currentTarget
+      el.getElementsByTagName('input')[0].click()
+      e.target.value = ''
+    },
+    deleteItem(i) {
+      this.imgList.splice(this.imgList.indexOf(i), 1)
+      this.$forceUpdate()
+    },
+    beforeUpload(event) {
+      var file = event.target.files[0]
+      var credentials = {
+        accessKeyId: 'AKIATLPEDU37QV5CHLMH',
+        secretAccessKey: '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'
+      } //秘钥形式的登录上传
+      window.AWS.config.update(credentials)
+      window.AWS.config.region = 'cn-northwest-1' //设置区域
+      var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' } }) //选择桶
+      var _this = this
+      if (file) {
+        var params = {
+          Key:
+            file.name.split('.')[0] +
+            new Date().getTime() +
+            '.' +
+            file.name.split('.')[file.name.split('.').length - 1],
+          ContentType: file.type,
+          Body: file,
+          'Access-Control-Allow-Credentials': '*',
+          ACL: 'public-read'
+        } //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+        var options = {
+          partSize: 2048 * 1024 * 1024,
+          queueSize: 2,
+          leavePartsOnError: true
+        }
+        bucket
+          .upload(params, options)
+          .on('httpUploadProgress', function (evt) {
+            //这里可以写进度条
+          })
+          .send(function (err, data) {
+            if (err) {
+              _this.$message.error('上传失败')
+            } else {
+              _this.imgList.push(data.Location)
+              _this.getImage(_this.imgList)
+            }
+          })
+      }
+    },
+    getImage(imageList) {
+      this.$emit('getImage', imageList)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.imgBox {
+  margin: 10px;
+  .imgCss {
+    width: 80px;
+    height: 80px;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .imgList {
+    margin: 10px 0 0 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    .imgItem {
+      position: relative;
+      width: 80px;
+      margin: 0 10px 10px 0;
+      .itemImg {
+        width: 80px;
+        height: 80px;
+        z-index: 1;
+        > img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      .deleteImg {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 9;
+        > img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/course/components/commentBox.vue

@@ -9,18 +9,20 @@
             {{ pz.username && pz.username.length > 8 ? pz.username.substring(0, 8) + '...' : pz.username }}的批注
           </div>
           <!--  -->
-          <div class="pzDelete" @click="deletePz(pz.id)" v-if="pz.userid == userinfo.userid">
-            删除
-          </div>
+          <div class="pzDelete" @click="deletePz(pz.id)" v-if="pz.userid == userinfo.userid">删除</div>
         </div>
-        <div class="pzContent cont" v-html="pz.content" v-if="pz.type == '1'"></div>
+        <div @click="checkImg(getImgList(pz.content))" class="pzContent cont navAndImg" v-html="pz.content" v-if="pz.type == '1'"></div>
         <div class="pzContent" v-if="pz.type == '2'">
           <audio :src="pz.content" controls="controls" ref="audio">
             Your browser does not support the audio element.
           </audio>
         </div>
         <div class="pzContent" v-if="pz.type == '3'">
-          <img :src="pz.content" style="width: 90%; margin: 0 auto; display: block" @click="previewImg(pz.content)" />
+          <img
+            :src="pz.content"
+            style="width: 100%; margin: 0px auto; display: block"
+            @click="previewImg(pz.content)"
+          />
         </div>
         <div class="time">
           {{ pz.time }}
@@ -72,7 +74,18 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['userinfo'])
+    ...mapGetters(['userinfo']),
+    getImgList() {
+      return function (val) {
+        let srcList = [] // 定义一个数组用来接收后面的img地址
+
+        val.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (match, capture) {
+          // 查找匹配的元素   match为整个img标签  capture为src中的内容
+          srcList.push(capture)
+        })
+        return srcList
+      }
+    }
   },
   watch: {
     courseType(newValue, oldValue) {
@@ -86,6 +99,18 @@ export default {
     }
   },
   methods: {
+    previewImg(url) {
+      this.$hevueImgPreview(url)
+    },
+    checkImg(list) {
+      if (!list.length) {
+        return
+      }
+      this.$hevueImgPreview({
+        multiple: true, // 开启多图预览模式
+        imgList: list // 需要预览的多图数组
+      })
+    },
     deletePz(id) {
       this.$dialog({
         message: '确定删除此批注吗？',
@@ -234,6 +259,10 @@ export default {
     }
   }
 
+  /deep/.navAndImg img{
+    width: 100%;
+  }
+
   .pzContent audio {
     width: 100%;
     height: 1.2rem;

src/views/course/components/commentPanel.vue

@@ -16,6 +16,9 @@
       </div>
       <div class="cp-conent" v-if="type == 1">
         <van-field v-model="message" rows="20" autosize type="textarea" placeholder="请输入..." />
+        <div>
+          <image-component @getImage="getImage"></image-component>
+        </div>
       </div>
       <div class="cp-audio" v-if="type == 2">
         <audio-component @addPz="addPz"></audio-component>
@@ -25,6 +28,7 @@
 </template>
 
 <script>
+import ImageComponent from './ImageComponent.vue'
 import AudioComponent from './AudioComponent.vue'
 import { addPz2 } from '@/api/course'
 import { mapGetters } from 'vuex'
@@ -48,12 +52,14 @@ export default {
     }
   },
   components: {
-    AudioComponent
+    AudioComponent,
+    ImageComponent
   },
   data() {
     return {
       type: 1,
-      message: ''
+      message: '',
+      imgList: []
     }
   },
   computed: {
@@ -66,18 +72,30 @@ export default {
     setType(type) {
       this.type = type
     },
+    getImage(imgList) {
+      this.imgList = imgList;
+      this.$forceUpdate();
+    },
     addPz(type, content) {
+      var a = ''
       if (type === 1 && this.message === '') {
         this.$toast({ message: '批注不能为空！', type: 'fail' })
         return
       }
+      if (type === 1 && this.message != '') {
+        var img = ''
+        for (var i = 0; i < this.imgList.length; i++) {
+          img += "<img src='" + this.imgList[i] + "' />"
+        }
+        a = this.message.replaceAll(/%/g, '%25') + img
+      }
       const params = [
         {
           cid: this.courseid,
           uid: this.userinfo.userid,
           s: this.courseType,
           t: this.taskCount,
-          c: type === 1 ? this.message.replaceAll(/%/g, '%25') : content,
+          c: type === 1 ? a : content,
           type: type
         }
       ]
@@ -156,7 +174,7 @@ export default {
         transition: all 0.5s;
 
         + .type-nav-box {
-          margin-left: .3rem;
+          margin-left: 0.3rem;
         }
 
         &.active {
@@ -172,6 +190,9 @@ export default {
       overflow: auto;
       font-size: 14px;
       width: 100%;
+      /deep/ .van-field__control {
+        height: 399px !important;
+      }
     }
     .cp-audio {
       height: calc(100% - 60px);