修改

src/api/system/stationAvatar.js

@@ -9,8 +9,16 @@ export function updateNurseStationHeads(data) {
     })
 }
 
+//海报视频上传
 
 
+export function updatePoserHeads(data) {
+    return request({
+        url: '/system/poser/updatePoserHeads',
+        method: 'post',
+        data: data
+    })
+}
 
 export function posts(data) {
     return request({

src/views/system/poser/index.vue

@@ -762,11 +762,9 @@ export default {
       getListBy(this.queryParams).then(res => {
         this.nurseStationlist = res.rows;
         this.queryParams.nurseStationId = res.rows[0].id;
-        this.nurseItemquery.nurseStationId = JSON.parse(
+        this.nurseItemquery.nurseStationId = res.rows[0].id;
-          JSON.stringify(res.rows[0].id)
+        this.getList();
-        );
       });
-      this.getList();
     },
     //打开护理站列表
     nurseStationshowclick() {
@@ -794,7 +792,7 @@ export default {
       }
       this.form.nurseItemName = null;
       this.form.nurseItemId = null;
-      this.nurseitemid = null
+      this.nurseitemid = null;
       this.nurseStationshow = false;
       this.nurseItemnuser = item.id;
       this.nurseItemquery.nurseStationId = item.id;

src/views/system/stationAvatar/index.vue

@@ -2,9 +2,18 @@
   <div>
     <div
       class="user-info-head"
+      :class="video.VideoPath ? 'wihi' : ''"
       @click="editCropper()"
-      style="width: 100px; height: 100px"
     >
+      <video
+        style="width: 208px; height: 208px"
+        v-if="video.VideoPath"
+        v-bind:src="video.VideoPath"
+        class="avatar video-avatar"
+        controls="controls"
+      >
+        您的浏览器不支持视频播放
+      </video>
       <img
         v-if="options.img"
         v-bind:src="options.img"
@@ -12,7 +21,7 @@
         style="width: 100px; height: 100px; line-height: 200px"
       />
       <i
-        v-else
+        v-else-if="!options.img && !video.VideoPath"
         class="el-icon-plus avatar-uploader-icon"
         style="
           position: absolute;
@@ -24,7 +33,7 @@
     </div>
 
     <el-dialog
-      title="上传图片"
+      :title="title"
       :visible.sync="openimg"
       width="950px"
       append-to-body
@@ -47,6 +56,15 @@
         </el-col>
         <el-col :xs="24" :md="12" :style="{ height: '350px' }">
           <div class="avatar-upload-preview">
+            <video
+              style="width: 100%; height: 100%"
+              v-if="videoForm.showVideoPath"
+              v-bind:src="videoForm.showVideoPath"
+              class="avatar video-avatar"
+              controls="controls"
+            >
+              您的浏览器不支持视频播放
+            </video>
             <img
               style="width: 100%; height: 100%"
               v-if="previews.url"
@@ -54,6 +72,9 @@
             />
             <div v-else></div>
           </div>
+          <div class="title" v-if="types != 'posterVideoUrl'&&types!='posterPictureUrl'">
+            请上传图片为800x800px的正方形
+          </div>
         </el-col>
       </el-row>
       <br />
@@ -71,7 +92,7 @@
             </el-button>
           </el-upload>
         </el-col>
-        <el-col :lg="{ span: 1, offset: 2 }" :md="2">
+        <!-- <el-col :lg="{ span: 1, offset: 2 }" :md="2">
           <el-button
             icon="el-icon-plus"
             size="small"
@@ -98,8 +119,8 @@
             size="small"
             @click="rotateRight()"
           ></el-button>
-        </el-col>
+        </el-col> -->
-        <el-col :lg="{ span: 2, offset: 6 }" :md="2">
+        <el-col :lg="{ span: 2, offset: 20 }" :md="2">
           <el-button type="primary" size="small" @click="uploadImg()"
             >提 交</el-button
           >
@@ -112,12 +133,16 @@
 <script>
 import { VueCropper } from "vue-cropper";
 import baseurl from "@/api/baseurl.js";
-import { updateNurseStationHeads, posts } from "@/api/system/stationAvatar.js";
+import {
+  updateNurseStationHeads,
+  posts,
+  updatePoserHeads,
+} from "@/api/system/stationAvatar.js";
 
 export default {
   components: { VueCropper },
 
-  props: ["img", "type", "item"],
+  props: ["img", "type", "item", "tovideo"],
   data() {
     return {
       imageUrl: "",
@@ -127,7 +152,7 @@ export default {
       // 是否显示cropper
       visible: false,
       // 弹出层标题
-      title: "上传头像",
+      title: "上传图片/视频",
       options: {
         img: null, //裁剪图片的地址
         autoCrop: true, // 是否默认生成截图框
@@ -137,11 +162,26 @@ export default {
       },
       previews: {},
       items: {},
+      //显示上传按钮
+      videoForm: {
+        showVideoPath: null, //回显的变量
+      },
+      video: {
+        VideoPath: null, //回显的变量
+      },
     };
   },
   created() {
     this.types = this.type;
     this.items = this.item;
+    if (this.tovideo == null) {
+      this.video.VideoPath = null;
+    } else if (this.tovideo == "") {
+      this.video.VideoPath = null;
+    } else {
+      this.video.VideoPath = baseurl + this.tovideo;
+    }
+    console.log(this.video);
     if (this.img == null) {
       this.options.img = null;
     } else if (this.img == "") {
@@ -149,8 +189,16 @@ export default {
     } else {
       this.options.img = baseurl + this.img;
     }
+    if (this.types == "posterVideoUrl") {
+      this.title = "上传视频";
+    } else {
+      this.title = "上传图片";
+    }
   },
   watch: {
+    tovideo: {
+      handler(newimg, oldimg) {},
+    },
     item: {
       handler(newimg, oldimg) {
         this.items = this.item;
@@ -199,48 +247,72 @@ export default {
     },
     // 上传预处理
     beforeUpload(file) {
-      if (file.type.indexOf("image/") == -1) {
+      if (this.types == "posterVideoUrl") {
-        this.$modal.msgError(
-          "文件格式错误，请上传图片类型,如:JPG,PNG后缀的文件。"
-        );
-      } else {
         const reader = new FileReader();
         this.previews.data = file;
         this.previews.url = URL.createObjectURL(file);
+        this.videoForm.showVideoPath = URL.createObjectURL(file);
         reader.readAsDataURL(file);
         reader.onload = () => {
           // this.options.img = reader.result;
         };
+      } else {
+        if (file.type.indexOf("image/") == -1) {
+          this.$modal.msgError(
+            "文件格式错误，请上传图片类型,如:JPG,PNG后缀的文件。"
+          );
+        } else {
+          const reader = new FileReader();
+          this.previews.data = file;
+          this.previews.url = URL.createObjectURL(file);
+          reader.readAsDataURL(file);
+          reader.onload = () => {
+            // this.options.img = reader.result;
+          };
+        }
       }
     },
     // 上传图片
     uploadImg() {
       let formData = new FormData();
-      formData.append("file", this.previews.data);
+      if (this.previews.data) {
-      formData.append("type", this.types);
+        formData.append("file", this.previews.data);
-      updateNurseStationHeads(formData).then((response) => {
+        formData.append("type", this.types);
-        this.options.img = baseurl + response.imgUrl;
+        if (this.types == "posterVideoUrl") {
-        this.$emit("imgUrl", response.imgUrl);
+          updatePoserHeads(formData).then((response) => {
-        console.log(this.items);
+            this.video.VideoPath = baseurl + response.imgUrl;
-        console.log(this.types);
+            this.$emit("imgUrl", response.imgUrl);
-        if (this.types == "attributePitureUrl") {
+            this.openimg = false;
-          this.items.attributePitureUrl = response.imgUrl;
+          });
-          this.$emit("item", JSON.stringify(this.items));
+        } else {
-        }
+          updateNurseStationHeads(formData).then((response) => {
-        if (this.types == "nurseItemClassifyUrl") {
+            this.options.img = baseurl + response.imgUrl;
-          this.items.classifyPictureUrl = response.imgUrl;
+            this.$emit("imgUrl", response.imgUrl);
-          this.$emit("item", JSON.stringify(this.items));
+            if (this.types == "attributePitureUrl") {
-        }
+              this.items.attributePitureUrl = response.imgUrl;
-        if (this.types == "nurseStationClassifyUrl") {
+              this.$emit("item", JSON.stringify(this.items));
-          this.items.classifyPictureUrl = response.imgUrl;
+            }
-          this.$emit("item", JSON.stringify(this.items));
+            if (this.types == "nurseItemClassifyUrl") {
+              this.items.classifyPictureUrl = response.imgUrl;
+              this.$emit("item", JSON.stringify(this.items));
+            }
+            if (this.types == "nurseStationClassifyUrl") {
+              this.items.classifyPictureUrl = response.imgUrl;
+              this.$emit("item", JSON.stringify(this.items));
+            }
+            if (this.types == "posterPictureUrl") {
+              this.items.posterPictureUrl = response.imgUrl;
+              this.$emit("item", JSON.stringify(this.items));
+            }
+            this.openimg = false;
+          });
         }
+      } else {
         this.openimg = false;
-      });
+      }
     },
     // 实时预览
     realTime(data) {
-      console.log(data);
       this.previews = data;
     },
     // 关闭窗口
@@ -252,6 +324,12 @@ export default {
 };
 </script>
 <style scoped lang="scss">
+.title {
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  transform: translate(-50%, 0%);
+}
 .avatar-upload-preview {
   position: absolute;
   top: 0%;
@@ -266,8 +344,9 @@ export default {
 .user-info-head {
   position: relative;
   display: inline-block;
-  height: 120px;
   background: #fafafa;
+  width: 100px;
+  height: 100px;
 }
 
 .user-info-head:hover:after {
@@ -287,4 +366,12 @@ export default {
   line-height: 110px;
   border-radius: 50%;
 }
+.wihi {
+  background-color: #fff;
+  width: 100px;
+  height: 100px;
+}
+.wihi:hover:after {
+  transform: translate(50%, 50%);
+}
 </style>