From 8f22f79f0315de50f2d939118356afaa70580562 Mon Sep 17 00:00:00 2001
From: shidongli <shidongli>
Date: Fri, 23 Aug 2024 14:27:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/manage/materials/index.vue | 357 +++++++++++------
 src/views/system/cropper/index.vue   | 561 +++++++++++++++++++++++++++
 2 files changed, 807 insertions(+), 111 deletions(-)
 create mode 100644 src/views/system/cropper/index.vue

diff --git a/src/views/manage/materials/index.vue b/src/views/manage/materials/index.vue
index 456f3ad..12cf5d3 100644
--- a/src/views/manage/materials/index.vue
+++ b/src/views/manage/materials/index.vue
@@ -1,9 +1,23 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="创建时间">
-        <el-date-picker v-model="daterangeCreateTime" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
-          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+        <el-date-picker
+          v-model="daterangeCreateTime"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
       </el-form-item>
       <!-- <el-form-item label="素材状态" prop="materialsStatus">
         <el-select
@@ -20,8 +34,12 @@
         </el-select>
       </el-form-item> -->
       <el-form-item label="素材名称" prop="materialsName">
-        <el-input v-model="queryParams.materialsName" placeholder="请输入素材名称" clearable
-          @keyup.enter.native="handleQuery" />
+        <el-input
+          v-model="queryParams.materialsName"
+          placeholder="请输入素材名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <!-- <el-form-item label="素材来源" prop="materialsName">
         <el-select
@@ -40,53 +58,98 @@
       </el-form-item> -->
 
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-          v-hasPermi="['manage:materials:add']">新增素材</el-button>
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['manage:materials:add']"
+          >新增素材</el-button
+        >
       </el-col>
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete" :disabled="multiple"
-          v-hasPermi="['manage:materials:remove']">批量删除</el-button>
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          @click="handleDelete"
+          :disabled="multiple"
+          v-hasPermi="['manage:materials:remove']"
+          >批量删除</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
-    <el-tabs v-model="queryParams.materialsType" type="card" @tab-click="handleClick" style="flex: 1;">
+    <el-tabs
+      v-model="queryParams.materialsType"
+      type="card"
+      @tab-click="handleClick"
+      style="flex: 1"
+    >
       <el-tab-pane label="图片" name="IMAGE_TEXT"></el-tab-pane>
       <el-tab-pane label="视频" name="VIDEO"></el-tab-pane>
     </el-tabs>
     <div class="bodytopxj">
       <div class="bodylist" v-for="item in materialsList" :key="item.id">
-        <el-checkbox v-model="item.checked" @change="changecheck($event, item)"></el-checkbox>
+        <el-checkbox
+          v-model="item.checked"
+          @change="changecheck($event, item)"
+        ></el-checkbox>
         <div @click.stop="viewshow(item)">
-          <img :src="baseUrl + item.materialsFilePath" alt=""
-            v-if="item.materialsFilePath && !item.videoCoverFilePath" />
-          <img :src="baseUrl + item.videoCoverFilePath" alt=""
-            v-if="item.videoCoverFilePath && item.materialsFilePath" />
+          <!-- <img
+            :src="baseUrl + item.materialsFilePath"
+            alt=""
+            v-if="item.materialsFilePath && !item.videoCoverFilePath"
+          /> -->
+          <img :src="baseUrl + item.videoCoverFilePath" alt="" />
           <div class="texttitle">{{ item.materialsName }}</div>
           <div class="dataliat">
-            创建人/创建时间：<span>{{ item.createBy }}</span>/<span>{{ item.createTime }}</span>
+            创建人/创建时间：<span>{{ item.createBy }}</span
+            >/<span>{{ item.createTime }}</span>
           </div>
           <!-- <div class="dataliat">素材来源：</div>
           <div class="dataliat">标签：暂无</div> -->
-          <div class="dataliat bq" v-if="item.indications ||
-      item.drugName ||
-      item.applicableDiseases ||
-      item.surgicalName ||
-      item.inspectionItems ||
-      item.checkItems
-      ">
+          <div
+            class="dataliat bq"
+            v-if="
+              item.indications ||
+              item.drugName ||
+              item.applicableDiseases ||
+              item.surgicalName ||
+              item.inspectionItems ||
+              item.checkItems
+            "
+          >
             标签：
             <span v-if="item.indications">{{ item.indications }}，</span>
             <span v-if="item.drugName">{{ item.drugName }}，</span>
-            <span v-if="item.applicableDiseases">{{ item.applicableDiseases }}，</span>
+            <span v-if="item.applicableDiseases"
+              >{{ item.applicableDiseases }}，</span
+            >
             <span v-if="item.surgicalName">{{ item.surgicalName }}，</span>
-            <span v-if="item.inspectionItems">{{ item.inspectionItems }}，</span>
+            <span v-if="item.inspectionItems"
+              >{{ item.inspectionItems }}，</span
+            >
             <span v-if="item.checkItems">{{ item.checkItems }}，</span>
           </div>
           <div class="dataliat bq" v-else>标签：暂无</div>
@@ -98,35 +161,95 @@
 
     <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
-    <myPagination v-show="total > 0" :total="total" :pageSize="queryParams.pageSize"
-      :indexFromWrap="queryParams.pageNum" @updateCPage="updateCPage"></myPagination>
+    <myPagination
+      v-show="total > 0"
+      :total="total"
+      :pageSize="queryParams.pageSize"
+      :indexFromWrap="queryParams.pageNum"
+      @updateCPage="updateCPage"
+    ></myPagination>
 
     <!-- 添加或修改素材信息对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body v-if="open">
-      <el-form ref="form" :model="form" :rules="rules" label-width="110px" :inline="true">
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="800px"
+      append-to-body
+      v-if="open"
+    >
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        label-width="110px"
+        :inline="true"
+      >
         <el-form-item label="素材类型" prop="materialsType">
-          <el-radio v-model="form.materialsType" label="IMAGE_TEXT" @change="radioChange('IMAGE_TEXT')">图文</el-radio>
-          <el-radio v-model="form.materialsType" label="VIDEO" @change="radioChange('VIDEO')">视频</el-radio>
+          <el-radio
+            v-model="form.materialsType"
+            label="IMAGE_TEXT"
+            @change="radioChange('IMAGE_TEXT')"
+            >图文</el-radio
+          >
+          <el-radio
+            v-model="form.materialsType"
+            label="VIDEO"
+            @change="radioChange('VIDEO')"
+            >视频</el-radio
+          >
         </el-form-item>
         <br />
         <el-form-item label="素材名称" prop="materialsName">
           <el-input v-model="form.materialsName" placeholder="请输入素材名称" />
         </el-form-item>
         <br />
-
-        <el-form-item label="素材上传" prop="materialsFilePath" v-if="form.materialsType == 'IMAGE_TEXT'">
-          <stationAcatar @imgUrl="imgUrl" :img="form.materialsFilePath" :type="'materialsCoverUrl'" />
+        <el-form-item
+          label="素材上传"
+          prop="materialsFilePath"
+          v-if="form.materialsType == 'IMAGE_TEXT'"
+        >
+          <cropper
+            @imgUrl="imgUrl"
+            @imgUrlnew="imgUrlnew"
+            :img="form.materialsFilePath"
+            :imgnew="form.videoCoverFilePath"
+            :type="'materialsCoverUrl'"
+            :titles="title"
+          />
         </el-form-item>
-        <el-form-item label="视频封面" prop="videoCoverFilePath" v-if="form.materialsType == 'VIDEO'">
-          <stationAcatar @imgUrl="imgUrl3" :img="form.videoCoverFilePath" :type="'materialsCoverUrl'" />
+        <el-form-item
+          label="视频封面"
+          prop="videoCoverFilePath"
+          v-if="form.materialsType == 'VIDEO'"
+        >
+          <cropper
+            @imgUrlvido="imgUrlvido"
+            :img="form.videoCoverFilePath"
+            :type="'materialsCoverUrlvido'"
+            :titles="title"
+          />
         </el-form-item>
+        <br />
 
-        <el-form-item label="视频素材上传" prop="materialsFilePath" v-if="form.materialsType == 'VIDEO'">
-          <trainingAvatar @imgUrl="imgUrl2" :tovideo="form.materialsFilePath" :type="'materialsVideoUrl'" />
+        <el-form-item
+          label="视频素材上传"
+          prop="materialsFilePath"
+          v-if="form.materialsType == 'VIDEO'"
+        >
+          <trainingAvatar
+            @imgUrl="imgUrl2"
+            :tovideo="form.materialsFilePath"
+            :type="'materialsVideoUrl'"
+          />
         </el-form-item>
 
         <el-form-item label="素材摘要" prop="materialsAbstract">
-          <el-input style="width: 530px" v-model="form.materialsAbstract" type="textarea" placeholder="请输入内容" />
+          <el-input
+            style="width: 530px"
+            v-model="form.materialsAbstract"
+            type="textarea"
+            placeholder="请输入内容"
+          />
         </el-form-item>
         <div style="margin: 20px; font-weight: 700; font-size: 18px">
           标签管理
@@ -136,7 +259,10 @@
           <el-input v-model="form.indications" placeholder="请输入适用症状" />
         </el-form-item>
         <el-form-item label="适用疾病" prop="applicableDiseases">
-          <el-input v-model="form.applicableDiseases" placeholder="请输入适用疾病" />
+          <el-input
+            v-model="form.applicableDiseases"
+            placeholder="请输入适用疾病"
+          />
         </el-form-item>
         <el-form-item label="药物名称" prop="drugName">
           <el-input v-model="form.drugName" placeholder="请输入药物名称" />
@@ -148,11 +274,24 @@
           <el-input v-model="form.checkItems" placeholder="请输入检查项目" />
         </el-form-item>
         <el-form-item label="检验项目" prop="inspectionItems">
-          <el-input v-model="form.inspectionItems" placeholder="请输入检验项目" />
+          <el-input
+            v-model="form.inspectionItems"
+            placeholder="请输入检验项目"
+          />
         </el-form-item>
         <el-form-item label="人群名称" prop="crowName">
-          <el-select v-model="form.crowName" placeholder="请选择" style="width: 206px" @change="crowNamechange">
-            <el-option v-for="item in optionscrowName" :key="item.id" :label="item.crowdName" :value="item.id">
+          <el-select
+            v-model="form.crowName"
+            placeholder="请选择"
+            style="width: 206px"
+            @change="crowNamechange"
+          >
+            <el-option
+              v-for="item in optionscrowName"
+              :key="item.id"
+              :label="item.crowdName"
+              :value="item.id"
+            >
             </el-option>
           </el-select>
         </el-form-item>
@@ -163,12 +302,20 @@
       </div>
     </el-dialog>
     <!-- 预览弹框 -->
-    <el-dialog title="预览" :visible.sync="openview" width="60%">
+    <el-dialog title="预览" :visible.sync="openview" width="1457px">
       <div class="viewbody">
         <div class="left">
-          <video v-if="queryParams.materialsType == 'VIDEO'" ref="myVideo" :src="baseUrl + viewform.materialsFilePath"
-            controls></video>
-          <img :src="baseUrl + viewform.materialsFilePath" alt="" v-if="queryParams.materialsType == 'IMAGE_TEXT'" />
+          <video
+            v-if="queryParams.materialsType == 'VIDEO'"
+            ref="myVideo"
+            :src="baseUrl + viewform.materialsFilePath"
+            controls
+          ></video>
+          <img
+            :src="baseUrl + viewform.materialsFilePath"
+            alt=""
+            v-if="queryParams.materialsType == 'IMAGE_TEXT'"
+          />
         </div>
         <div class="right">
           <div class="nametitle">素材名称</div>
@@ -198,14 +345,16 @@
 <script>
 import { listMaterials, getMaterials, delMaterials, addMaterials, updateMaterials, crowdInfo } from "@/api/manage/materials";
 import stationAcatar from "../../system/stationAvatar/index.vue";
+import cropper from "../../system/cropper/index.vue";
 import trainingAvatar from "../../system/trainingAvatar/index.vue";
 
 export default {
   name: "Materials",
-  components: { stationAcatar, trainingAvatar },
+  components: { stationAcatar, trainingAvatar, cropper },
   dicts: ['crowd_type', 'materials_type', 'video_cover_type'],
   data() {
     return {
+      newtype:null,
       baseUrl: process.env.VUE_APP_BASE_API,
       videoState: false, // 视频播放状态
       // 学时
@@ -323,56 +472,40 @@ export default {
     },
     // 素材类型
     radioChange(e) {
-      this.$refs.form.clearValidate();
       if (e == 'VIDEO') {
         if (this.title == '添加素材信息') {
           this.form.materialsFilePath = null
           this.form.videoCoverFilePath = null
         } else if (this.title == '修改素材信息') {
-          getMaterials(this.id).then(response => {
-            if (response.data.videoCoverFilePath) {
-              this.form = response.data;
-            }
-          });
-          if (this.form.videoCoverFilePath) {
-            getMaterials(this.id).then(response => {
-              this.form = response.data;
-            });
-          }
-          else if (!this.form.videoCoverFilePath) {
+          if(this.newtype=='IMAGE_TEXT'){
             this.reset()
-            // this.form.videoCoverFilePath=null
-            // this.form.materialsFilePath= null;
-            this.form.materialsType = 'VIDEO'
+              this.form.videoCoverFilePath=null
+              this.form.materialsFilePath= null;
+              this.form.materialsType = 'VIDEO'
+
+          }else{
+          getMaterials(this.id).then(response => {
+              this.form = response.data;
+          });
           }
-
         }
-
-      } else if (e == 'IMAGE_TEXT') {
+      } 
+      else if (e == 'IMAGE_TEXT') {
         if (this.title == '添加素材信息') {
           this.form.materialsFilePath = null
           this.form.videoCoverFilePath = null
         } else if (this.title == '修改素材信息') {
-          getMaterials(this.id).then(response => {
-            if (!response.data.videoCoverFilePath) {
-              this.form = response.data;
-            }
-          });
-          if (!this.form.videoCoverFilePath) {
-            getMaterials(this.id).then(response => {
-              this.form = response.data;
-            });
-
-          }
-          else if (this.form.videoCoverFilePath) {
+          if(this.newtype=='VIDEO'){
             this.reset()
-            this.form.materialsType = 'IMAGE_TEXT'
-
+              this.form.videoCoverFilePath=null
+              this.form.materialsFilePath= null;
+              this.form.materialsType = 'IMAGE_TEXT'
+          }else{
+          getMaterials(this.id).then(response => {
+              this.form = response.data;
+          });
           }
-
         }
-
-
       }
 
     },
@@ -380,18 +513,18 @@ export default {
     imgUrl(imgUrl) {
       this.form.materialsFilePath = imgUrl;
     },
+    // 图片裁剪之后的
+    imgUrlnew(imgUrl) {
+      this.form.videoCoverFilePath = imgUrl;
+    },
     // 视频
     imgUrl2(imgUrl) {
-      // this.form.materialsFilePath = process.env.VUE_APP_BASE_API + imgUrl;
       this.form.materialsFilePath = imgUrl;
-
+      console.log(this.form.materialsFilePath)
     },
-
-    // 视频封面
-    imgUrl3(imgUrl) {
+    // 视频封面裁剪/原图
+    imgUrlvido(imgUrl) {
       this.form.videoCoverFilePath = imgUrl;
-
-
     },
     // 复选框点击事件
     changecheck(e, item) {
@@ -505,25 +638,28 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
+      this.title = ""
+
       this.open = true;
       this.getcrowdInfo()
-      this.title = "添加素材信息";
+      this.title = '添加素材信息';
     },
     /** 修改按钮操作 */
     labelchange(item) {
       this.reset();
       this.open = true;
-
+      this.title = ""
       // const id = item.id || this.ids
       this.id = item.id
       getMaterials(this.id).then(response => {
         this.form = response.data;
-        this.open = true;
+        this.newtype= this.form.materialsType
         this.title = "修改素材信息";
       });
     },
     /** 提交按钮 */
     submitForm() {
+      console.log(this.form, 'form')
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
@@ -590,21 +726,19 @@ video {
 
 .viewbody {
   width: 100%;
-  height: 500px;
+  // height: 670px;
   // background: #409eff;
   display: flex;
 
   .left {
     overflow: auto;
-
-    width: 77%;
-    height: 500px;
-    // background: #989992;
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    width: 1103px;
   }
 
   img {
-    // height: 100%;
-    // width: 100%;
   }
 
   .right {
@@ -626,20 +760,19 @@ video {
 }
 
 .bodytopxj {
-  height: 58vh;
+  height: calc(100vh - 270px);
   overflow-y: auto;
+  -ms-flex: 20;
   flex: 20;
   width: 100%;
   display: flex;
   white-space: wrap;
-  align-items: center;
   flex-wrap: wrap;
-  justify-content: flex-start;
-
-  // align-content: space-between;
+  align-content: flex-start;
   .bodylist {
-    width: 19%;
-    height: 221px;
+    width: 400px;
+    // width: 19%;
+    // height: 221px;
     border: 2px solid #e2e3e5;
     border-radius: 10px;
     position: relative;
@@ -670,7 +803,9 @@ video {
 
     img {
       width: 100%;
-      height: 100px;
+      height: 247px;
+      // width: 100%;
+      // height: 100px;
     }
 
     .label {
diff --git a/src/views/system/cropper/index.vue b/src/views/system/cropper/index.vue
new file mode 100644
index 0000000..e407614
--- /dev/null
+++ b/src/views/system/cropper/index.vue
@@ -0,0 +1,561 @@
+<template>
+  <div>
+    <div
+      :class="option.img ? 'user-info-headnew' : 'user-info-head'"
+      @click="editCropper()"
+    >
+      <img
+        v-if="option.img"
+        v-bind:src="option.img"
+        title="点击上传图片"
+        style="width: 400px; height: 247px; line-height: 200px"
+      />
+
+      <i
+        v-if="!option.img"
+        class="el-icon-plus avatar-uploader-icon"
+        style="
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        "
+      ></i>
+    </div>
+    <el-dialog
+      :title="title"
+      :visible.sync="openimg"
+      width="1200px"
+      append-to-body
+      @opened="modalOpened"
+      @close="closeDialog"
+    >
+      <div class="cropper-content">
+        <div class="cropper-box">
+          <div class="cropper">
+            <vue-cropper
+              ref="cropper"
+              :img="option.img"
+              :outputSize="option.outputSize"
+              :outputType="option.outputType"
+              :info="option.info"
+              :canScale="option.canScale"
+              :autoCrop="option.autoCrop"
+              :autoCropWidth="option.autoCropWidth"
+              :autoCropHeight="option.autoCropHeight"
+              :fixed="option.fixed"
+              :fixedNumber="option.fixedNumber"
+              :full="option.full"
+              :fixedBox="option.fixedBox"
+              :canMove="option.canMove"
+              :canMoveBox="option.canMoveBox"
+              :original="option.original"
+              :centerBox="option.centerBox"
+              :height="option.height"
+              :infoTrue="option.infoTrue"
+              :maxImgSize="option.maxImgSize"
+              :enlarge="option.enlarge"
+              :mode="option.mode"
+              @realTime="realTime"
+              @imgLoad="imgLoad"
+              @cropMoving="cropMoving"
+              v-if="visible"
+            >
+            </vue-cropper>
+          </div>
+
+          <div class="show-preview">
+            <div :style="previews.div" class="preview">
+              <img :src="previews.url" :style="previews.img" />
+            </div>
+          </div>
+        </div>
+        <div class="handle-cropper">
+          <div class="scope-btn">
+            <label class="btn" for="uploads">选择</label>
+            <input
+              type="file"
+              id="uploads"
+              style="position: absolute; clip: rect(0 0 0 0)"
+              accept="image/png, image/jpeg, image/gif, image/jpg"
+              @change="selectImg($event)"
+            />
+            <el-button
+              size="mini"
+              type="danger"
+              plain
+              icon="el-icon-zoom-in"
+              @click="changeScale(1)"
+              >放大</el-button
+            >
+            <el-button
+              size="mini"
+              type="danger"
+              plain
+              icon="el-icon-zoom-out"
+              @click="changeScale(-1)"
+              >缩小</el-button
+            >
+            <el-button size="mini" type="danger" plain @click="rotateLeft"
+              >↺ 左旋转</el-button
+            >
+            <el-button size="mini" type="danger" plain @click="rotateRight"
+              >↻ 右旋转</el-button
+            >
+          </div>
+          <div class="upload-btn">
+            {{ uploadbtn }}
+            <el-button
+              size="mini"
+              type="primary"
+              @click="onConfirm('blob')"
+              v-if="uploadbtn"
+              >提 交111 <i class="el-icon-upload"></i
+            ></el-button>
+            <el-button
+              size="mini"
+              type="primary"
+              @click="closeDialog"
+              v-if="!uploadbtn"
+              >提 交<i class="el-icon-upload"></i
+            ></el-button>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+    
+    <script>
+import { VueCropper } from 'vue-cropper'
+import {
+  uploadFilefm,
+} from "@/api/system/stationAvatar.js";
+import _ from 'lodash'
+import { faL } from '@fortawesome/free-solid-svg-icons';
+export default {
+  name: 'CropperImage',
+  components: {
+    VueCropper
+  },
+  props: ["img", "type", "item", "tovideo", 'initialImg', 'titles', 'imgnew'],
+  //   props: {
+  //     initialImg: {
+  //       type: String,
+  //       require: true
+  //     }
+  //   },
+  data() {
+    return {
+      newfile: null,
+      uploadbtn: null, //上传中不允许点击
+      newimage: null,
+      image: null,
+      files: {},
+      // 是否显示cropper
+      visible: false,
+      types: "",
+      openimg: false,
+      // 弹出层标题
+      title: "上传图片",
+      previews: {},
+      option: {
+        img: this.initialImg, // 裁剪图片的地址
+        outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
+        outputType: 'png', // 裁剪生成图片的格式（jpeg || png || webp）
+        info: true, // 图片大小信息
+        canScale: true, // 图片是否允许滚轮缩放
+        autoCrop: true, // 是否默认生成截图框
+        autoCropWidth: 400, // 默认生成截图框宽度
+        autoCropHeight: 100, // 默认生成截图框高度
+        fixed: true, // 是否开启截图框宽高固定比例
+        fixedNumber: [1.618, 1], // 截图框的宽高比例
+        full: false, // false按原比例裁切图片，不失真
+        fixedBox: false, // 固定截图框大小，不允许改变
+        canMove: false, // 上传图片是否可以移动
+        canMoveBox: true, // 截图框能否拖动
+        original: false, // 上传图片按照原始比例渲染
+        centerBox: false, // 截图框是否被限制在图片里面
+        height: true, // 是否按照设备的dpr 输出等比例图片
+        infoTrue: false, // true为展示真实输出图片宽高，false展示看到的截图框宽高
+        maxImgSize: 3000, // 限制图片最大宽度和高度
+        enlarge: 1 // 图片根据截图框输出比例倍数
+      }
+    }
+  },
+  watch: {
+    img: {
+      deep: true, //开启深度监听
+      immediate: true,//开启立即监听
+
+      handler(newimg, oldimg) {
+        
+        this.newfile = newimg
+        console.log(newimg, '8888888888888')
+        if (this.img == null) {
+          this.option.img = null;
+        } else if (this.img == "") {
+          this.option.img = null;
+        }
+        else if (!this.img) {
+          this.option.img = null;
+        } else {
+          this.option.img = process.env.VUE_APP_BASE_API + newimg;
+        }
+      }
+
+    },
+    type: {
+      handler(newimg, oldimg) {
+        this.types = this.type;
+      }
+    },
+    imgnew: {
+      handler(newimg, oldimg) {
+        console.log(newimg, 'newimg')
+        if (newimg) {
+          this.image = process.env.VUE_APP_BASE_API + newimg;
+        }
+
+
+
+        // this.types = this.type;
+      }
+
+    }
+  },
+  created() {
+    this.types = this.type;
+    console.log(this.titles, 'this.titles')
+    if (this.titles == '添加素材信息') {
+      console.log(this.titles, 'this.titles')
+      this.uploadbtn = true
+    } else if (!this.titles) {
+      console.log(this.titles, '修改.titles')
+      this.uploadbtn = false
+    }
+
+
+    // this.getCropperWidth()
+  },
+  methods: {
+    // 打开弹出层结束时的回调
+    modalOpened() {
+      this.visible = true;
+    },
+    editCropper() {
+      this.openimg = true;
+    },
+    // 关闭窗口
+    closeDialog() {
+      this.imgs = "";
+      this.openimg = false;
+      this.visible = false;
+    },
+
+    // 初始化函数
+    imgLoad(msg) {
+      console.log('工具初始化函数=====' + msg)
+    },
+
+    cropMoving(data) {
+        // console.log('裁剪框发生变化', data);
+
+    },
+    // 图片缩放
+    changeScale(num) {
+      num = num || 1
+      this.$refs.cropper.changeScale(num)
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft()
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight()
+    },
+    // 实时预览函数
+    realTime(data) {
+        // console.log(data, '333333')
+      var width = null
+      width = data.w
+      if (width) {
+        this.uploadbtn = true
+      }
+
+      this.previews = data
+    },
+    // 选择图片
+    selectImg(e) {
+      const file = e.target.files[0]
+      console.log(file, 'file')
+      this.files = file;
+      this.uploadbtn = true
+      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
+        this.$modal.msgError(
+          "文件格式错误，请上传图片类型,如:JPG,PNG后缀的文件。"
+        );
+        return false
+      }
+      // 转化为blob
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        let data
+        if (typeof e.target.result === 'object') {
+          data = window.URL.createObjectURL(new Blob([e.target.result]))
+        } else {
+          data = e.target.result
+        }
+        this.option.img = data
+      }
+      // 转化为base64
+      reader.readAsDataURL(file)
+    },
+    // 上传图片
+    onConfirm(type) {
+      if (type === 'blob') {
+        // 获取截图的blob数据
+        this.$refs.cropper.getCropBlob((blob) => {
+          this.updatePhoto(blob)
+        })
+      }
+    },
+    async updatePhoto(blob, file) {
+        console.log(blob,'blob')
+
+      try {
+        console.log(this.files, 'this.files')
+        // return
+        if (this.files.name) {
+          if (this.types == 'materialsCoverUrl') {
+            this.uploadbtn = true;
+            let formData = new FormData();
+            formData.append("type", 'materialsCoverUrl');
+            // 原图
+            formData.append("file", this.files);
+            uploadFilefm(formData).then(response => {
+              if (response.code == 200) {
+                this.option.img = process.env.VUE_APP_BASE_API + response.imgUrl;
+                this.$emit("imgUrl", response.imgUrl);
+                this.openimg = false;
+              } else {
+              }
+              this.uploadbtn = true;
+
+            });
+            setTimeout(() => {
+              let formDatanew = new FormData();
+              // 裁剪之后的
+              formDatanew.append('file', blob)
+              formDatanew.append("type", 'materialsCoverUrl');
+              // 素材图片上传
+              uploadFilefm(formDatanew).then(response => {
+                if (response.code == 200) {
+                  this.$emit("imgUrlnew", response.imgUrl);
+             
+                  //   this.openimg = false;
+                } else {
+
+                }
+              });
+              this.uploadbtn = true;
+
+            }, 1500);
+
+          } else {
+
+
+            let formDatanew = new FormData();
+            // 裁剪之后的
+            formDatanew.append('file', blob)
+            formDatanew.append("type", 'materialsCoverUrl');
+            // 素材图片上传
+            uploadFilefm(formDatanew).then(response => {
+              if (response.code == 200) {
+                this.option.img = process.env.VUE_APP_BASE_API + response.imgUrl;
+                this.$emit("imgUrlvido", response.imgUrl);
+                this.openimg = false;
+              } else {
+
+              }
+            });
+
+          }
+        }
+        else {
+          this.files.name = null
+          // return
+          if (this.newfile && !this.files.name) {
+            console.log(this.newfile, 'this.newfile')
+            console.log(this.files, 'this.files66666')
+
+            let formDatanew = new FormData();
+            // 裁剪之后的
+            formDatanew.append('file', blob)
+            formDatanew.append("type", 'materialsCoverUrl');
+            // 素材图片上传
+            uploadFilefm(formDatanew).then(response => {
+              if (response.code == 200) {
+                // console.log()
+                this.option.img =  process.env.VUE_APP_BASE_API + this.newfile;
+                console.log(this.option.img,'this.option.img')
+                console.log(process.env.VUE_APP_BASE_API + response.imgUrl,'909090')
+                if(this.types=='materialsCoverUrl'){
+                this.$emit("imgUrlnew", response.imgUrl);
+                }else{
+                this.$emit("imgUrlvido", response.imgUrl);
+                }
+
+                // this.$emit("imgUrl",  this.image);
+               
+                this.openimg = false;
+              } else {
+                // setTimeout(e => {
+                //   this.openimg = false;
+                // }, 1000);
+              }
+            });
+
+          }
+
+          //   this.$message.error('请先上传图片！')
+
+        }
+        this.files.name = null
+      } catch (error) {
+        // this.$message.error('上传失败！')
+      }
+    }
+  }
+}
+    </script>
+    <style scoped lang="less">
+.avatar-upload-preview {
+  position: absolute;
+  top: 0%;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  width: 300px;
+  height: 300px;
+  border-radius: 0%;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
+}
+.user-info-head {
+  position: relative;
+  display: inline-block;
+  background: #fafafa;
+  width: 100px;
+  height: 100px;
+}
+.user-info-headnew {
+  position: relative;
+  display: inline-block;
+  background: #fafafa;
+  width: 400px;
+  height: 247px;
+}
+
+//   .user-info-head:hover:after {
+//     content: "";
+//     position: absolute;
+//     left: 0;
+//     right: 0;
+//     top: 0;
+//     bottom: 0;
+//     color: #eee;
+//     background: rgba(0, 0, 0, 0.5);
+//     font-size: 24px;
+//     font-style: normal;
+//     -webkit-font-smoothing: antialiased;
+//     -moz-osx-font-smoothing: grayscale;
+//     cursor: pointer;
+//     line-height: 110px;
+//     border-radius: 50%;
+//   }
+.wihi {
+  background-color: #fff;
+  width: 100px;
+  height: 100px;
+}
+.wihi:hover:after {
+  transform: translate(50%, 50%);
+}
+.cropper-content {
+  display: flex;
+  flex-direction: column;
+  .cropper-box {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    .cropper {
+      width: 600px;
+      height: 500px;
+    }
+    .show-preview {
+      width: 400px;
+      display: flex;
+      justify-content: center;
+      position: relative;
+      left: -78px;
+      top: 67px;
+      .preview {
+        overflow: hidden;
+        border: 1px solid #ccc;
+        border-radius: 50%;
+        background: #fff;
+        box-sizing: border-box;
+      }
+      img {
+        position: relative;
+        // left: -21px;
+      }
+    }
+  }
+  .handle-cropper {
+    margin-top: 30px;
+    display: flex;
+    z-index: 99;
+    .scope-btn {
+      display: flex;
+      display: -webkit-flex;
+      justify-content: space-between;
+      padding-right: 10px;
+    }
+    .upload-btn {
+      margin-left: 192px;
+      flex: 1;
+      -webkit-flex: 1;
+      display: flex;
+      display: -webkit-flex;
+      justify-content: center;
+    }
+    .btn {
+      outline: none;
+      display: inline-block;
+      line-height: 1;
+      white-space: nowrap;
+      cursor: pointer;
+      -webkit-appearance: none;
+      text-align: center;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      outline: 0;
+      -webkit-transition: 0.1s;
+      transition: 0.1s;
+      font-weight: 500;
+      padding: 8px 15px;
+      font-size: 12px;
+      border-radius: 3px;
+      color: #fff;
+      background-color: #409eff;
+      border-color: #409eff;
+      margin-right: 10px;
+    }
+  }
+}
+</style>
+    
+  
+    
\ No newline at end of file