Merge branch 'task/reservation/video' into 'release'

fix: 优化预约单上传图片和视频

See merge request com.pica.cloud.education.frontend/pica-admin-consultation!289

src/components/editor/upload-img.vue

 <template>
   <div>
     <el-upload
-      :action="actionurl"
+      action="#"
       :headers="headers"
       :disabled="isDisable"
       list-type="picture-card"
@@ -12,178 +12,112 @@
       :on-exceed="handleExceed"
       :file-list="imgArr"
       :accept="accept"
-      :before-upload="beforeUpload"
+      :before-upload="beforeUploadFile"
     >
       <i class="el-icon-plus" />
     </el-upload>
     <el-dialog :visible.sync="dialogVisible">
       <img
-        v-if="isImage"
         width="100%"
         :src="dialogImageUrl"
         alt=""
       >
-      <video
-        v-if="isVideo"
-        id="video"
-        :src="dialogVideoUrl"
-        style="width: 100%;height: 80vh;object-fit: fill;"
-        autoplay
-        controls
-        loop
-      />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getBaseUrl } from '@/utils/index';
-export default {
-  props: {
-    isDisable: {
-      type: Boolean,
-      default: false,
-    },
-    imgList: {
-      type: Array,
-      default: () => {
-        return [];
+  import { doUpload, getFilePath } from '@/utils/qiniu-util';
+  import { openLoading, closeLoading } from '@/utils/utils';
+  let _this = null;
+
+  export default {
+    props: {
+      isDisable: {
+        type: Boolean,
+        default: false,
       },
-    },
-  },
-  data() {
-    return {
-      dialogImageUrl: '',
-      dialogVisible: false,
-      imgArr: [],
-      headers: {
-        token: localStorage.getItem('token'),
+      imgList: {
+        type: Array,
+        default: () => {
+          return [];
+        },
       },
-      actionurl: '#',
-      accept: '.png,.jpeg,.mp4',
-      isImage: false,
-      isVideo: false,
-      dialogVideoUrl: ''
-    };
-  },
-  watch: {
-    imgList(newv) {
-      this.imgArr = newv;
-    },
-  },
-  created() {
-    this.actionurl = getBaseUrl('/diagnose/illness/file');
-  },
-  methods: {
-    handleRemove(file, fileList) {
-      console.log(file);
-      this.imgArr = fileList;
     },
-    handlePictureCardPreview(file) {
-      this.dialogVisible = true;
-      if (file?.raw) {
-        const isImage = this.isImageURL(file?.raw?.name);
-        const isVideo = this.isVideoFormat(file?.raw?.name);
-        if (isVideo) {
-          this.isVideoStatus(file);
-        }
-
-        if (isImage) {
-          this.isImageStatus(file);
-        }
-        return;
-      }
-
-      if (this.isImageURL(file?.url)) {
-        this.isImageStatus(file);
-      } else {
-        this.isVideoStatus(file);
-      }
-    },
-    isImageStatus(file) {
-      this.isImage = true;
-      this.isVideo = false;
-      this.dialogImageUrl = file?.url;
-    },
-    isVideoStatus(file) {
-      this.isVideo = true;
-      this.isImage = false;
-      this.dialogVideoUrl = file.url;
-      // this.getVideoCover(file);
-    },
-    isImageURL(url) {
-      return /\.(jpg|jpeg|png)$/i.test(url);
-    },
-    isVideoFormat(url) {
-      const videoExtensions = /\.(mp4)$/i;
-      return videoExtensions.test(url);
+    data() {
+      return {
+        dialogImageUrl: '',
+        dialogVisible: false,
+        imgArr: [],
+        headers: {
+          token: localStorage.getItem('token'),
+        },
+        accept: '.png,.jpeg',
+      };
     },
-    handleExceed(files, fileList) {
-      this.$message.warning(
-        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
-          files.length + fileList.length
-        } 个文件`
-      );
+    watch: {
+      imgList(newv) {
+        this.imgArr = newv;
+      },
     },
-    sucess(response, file, fileList) {
-      console.log(response);
-      // this.getVideoCover(file);
-      this.imgArr = fileList;
+    created() {
+      _this = this;
     },
-    setNewArr() {
-      const newArr = [];
-      if (this.imgArr && this.imgArr.length) {
-        this.imgArr.forEach((item) => {
-          if (item.response) {
-            newArr.push(item.response.data);
-          } else if (item.url && item.from) {
-            newArr.push(item.url);
-          }
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file);
+        this.imgArr = fileList;
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(
+          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+            files.length + fileList.length
+          } 个文件`
+        );
+      },
+      sucess(response, file, fileList) {
+        console.log(response);
+        console.log(file);
+        this.imgArr = fileList;
+      },
+      setNewArr() {
+        const newArr = [];
+        if (this.imgArr && this.imgArr.length) {
+          this.imgArr.forEach((item) => {
+            if (item.url && item.status === 'success') {
+              newArr.push(item.url);
+            }
+          });
+        }
+        return newArr;
+      },
+      beforeUploadFile(file) {
+        openLoading(_this);
+        doUpload(
+          _this,
+          file,
+          getFilePath(file, null),
+          null,
+          null,
+          1
+        ).then(function(res) {
+          closeLoading(_this);
+          const fileItem = {
+              name: res.name,
+              size: res.size,
+              status: 'success',
+              url: res.fullPath
+          };
+          _this.imgArr.push(fileItem);
+          _this.$message.success('上传成功');
         });
-      }
-      return newArr;
-    },
-    beforeUpload(file) {
-      const isImage = this.isImageURL(file?.name);
-      const isVideo = this.isVideoFormat(file?.name);
-      if (isImage) {
-        this.isImage = true;
-        this.isVideo = false;
-      }
-
-      if (isVideo) {
-        this.isVideo = true;
-        this.isImage = false;
-      }
+      },
     },
-    /**
-     * 获取视频第一帧作为回显封面
-     * @param file 至少应包含url信息，即 {url: ""}
-    */
-    getVideoCover(file) {
-      const video = document.createElement('video'); // 也可以自己创建video
-      video.src = file.url; // url地址 url跟 视频流是一样的
-      var canvas = document.createElement('canvas'); // 获取 canvas 对象
-      const ctx = canvas.getContext('2d'); // 绘制2d
-      video.crossOrigin = 'anonymous'; // 解决跨域问题，也就是提示污染资源无法转换视频
-      video.currentTime = 1; // 第一帧
-
-      video.oncanplay = () => {
-        canvas.width = video.clientWidth ? video.clientWidth : 320; // 获取视频宽度
-        canvas.height = video.clientHeight ? video.clientHeight : 320; // 获取视频高度
-        // 利用canvas对象方法绘图
-        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        // 转换成base64形式
-        const videoFirstimgsrc = canvas.toDataURL('image/*'); // 截取后的视频封面
-        const videoUrl = file.url;
-        file.url = videoFirstimgsrc; // file的url储存封面图片
-        this.dialogVideoUrl = videoUrl;
-        video.remove();
-        canvas.remove();
-      };
-    }
-  },
-};
+  };
 </script>
 
 <style></style>

src/components/editor/upload-video.vue

+<template>
+  <div class="upload">
+    <el-upload
+      action="#"
+      :headers="headers"
+      :disabled="isDisable"
+      :on-remove="handleRemove"
+      :on-success="sucess"
+      :on-exceed="handleExceed"
+      :file-list="imgArr"
+      accept="video/mp4"
+      :limit="15"
+      :before-upload="beforeUploadFile"
+      multiple
+    >
+      <el-button
+        size="small"
+        type="primary"
+      >
+        点击上传
+      </el-button>
+    </el-upload>
+    <div class="upload-main">
+      <video
+        v-for="(value, index) in imgArr"
+        :key="index"
+        :src="value.url"
+        class="upload-main__video"
+        controls
+        preload
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import { doUpload, getFilePath } from '@/utils/qiniu-util';
+  import { openLoading, closeLoading } from '@/utils/utils';
+  let _this = null;
+
+  export default {
+    props: {
+      isDisable: {
+        type: Boolean,
+        default: false,
+      },
+      imgList: {
+        type: Array,
+        default: () => {
+          return [];
+        },
+      },
+    },
+    data() {
+      return {
+        dialogImageUrl: '',
+        imgArr: [],
+        headers: {
+          token: localStorage.getItem('token'),
+        },
+      };
+    },
+    watch: {
+      imgList(newv) {
+        const newList = newv?.map(item => {
+          const suffixUrl = item?.url.substring(item?.url.lastIndexOf('/') + 1); // 接口不返回name，上传数据列表名称展示为截取url最后“/”后面的内容
+          item.name = suffixUrl;
+          return item;
+        });
+        this.imgArr = newList;
+      },
+    },
+    created() {
+      _this = this;
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file);
+        this.imgArr = fileList;
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(
+          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+            files.length + fileList.length
+          } 个文件`
+        );
+      },
+      sucess(response, file, fileList) {
+        console.log(response);
+        console.log(file);
+        this.imgArr = fileList;
+      },
+      setNewArr() {
+        const newArr = [];
+        if (this.imgArr && this.imgArr.length) {
+          this.imgArr.forEach((item) => {
+            if (item.url && item.status === 'success') {
+              newArr.push(item.url);
+            }
+          });
+        }
+        return newArr;
+      },
+      beforeUploadFile(file) {
+        openLoading(_this);
+        doUpload(
+          _this,
+          file,
+          getFilePath(file, null),
+          null,
+          null,
+          ''
+        ).then(function(res) {
+          closeLoading(_this);
+          const fileItem = {
+              name: res.name ? res.name : res.fullPath,
+              size: res.size,
+              status: 'success',
+              url: res.fullPath
+          };
+          _this.imgArr.push(fileItem);
+          _this.$message.success('上传成功');
+        });
+      }
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .upload {
+    &-main {
+      overflow-y: scroll;
+
+      &__video {
+        margin-top: 5px;
+        margin-right: 25px;
+        width: 200px;
+        height: 200px;
+        object-fit: fill;
+      }
+    }
+  }
+
+  /* 隐藏滚动条 */
+  ::-webkit-scrollbar {
+    display: none;
+  }
+</style>

src/views/IM/diagnosis-admin/diagnosis-editor.vue

@@ -675,7 +675,21 @@
             :is-disable="editorType == 2"
             :img-list="
               formData.illnessImageUrls.filter((i) => {
-                return i && !i.url.includes('.pdf');
+                return i && isImageUrl(i.url) && !i.url.includes('.pdf');
+              })
+            "
+          />
+        </el-form-item>
+        <el-form-item label="病情视频">
+          <p class="img-title">
+            请上传患处视频、所用药品、与病情相关的线上诊疗记录视频、检查检测报告，请保证视频清晰完整，以便医生确认病情
+          </p>
+          <upload-video
+            ref="videoComponent"
+            :is-disable="editorType == 2"
+            :img-list="
+              formData.illnessImageUrls.filter((i) => {
+                return i && isVideoUrl(i.url) && !i.url.includes('.pdf');
               })
             "
           />
@@ -989,6 +1003,7 @@ import {
 } from '@/api/diagnosis';
 import uploadImg from '@/components/editor/upload-img';
 import uploadMusic from '@/components/editor/upload-music';
+import uploadVideo from '@/components/editor/upload-video';
 import {
   CAR_LIST,
   D_S_LIST,
@@ -1010,6 +1025,7 @@ export default {
   components: {
     uploadImg,
     uploadMusic,
+    uploadVideo
   },
   data() {
     return {
@@ -1417,9 +1433,13 @@ export default {
         this.formData.birthday = new Date(this.formData.birthdayStr);
         // this.formData.birthday = this.formData.birthdayStr;
         const params = JSON.parse(JSON.stringify(this.formData));
-        params.illnessImageUrls = this.$refs.imgComponent
+        const newImageList = this.$refs.imgComponent
           ? [...this.$refs.imgComponent.setNewArr()]
           : [];
+        const newVideoList = this.$refs.videoComponent
+          ? [...this.$refs.videoComponent.setNewArr()]
+          : [];
+        params.illnessImageUrls = newImageList.concat(newVideoList);
         params.illnessAudioUrls = this.$refs.musicComponent
           ? [...this.$refs.musicComponent.setNewArr()]
           : [];
@@ -1462,6 +1482,15 @@ export default {
     openPdf(item) {
       window.open(item.url);
     },
+    // 正则匹配图片格式
+    isImageUrl(url) {
+      return /\.(jpg|jpeg|png)$/i.test(url);
+    },
+    // 正则匹配视频格式
+    isVideoUrl(url) {
+      const videoExtensions = /\.(mp4)$/i;
+      return videoExtensions.test(url);
+    },
   },
 };
 </script>
@@ -1475,7 +1504,6 @@ export default {
       margin-bottom: 30px;
     }
     .img-title {
-      margin-top: 20px;
       font-size: 14px;
       color: #6d8bc7;
       line-height: 40px;