feat: 客户群发 - 小程序封面添加播放按钮

project/src/components/assembly/addPlaybtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="addPlayBtn-wrap" id="addPlayBtn-wrap">
+  <div class="addPlayBtn-wrap" id="addPlayBtn-wrap" v-loading="loading">
     <div id="img-wrap"></div>
     <div class="footer-wrap">
       <el-button size="mini" @click="onClickCancel">取 消</el-button>
@@ -9,43 +9,37 @@
 </template>
 <script>
 import axios from 'axios'
-import { imgToCanvas, canvasToImg, downloadCanves, drawPlaybtnToCanvasCenter, base64ToFile } from '@/assets/js/canvasTools.js'
+import { imgToCanvas, canvasToImg, drawPlaybtnToCanvasCenter, base64ToFile } from '@/assets/js/canvasTools.js'
 
 export default {
-    name: 'addPlaybtn',
-    props:{
-      fileUrl:{
-        type: String
-      },
-      source: { // 涞源：默认是小程序图片裁剪，uploadMaterials来源于素材库裁剪
-        type: String,
-        default: 'applet'
-      }
-    },
-    data() {
-       return {
-        loadCut: false,
-        base64_url: '', // base64
-        firstCome: true, // 判断是否初次进来
-        oss_url: '', // 域名更新后的地址
-        playbtn: require('../../assets/img/play-btn.png'),
-        resImg: null,
-       }
-    },
-    watch: {
-      // target(){
-      //   this.target && this.target != '' && this.getBase64Image(this.target);
-      // }
+  name: 'addPlaybtn',
+  props:{
+    fileUrl: {
+      type: String
     },
-    mounted(){
-      // if(this.firstCome && this.target && this.target != ''){
-      //   this.getBase64Image (this.target)
-      // }
-      this.handler()
-    },
-    methods: {
-      async handler() {
-        console.log('handler => ')
+    source: { // 涞源：默认是小程序图片裁剪，uploadMaterials来源于素材库裁剪
+      type: String,
+      default: 'applet'
+    }
+  },
+  data() {
+      return {
+      base64_url: '', // base64
+      firstCome: true, // 判断是否初次进来
+      oss_url: '', // 域名更新后的地址
+      playbtn: require('../../assets/img/play-btn.png'),
+      resImg: null,
+      loading: false,
+      }
+  },
+  mounted(){
+    this.handler()
+  },
+  methods: {
+    async handler() {
+      console.log('handler => ')
+      try {
+        this.loading = true
         // 1.图片路径转成canvas
         let canvas = await imgToCanvas(this.fileUrl);
         // 2. canvas添加水印
@@ -62,118 +56,44 @@ export default {
         this.resImg = resImg
         const wrap = document.getElementById('img-wrap')
         wrap.appendChild(resImg.imageDom);
-      },
-      onClickCancel() {
-        this.$emit('cancel')
-      },
-      onClickConfirm() {
-        const file = base64ToFile(this.resImg.base64Data, 'base64转file生成的文件')
-        let formData = new FormData();
-        let axios_api = this.URL.material_upload;
-        formData.append("type",1);
-        formData.append("need_media_id",0);
-        formData.append("admin_id",this.$cookie.getCookie('admin_id'));
-        formData.append("ttl",this.$cookie.getCookie('ttl'));
-        formData.append("sign",this.$cookie.getCookie('sign'));
-        formData.append("corpid",this.$localSelfStore.getLocal('defaultCorp') && this.$localSelfStore.getLocal('defaultCorp') != 'undefined' ? JSON.parse(this.$localSelfStore.getLocal('defaultCorp')).corpid : '');
-        formData.append("material_file", file);
-
-        let instance= axios.create({
-          baseURL: '',
-          data: formData,
-          headers: { 'Content-Type': 'multipart/form-data'}
-        })
-
-        instance.post(this.URL.BASEURL + axios_api, formData).then((res) => {
-          var res = res.data
-          if (res && res.errno == 0) {
-            this.$emit('confirm', res.rst)
-          } else if (res.errno != 4002) {
-            this.$message({ message: res.err, type: "error" })
-          }
-        }).catch((err) => {
-          this.$message({ message: '服务器错误，获取裁剪图片失败', type: "error" })
-        });
-      },
+        this.loading = false
+      } catch (error) {
+        this.loading = false
+      }
+    },
+    onClickCancel() {
+      this.$emit('cancel')
+    },
+    onClickConfirm() {
+      const file = base64ToFile(this.resImg.base64Data, 'base64转file生成的文件')
+      let formData = new FormData();
+      let axios_api = this.URL.material_upload;
+      formData.append("type",1);
+      formData.append("need_media_id",0);
+      formData.append("admin_id",this.$cookie.getCookie('admin_id'));
+      formData.append("ttl",this.$cookie.getCookie('ttl'));
+      formData.append("sign",this.$cookie.getCookie('sign'));
+      formData.append("corpid",this.$localSelfStore.getLocal('defaultCorp') && this.$localSelfStore.getLocal('defaultCorp') != 'undefined' ? JSON.parse(this.$localSelfStore.getLocal('defaultCorp')).corpid : '');
+      formData.append("material_file", file);
 
+      let instance= axios.create({
+        baseURL: '',
+        data: formData,
+        headers: { 'Content-Type': 'multipart/form-data'}
+      })
 
-      getBase64Image (url, ref) {
-        this.loadCut = true
-        this.firstCome = false ;
-        var that = this
-        var image = new Image()
-        image.src = url + '?v=' + Math.random() // 处理缓存
-        image.crossOrigin = 'anonymous' // 支持跨域图片
-        image.onload = function () {
-          var base64 = that.drawBase64Image(image)
-          that.loadCut = false;
-          that.base64_url = base64;
-          that.forIe9();
+      instance.post(this.URL.BASEURL + axios_api, formData).then((res) => {
+        var res = res.data
+        if (res && res.errno == 0) {
+          this.$emit('confirm', res.rst)
+        } else if (res.errno != 4002) {
+          this.$message({ message: res.err, type: "error" })
         }
-      },
-      drawBase64Image (img) {
-        var canvas = document.createElement('canvas')
-        canvas.width = img.width
-        canvas.height = img.height
-        var ctx = canvas.getContext('2d')
-        ctx.drawImage(img, 0, 0, img.width, img.height)
-        var dataURL = canvas.toDataURL('image/png')
-        return dataURL
-      },
-      //裁剪
-      forIe9 () {
-        this.$refs.imgCutterModal.handleOpen({
-          name: 'img',
-          src: this.base64_url,
-          width: 400,
-          height: 400,
-        });
-      },
-       //通过cutDown事件接收选择的图片信息
-       cutDown(event) {
-          if (!event.file) {
-            this.$emit('imgCutterCallback',{flag:false})
-            this.$message({ message: '图片剪裁失败！', type: "error" })
-            return
-          };
-          let formData = new FormData();
-          let axios_api = this.URL.material_upload;
-          formData.append("type",1);
-          formData.append("need_media_id",0);
-          formData.append("admin_id",this.$cookie.getCookie('admin_id'));
-          formData.append("ttl",this.$cookie.getCookie('ttl'));
-          formData.append("sign",this.$cookie.getCookie('sign'));
-          formData.append("corpid",this.$localSelfStore.getLocal('defaultCorp') && this.$localSelfStore.getLocal('defaultCorp') != 'undefined' ? JSON.parse(this.$localSelfStore.getLocal('defaultCorp')).corpid : '');
-
-          let instance= axios.create({
-            baseURL: '',
-            data: formData,
-            headers: { 'Content-Type': 'multipart/form-data'}
-          })
-
-          if (this.source == 'uploadMaterials') { // 素材库
-            formData.append("file",event.file);
-            axios_api = this.URL.media_upload;
-          } else {
-            formData.append("material_file",event.file);  //上传一个files对象
-          }
-
-          instance.post(this.URL.BASEURL + axios_api, 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" })
-          });
-
-       },
-    }
-
+      }).catch((err) => {
+        this.$message({ message: '服务器错误，获取裁剪图片失败', type: "error" })
+      });
+    },
+  }
 }
 </script>