图片裁剪

project/src/components/assembly/editCon.vue

@@ -197,7 +197,7 @@
           <el-upload class="avatar-uploader" :action="URL.BASEURL + URL.material_upload" name="material_file"
             :show-file-list="false" :data="fileData2" :on-success="uploadSuccess" :on-progress='beforeUploadUpload'
             :on-error='uploadFail' accept=".jpg,.jpeg,.png">
-            <img v-if="miniprogram.pic_url" :src="miniprogram.pic_url" class="fm_img">
+            <img v-if="miniprogram.pic_url" :src="miniprogram.pic_url" class="fm_img" style="height:80px;">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
           <div style="margin-left:40px;">
@@ -282,7 +282,7 @@
     />
     <!-- 图片裁剪弹框 -->
     <el-dialog width="840px" title="图片裁剪" :visible.sync="imgCutterVisible" append-to-body>
-      <imgCutter v-if="imgCutterVisible" :target="oss_url"></imgCutter>
+      <imgCutter v-if="imgCutterVisible" :target="oss_url" @imgCutterCallback="imgCutterCallback"></imgCutter>
     </el-dialog>
   </div>
 </template>
@@ -394,6 +394,14 @@ export default {
     }
   },
   methods: {
+    // 图片裁剪回调
+    imgCutterCallback(obj){
+      this.imgCutterVisible = false;
+      if ( obj.flag ){
+        this.miniprogram.pic_url = obj.data.url
+        this.miniprogram.pic_media_id = obj.data.material_id;
+      }
+    },
     openImgCutter(){ // 打开图片裁剪
       if ( this.miniprogram.pic_url ) {
         this.$loading(this.$loadingConfig)
@@ -773,7 +781,6 @@ export default {
     },
     // 批量导入链接 - 确定
     onConfirmMultipleLink(res) {
-      console.log('onConfirmMultipleLink => ', res)
       this.multipleLinkVisible = false
       if (Array.isArray(res) && res.length) {
         res.forEach(item => {

project/src/components/assembly/imgCutter.vue

@@ -1,7 +1,16 @@
 <template>
 <div>
-  <ImgCutter ref="imgCutterModal" v-loading="loadCut" :isModal="false" :sizeChange="true" :scaleAble="false" :originalGraph="true" rate="65:52" @cutDown="cutDown" @onClearAll="onClearAll">
+  <ImgCutter ref="imgCutterModal" v-loading="loadCut" :isModal="false" :sizeChange="true" :scaleAble="false" :originalGraph="true" rate="65:52" @cutDown="cutDown">
     <template slot="open"><slot></slot></template>
+    <template slot="choose">
+      <el-button type="primary" plain size="mini">选择图片</el-button>
+    </template>
+    <template slot="cancel">
+      <el-button type="primary" plain size="mini" style="display:none">取消</el-button>
+    </template>
+    <template slot="confirm">
+      <el-button type="primary" size="mini">确定</el-button>
+    </template>
   </ImgCutter>
 </div>
 </template>
@@ -71,8 +80,8 @@ export default {
       },
        //通过cutDown事件接收选择的图片信息
        cutDown(event) {
-           console.log(event)
           if (!event.file) {
+            this.$emit('imgCutterCallback',{flag:false})
             this.$message({ message: '图片剪裁失败！', type: "error" })
             return
           };
@@ -94,19 +103,17 @@ export default {
           instance.post(this.URL.BASEURL + this.URL.material_upload,formData).then((res) => {
             var res = res.data
             if (res && res.errno == 0) {
-
+              this.$emit('imgCutterCallback',{flag:true,data:res.rst})
             } else if (res.errno != 4002) {
+              this.$emit('imgCutterCallback',{flag:false})
               this.$message({ message: res.err, type: "error" })
             }
           }).catch((err) => {
+            this.$emit('imgCutterCallback',{flag:false})
             this.$message({ message: '服务器错误，获取裁剪图片失败', type: "error" })
           });
 
        },
-      // 清空画布
-      onClearAll(){
-        console.log('点击了取消')
-      },
     }
 
 }